@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;600;700;800;900&display=swap");

:root{--ink:#111;--paper:#f1f1ef;--acid:#F5FF58;--line:rgba(17,17,17,.18);--max:1500px;--near-moon:#58FFD1;--illicit-green:#58FF8C;--screamin-green:#6AFF58;--inchworm:#AFFF58;--duckling-fluff:#F5FF58;--orange-delight:#FFC358;--melon:#FF7E58;--warm-pink:#FF5878;--eosin-pink:#FF58BD}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Roboto",Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
.wrap{width:min(calc(100% - 48px),var(--max));margin:auto}

/* HEADER */
header{
  position:fixed;z-index:100;top:0;left:0;right:0;
  padding:18px 0;background:rgba(241,241,239,.96);
  backdrop-filter:blur(10px);border-bottom:1px solid rgba(17,17,17,.06)
}
nav{position:relative;display:flex;align-items:center;min-height:22px;font-size:12px;text-transform:uppercase;letter-spacing:.11em}
.brand{font-weight:700}
.menu-state{position:fixed;opacity:0;pointer-events:none}
.menu-toggle{
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  color:inherit;
  font-family:"Roboto",Arial,Helvetica,sans-serif;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.11em;
  cursor:pointer;
  user-select:none;
}

/* FULLSCREEN MENU */
.menu-overlay{
  position:fixed;z-index:1000;inset:0;background:#000;color:#fff;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
}
.menu-state:checked ~ .menu-overlay{
  opacity:1;visibility:visible;pointer-events:auto;
}
.menu-state:checked ~ header{
  background:transparent;color:#fff;border-bottom-color:transparent;
}
.menu-state:checked ~ header .menu-toggle{visibility:hidden}
.menu-inner{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  position:relative;padding:100px 24px 48px;
}
.menu-close{
  position:fixed;z-index:1001;top:18px;left:50%;transform:translateX(-50%);
  appearance:none;-webkit-appearance:none;background:transparent !important;
  border:0 !important;outline:0;box-shadow:none !important;border-radius:0 !important;
  padding:0 !important;color:#fff;
  font-family:"Roboto",Arial,Helvetica,sans-serif;font-size:12px;font-weight:700;
  line-height:1.2;text-transform:uppercase;
  letter-spacing:.11em;cursor:pointer
}
.menu-links{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:0;
}
.menu-links a{
  font-size:clamp(56px,7vw,112px);
  line-height:.92;letter-spacing:-.055em;
  font-weight:400;
}
.menu-links a:hover{opacity:.55}

main{padding-top:70px}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.16em}
.hero-home{min-height:calc(100vh - 70px);display:grid;grid-template-rows:1fr auto;padding:44px 0 30px}
.hero-copy{align-self:center;padding-top:3vh}
.hero-home h1{margin:0;font-size:clamp(70px,12vw,210px);line-height:.8;letter-spacing:-.075em;text-transform:uppercase}
.hero-sub{max-width:720px;font-size:clamp(18px,2vw,30px);line-height:1.08;margin:28px 0 0;letter-spacing:-.025em}
.home-links{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.home-link{min-height:150px;padding:20px 22px 18px 0;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between}
.home-link:nth-child(2),.home-link:nth-child(3){padding-left:22px}.home-link:last-child{border-right:0}
.home-link h2{font-size:clamp(26px,3vw,46px);line-height:.95;margin:0;letter-spacing:-.045em;text-transform:uppercase}
.home-link p{max-width:330px;font-size:13px;line-height:1.4;margin:16px 0 0}.arrow{font-size:24px}
.page-hero{padding:90px 0 65px}.page-hero h1{font-size:clamp(68px,11vw,180px);line-height:.8;letter-spacing:-.07em;text-transform:uppercase;margin:15px 0 30px}
.page-hero p{max-width:820px;font-size:clamp(20px,2.2vw,34px);line-height:1.08;margin:0;letter-spacing:-.025em}
.case-grid{padding-bottom:100px}.case{border-top:1px solid var(--ink);padding:22px 0 42px;display:grid;grid-template-columns:180px 1fr;gap:28px}
.case-num{font-size:11px;text-transform:uppercase;letter-spacing:.12em}
.case-main h2{font-size:clamp(38px,5vw,78px);line-height:.92;letter-spacing:-.05em;margin:0 0 18px}
.case-main p{max-width:720px;font-size:16px;line-height:1.45;margin:0 0 28px}
.case-visual{aspect-ratio:16/8;background:#d8d2c5;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.fig-panel{width:72%;height:64%;display:grid;grid-template-columns:1.15fr .85fr;gap:12px}
.panel{background:#111;color:#fff;padding:20px}.panel.light{background:#f8f6f0;color:#111;border:1px solid rgba(0,0,0,.15)}
.mini{height:10px;background:currentColor;opacity:.14;margin:10px 0}.mini:nth-child(2){width:80%}.mini:nth-child(3){width:58%}
.flow{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;width:88%}
.flow span{border:2px solid #111;border-radius:999px;padding:14px 18px;font-weight:700;text-transform:uppercase;font-size:13px}.flow b{font-size:24px}
.campaigns{padding-bottom:100px}.campaign-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px 18px}
.campaign-card:nth-child(3n){grid-column:1/-1}.campaign-img{aspect-ratio:4/5;position:relative;overflow:hidden;background:#bbb}
.campaign-card:nth-child(3n) .campaign-img{aspect-ratio:16/7}.campaign-art{position:absolute;inset:0}
.summer{background:linear-gradient(145deg,#d8cfbd,#f7efdf 48%,#a4afa0)}.holiday{background:linear-gradient(145deg,#2d2825,#806a5a 50%,#d9c8af)}.fall{background:linear-gradient(120deg,#c9b396,#6d655d 48%,#ebdfca)}
.campaign-word{position:absolute;left:5%;bottom:6%;font-size:clamp(46px,7vw,110px);line-height:.8;letter-spacing:-.06em;text-transform:uppercase;font-weight:700;color:white;mix-blend-mode:difference}
.campaign-info{display:grid;grid-template-columns:1fr auto;gap:20px;border-top:1px solid var(--ink);padding-top:10px;margin-top:9px}
.campaign-info h2{font-size:19px;margin:0}.campaign-info p{font-size:10px;line-height:1.45;text-transform:uppercase;letter-spacing:.09em;margin:0;text-align:right}
.about-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:70px;padding-bottom:110px}.about-big{font-size:clamp(38px,5vw,76px);line-height:.94;letter-spacing:-.05em}
.about-copy{font-size:17px;line-height:1.55;max-width:760px}.about-copy p:first-child{margin-top:0}
.meta-block{margin-top:42px;padding-top:18px;border-top:1px solid var(--ink);display:grid;grid-template-columns:180px 1fr;gap:24px;font-size:13px;line-height:1.5}
.skills{display:flex;flex-wrap:wrap;gap:8px}.pill{border:1px solid #111;border-radius:999px;padding:9px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
footer{border-top:1px solid var(--ink);padding:20px 0 24px;font-size:11px;text-transform:uppercase;letter-spacing:.1em}.footer-row{display:flex;justify-content:space-between;gap:20px}

@media(max-width:800px){
  .wrap{width:min(calc(100% - 28px),var(--max))}
  .menu-links a{font-size:clamp(48px,15vw,82px)}
  .menu-close{top:24px}
  .hero-home{min-height:auto;padding-top:50px}
  .hero-home h1{font-size:clamp(62px,19vw,120px)}
  .home-links{grid-template-columns:1fr;margin-top:70px}
  .home-link,.home-link:nth-child(2),.home-link:nth-child(3){padding:18px 0;border-right:0;border-bottom:1px solid var(--line);min-height:120px}
  .home-link:last-child{border-bottom:0}.case,.about-grid{grid-template-columns:1fr}.case{gap:14px}
  .campaign-grid{grid-template-columns:1fr}.campaign-card:nth-child(3n){grid-column:auto}.campaign-card:nth-child(3n) .campaign-img{aspect-ratio:4/5}
  .meta-block{grid-template-columns:1fr}.footer-row{display:block;line-height:2}
}


/* --- TAIT-inspired menu refinement --- */
.menu-overlay .menu-inner{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:90px 24px 40px;
}

.menu-overlay .menu-links{
  width:min(640px, calc(100vw - 48px));
  margin-left:clamp(70px, 8vw, 155px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  gap:0;
}

.menu-overlay .menu-links a{
  position:relative;
  display:block;
  width:max-content;
  max-width:100%;
  padding-left:0;
  font-size:clamp(38px, 3.35vw, 58px);
  line-height:.94;
  letter-spacing:-.045em;
  font-weight:400;
  transition:padding-left .18s ease;
}

.menu-overlay .menu-links a::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:.72em;
  height:.72em;
  background:url("img/arrow_long_black.svg") center / contain no-repeat;
  transform:translate(-120%, -50%);
  opacity:0;
  transition:opacity .14s ease, transform .18s ease;
}

.menu-overlay .menu-links a:hover,
.menu-overlay .menu-links a:focus-visible{
  padding-left:1.15em;
}

.menu-overlay .menu-links a:hover::before,
.menu-overlay .menu-links a:focus-visible::before{
  opacity:1;
  transform:translate(0, -50%);
}

@media (max-width:800px){
  .menu-overlay .menu-links{
    margin-left:18px;
    width:calc(100vw - 50px);
  }
  .menu-overlay .menu-links a{
    font-size:clamp(38px, 11vw, 58px);
  }
}


/* --- Menu position refinement: centered column under MENU --- */
.menu-overlay .menu-inner{
  min-height:100vh;
  display:block;
  padding:0;
}

.menu-overlay .menu-links{
  position:absolute;
  top:92px;
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100vw - 48px);
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}

.menu-overlay .menu-links a{
  font-size:clamp(38px, 3.15vw, 56px);
  line-height:.96;
}

@media (max-width:800px){
  .menu-overlay .menu-links{
    top:82px;
    left:50%;
    transform:translateX(-50%);
    width:max-content;
    max-width:calc(100vw - 32px);
    margin:0;
  }
  .menu-overlay .menu-links a{
    font-size:clamp(36px, 10vw, 52px);
  }
}

/* --- Uniform campaign project blocks --- */
.project-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.project-block{
  aspect-ratio:1/1;
  background:#000;
  color:#fff;
  padding:18px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.06em;
  overflow:hidden;
  transition:opacity .18s ease;
}
.project-arrow{
  font-size:22px;
  opacity:0;
  transform:translateX(-8px);
  transition:opacity .16s ease, transform .18s ease;
}
.project-block:hover .project-arrow,
.project-block:focus-visible .project-arrow{
  opacity:1;
  transform:translateX(0);
}
.project-block:hover{opacity:.82}

.project-page{padding:90px 0 100px}
.project-page h1{
  font-size:clamp(54px,9vw,140px);
  line-height:.82;
  letter-spacing:-.065em;
  text-transform:uppercase;
  margin:15px 0 55px;
}
.project-gallery{display:grid;gap:18px}
.project-placeholder{
  width:100%;
  aspect-ratio:16/10;
  background:#000;
}
.back-projects{
  display:inline-block;
  margin-top:38px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.09em;
}

@media(max-width:800px){
  .project-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .project-block{padding:12px;font-size:11px}
  .project-arrow{opacity:1;transform:none}
}
@media(max-width:480px){
  .project-grid{grid-template-columns:1fr}
}

/* --- TAIT-inspired campaigns/work grid --- */
.work-page{
  padding:72px 0 110px;
}
.work-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:40px;
}
.work-heading h1{
  margin:0;
  font-size:clamp(70px,10vw,150px);
  line-height:.78;
  letter-spacing:-.07em;
  text-transform:uppercase;
}
.work-heading .eyebrow{
  margin-bottom:5px;
}
.work-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:16px;
  row-gap:38px;
}
.work-card{
  display:block;
  min-width:0;
}
.work-thumb{
  width:100%;
  aspect-ratio:4/3;
  background:#000;
  overflow:hidden;
}
.work-meta{
  margin-top:9px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:start;
}
.work-title{
  font-size:14px;
  line-height:1.15;
  letter-spacing:-.01em;
}
.work-type{
  font-size:9px;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.1em;
  white-space:nowrap;
  padding-top:2px;
}
.work-card .work-thumb{
  transition:opacity .18s ease;
}
.work-card:hover .work-thumb,
.work-card:focus-visible .work-thumb{
  opacity:.78;
}

@media(max-width:900px){
  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .work-page{padding-top:50px}
  .work-heading{margin-bottom:28px}
  .work-grid{grid-template-columns:1fr;row-gap:30px}
  .work-meta{margin-top:8px}
}

/* --- Menu alignment + stable hover fix --- */
.menu-overlay .menu-links{
  /* Anchor the LEFT edge just under the centered MENU / CLOSE label. */
  left:calc(50% - 22px);
  transform:none;
  width:min(520px, calc(100vw - 48px));
  max-width:none;
  align-items:flex-start;
  text-align:left;
  overflow:visible;
}

.menu-overlay .menu-links a{
  display:block;
  width:max-content;
  max-width:100%;
  padding-left:0;
  transform:translateX(0);
  transition:transform .18s ease, opacity .14s ease;
}

.menu-overlay .menu-links a::before{
  left:0;
  transform:translate(-115%, -54%);
  transition:opacity .14s ease, transform .18s ease;
}

.menu-overlay .menu-links a:hover,
.menu-overlay .menu-links a:focus-visible{
  padding-left:0;
  transform:translateX(1.15em);
}

.menu-overlay .menu-links a:hover::before,
.menu-overlay .menu-links a:focus-visible::before{
  opacity:1;
  transform:translate(-115%, -54%);
}

@media (max-width:800px){
  .menu-overlay .menu-links{
    left:calc(50% - 22px);
    transform:none;
    width:calc(50vw + 6px);
    max-width:calc(100vw - 32px);
    margin:0;
  }
}


/* --- Work grid refinement: 2-up + inline title/subcopy --- */
.work-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:18px;
  row-gap:42px;
}
.work-thumb{
  aspect-ratio:4/3;
}
.work-meta{
  display:block;
  margin-top:10px;
}
.work-name-line{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:5px;
  min-width:0;
  font-size:16px;
  line-height:1.15;
}
.work-title{
  color:#111;
  font-size:inherit;
  font-weight:500;
  letter-spacing:-.015em;
}
.work-subtitle{
  color:rgba(17,17,17,.48);
  font-size:inherit;
  font-weight:400;
  letter-spacing:-.015em;
}
.work-services{
  margin-top:5px;
  color:rgba(17,17,17,.62);
  font-size:10px;
  line-height:1.25;
  text-transform:uppercase;
  letter-spacing:.055em;
}

@media(max-width:600px){
  .work-grid{
    grid-template-columns:1fr;
    row-gap:34px;
  }
  .work-name-line{font-size:15px}
}

/* --- Project detail carousel layout --- */
.project-detail{
  padding:28px 0 100px;
}
.project-hero-carousel{
  position:relative;
  width:100%;
  max-height:68vh;
  min-height:420px;
  aspect-ratio:16/9;
  background:#000;
  overflow:hidden;
}
.project-slide{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.project-slide.is-active{
  opacity:1;
  pointer-events:auto;
}
.project-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.project-slide-placeholder{
  width:100%;
  height:100%;
  background:#000;
}
.project-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  border:0;
  background:transparent;
  color:#fff;
  width:56px;
  height:56px;
  font-size:44px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.project-nav.prev{left:14px}
.project-nav.next{right:14px}
.project-count{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  color:#fff;
  font-size:11px;
  letter-spacing:.08em;
  z-index:2;
}
.project-copy{
  padding-top:34px;
}
.project-kicker{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:12px;
}
.project-title-line{
  display:flex;
  flex-wrap:wrap;
  gap:.18em;
  align-items:baseline;
  margin:0 0 24px;
  font-size:clamp(24px,3.5vw,55px);
  line-height:.9;
  letter-spacing:-.055em;
}
.project-descriptor{
  font-size:13px;
  line-height:1.2;
  letter-spacing:.01em;
  margin:-12px 0 24px;
  color:#777;
}
.project-title-line .primary{color:#111}
.project-title-line .secondary{color:#777}
.project-intro{
  max-width:900px;
  font-size:clamp(20px,2vw,30px);
  line-height:1.15;
  letter-spacing:-.02em;
  margin:0 0 38px;
}
.project-details-grid{
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  padding:20px 0;
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  margin-bottom:38px;
}
.project-details-grid h3{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin:0 0 10px;
}
.project-details-grid p{
  font-size:11px;
  line-height:1.55;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin:0;
}
.project-longform{
  max-width:900px;
  font-size:18px;
  line-height:1.5;
}
.project-longform p{
  margin:0 0 20px;
}
.project-back{
  display:inline-block;
  margin-top:34px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.09em;
}

@media(max-width:800px){
  .project-detail{padding-top:18px}
  .project-hero-carousel{
    min-height:0;
    max-height:none;
    aspect-ratio:4/5;
  }
  .project-nav{
    width:46px;
    height:46px;
    font-size:36px;
  }
  .project-details-grid{grid-template-columns:1fr;gap:22px}
  .project-title-line{font-size:clamp(28px,7vw,40px)}
}

/* --- Full-bleed project hero with transparent nav --- */
body.project-detail-page header{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:20;
  background:transparent;
  border-bottom:0;
}
body.project-detail-page header .brand,
body.project-detail-page header .menu-toggle{
  color:#fff;
}
body.project-detail-page .project-detail{
  padding:0 0 100px;
}
body.project-detail-page .project-detail > .wrap{
  width:100%;
  max-width:none;
}
body.project-detail-page .project-hero-carousel{
  width:100%;
  max-height:none;
  min-height:0;
  aspect-ratio:auto;
  height:82vh;
  margin:0;
}
body.project-detail-page .project-slide img,
body.project-detail-page .project-slide-placeholder,
body.project-detail-page .project-slide video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
body.project-detail-page .project-copy{
  width:min(calc(100% - 48px),var(--max));
  margin:0 auto;
  padding-top:40px;
}
body.project-detail-page .project-nav{
  width:64px;
  height:64px;
  font-size:48px;
}
body.project-detail-page .project-nav.prev{left:22px}
body.project-detail-page .project-nav.next{right:22px}

@media(max-width:800px){
  body.project-detail-page .project-hero-carousel{
    height:72vh;
    aspect-ratio:auto;
  }
  body.project-detail-page .project-copy{
    width:min(calc(100% - 28px),var(--max));
    padding-top:28px;
  }
  body.project-detail-page .project-nav{
    width:52px;
    height:52px;
    font-size:38px;
  }
  body.project-detail-page .project-nav.prev{left:8px}
  body.project-detail-page .project-nav.next{right:8px}
}

/* --- TRUE full-bleed project hero fix --- */
body.project-detail-page{
  margin:0;
}
body.project-detail-page header{
  position:absolute !important;
  top:0;
  left:0;
  right:0;
  z-index:100;
  background:transparent !important;
  border:0 !important;
}
body.project-detail-page header .wrap{
  width:min(calc(100% - 48px),var(--max));
}
body.project-detail-page header nav{
  border:0 !important;
}
body.project-detail-page header .brand,
body.project-detail-page header .menu-toggle{
  color:#fff !important;
}
body.project-detail-page .project-detail{
  padding:0 0 100px !important;
}
body.project-detail-page .project-hero-carousel{
  position:relative;
  width:100vw !important;
  max-width:none !important;
  height:82vh !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  margin:0 !important;
  left:50%;
  transform:translateX(-50%);
}
body.project-detail-page .project-slide img,
body.project-detail-page .project-slide-placeholder,
body.project-detail-page .project-slide video{
  width:100%;
  height:100%;
  object-fit:cover;
}
body.project-detail-page .project-copy{
  padding-top:40px;
}
body.project-detail-page .project-nav{
  z-index:5;
}
body.project-detail-page .project-count{
  z-index:5;
}

@media(max-width:800px){
  body.project-detail-page header .wrap{
    width:min(calc(100% - 28px),var(--max));
  }
  body.project-detail-page .project-hero-carousel{
    height:72vh !important;
  }
}

/* --- Project pages: image begins at top, nav overlays hero --- */
body.project-detail-page{
  margin:0 !important;
  padding:0 !important;
}

body.project-detail-page header{
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:100 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

body.project-detail-page header .wrap{
  width:min(calc(100% - 48px),var(--max)) !important;
  max-width:none !important;
}

body.project-detail-page header nav{
  background:transparent !important;
  border:0 !important;
  min-height:72px;
}

body.project-detail-page header .brand,
body.project-detail-page header .menu-toggle{
  color:#fff !important;
  position:relative;
  z-index:101;
}

body.project-detail-page main{
  margin:0 !important;
  padding:0 !important;
}

body.project-detail-page .project-detail{
  margin:0 !important;
  padding:0 0 100px !important;
}

body.project-detail-page .project-hero-carousel{
  position:relative !important;
  top:0 !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:100vw !important;
  max-width:none !important;
  height:88vh !important;
  min-height:560px !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  margin:0 !important;
  padding:0 !important;
}

body.project-detail-page .project-slide,
body.project-detail-page .project-slide img,
body.project-detail-page .project-slide video,
body.project-detail-page .project-slide-placeholder{
  width:100% !important;
  height:100% !important;
}

body.project-detail-page .project-slide img,
body.project-detail-page .project-slide video{
  object-fit:cover !important;
  display:block !important;
}

body.project-detail-page .project-copy{
  padding-top:34px !important;
}

@media(max-width:800px){
  body.project-detail-page header .wrap{
    width:min(calc(100% - 28px),var(--max)) !important;
  }

  body.project-detail-page .project-hero-carousel{
    height:82vh !important;
    min-height:460px !important;
  }
}

/* --- Project nav refinement: tighter, sharper, truly centered --- */
body.project-detail-page header,
body.project-detail-page .menu-overlay{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  filter:none !important;
}

body.project-detail-page header{
  height:48px !important;
  min-height:48px !important;
}

body.project-detail-page header .wrap{
  width:100% !important;
  max-width:none !important;
  padding:0 20px !important;
  box-sizing:border-box !important;
}

body.project-detail-page header nav{
  position:relative !important;
  min-height:48px !important;
  height:48px !important;
  padding:0 !important;
  display:flex !important;
  align-items:flex-start !important;
}

body.project-detail-page header .brand{
  position:absolute !important;
  top:10px !important;
  left:20px !important;
  margin:0 !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:.035em !important;
  text-transform:uppercase !important;
}

body.project-detail-page header .menu-toggle{
  position:absolute !important;
  top:10px !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  margin:0 !important;
  font-size:10px !important;
  line-height:1 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  font-weight:400 !important;
}

/* Close should occupy exactly the same centered browser position as Menu */
body.project-detail-page .menu-overlay .menu-close{
  position:absolute !important;
  top:10px !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  margin:0 !important;
  font-size:10px !important;
  line-height:1 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  font-weight:400 !important;
}

/* Keep overlay itself crisp/flat */
body.project-detail-page .menu-overlay{
  background:var(--paper) !important;
}

/* Keep dropdown links placement independent of tighter top nav */
body.project-detail-page .menu-overlay .menu-links{
  top:70px !important;
}

@media(max-width:800px){
  body.project-detail-page header{
    height:44px !important;
    min-height:44px !important;
  }

  body.project-detail-page header .wrap{
    padding:0 14px !important;
  }

  body.project-detail-page header nav{
    height:44px !important;
    min-height:44px !important;
  }

  body.project-detail-page header .brand{
    top:9px !important;
    left:14px !important;
    font-size:13px !important;
  }

  body.project-detail-page header .menu-toggle,
  body.project-detail-page .menu-overlay .menu-close{
    top:9px !important;
    font-size:9px !important;
  }

  body.project-detail-page .menu-overlay .menu-links{
    top:62px !important;
  }
}


/* --- Global tight navigation --- */
/* Match the refined project-page nav geometry across the whole site. */
body:not(.project-detail-page) header{
  height:48px !important;
  min-height:48px !important;
}

body:not(.project-detail-page) header .wrap{
  width:100% !important;
  max-width:none !important;
  padding:0 20px !important;
  box-sizing:border-box !important;
}

body:not(.project-detail-page) header nav{
  position:relative !important;
  min-height:48px !important;
  height:48px !important;
  padding:0 !important;
  display:flex !important;
  align-items:flex-start !important;
}

body:not(.project-detail-page) header .brand{
  position:absolute !important;
  top:10px !important;
  left:20px !important;
  margin:0 !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:.035em !important;
  text-transform:uppercase !important;
}

body:not(.project-detail-page) header .menu-toggle{
  position:absolute !important;
  top:10px !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  margin:0 !important;
  font-size:10px !important;
  line-height:1 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  font-weight:400 !important;
}

/* Make CLOSE sit in the exact same browser-centered position as MENU. */
body:not(.project-detail-page) .menu-overlay .menu-close{
  position:absolute !important;
  top:10px !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  margin:0 !important;
  font-size:10px !important;
  line-height:1 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  font-weight:400 !important;
}

/* Keep the regular-page menu clean and sharp. */
body:not(.project-detail-page) header,
body:not(.project-detail-page) .menu-overlay{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  filter:none !important;
}

body:not(.project-detail-page) .menu-overlay .menu-links{
  top:70px !important;
}

@media(max-width:800px){
  body:not(.project-detail-page) header{
    height:44px !important;
    min-height:44px !important;
  }

  body:not(.project-detail-page) header .wrap{
    padding:0 14px !important;
  }

  body:not(.project-detail-page) header nav{
    height:44px !important;
    min-height:44px !important;
  }

  body:not(.project-detail-page) header .brand{
    top:9px !important;
    left:14px !important;
    font-size:13px !important;
  }

  body:not(.project-detail-page) header .menu-toggle,
  body:not(.project-detail-page) .menu-overlay .menu-close{
    top:9px !important;
    font-size:9px !important;
  }

  body:not(.project-detail-page) .menu-overlay .menu-links{
    top:62px !important;
  }
}

/* Work thumbnails with project imagery */
.work-thumb img{width:100%;height:100%;display:block;object-fit:cover}

/* --- Nav alignment refinement --- */
/* Keep Laura Newman, Menu, and Close on one shared horizontal line. */
header{
  border-bottom:0 !important;
  box-shadow:none !important;
}

body.project-detail-page header .brand,
body.project-detail-page header .menu-toggle,
body.project-detail-page .menu-overlay .menu-close,
body:not(.project-detail-page) header .brand,
body:not(.project-detail-page) header .menu-toggle,
body:not(.project-detail-page) .menu-overlay .menu-close{
  top:6px !important;
}

@media(max-width:800px){
  body.project-detail-page header .brand,
  body.project-detail-page header .menu-toggle,
  body.project-detail-page .menu-overlay .menu-close,
  body:not(.project-detail-page) header .brand,
  body:not(.project-detail-page) header .menu-toggle,
  body:not(.project-detail-page) .menu-overlay .menu-close{
    top:6px !important;
  }
}

/* --- Final top-nav position fix --- */
/* CLOSE is the reference position. MENU matches it exactly; the larger brand is baseline-aligned. */
header{border-bottom:none !important;box-shadow:none !important;}
body.project-detail-page header .menu-toggle,
body.project-detail-page .menu-overlay .menu-close,
body:not(.project-detail-page) header .menu-toggle,
body:not(.project-detail-page) .menu-overlay .menu-close{
  top:6px !important;
}
body.project-detail-page header .brand,
body:not(.project-detail-page) header .brand{
  top:4px !important;
}
@media(max-width:800px){
  body.project-detail-page header .menu-toggle,
  body.project-detail-page .menu-overlay .menu-close,
  body:not(.project-detail-page) header .menu-toggle,
  body:not(.project-detail-page) .menu-overlay .menu-close{top:6px !important;}
  body.project-detail-page header .brand,
  body:not(.project-detail-page) header .brand{top:4px !important;}
}

/* --- v82 nav spacing correction --- */
/* CLOSE is the visual reference: brand shares its top edge; dropdown begins directly below. */
body.project-detail-page header .brand,
body:not(.project-detail-page) header .brand,
body.project-detail-page header .menu-toggle,
body:not(.project-detail-page) header .menu-toggle,
body.project-detail-page .menu-overlay .menu-close,
body:not(.project-detail-page) .menu-overlay .menu-close{
  top:6px !important;
}
body.project-detail-page .menu-overlay .menu-links,
body:not(.project-detail-page) .menu-overlay .menu-links{
  top:26px !important;
}
@media(max-width:800px){
  body.project-detail-page header .brand,
  body:not(.project-detail-page) header .brand,
  body.project-detail-page header .menu-toggle,
  body:not(.project-detail-page) header .menu-toggle,
  body.project-detail-page .menu-overlay .menu-close,
  body:not(.project-detail-page) .menu-overlay .menu-close{top:6px !important;}
  body.project-detail-page .menu-overlay .menu-links,
  body:not(.project-detail-page) .menu-overlay .menu-links{top:24px !important;}
}


/* --- TAIT-style fullscreen menu v84 --- */
header{border-bottom:0 !important;box-shadow:none !important;backdrop-filter:none !important;}
.menu-state:checked ~ header{z-index:1100;background:transparent !important;color:#fff;}
.menu-state:checked ~ header .brand{position:relative;z-index:1101;color:#fff;}
.menu-toggle,.menu-close{top:10px;}
header{padding:10px 0;}
nav{min-height:14px;align-items:flex-start;}
.brand{line-height:1;font-size:13px;}
.menu-toggle,.menu-close{font-size:10px;line-height:1;}
.menu-overlay .menu-inner{min-height:100vh;display:block;padding:0;}
.menu-overlay .menu-links{
  position:absolute;
  top:122px;
  left:50%;
  transform:translateX(-50%);
  width:clamp(300px,32vw,510px);
  max-width:calc(100vw - 48px);
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}
.menu-overlay .menu-links a{
  font-size:clamp(38px,3vw,50px);
  line-height:1.04;
  letter-spacing:-.045em;
  font-weight:400;
}
.menu-contact{
  position:absolute;
  left:50%;
  bottom:34px;
  transform:translateX(-50%);
  width:clamp(300px,32vw,510px);
  max-width:calc(100vw - 48px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  font-size:10px;
  line-height:1.45;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.menu-contact-group{display:flex;flex-direction:column;align-items:flex-start;gap:3px;}
.menu-contact-label{opacity:.48;margin-bottom:4px;}
.menu-contact a{text-decoration:underline;text-underline-offset:2px;}
.menu-contact a:hover{opacity:.6;}
@media(max-width:800px){
  header{padding:10px 0;}
  .menu-toggle,.menu-close{top:10px;}
  .menu-overlay .menu-links{top:94px;width:calc(100vw - 48px);}
  .menu-overlay .menu-links a{font-size:clamp(36px,11vw,52px);}
  .menu-contact{left:24px;right:24px;bottom:24px;transform:none;width:auto;max-width:none;grid-template-columns:1fr;gap:16px;}
}

/* --- v85 menu usability + alignment refinement --- */
/* Keep CLOSE above the header layer so the label remains clickable. */
.menu-overlay .menu-close{
  z-index:1300 !important;
  pointer-events:auto !important;
}

/* A very fine underline for MENU and CLOSE. */
.menu-toggle,
.menu-close{
  text-decoration:underline;
  text-decoration-thickness:.5px;
  text-underline-offset:2px;
  text-decoration-skip-ink:auto;
}

/* Line the left edge of the menu options up with MENU / CLOSE. */
.menu-overlay .menu-links{
  top:104px !important;
  left:calc(50% - 18px) !important;
  transform:none !important;
  width:min(520px, calc(100vw - 48px)) !important;
  align-items:flex-start !important;
  text-align:left !important;
}

/* Bring contact/social up so they feel like part of the menu composition. */
.menu-contact{
  left:calc(50% - 18px) !important;
  top:350px !important;
  bottom:auto !important;
  transform:none !important;
  width:min(520px, calc(100vw - 48px)) !important;
  max-width:none !important;
  grid-template-columns:max-content max-content !important;
  gap:54px !important;
}

@media(max-width:800px){
  .menu-overlay .menu-links{
    top:88px !important;
    left:24px !important;
    width:calc(100vw - 48px) !important;
  }
  .menu-contact{
    top:330px !important;
    left:24px !important;
    right:24px !important;
    width:auto !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
}

/* --- v86: exact open/closed nav alignment + clickable close --- */
/* MENU/brand live inside a header with 10px top padding; CLOSE lives in the
   viewport overlay. Offset CLOSE by that same 10px so the visual baseline
   matches the closed-state MENU and the brand. */
body.project-detail-page .menu-overlay .menu-close,
body:not(.project-detail-page) .menu-overlay .menu-close{
  top:16px !important;
  z-index:1400 !important;
  pointer-events:auto !important;
}

/* The fixed header sits above the overlay so Laura Newman remains visible.
   Do not let its transparent center area intercept clicks intended for CLOSE. */
.menu-state:checked ~ header{
  pointer-events:none !important;
}
.menu-state:checked ~ header .brand{
  pointer-events:auto !important;
}

/* Preserve direct left-edge alignment beneath the centered MENU/CLOSE label. */
body.project-detail-page .menu-overlay .menu-links,
body:not(.project-detail-page) .menu-overlay .menu-links,
.menu-contact{
  left:calc(50% - 18px) !important;
}

/* --- v87: black fullscreen menu on every page --- */
/* Project detail pages previously overrode the global overlay with the paper
   background. Keep one consistent black menu treatment site-wide. */
body .menu-overlay,
body.project-detail-page .menu-overlay,
body:not(.project-detail-page) .menu-overlay{
  background:#000 !important;
  color:#fff !important;
}
body .menu-overlay .menu-links a,
body .menu-overlay .menu-close,
body .menu-overlay .menu-contact,
body .menu-overlay .menu-contact a{
  color:#fff !important;
}

/* --- v89: closed navigation is black; open navigation stays white --- */
body header .brand,
body header .brand a,
body header .menu-toggle,
body.project-detail-page header .brand,
body.project-detail-page header .brand a,
body.project-detail-page header .menu-toggle,
body:not(.project-detail-page) header .brand,
body:not(.project-detail-page) header .brand a,
body:not(.project-detail-page) header .menu-toggle{
  color:#111 !important;
  mix-blend-mode:normal !important;
}

/* Once the fullscreen menu is open, keep the brand and CLOSE white on black. */
body .menu-state:checked ~ header .brand,
body .menu-state:checked ~ header .brand a,
body.project-detail-page .menu-state:checked ~ header .brand,
body.project-detail-page .menu-state:checked ~ header .brand a,
body:not(.project-detail-page) .menu-state:checked ~ header .brand,
body:not(.project-detail-page) .menu-state:checked ~ header .brand a,
body .menu-overlay .menu-close{
  color:#fff !important;
  mix-blend-mode:normal !important;
}


/* --- Quiet centered page titles, aligned beneath MENU --- */
.section-page-title,
.page-hero h1.section-page-title{
  margin:0;
  text-align:center;
  font-size:30px;
  font-weight:400;
  line-height:1;
  letter-spacing:-.035em;
  text-transform:none;
}
.work-page{padding-top:68px;}
.work-page > .wrap > .section-page-title{margin-bottom:70px;}
.work-heading{display:block;margin-bottom:40px;}
.work-heading .eyebrow{margin:0;}
.compact-page-hero{padding:68px 0 58px;}
.compact-page-hero .section-page-title{margin:0 auto;}
.coming-soon{margin-top:72px;text-align:center;font-size:13px;letter-spacing:.04em;}
@media(max-width:600px){
  .section-page-title,
  .page-hero h1.section-page-title{font-size:24px;}
  .work-page{padding-top:48px;}
  .work-page > .wrap > .section-page-title{margin-bottom:52px;}
  .compact-page-hero{padding:48px 0 46px;}
  .coming-soon{margin-top:52px;}
}


/* --- v90: tighter page hierarchy + shallower work thumbnails --- */
/* Page labels are 50% larger than v89, but sit much closer to the fixed nav. */
.section-page-title,
.page-hero h1.section-page-title{
  font-size:45px;
  line-height:.95;
}

/* Pull the Work title and the entire 2-up grid upward; the Selected Work eyebrow is removed. */
.work-page{padding-top:20px;}
.work-page > .wrap > .section-page-title{margin-bottom:28px;}
.work-heading{display:none;}

/* Reduce thumbnail height by 20% from the previous 4:3 treatment. */
.work-thumb{aspect-ratio:5 / 3;}

/* Apply the same tighter title position to About and Case Studies. */
.compact-page-hero{padding:20px 0 30px;}
.coming-soon{margin-top:30px;}

@media(max-width:600px){
  .section-page-title,
  .page-hero h1.section-page-title{font-size:36px;}
  .work-page{padding-top:18px;}
  .work-page > .wrap > .section-page-title{margin-bottom:24px;}
  .compact-page-hero{padding:18px 0 26px;}
  .coming-soon{margin-top:26px;}
  .work-thumb{aspect-ratio:5 / 3;}
}

/* --- v91: page titles begin at the MENU centerline --- */
.section-page-title,
.page-hero h1.section-page-title{
  width:max-content;
  margin-left:50%;
  margin-right:0;
  text-align:left;
}
.compact-page-hero .section-page-title{
  margin-left:50%;
  margin-right:0;
}


/* --- v94 project detail hierarchy: capabilities + description side-by-side --- */
body.project-detail-page .project-copy{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:34px 48px 0 !important;
  box-sizing:border-box;
}
body.project-detail-page .project-details-grid{
  grid-template-columns:minmax(220px, 1fr) minmax(0, 2fr);
  column-gap:64px;
  align-items:start;
  padding:24px 0 26px;
  margin-top:30px;
  margin-bottom:38px;
}
body.project-detail-page .project-details-grid .project-longform{
  max-width:760px;
  font-size:18px;
  line-height:1.5;
}
body.project-detail-page .project-details-grid .project-longform p:last-child{
  margin-bottom:0;
}
@media(max-width:800px){
  body.project-detail-page .project-copy{
    padding:28px 20px 0 !important;
  }
  body.project-detail-page .project-details-grid{
    grid-template-columns:1fr;
    gap:28px;
    margin-top:26px;
  }
}

/* --- v95 project detail: role label + larger sentence-case narrative --- */
body.project-detail-page .project-details-grid .project-longform,
body.project-detail-page .project-details-grid .project-longform p{
  font-size:23.4px;
  line-height:1.45;
  text-transform:none;
  letter-spacing:normal;
}


/* --- v96: keep project menu identity/contact visible above overlay --- */
body.project-detail-page .menu-state:checked ~ header{
  position:fixed !important;
  z-index:2000 !important;
  background:transparent !important;
  color:#fff !important;
  pointer-events:none !important;
}
body.project-detail-page .menu-state:checked ~ header .brand{
  position:relative !important;
  z-index:2001 !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  color:#fff !important;
  pointer-events:auto !important;
}
body.project-detail-page .menu-overlay .menu-close{z-index:2100 !important;}
body.project-detail-page .menu-overlay .menu-contact{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* --- v98: tighter Back to Work row --- */
body.project-detail-page .project-details-grid{
  margin-bottom:0 !important;
}
body.project-detail-page .project-back{
  display:flex !important;
  align-items:center;
  width:max-content;
  height:56px;
  margin-top:0 !important;
}
@media(max-width:800px){
  body.project-detail-page .project-back{
    height:48px;
  }
}

/* --- v99: refine Back to Work spacing + inset divider --- */
body.project-detail-page .project-details-grid{
  border-bottom:0 !important;
  position:relative;
  padding-bottom:26px !important;
}
body.project-detail-page .project-details-grid::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:var(--ink);
}
body.project-detail-page .project-back{
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  height:40px !important;
  margin:0 !important;
}
body.project-detail-page footer{
  border-top:0 !important;
  position:relative;
}
body.project-detail-page footer::before{
  content:"";
  position:absolute;
  top:0;
  left:48px;
  right:48px;
  height:1px;
  background:var(--ink);
}
@media(max-width:800px){
  body.project-detail-page .project-back{height:36px !important;}
  body.project-detail-page footer::before{left:20px;right:20px;}
}

/* --- v100: halve Back to Work section height --- */
body.project-detail-page .project-detail{
  padding-bottom:28px !important;
}
body.project-detail-page .project-back{
  height:40px !important;
}
@media(max-width:800px){
  body.project-detail-page .project-detail{padding-bottom:24px !important;}
  body.project-detail-page .project-back{height:36px !important;}
}

/* --- v101: compact + truly center Back to Work row --- */
body.project-detail-page .project-detail{
  padding-bottom:0 !important;
}
body.project-detail-page .project-back{
  height:48px !important;
  min-height:48px !important;
  display:flex !important;
  align-items:center !important;
  margin:0 !important;
  padding:0 !important;
}
@media(max-width:800px){
  body.project-detail-page .project-detail{padding-bottom:0 !important;}
  body.project-detail-page .project-back{
    height:44px !important;
    min-height:44px !important;
  }
}

/* --- v102: project footer alignment + sticky nav restoration --- */
body.project-detail-page header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:1200 !important;
  background:transparent !important;
  transition:background-color .18s ease !important;
}
body.project-detail-page header.is-scrolled{
  background:var(--paper) !important;
}
body.project-detail-page footer .wrap{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding-left:48px !important;
  padding-right:48px !important;
}
@media(max-width:800px){
  body.project-detail-page footer .wrap{
    padding-left:20px !important;
    padding-right:20px !important;
  }
}

/* --- v103: universal site footer --- */
footer{
  border-top:0 !important;
  position:relative;
  padding:20px 0 24px;
}
footer::before{
  content:"";
  position:absolute;
  top:0;
  left:48px;
  right:48px;
  height:1px;
  background:var(--ink);
}
footer .wrap{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding-left:48px !important;
  padding-right:48px !important;
}
@media(max-width:800px){
  footer::before{left:20px;right:20px;}
  footer .wrap{
    padding-left:20px !important;
    padding-right:20px !important;
  }
}

/* --- v104: universal horizontal gutter matches Work 2-up grid --- */
:root{--site-gutter:24px;}

/* Keep landing-page grids, project copy, header, and footer on one shared gutter. */
.wrap,
body.project-detail-page .project-copy,
body.project-detail-page header .wrap{
  width:min(calc(100% - (var(--site-gutter) * 2)),var(--max));
}

footer::before,
body.project-detail-page footer::before{
  left:var(--site-gutter) !important;
  right:var(--site-gutter) !important;
}
footer .wrap,
body.project-detail-page footer .wrap{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding-left:var(--site-gutter) !important;
  padding-right:var(--site-gutter) !important;
}

@media(max-width:800px){
  :root{--site-gutter:14px;}
  .wrap,
  body.project-detail-page .project-copy,
  body.project-detail-page header .wrap{
    width:min(calc(100% - (var(--site-gutter) * 2)),var(--max));
  }
}

/* --- v105: project pages use the same universal gutter as landing-page grids --- */
body.project-detail-page .project-hero-carousel{
  width:calc(100% - (var(--site-gutter) * 2));
  margin-left:var(--site-gutter);
  margin-right:var(--site-gutter);
}

/* --- v106: project-page content gutter exactly matches Work landing page --- */
body.project-detail-page .project-copy.wrap{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:var(--site-gutter) !important;
  padding-right:var(--site-gutter) !important;
}
body.project-detail-page .project-details-grid,
body.project-detail-page .project-back{
  width:100% !important;
}

/* --- v110: saturated menu-only hover colors --- */
.menu-overlay .menu-links a:hover,
.menu-overlay .menu-links a:focus-visible{
  opacity:1 !important;
}
.menu-overlay .menu-links a:nth-child(1):hover,
.menu-overlay .menu-links a:nth-child(1):focus-visible{color:#FF58BD !important;}
.menu-overlay .menu-links a:nth-child(2):hover,
.menu-overlay .menu-links a:nth-child(2):focus-visible{color:#F5FF58 !important;}
.menu-overlay .menu-links a:nth-child(3):hover,
.menu-overlay .menu-links a:nth-child(3):focus-visible{color:#FF5878 !important;}
.menu-overlay .menu-links a:nth-child(4):hover,
.menu-overlay .menu-links a:nth-child(4):focus-visible{color:#58FFD1 !important;}
.menu-overlay .menu-links a::before{color:currentColor !important;}

/* --- v111: contact/social hover colors --- */
.menu-overlay .menu-contact a:hover,
.menu-overlay .menu-contact a:focus-visible{
  opacity:1 !important;
}
.menu-overlay .menu-contact a[href^="mailto:"]:hover,
.menu-overlay .menu-contact a[href^="mailto:"]:focus-visible{
  color:#FF58BD !important;
}
.menu-overlay .menu-contact a[href*="linkedin.com"]:hover,
.menu-overlay .menu-contact a[href*="linkedin.com"]:focus-visible{
  color:#58FFD1 !important;
}


/* --- v112: homepage full-bleed media hero --- */
body.home-hero-page{
  margin:0;
  padding:0;
}
body.home-hero-page main{
  margin:0 !important;
  padding:0 !important;
}
body.home-hero-page header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:1200 !important;
  background:transparent !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transition:background-color .18s ease !important;
}
body.home-hero-page header .brand,
body.home-hero-page header .menu-toggle{
  color:#fff !important;
}
body.home-hero-page header.is-scrolled{
  background:var(--paper) !important;
}
body.home-hero-page header.is-scrolled .brand,
body.home-hero-page header.is-scrolled .menu-toggle{
  color:var(--ink) !important;
}
body.home-hero-page .menu-state:checked ~ header{
  background:transparent !important;
}
body.home-hero-page .menu-state:checked ~ header .brand,
body.home-hero-page .menu-state:checked ~ header .menu-toggle{
  color:#fff !important;
}
.home-hero-media{
  position:relative;
  width:100vw;
  height:88vh;
  min-height:560px;
  margin:0;
  overflow:hidden;
  background:#111;
}
.home-hero-media img,
.home-hero-media video,
.home-hero-placeholder{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.home-hero-placeholder{
  background:#111;
}
.home-bottom-links{
  padding:34px 0 28px;
}
body.home-hero-page .home-links{
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:0;
}
body.home-hero-page .home-link:nth-child(2){
  padding-left:22px;
  border-right:0;
}

@media(max-width:800px){
  .home-hero-media{
    height:82vh;
    min-height:460px;
  }
  .home-bottom-links{
    padding:26px 0 18px;
  }
  body.home-hero-page .home-links{
    grid-template-columns:1fr;
    margin-top:0;
  }
  body.home-hero-page .home-link,
  body.home-hero-page .home-link:nth-child(2){
    padding:18px 0;
    border-right:0;
  }
}


/* --- About page: favorite things easter egg --- */
.about-easter-egg{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:0 0 28px;
}
.about-easter-egg > div:last-child{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.about-easter-egg img{
  width:18px;
  height:auto;
  image-rendering:pixelated;
}

/* --- Project pages: black nav + large hero below nav --- */
body.project-detail-page header{
  position:sticky !important;
  top:0 !important;
  left:auto !important;
  right:auto !important;
  z-index:100 !important;
  height:48px !important;
  min-height:48px !important;
  background:#000 !important;
  border:0 !important;
  box-shadow:none !important;
}
body.project-detail-page header nav{
  height:48px !important;
  min-height:48px !important;
  background:#000 !important;
}
body.project-detail-page header .brand,
body.project-detail-page header .menu-toggle{
  color:#fff !important;
}
body.project-detail-page main{
  margin:0 !important;
  padding:0 !important;
}
body.project-detail-page .project-hero-carousel{
  top:auto !important;
  height:88vh !important;
  min-height:560px !important;
}
@media(max-width:800px){
  body.project-detail-page header,
  body.project-detail-page header nav{
    height:44px !important;
    min-height:44px !important;
  }
  body.project-detail-page .project-hero-carousel{
    height:82vh !important;
    min-height:460px !important;
  }
}

/* --- v113: project nav — true full-bleed, tightly cropped black bar --- */
body.project-detail-page header{
  position:sticky !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100vw !important;
  height:34px !important;
  min-height:34px !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
  background:#000 !important;
  overflow:visible !important;
}
body.project-detail-page header .wrap{
  width:100% !important;
  max-width:none !important;
  height:34px !important;
  margin:0 !important;
  padding:0 20px !important;
  box-sizing:border-box !important;
}
body.project-detail-page header nav{
  width:100% !important;
  height:34px !important;
  min-height:34px !important;
  margin:0 !important;
  padding:0 !important;
  background:#000 !important;
}
body.project-detail-page header .brand{
  top:10px !important;
  left:20px !important;
  color:#fff !important;
}
body.project-detail-page header .menu-toggle{
  top:11px !important;
  color:#fff !important;
}
/* The project hero should touch the bottom edge of the black bar exactly. */
body.project-detail-page main,
body.project-detail-page .project-detail,
body.project-detail-page .project-hero-carousel{
  margin-top:0 !important;
}

@media(max-width:800px){
  body.project-detail-page header,
  body.project-detail-page header .wrap,
  body.project-detail-page header nav{
    height:32px !important;
    min-height:32px !important;
  }
  body.project-detail-page header .wrap{padding:0 14px !important;}
  body.project-detail-page header .brand{top:9px !important;left:14px !important;}
  body.project-detail-page header .menu-toggle{top:10px !important;}
}


/* --- v114: instant project slide changes + custom arrow artwork --- */
body.project-detail-page .project-slide{
  transition:none !important;
}
body.project-detail-page .project-nav{
  background:transparent !important;
  color:transparent !important;
  -webkit-tap-highlight-color:transparent;
  outline:none;
  padding:0 !important;
  user-select:none;
}
body.project-detail-page .project-nav:hover,
body.project-detail-page .project-nav:active,
body.project-detail-page .project-nav:focus{
  background:transparent !important;
  box-shadow:none !important;
}
body.project-detail-page .project-nav:focus-visible{
  outline:1px solid currentColor;
  outline-offset:3px;
}
body.project-detail-page .project-nav img{
  display:block;
  width:34px;
  height:auto;
  pointer-events:none;
}
body.project-detail-page .project-nav.prev img{
  transform:rotate(180deg);
}
@media(max-width:800px){
  body.project-detail-page .project-nav img{width:28px;}
}


/* --- v115: project arrows + Emma asset order --- */
body.project-detail-page .project-nav{
  width:64px !important;
  height:64px !important;
  opacity:1 !important;
  visibility:visible !important;
  background-image:url("img/arrow_long_black.svg") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:44px auto !important;
}
body.project-detail-page .project-nav.prev{
  transform:translateY(-50%) rotate(180deg) !important;
}
body.project-detail-page .project-nav.next{
  transform:translateY(-50%) !important;
}
body.project-detail-page .project-nav img{display:none !important;}
.work-thumb-empty{background:transparent !important;}
@media(max-width:800px){
  body.project-detail-page .project-nav{background-size:34px auto !important;}
}

/* --- v116: visible project arrow artwork + small hero breathing room --- */
body.project-detail-page .project-detail{
  padding-top:8px !important;
}
body.project-detail-page .project-hero-carousel{
  margin-top:0 !important;
}
body.project-detail-page .project-nav{
  top:50% !important;
  width:58px !important;
  height:58px !important;
  z-index:20 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:none !important;
  overflow:visible !important;
}
body.project-detail-page .project-nav.prev{left:22px !important;}
body.project-detail-page .project-nav.next{right:22px !important;}
body.project-detail-page .project-nav img{
  display:block !important;
  width:46px !important;
  max-width:none !important;
  height:auto !important;
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
}
body.project-detail-page .project-nav.prev img{transform:rotate(180deg) !important;}
body.project-detail-page .project-nav.next img{transform:none !important;}
@media(max-width:800px){
  body.project-detail-page .project-detail{padding-top:6px !important;}
  body.project-detail-page .project-nav.prev{left:10px !important;}
  body.project-detail-page .project-nav.next{right:10px !important;}
  body.project-detail-page .project-nav img{width:36px !important;}
}

/* --- v117: project media keeps its full frame at every viewport --- */
body.project-detail-page .project-detail{
  padding-top:0 !important;
}
body.project-detail-page .project-hero-carousel{
  position:relative !important;
  width:100vw !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}
body.project-detail-page .project-slide{
  position:static !important;
  inset:auto !important;
  display:none !important;
  width:100% !important;
  height:auto !important;
  opacity:1 !important;
  pointer-events:none !important;
}
body.project-detail-page .project-slide.is-active{
  display:block !important;
  pointer-events:auto !important;
}
body.project-detail-page .project-slide img,
body.project-detail-page .project-slide video,
body.project-detail-page .project-slide-placeholder{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
}
/* Keep the first pixel of the media directly against the nav. */
body.project-detail-page header + .menu-overlay + main,
body.project-detail-page main,
body.project-detail-page .project-detail,
body.project-detail-page .project-hero-carousel{
  margin-top:0 !important;
}

@media(max-width:800px){
  body.project-detail-page .project-detail{padding-top:0 !important;}
  body.project-detail-page .project-hero-carousel{
    height:auto !important;
    min-height:0 !important;
  }
}

/* --- v119: previous project arrow points left --- */
body.project-detail-page .project-nav.prev{
  transform:translateY(-50%) !important;
}
body.project-detail-page .project-nav.prev img{
  transform:rotate(180deg) !important;
}

/* --- v120: keep project copy peeking above the fold + full-bleed sticky black nav --- */
body.project-detail-page header,
body.project-detail-page header.is-scrolled{
  position:sticky !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  background:#000 !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:none !important;
}
body.project-detail-page header.is-scrolled .brand,
body.project-detail-page header.is-scrolled .menu-toggle{
  color:#fff !important;
}
body.project-detail-page header .wrap,
body.project-detail-page header.is-scrolled .wrap,
body.project-detail-page header nav,
body.project-detail-page header.is-scrolled nav{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  background:#000 !important;
}

/* Let the media shrink from the width when a short viewport would otherwise crop it.
   This keeps the entire top and bottom visible while reserving a little viewport
   space for the project text below. */
body.project-detail-page .project-hero-carousel{
  width:100vw !important;
  max-width:100vw !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  background:#000 !important;
}
body.project-detail-page .project-slide.is-active{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  width:100% !important;
  height:auto !important;
  background:#000 !important;
}
body.project-detail-page .project-slide img,
body.project-detail-page .project-slide video,
body.project-detail-page .project-slide-placeholder{
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:calc(100vh - 145px) !important;
  max-height:calc(100svh - 145px) !important;
  object-fit:contain !important;
  object-position:top center !important;
  margin:0 auto !important;
}

@media(max-width:800px){
  body.project-detail-page .project-slide img,
  body.project-detail-page .project-slide video,
  body.project-detail-page .project-slide-placeholder{
    max-height:calc(100vh - 150px) !important;
    max-height:calc(100svh - 150px) !important;
  }
}

/* --- v121: project hero side/letterbox fill --- */
body.project-detail-page .project-hero-carousel,
body.project-detail-page .project-slide.is-active{
  background:#f1f1ef !important;
}


/* --- Project contact-sheet gallery: all project media visible at once --- */
.project-contact-sheet{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:34px 0 26px;
}
.project-contact-sheet-item{
  flex:0 0 calc((100% - 40px) / 6);
  aspect-ratio:16/9;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--paper);
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}
.project-contact-sheet-item img,
.project-contact-sheet-item video{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
}
@media(max-width:1000px){
  .project-contact-sheet-item{
    flex-basis:calc((100% - 16px) / 3);
  }
}
@media(max-width:600px){
  .project-contact-sheet{
    gap:6px;
    margin-top:28px;
  }
  .project-contact-sheet-item{
    flex-basis:calc((100% - 6px) / 2);
  }
}

.project-contact-sheet-item:focus-visible{
  outline:1px solid var(--ink);
  outline-offset:3px;
}
@media(hover:hover) and (pointer:fine){
  .project-contact-sheet-item img,
  .project-contact-sheet-item video{
    transition:opacity .16s ease;
  }
  .project-contact-sheet-item:hover img,
  .project-contact-sheet-item:hover video{
    opacity:.72;
  }
}


/* --- v127: project menu CLOSE always visible above sticky nav --- */
body.project-detail-page .menu-overlay .menu-close{
  position:fixed !important;
  top:11px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  z-index:5000 !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  color:#fff !important;
  background:transparent !important;
  mix-blend-mode:normal !important;
}
@media(max-width:800px){
  body.project-detail-page .menu-overlay .menu-close{
    top:10px !important;
  }
}


/* --- v128: fix project menu stacking context so CLOSE can actually render --- */
/* The overlay used to sit below the sticky project header. Because z-index on
   CLOSE is trapped inside the overlay's stacking context, raising CLOSE alone
   could never place it above that header. Put the overlay above the page, then
   keep the transparent header/brand above the overlay. */
body.project-detail-page .menu-state:checked ~ .menu-overlay{
  z-index:3000 !important;
}
body.project-detail-page .menu-state:checked ~ header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:4000 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  pointer-events:none !important;
}
body.project-detail-page .menu-state:checked ~ header .brand{
  position:relative !important;
  z-index:4001 !important;
  color:#fff !important;
  pointer-events:auto !important;
}
body.project-detail-page .menu-state:checked ~ header .menu-toggle{
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
body.project-detail-page .menu-state:checked ~ .menu-overlay .menu-close{
  position:fixed !important;
  top:11px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  z-index:1 !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  color:#fff !important;
  pointer-events:auto !important;
}
@media(max-width:800px){
  body.project-detail-page .menu-state:checked ~ .menu-overlay .menu-close{
    top:10px !important;
  }
}

/* --- v129: definitive menu spacing + project CLOSE fix --- */
/* Give the primary menu links more breathing room below MENU / CLOSE.
   Contact and Social deliberately keep their existing position. */
body .menu-overlay .menu-links,
body.project-detail-page .menu-overlay .menu-links,
body:not(.project-detail-page) .menu-overlay .menu-links{
  top:128px !important;
}

/* On project pages the sticky nav itself was still painting a black layer
   above the menu overlay, which hid CLOSE even though the label existed.
   Keep the identity/header layer above the menu, but make the nav layer truly
   transparent while the fullscreen menu is open. */
body.project-detail-page .menu-state:checked ~ header,
body.project-detail-page .menu-state:checked ~ header .wrap,
body.project-detail-page .menu-state:checked ~ header nav{
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
body.project-detail-page .menu-state:checked ~ .menu-overlay .menu-close{
  position:fixed !important;
  top:11px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  color:#fff !important;
  pointer-events:auto !important;
}

@media(max-width:800px){
  body .menu-overlay .menu-links,
  body.project-detail-page .menu-overlay .menu-links,
  body:not(.project-detail-page) .menu-overlay .menu-links{
    top:112px !important;
  }
  body.project-detail-page .menu-state:checked ~ .menu-overlay .menu-close{
    top:10px !important;
  }
}

/* --- v130: reduce menu-to-links spacing by 50% --- */
body .menu-overlay .menu-links,
body.project-detail-page .menu-overlay .menu-links,
body:not(.project-detail-page) .menu-overlay .menu-links{
  top:76px !important;
}
@media(max-width:800px){
  body .menu-overlay .menu-links,
  body.project-detail-page .menu-overlay .menu-links,
  body:not(.project-detail-page) .menu-overlay .menu-links{
    top:68px !important;
  }
}


/* --- v131: optically align landing-page titles with MENU --- */
.section-page-title,
.page-hero h1.section-page-title{
  transform:translateX(-10px);
}


/* --- v132: homepage project-image crossfade hero --- */
.home-hero-slideshow,
.home-hero-slide,
.home-hero-shade{
  position:absolute;
  inset:0;
}
.home-hero-slide{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.15s ease-in-out;
}
.home-hero-slide.is-active{
  opacity:1;
}
.home-hero-shade{
  z-index:2;
  background:rgba(0,0,0,.08);
  pointer-events:none;
}
.home-hero-title{
  position:absolute;
  z-index:3;
  top:50%;
  left:clamp(16px,2vw,30px);
  width:calc(100% - clamp(32px,4vw,60px));
  margin:0;
  transform:translateY(-50%);
  color:#FF58BD;
  font-size:clamp(58px,10.5vw,190px);
  font-weight:400;
  font-style:italic;
  line-height:.86;
  letter-spacing:-.065em;
  text-align:left;
  text-transform:uppercase;
  pointer-events:none;
  transition:color .7s ease;
}
@media(max-width:800px){
  .home-hero-title{
    left:14px;
    width:calc(100% - 28px);
    font-size:clamp(48px,17vw,96px);
    line-height:.88;
  }
}
@media(prefers-reduced-motion:reduce){
  .home-hero-slide{transition:none;}
}

/* --- v133: homepage full-bleed hero title alignment + contrast overlay --- */
.home-hero-shade{
  background:rgba(0,0,0,.22);
}
.home-hero-title{
  left:calc(var(--site-gutter) - 10px);
  width:calc(100% - (var(--site-gutter) * 2) + 10px);
}
@media(max-width:800px){
  .home-hero-title{
    left:calc(var(--site-gutter) - 6px);
    width:calc(100% - (var(--site-gutter) * 2) + 6px);
  }
}

/* --- v134: homepage hero headline begins beneath MENU --- */
.home-hero-title{
  left:calc(50% - 10px);
  width:calc(50% + 10px - var(--site-gutter));
}
@media(max-width:800px){
  .home-hero-title{
    left:calc(50% - 6px);
    width:calc(50% + 6px - var(--site-gutter));
  }
}


/* --- v135: remove broken/black hero slide + black image arrows on homepage --- */
body.home-hero-page .home-link .home-arrow{
  width:24px;
  height:24px;
  display:block;
  font-size:0;
  line-height:0;
  background:url("img/arrow_long_black.svg") center / contain no-repeat;
}

/* --- v136: larger homepage Case Studies / Work arrows --- */
body.home-hero-page .home-link .home-arrow{
  width:34px;
  height:34px;
}


/* --- Resume page --- */
.resume-page{padding-top:70px;}
.resume-title-block{padding:20px 0 38px;}
.resume-intro{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:26px 0 32px;}
.resume-intro-grid{display:grid;grid-template-columns:minmax(180px,.7fr) 2fr;gap:48px;align-items:start;}
.resume-kicker{font-size:11px;line-height:1.35;text-transform:uppercase;letter-spacing:.14em;}
.resume-statement{max-width:980px;font-size:clamp(34px,5vw,74px);line-height:.94;letter-spacing:-.055em;}
.resume-section{padding:0 0 84px;}
.resume-section-heading{padding:18px 0;font-size:11px;text-transform:uppercase;letter-spacing:.14em;border-bottom:1px solid var(--ink);}
.resume-role{display:grid;grid-template-columns:minmax(180px,.7fr) 2fr;gap:48px;padding:28px 0 34px;border-bottom:1px solid var(--line);}
.resume-role-meta{font-size:11px;line-height:1.55;text-transform:uppercase;letter-spacing:.08em;}
.resume-role-main{max-width:900px;}
.resume-role-main h2{margin:0 0 14px;font-size:clamp(27px,3.2vw,48px);font-weight:400;line-height:.98;letter-spacing:-.045em;}
.resume-role-main p{margin:0 0 10px;max-width:810px;font-size:15px;line-height:1.55;}
.resume-role-main p:last-child{margin-bottom:0;}
.resume-two-col-section{padding-bottom:84px;}
.resume-two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
.resume-list-block .resume-section-heading{margin-bottom:20px;}
.resume-list-block p{margin:0;font-size:18px;line-height:1.55;max-width:650px;}
.resume-contact-strip{border-top:1px solid var(--ink);padding:22px 0 70px;}
.resume-contact-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;font-size:11px;text-transform:uppercase;letter-spacing:.09em;}
.resume-contact-grid a{text-decoration:underline;text-underline-offset:3px;}
@media(max-width:800px){
  .resume-page{padding-top:54px;}
  .resume-title-block{padding:14px 0 30px;}
  .resume-intro-grid,.resume-role{grid-template-columns:1fr;gap:18px;}
  .resume-statement{font-size:clamp(36px,11vw,60px);}
  .resume-role{padding:24px 0 30px;}
  .resume-two-col{grid-template-columns:1fr;gap:44px;}
  .resume-list-block p{font-size:16px;}
  .resume-contact-grid{grid-template-columns:1fr;gap:10px;}
}

/* --- v133: Resume menu + About electric hover + lower contact/social --- */
.menu-overlay .menu-links a:nth-child(5):hover,
.menu-overlay .menu-links a:nth-child(5):focus-visible{
  color:#FF7E58 !important;
}

/* Push CONTACT / SOCIAL slightly lower on desktop without changing mobile layout. */
@media(min-width:801px){
  body .menu-overlay .menu-contact{
    transform:translate(-50%, 24px) !important;
  }
}


/* --- v137: universal inset dividers + menu-color page titles --- */
/*
   Divider rule: page-wide horizontal lines use the same shared gutter as the
   footer, Work grid, header, and project content instead of running full bleed.
   Lines that already live inside a .wrap naturally inherit the same inset.
*/
footer{
  border-top:0 !important;
  position:relative;
}
footer::before{
  content:"";
  position:absolute;
  top:0;
  left:var(--site-gutter) !important;
  right:var(--site-gutter) !important;
  height:1px;
  background:var(--ink);
}

/* Resume has full-width section borders in its original styling; convert
   those to universal inset rules so they match the rest of the site. */
.resume-intro{
  border-top:0 !important;
  border-bottom:0 !important;
  position:relative;
}
.resume-intro::before,
.resume-intro::after,
.resume-contact-strip::before{
  content:"";
  position:absolute;
  left:var(--site-gutter);
  right:var(--site-gutter);
  height:1px;
  background:var(--ink);
  pointer-events:none;
}
.resume-intro::before{top:0;}
.resume-intro::after{bottom:0;}
.resume-contact-strip{
  border-top:0 !important;
  position:relative;
}
.resume-contact-strip::before{top:0;}

/* Landing-page titles use the exact electric color assigned to that menu item. */
body.page-work .section-page-title{color:#F5FF58;}
body.page-case-studies .section-page-title{color:#FF5878;}
body.page-resume .section-page-title{color:#58FFD1;}
body.page-about .section-page-title{color:#FF7E58;}


/* --- v138: black page titles + menu contact alignment --- */
/* Page headers return to the site's standard black text. */
body.page-work .section-page-title,
body.page-case-studies .section-page-title,
body.page-resume .section-page-title,
body.page-about .section-page-title{color:var(--ink) !important;}

/* Keep Contact / Social directly aligned with the menu-link column. */
@media(min-width:801px){
  body .menu-overlay .menu-contact{
    left:calc(50% - 18px) !important;
    transform:none !important;
    top:374px !important;
    bottom:auto !important;
  }
}


/* --- v139: resume Contact section + aligned About/Resume capabilities --- */
.resume-contact-section{padding-bottom:84px;}
.resume-contact-content{
  display:grid;
  grid-template-columns:minmax(180px,.7fr) 2fr;
  gap:48px;
  padding:28px 0 34px;
  border-bottom:1px solid var(--line);
}
.resume-contact-location{
  font-size:11px;
  line-height:1.55;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.resume-contact-links{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  font-size:18px;
  line-height:1.4;
}
.resume-contact-links a{
  text-decoration:underline;
  text-underline-offset:3px;
}
@media(max-width:800px){
  .resume-contact-content{grid-template-columns:1fr;gap:18px;padding:24px 0 30px;}
  .resume-contact-links{font-size:16px;}
}

/* --- Resume: no trailing divider at the end of a section --- */
.resume-section .resume-role:last-child{
  border-bottom:0 !important;
}
.resume-contact-content{
  border-bottom:0 !important;
}

/* --- v140: homepage links, menu order, short-page footer + portrait-ready About --- */
/* Homepage bottom rail now has three equal destinations. */
body.home-hero-page .home-links{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
body.home-hero-page .home-link,
body.home-hero-page .home-link:nth-child(2),
body.home-hero-page .home-link:nth-child(3){
  padding-left:22px;
  padding-right:22px;
}
body.home-hero-page .home-link:first-child{padding-left:0;}
body.home-hero-page .home-link:last-child{padding-right:0;border-right:0;}
body.home-hero-page .home-link h2{
  font-weight:400 !important;
}

/* Menu order is Home / Work / Resume / Case Studies / About, so keep its hover palette aligned. */
.menu-overlay .menu-links a:nth-child(3):hover,
.menu-overlay .menu-links a:nth-child(3):focus-visible{color:#58FFD1 !important;}
.menu-overlay .menu-links a:nth-child(4):hover,
.menu-overlay .menu-links a:nth-child(4):focus-visible{color:#FF5878 !important;}

/* On deliberately sparse pages, let the footer sit at the viewport bottom. */
body.page-case-studies{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
body.page-case-studies main{flex:1 0 auto;}
body.page-case-studies footer{margin-top:auto;}

/* About: intentionally reserve the left column for a future portrait. */
body.page-about .about-grid-portrait-ready{
  grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr);
  align-items:start;
}
body.page-about .about-portrait-space{
  min-height:420px;
}
body.page-about .about-copy{
  max-width:800px;
}
body.page-about .about-intro{
  margin:0 0 28px;
  max-width:760px;
  font-size:clamp(32px,4vw,58px);
  line-height:.98;
  letter-spacing:-.045em;
}

@media(max-width:800px){
  body.home-hero-page .home-links{grid-template-columns:1fr;}
  body.home-hero-page .home-link,
  body.home-hero-page .home-link:nth-child(2),
  body.home-hero-page .home-link:nth-child(3){
    padding:18px 0;
    border-right:0;
  }
  body.page-about .about-grid-portrait-ready{grid-template-columns:1fr;}
  body.page-about .about-portrait-space{display:none;}
  body.page-about .about-intro{font-size:clamp(30px,9vw,48px);}
}

/* --- v141: custom 404 --- */
body.page-404{min-height:100vh;display:flex;flex-direction:column;}
body.page-404 .not-found-main{flex:1;display:flex;align-items:center;}
body.page-404 .not-found-wrap{width:100%;display:grid;grid-template-columns:minmax(180px,.65fr) minmax(0,1.35fr);gap:clamp(40px,7vw,110px);align-items:center;padding-top:70px;padding-bottom:70px;}
body.page-404 .not-found-shard{display:block;width:min(100%,260px);height:auto;justify-self:center;image-rendering:auto;}
body.page-404 .not-found-code{font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;}
body.page-404 h1{margin:0 0 18px;font-size:clamp(46px,7vw,100px);font-weight:400;line-height:.92;letter-spacing:-.05em;}
body.page-404 .not-found-copy p{max-width:520px;margin:0 0 28px;font-size:18px;line-height:1.45;}
body.page-404 .not-found-back{text-decoration:underline;text-underline-offset:4px;}
body.page-404 footer{margin-top:auto;}
@media(max-width:800px){body.page-404 .not-found-wrap{grid-template-columns:1fr;text-align:center;padding-top:45px;padding-bottom:45px;}body.page-404 .not-found-shard{width:150px;}body.page-404 .not-found-copy p{margin-left:auto;margin-right:auto;}}

/* --- v145: universal compact nav + Resume scroll-to-black nav --- */
/* Match the tightly cropped 34px project-page navigation everywhere. */
body:not(.project-detail-page) header{
  height:34px !important;
  min-height:34px !important;
  padding:0 !important;
}
body:not(.project-detail-page) header .wrap{
  height:34px !important;
  min-height:34px !important;
}
body:not(.project-detail-page) header nav{
  height:34px !important;
  min-height:34px !important;
}
body:not(.project-detail-page) header .brand{
  top:10px !important;
}
body:not(.project-detail-page) header .menu-toggle,
body:not(.project-detail-page) .menu-overlay .menu-close{
  top:11px !important;
}

@media(max-width:800px){
  body:not(.project-detail-page) header,
  body:not(.project-detail-page) header .wrap,
  body:not(.project-detail-page) header nav{
    height:32px !important;
    min-height:32px !important;
  }
  body:not(.project-detail-page) header .brand{top:9px !important;}
  body:not(.project-detail-page) header .menu-toggle,
  body:not(.project-detail-page) .menu-overlay .menu-close{top:10px !important;}
}

/* Resume keeps the normal light nav at the top, then adopts the same black
   project-page bar once the visitor begins scrolling. */
body.page-resume header{
  position:sticky !important;
  top:0 !important;
  z-index:1200 !important;
  background:var(--paper) !important;
  transition:background-color .16s ease !important;
}
body.page-resume header.is-scrolled{
  background:#000 !important;
  color:#fff !important;
}
body.page-resume header.is-scrolled .wrap,
body.page-resume header.is-scrolled nav{
  background:#000 !important;
}
body.page-resume header.is-scrolled .brand,
body.page-resume header.is-scrolled .menu-toggle{
  color:#fff !important;
}
/* Opening the fullscreen menu always keeps the top identity readable. */
body.page-resume .menu-state:checked ~ header,
body.page-resume .menu-state:checked ~ header .wrap,
body.page-resume .menu-state:checked ~ header nav{
  background:transparent !important;
}
body.page-resume .menu-state:checked ~ header .brand{color:#fff !important;}


/* --- v147: About Me + color-matched menu arrows --- */
/* Reuse the existing white arrow artwork as a mask so each arrow follows
   the hovered menu link's currentColor. No additional arrow files required. */
.menu-overlay .menu-links a::before{
  background:none !important;
  background-color:currentColor !important;
  -webkit-mask:url("img/arrow_long_black.svg") center / contain no-repeat !important;
  mask:url("img/arrow_long_black.svg") center / contain no-repeat !important;
}


/* --- v148: restore visible menu arrows + full-width About copy --- */
/* Use the existing arrow image normally again. Filter it to the same electric
   hover color assigned to each menu destination. */
.menu-overlay .menu-links a::before{
  background:url("img/arrow_long_black.svg") center / contain no-repeat !important;
  background-color:transparent !important;
  -webkit-mask:none !important;
  mask:none !important;
  filter:none;
}

/* Electric hover-arrow colors, matched to the menu text palette. */
.menu-overlay .menu-links a:nth-child(1):hover::before,
.menu-overlay .menu-links a:nth-child(1):focus-visible::before{
  filter:brightness(0) saturate(100%) invert(38%) sepia(93%) saturate(3974%) hue-rotate(311deg) brightness(105%) contrast(101%);
}
.menu-overlay .menu-links a:nth-child(2):hover::before,
.menu-overlay .menu-links a:nth-child(2):focus-visible::before{
  filter:brightness(0) saturate(100%) invert(91%) sepia(93%) saturate(1072%) hue-rotate(16deg) brightness(108%) contrast(104%);
}
.menu-overlay .menu-links a:nth-child(3):hover::before,
.menu-overlay .menu-links a:nth-child(3):focus-visible::before{
  filter:brightness(0) saturate(100%) invert(43%) sepia(95%) saturate(3360%) hue-rotate(222deg) brightness(101%) contrast(105%);
}
.menu-overlay .menu-links a:nth-child(4):hover::before,
.menu-overlay .menu-links a:nth-child(4):focus-visible::before{
  filter:brightness(0) saturate(100%) invert(57%) sepia(76%) saturate(3060%) hue-rotate(229deg) brightness(102%) contrast(101%);
}
.menu-overlay .menu-links a:nth-child(5):hover::before,
.menu-overlay .menu-links a:nth-child(5):focus-visible::before{
  filter:brightness(0) saturate(100%) invert(48%) sepia(99%) saturate(3551%) hue-rotate(359deg) brightness(102%) contrast(105%);
}

/* Let About Me copy use the full available content width for now. */
body.page-about .about-copy{
  width:100% !important;
  max-width:none !important;
}

/* --- v149: homepage destination titles match fullscreen menu typography --- */
body.home-hero-page .home-link h2{
  font-family:"Roboto",Arial,Helvetica,sans-serif !important;
  font-size:clamp(38px,3vw,50px) !important;
  font-weight:400 !important;
  line-height:1.04 !important;
  letter-spacing:-.045em !important;
  text-transform:none !important;
}

@media(max-width:800px){
  body.home-hero-page .home-link h2{
    font-size:clamp(36px,11vw,52px) !important;
  }
}

/* --- v155: full-width slideshow + responsive title-only navigation --- */
@media(min-width:801px){
  .home-hero-slideshow{
    width:100%;
    right:0;
  }
}

body.home-hero-page .home-links{
  width:auto;
  max-width:none;
  margin-left:var(--site-gutter);
  margin-right:var(--site-gutter);
  grid-template-columns:repeat(4,minmax(0,1fr));
}

body.home-hero-page .home-link,
body.home-hero-page .home-link:nth-child(2),
body.home-hero-page .home-link:nth-child(3),
body.home-hero-page .home-link:nth-child(4){
  min-height:clamp(92px,8vw,128px);
  padding-top:clamp(18px,2vw,30px);
  padding-bottom:clamp(18px,2vw,30px);
  padding-left:clamp(14px,2vw,34px);
  padding-right:clamp(14px,2vw,34px);
  justify-content:flex-start;
}

body.home-hero-page .home-link:first-child{padding-left:0;}
body.home-hero-page .home-link:last-child{padding-right:0;}

@media(max-width:800px){
  body.home-hero-page .home-links{
    grid-template-columns:1fr;
    margin-left:var(--site-gutter);
    margin-right:var(--site-gutter);
  }

  body.home-hero-page .home-link,
  body.home-hero-page .home-link:nth-child(2),
  body.home-hero-page .home-link:nth-child(3),
  body.home-hero-page .home-link:nth-child(4){
    min-height:auto;
    padding:18px 0;
  }
}

/* --- v150: universal black nav after scrolling --- */
/* Preserve each page's existing at-top treatment; once the shared scroll
   script adds .is-scrolled, every page gets the same black/white nav. */
body header.is-scrolled,
body.home-hero-page header.is-scrolled,
body.page-resume header.is-scrolled,
body.project-detail-page header.is-scrolled,
body:not(.project-detail-page) header.is-scrolled{
  background:#000 !important;
  background-color:#000 !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:none !important;
}

body header.is-scrolled .wrap,
body header.is-scrolled nav,
body.home-hero-page header.is-scrolled .wrap,
body.home-hero-page header.is-scrolled nav,
body.page-resume header.is-scrolled .wrap,
body.page-resume header.is-scrolled nav,
body.project-detail-page header.is-scrolled .wrap,
body.project-detail-page header.is-scrolled nav{
  background:#000 !important;
  background-color:#000 !important;
}

body header.is-scrolled .brand,
body header.is-scrolled .brand a,
body header.is-scrolled .menu-toggle,
body.home-hero-page header.is-scrolled .brand,
body.home-hero-page header.is-scrolled .brand a,
body.home-hero-page header.is-scrolled .menu-toggle,
body.page-resume header.is-scrolled .brand,
body.page-resume header.is-scrolled .brand a,
body.page-resume header.is-scrolled .menu-toggle,
body.project-detail-page header.is-scrolled .brand,
body.project-detail-page header.is-scrolled .brand a,
body.project-detail-page header.is-scrolled .menu-toggle{
  color:#fff !important;
  mix-blend-mode:normal !important;
}

/* The fullscreen menu remains black/white regardless of scroll state. */
body .menu-state:checked ~ header,
body .menu-state:checked ~ header .wrap,
body .menu-state:checked ~ header nav{
  background:transparent !important;
  background-color:transparent !important;
}

/* --- v152: left-weighted homepage slideshow with headline overlap --- */
@media(min-width:801px){
  .home-hero-media{
    background:var(--paper);
  }

  .home-hero-slideshow,
  .home-hero-shade{
    right:auto;
    width:64%;
  }

  .home-hero-title{
    font-size:clamp(64px,11.25vw,204px);
  }
}

/* --- v153: reshuffling homepage image grid --- */
.home-hero-media{
  background:#000;
}

.home-hero-grid{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(0,1fr));
  gap:3px;
  background:#000;
}

.home-grid-tile{
  min-width:0;
  min-height:0;
  overflow:hidden;
  background:#111;
}

.home-grid-tile img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  opacity:1;
  transform:scale(1.01);
  transition:opacity .18s ease;
}

.home-grid-tile img.is-changing{
  opacity:.08;
}

@media(max-width:800px){
  .home-hero-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(6,minmax(0,1fr));
    gap:2px;
  }
}

@media(prefers-reduced-motion:reduce){
  .home-grid-tile img{transition:none;}
}

/* --- v154: fourth homepage destination --- */
body.home-hero-page .home-links{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

body.home-hero-page .home-link:nth-child(4){
  padding-left:22px;
  padding-right:0;
  border-right:0;
}

@media(max-width:800px){
  body.home-hero-page .home-links{grid-template-columns:1fr;}
  body.home-hero-page .home-link:nth-child(4){
    padding:18px 0;
    border-right:0;
  }
}
body .menu-state:checked ~ header .brand,
body .menu-state:checked ~ header .brand a{
  color:#fff !important;
}

/* --- v151: electric color-cycle hover for menu email --- */
@keyframes menuEmailElectricCycle{
  0%,100%{color:#fff;}
  20%{color:#FF58BD;}
  40%{color:#F5FF58;}
  60%{color:#58FFD1;}
  80%{color:#FF5878;}
}

.menu-overlay .menu-contact a[href^="mailto:"]:hover,
.menu-overlay .menu-contact a[href^="mailto:"]:focus-visible{
  opacity:1 !important;
  animation:menuEmailElectricCycle 2.4s ease-in-out infinite !important;
}

@media (prefers-reduced-motion: reduce){
  .menu-overlay .menu-contact a[href^="mailto:"]:hover,
  .menu-overlay .menu-contact a[href^="mailto:"]:focus-visible{
    animation:none !important;
    color:#FF58BD !important;
  }
}


/* --- v152: project counter + previous/next project footer navigation --- */
body.project-detail-page .project-count{
  color:#000 !important;
}
body.project-detail-page .project-bottom-nav{
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
body.project-detail-page .project-bottom-nav .project-back,
body.project-detail-page .project-bottom-nav .project-next{
  display:flex !important;
  align-items:center !important;
  width:auto !important;
  height:48px !important;
  min-height:48px !important;
  margin:0 !important;
  padding:0 !important;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.09em;
}
body.project-detail-page .project-bottom-nav .project-next{
  margin-left:auto !important;
  text-align:right;
}
@media(max-width:800px){
  body.project-detail-page .project-bottom-nav{min-height:44px;}
  body.project-detail-page .project-bottom-nav .project-back,
  body.project-detail-page .project-bottom-nav .project-next{
    height:44px !important;
    min-height:44px !important;
  }
}

/* --- v156: full slideshow + animated homepage arrows + tighter rail --- */
body.home-hero-page .home-hero-slideshow{
  position:absolute !important;
  inset:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  height:100% !important;
}

body.home-hero-page .home-hero-slide{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}

body.home-hero-page .home-bottom-links{
  padding:18px 0 0;
}

body.home-hero-page .home-link,
body.home-hero-page .home-link:nth-child(2),
body.home-hero-page .home-link:nth-child(3),
body.home-hero-page .home-link:nth-child(4){
  min-height:clamp(78px,6.5vw,104px);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding-top:clamp(14px,1.4vw,22px);
  padding-bottom:clamp(14px,1.4vw,22px);
}

body.home-hero-page .home-link-content{
  display:flex;
  align-items:center;
  gap:clamp(12px,1.2vw,22px);
  max-width:100%;
  transition:transform .18s ease;
}

body.home-hero-page .home-link h2{
  white-space:nowrap;
}

body.home-hero-page .home-link .home-arrow{
  flex:0 0 auto;
  width:clamp(24px,2.2vw,34px);
  height:clamp(24px,2.2vw,34px);
  transition:transform .18s ease;
}

body.home-hero-page .home-link:hover .home-link-content,
body.home-hero-page .home-link:focus-visible .home-link-content{
  transform:translateX(clamp(6px,.7vw,12px));
}

body.home-hero-page .home-link:hover .home-arrow,
body.home-hero-page .home-link:focus-visible .home-arrow{
  transform:translateX(clamp(4px,.5vw,9px));
}

@media(max-width:800px){
  body.home-hero-page .home-bottom-links{padding:14px 0 0;}
  body.home-hero-page .home-link,
  body.home-hero-page .home-link:nth-child(2),
  body.home-hero-page .home-link:nth-child(3),
  body.home-hero-page .home-link:nth-child(4){
    min-height:64px;
    padding:14px 0;
  }
}

@media(prefers-reduced-motion:reduce){
  body.home-hero-page .home-link-content,
  body.home-hero-page .home-link .home-arrow{transition:none;}
}


/* --- v157: larger landing-page titles + larger About Me copy --- */
.section-page-title,
.page-hero h1.section-page-title{
  font-size:clamp(72px,8vw,128px) !important;
  line-height:.88 !important;
  letter-spacing:-.06em !important;
}

/* Keep the existing MENU-centered starting point/alignment. */
.section-page-title,
.page-hero h1.section-page-title,
.compact-page-hero .section-page-title{
  margin-left:50% !important;
  margin-right:0 !important;
  text-align:left !important;
}

/* About Me body copy gets a much more prominent editorial scale. */
body.page-about .about-copy{
  font-size:clamp(26px,2.6vw,42px) !important;
  line-height:1.18 !important;
  letter-spacing:-.025em !important;
}
body.page-about .about-copy p{
  max-width:1200px;
  margin-top:0;
  margin-bottom:1em;
}

@media(max-width:800px){
  .section-page-title,
  .page-hero h1.section-page-title{
    font-size:clamp(58px,16vw,92px) !important;
  }

  body.page-about .about-copy{
    font-size:clamp(23px,6.5vw,34px) !important;
    line-height:1.22 !important;
  }
}


/* --- v158: refine landing titles + About copy scale --- */
/* Pull the oversized v157 page titles back by roughly 50%. */
.section-page-title,
.page-hero h1.section-page-title{
  font-size:clamp(54px,6vw,90px) !important;
}

/* Match About Me body copy to the Resume job-title scale (e.g. Manager...). */
body.page-about .about-copy{
  font-size:clamp(27px,3.2vw,48px) !important;
  line-height:1.18 !important;
  letter-spacing:-.035em !important;
}

@media(max-width:800px){
  .section-page-title,
  .page-hero h1.section-page-title{
    font-size:clamp(46px,12vw,70px) !important;
  }

  body.page-about .about-copy{
    font-size:clamp(27px,7vw,40px) !important;
  }
}


/* --- v159: lighter editorial typography --- */
.section-page-title,
.page-hero h1.section-page-title{
  font-weight:400 !important;
  letter-spacing:-.045em !important;
}

body.page-about .about-copy{
  font-weight:400 !important;
  letter-spacing:-.025em !important;
}


/* --- v160: Roboto Light for large editorial type --- */
.section-page-title,
.page-hero h1.section-page-title{
  font-weight:300 !important;
  letter-spacing:-.035em !important;
}

body.page-about .about-copy{
  font-weight:300 !important;
  letter-spacing:-.015em !important;
}


/* --- v161: 20% smaller large editorial type --- */
.section-page-title,
.page-hero h1.section-page-title{
  font-size:clamp(43px,4.8vw,72px) !important;
}

body.page-about .about-copy{
  font-size:clamp(22px,2.56vw,38px) !important;
}

@media(max-width:800px){
  .section-page-title,
  .page-hero h1.section-page-title{
    font-size:clamp(37px,9.6vw,56px) !important;
  }

  body.page-about .about-copy{
    font-size:clamp(22px,5.6vw,32px) !important;
  }
}


/* --- v162: About copy matches Resume role titles exactly --- */
body.page-about .about-copy{
  font-size:clamp(27px,3.2vw,48px) !important;
  font-weight:400 !important;
  line-height:.98 !important;
  letter-spacing:-.045em !important;
}

@media(max-width:800px){
  body.page-about .about-copy{
    font-size:clamp(27px,3.2vw,48px) !important;
  }
}


/* --- v163: About body copy — project-description scale --- */
body.page-about .about-copy{
  font-size:23.4px !important;
  font-weight:400 !important;
  line-height:1.45 !important;
  letter-spacing:normal !important;
}

@media(max-width:800px){
  body.page-about .about-copy{
    font-size:20px !important;
    line-height:1.45 !important;
  }
}


/* --- v164: Resume title spacing matches Work page --- */
body.page-resume .resume-page{
  padding-top:20px !important;
}
body.page-resume .resume-title-block{
  padding-top:0 !important;
}

@media(max-width:600px){
  body.page-resume .resume-page{
    padding-top:18px !important;
  }
  body.page-resume .resume-title-block{
    padding-top:0 !important;
  }
}


/* --- v165: Resume title breathing room --- */
body.page-resume .resume-page{
  padding-top:34px !important;
}
body.page-resume .resume-title-block{
  padding-top:0 !important;
}

@media(max-width:600px){
  body.page-resume .resume-page{
    padding-top:28px !important;
  }
}


/* --- v166: homepage simplified + role beside name --- */
body.home-hero-page .home-brand-role{
  position:absolute;
  top:10px;
  left:132px;
  font-size:10px;
  font-weight:400;
  line-height:1;
  letter-spacing:.035em;
  text-transform:none;
  white-space:nowrap;
  color:#fff;
}
body.home-hero-page header.is-scrolled .home-brand-role,
body.home-hero-page .menu-state:checked ~ header .home-brand-role{
  color:#fff;
}
@media(max-width:800px){
  body.home-hero-page .home-brand-role{
    top:9px;
    left:118px;
    font-size:9px;
  }
}


/* --- v167: homepage logo + space before footer --- */
body.home-hero-page .home-logo-link{
  display:block;
  line-height:0;
}
body.home-hero-page .home-logo{
  display:block;
  width:auto;
  height:14px;
  filter:brightness(0) invert(1);
}
body.home-hero-page .home-brand-role{
  left:116px;
}
body.home-hero-page main{
  padding-bottom:48px !important;
}
@media(max-width:800px){
  body.home-hero-page .home-logo{height:13px;}
  body.home-hero-page .home-brand-role{left:106px;}
  body.home-hero-page main{padding-bottom:36px !important;}
}


/* --- v168: homepage descriptor moves to footer --- */
body.home-hero-page .home-brand-role{
  display:none !important;
}


/* --- v169: larger homepage logo without changing header geometry --- */
body.home-hero-page .home-logo{
  height:20px !important;
  transform:translateY(-3px);
  transform-origin:left center;
}

@media(max-width:800px){
  body.home-hero-page .home-logo{
    height:18px !important;
    transform:translateY(-2.5px);
  }
}


/* --- v170: homepage logo 70% larger --- */
body.home-hero-page .home-logo{
  height:34px !important;
  transform:translateY(-10px) !important;
}

@media(max-width:800px){
  body.home-hero-page .home-logo{
    height:31px !important;
    transform:translateY(-9px) !important;
  }
}


/* --- v171: logo 20% larger + align top with Menu --- */
body.home-hero-page .home-logo{
  height:41px !important;
  transform:translateY(-6px) !important;
}

@media(max-width:800px){
  body.home-hero-page .home-logo{
    height:37px !important;
    transform:translateY(-5px) !important;
  }
}


/* --- v172: name left, logo right --- */
body.home-hero-page .home-name{
  top:10px !important;
  left:20px !important;
  font-size:10px !important;
  font-weight:400 !important;
  line-height:1 !important;
  margin-top: 2px !important;
  letter-spacing:0 !important;
  text-transform:uppercase !important;
  color:#fff !important;
}

body.home-hero-page .home-logo-right{
  position:absolute;
  top:4px;
  right:20px;
  left:auto;
  height:41px !important;
  width:auto;
  transform:none !important;
  filter:brightness(0) invert(1);
  z-index:3;
}

@media(max-width:800px){
  body.home-hero-page .home-name{
    top:9px !important;
    left:14px !important;
    font-size:9px !important;
  }

  body.home-hero-page .home-logo-right{
    top:3px;
    right:14px;
    height:37px !important;
    transform:none !important;
  }
}


/* --- v173: homepage name exactly matches MENU typography --- */
body.home-hero-page .home-name{
  top:10px !important;
  left:20px !important;
  font-family:"Roboto",Arial,Helvetica,sans-serif !important;
  font-size:10px !important;
  font-weight:400 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  text-transform:uppercase !important;
  text-decoration:underline !important;
  text-underline-offset:1px !important;
  color:#fff !important;
}

@media(max-width:800px){
  body.home-hero-page .home-name{
    top:9px !important;
    left:14px !important;
    font-size:9px !important;
  }
}


/* --- v174: lighter, daintier homepage name --- */
body.home-hero-page .home-name{
  font-weight:300 !important;
  letter-spacing:.01em !important;
  text-decoration:none !important;
}


/* HOMEPAGE NAME — match MENU typography */
body.home-hero-page .home-name{
  font-family:"Roboto",Arial,Helvetica,sans-serif !important;
  font-size:10px !important;
  font-weight:400 !important;
  line-height:1 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
}


/* HOMEPAGE NAME — uses the exact MENU typography; only position/behavior differ */
body.home-hero-page header .menu-toggle.home-name-static{
  left:20px !important;
  right:auto !important;
  transform:none !important;
  text-decoration:none !important;
  cursor:default !important;
  pointer-events:none !important;
  visibility:visible !important;
}

body.home-hero-page .menu-state:checked ~ header .menu-toggle.home-name-static{
  visibility:visible !important;
}

@media(max-width:800px){
  body.home-hero-page header .menu-toggle.home-name-static{
    left:14px !important;
  }
}

/* --- Case studies v1 --- */
.case-studies-page{padding:0 0 100px}
.case-studies-intro{padding:90px 0 56px}
.case-studies-intro h1{margin:0;font-size:clamp(68px,10vw,150px);line-height:.8;letter-spacing:-.07em;text-transform:uppercase}
.case-study-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:46px 18px}
.case-study-card{display:block;min-width:0}
.case-study-thumb{aspect-ratio:16/10;background:#ddd;overflow:hidden;position:relative}
.case-study-meta{margin-top:10px}
.case-study-kicker{font-size:9px;line-height:1.2;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}
.case-study-name-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px;font-size:16px;line-height:1.15}
.case-study-title{font-weight:500;letter-spacing:-.015em}
.case-study-subtitle{color:rgba(17,17,17,.48)}
.case-study-card:not(.is-coming-soon) .case-study-thumb{transition:opacity .18s ease}
.case-study-card:not(.is-coming-soon):hover .case-study-thumb,.case-study-card:not(.is-coming-soon):focus-visible .case-study-thumb{opacity:.78}
.case-study-card.is-coming-soon{opacity:.36}
.case-study-thumb-empty{display:flex;align-items:center;justify-content:center;border:1px solid rgba(17,17,17,.18);background:transparent;font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.case-study-thumb img{width:100%;height:100%;display:block;object-fit:cover}
.case-study-thumb-figma{background:#e6e4df;display:grid;place-items:center;padding:0}
.cs-library-window{width:84%;height:78%;background:#f8f8f7;border:1px solid #111;position:relative;padding:11% 4% 4% 19%}
.cs-library-top{position:absolute;left:0;right:0;top:0;height:11%;border-bottom:1px solid #111}
.cs-library-window:before{content:"";position:absolute;left:0;top:11%;bottom:0;width:16%;border-right:1px solid #111;background:#d5d4d0}
.cs-library-grid{height:100%;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:5px}
.cs-library-grid i{display:block;background:#aaa}.cs-library-grid i:nth-child(2n){background:#c6c1b5}.cs-library-grid i:nth-child(3n){background:#777}

/* case study detail */
body.case-study-detail-page main{padding-top:70px}
body.case-study-detail-page header.is-scrolled{background:#000 !important;color:#fff !important;border-bottom-color:transparent}
body.case-study-detail-page header.is-scrolled .brand,body.case-study-detail-page header.is-scrolled .menu-toggle{color:#fff !important}
.cs-detail{padding-bottom:0}
.cs-hero{padding-top:82px;padding-bottom:46px}
.cs-kicker,.cs-section-label{font-size:10px;text-transform:uppercase;letter-spacing:.12em}
.cs-hero h1{font-size:clamp(54px,8.6vw,136px);line-height:.84;letter-spacing:-.065em;margin:18px 0 38px;font-weight:500}
.cs-hero-bottom{border-top:1px solid #111;padding-top:12px;display:flex;justify-content:space-between;gap:30px;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.cs-visual-hero{width:100%;aspect-ratio:16/7;background:#d6d4cf;position:relative;display:grid;place-items:center;padding:6%}
.cs-visual-label{position:absolute;left:18px;bottom:14px;font-size:9px;text-transform:uppercase;letter-spacing:.08em;opacity:.55}
.cs-mock-window{width:72%;height:76%;background:#f8f8f7;border:1px solid #111;position:relative;padding:8% 3% 3% 18%}
.cs-mock-toolbar{position:absolute;left:0;right:0;top:0;height:10%;border-bottom:1px solid #111}
.cs-mock-sidebar{position:absolute;left:0;top:10%;bottom:0;width:15%;border-right:1px solid #111;background:#c7c6c2}
.cs-mock-canvas{height:100%;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(2,1fr);gap:5px}.cs-mock-canvas i{background:#aaa;display:block}.cs-mock-canvas i:nth-child(3n){background:#777}.cs-mock-canvas i:nth-child(4n){background:#d5cdbf}
.cs-two-col{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(220px,.65fr);gap:10vw;padding-top:72px;padding-bottom:86px}
.cs-intro-copy{font-size:clamp(24px,2.6vw,40px);line-height:1.08;letter-spacing:-.03em;margin:16px 0 0;max-width:980px}
.cs-role-copy{font-size:12px;line-height:1.65;text-transform:uppercase;letter-spacing:.06em;margin:16px 0 0}
.cs-section{padding-top:76px;padding-bottom:88px;border-top:1px solid #111}
.cs-section h2,.cs-impact h2{font-size:clamp(42px,6.4vw,96px);line-height:.9;letter-spacing:-.055em;font-weight:500;margin:18px 0 30px;max-width:1200px}
.cs-section-copy{max-width:820px;font-size:17px;line-height:1.5;margin:0 0 44px}
.cs-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:18px;margin-top:48px}.cs-flow-node{min-height:150px;border:1px solid #111;padding:20px;display:flex;flex-direction:column;justify-content:space-between}.cs-flow-node b{font-size:clamp(22px,2.5vw,38px);letter-spacing:-.03em}.cs-flow-node span{font-size:10px;text-transform:uppercase;letter-spacing:.08em}.cs-flow-arrow{font-size:34px}.cs-flow-break{text-align:center;min-width:90px}.cs-flow-break span{font-size:56px;line-height:1}.cs-flow-break small{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.08em;margin-top:5px}
.cs-statement{background:#111;color:#fff;padding:92px 0 100px}.cs-statement h2{font-size:clamp(64px,10vw,156px);line-height:.82;letter-spacing:-.07em;font-weight:400;margin:18px 0 30px}.cs-statement p{font-size:clamp(20px,2vw,30px);line-height:1.2;max-width:760px;margin:0}
.cs-source-diagram{margin-top:58px;display:grid;grid-template-columns:minmax(250px,.8fr) minmax(320px,1.2fr);gap:70px;align-items:center}.cs-source-core{aspect-ratio:1/1;border-radius:50%;background:#111;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}.cs-source-core span,.cs-source-core small{text-transform:uppercase;letter-spacing:.09em;font-size:9px}.cs-source-core b{font-size:clamp(28px,3vw,50px);line-height:.9;letter-spacing:-.04em;margin:8px 0}.cs-channel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.cs-channel-grid div{border-top:1px solid #111;padding:18px 0 36px;font-size:clamp(20px,2vw,32px);letter-spacing:-.025em}
.cs-compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}.cs-compare article{border-top:2px solid #111;padding-top:14px;min-height:430px;display:flex;flex-direction:column}.cs-compare-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em}.cs-compare h3{font-size:clamp(30px,4vw,60px);line-height:.95;letter-spacing:-.045em;margin:18px 0}.cs-compare p{font-size:15px;line-height:1.5;max-width:620px}.cs-mini-flow{margin-top:auto;padding-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:7px}.cs-mini-flow span,.cs-mini-flow strong{border:1px solid #111;padding:10px 12px;font-size:10px;text-transform:uppercase;letter-spacing:.06em}.cs-mini-flow strong{background:#111;color:#fff}.cs-mini-flow b{font-weight:400}
.cs-steps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:42px;border-top:1px solid #111;border-left:1px solid #111}.cs-steps article{min-height:235px;border-right:1px solid #111;border-bottom:1px solid #111;padding:18px;display:flex;flex-direction:column}.cs-steps article>span{font-size:10px}.cs-steps h3{font-size:clamp(26px,3vw,46px);letter-spacing:-.035em;margin:auto 0 8px}.cs-steps p{font-size:13px;line-height:1.4;max-width:330px;margin:0}
.cs-screenshot-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:42px}.cs-shot{aspect-ratio:4/3;background:#d6d4cf;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}.cs-shot span{font-size:9px;text-transform:uppercase;letter-spacing:.1em;opacity:.55}.cs-shot b{font-size:18px;margin-top:8px;font-weight:400}
.cs-impact{background:#111;color:#fff;padding:92px 0 100px}.cs-impact-grid{border-top:1px solid rgba(255,255,255,.65);display:grid;grid-template-columns:repeat(3,1fr);margin-top:46px}.cs-impact-grid>div{padding:20px 26px 54px 0;border-right:1px solid rgba(255,255,255,.35)}.cs-impact-grid>div+div{padding-left:26px}.cs-impact-grid>div:last-child{border-right:0}.cs-impact-grid b{font-size:clamp(26px,3vw,44px);display:block;letter-spacing:-.03em}.cs-impact-grid span{display:block;font-size:13px;line-height:1.45;margin-top:12px;max-width:330px}.cs-impact-note{max-width:880px;font-size:17px;line-height:1.5;margin:48px 0 0}
.cs-bottom-nav{display:flex;justify-content:space-between;gap:20px;padding-top:24px;padding-bottom:24px;font-size:10px;text-transform:uppercase;letter-spacing:.08em}

@media(max-width:800px){
  .case-study-list{grid-template-columns:1fr;row-gap:34px}.case-studies-intro{padding:65px 0 38px}
  .cs-hero{padding-top:48px;padding-bottom:30px}.cs-hero h1{font-size:clamp(48px,14vw,86px);margin-bottom:28px}.cs-hero-bottom{display:block;line-height:1.8}.cs-year{opacity:.55}
  .cs-visual-hero{aspect-ratio:4/3;padding:8%}.cs-mock-window{width:90%;height:74%}
  .cs-two-col{grid-template-columns:1fr;gap:44px;padding-top:52px;padding-bottom:60px}.cs-intro-copy{font-size:26px}
  .cs-section{padding-top:56px;padding-bottom:64px}.cs-section-copy{font-size:15px}
  .cs-flow{grid-template-columns:1fr;gap:10px}.cs-flow-arrow{transform:rotate(90deg);text-align:center}.cs-flow-break{min-width:0}.cs-flow-break span{font-size:42px}.cs-flow-node{min-height:110px}
  .cs-statement{padding:70px 0}.cs-statement h2{font-size:clamp(64px,18vw,110px)}
  .cs-source-diagram{grid-template-columns:1fr;gap:36px}.cs-source-core{width:min(72vw,360px);margin:auto}.cs-channel-grid{grid-template-columns:1fr 1fr}
  .cs-compare{grid-template-columns:1fr;gap:56px}.cs-compare article{min-height:0}.cs-mini-flow{margin-top:22px}
  .cs-steps{grid-template-columns:1fr 1fr}.cs-steps article{min-height:190px}.cs-screenshot-grid{grid-template-columns:1fr}
  .cs-impact{padding:70px 0}.cs-impact-grid{grid-template-columns:1fr}.cs-impact-grid>div,.cs-impact-grid>div+div{border-right:0;border-bottom:1px solid rgba(255,255,255,.35);padding:22px 0 34px}.cs-impact-grid>div:last-child{border-bottom:0}.cs-bottom-nav{display:block;line-height:2}.cs-bottom-nav span{display:block;opacity:.5}
}
@media(max-width:500px){.cs-steps{grid-template-columns:1fr}.cs-channel-grid{grid-template-columns:1fr}}

/* Case study — quieter editorial treatment */
.cs-hero{padding-top:68px;padding-bottom:38px}
.cs-hero h1{font-size:clamp(42px,6.2vw,92px);line-height:.92;letter-spacing:-.05em;margin:14px 0 30px}
.cs-visual-hero{aspect-ratio:16/6.5;background:#e2e0dc;padding:5%}
.cs-two-col{padding-top:58px;padding-bottom:68px;gap:8vw}
.cs-intro-copy{font-size:clamp(20px,2vw,30px);line-height:1.18;max-width:860px}
.cs-section{padding-top:58px;padding-bottom:68px}
.cs-section h2,.cs-impact h2{font-size:clamp(30px,4.1vw,60px);line-height:.98;letter-spacing:-.04em;margin:14px 0 24px;max-width:950px}
.cs-section-copy{font-size:15px;max-width:760px;margin-bottom:34px}
.cs-flow{margin-top:34px}.cs-flow-node{min-height:118px}.cs-flow-node b{font-size:clamp(18px,2vw,28px)}
.cs-flow-break span{font-size:42px}
.cs-statement{background:transparent;color:#111;padding:58px 0 68px;border-top:1px solid #111}
.cs-statement h2{font-size:clamp(36px,5vw,72px);line-height:.95;letter-spacing:-.045em;font-weight:500;margin:14px 0 18px}
.cs-statement p{font-size:16px;line-height:1.45;max-width:700px}
.cs-source-diagram{margin-top:40px;grid-template-columns:minmax(220px,.65fr) minmax(320px,1.35fr);gap:60px}
.cs-source-core{border-radius:0;aspect-ratio:auto;min-height:190px;background:transparent;color:#111;border:1px solid #111}
.cs-source-core b{font-size:clamp(24px,2.6vw,38px)}
.cs-channel-grid div{padding:14px 0 26px;font-size:clamp(17px,1.7vw,25px)}
.cs-compare{margin-top:30px;gap:28px}.cs-compare article{min-height:350px;border-top:1px solid #111}.cs-compare h3{font-size:clamp(24px,3vw,42px);line-height:1;margin:14px 0}.cs-compare p{font-size:14px}
.cs-steps{margin-top:32px}.cs-steps article{min-height:190px}.cs-steps h3{font-size:clamp(22px,2.4vw,34px)}
.cs-screenshot-grid{margin-top:30px}.cs-shot{background:#e2e0dc}
.cs-impact{background:transparent;color:#111;padding:58px 0 68px;border-top:1px solid #111}
.cs-impact-grid{border-top:1px solid #111;margin-top:32px}.cs-impact-grid>div{border-right:1px solid rgba(17,17,17,.35);padding-bottom:36px}.cs-impact-grid b{font-size:clamp(22px,2.4vw,32px)}
.cs-impact-note{font-size:15px;margin-top:34px;max-width:800px}
@media(max-width:700px){.cs-hero{padding-top:44px}.cs-hero h1{font-size:clamp(40px,12vw,68px)}.cs-statement{padding:52px 0}.cs-statement h2{font-size:clamp(38px,12vw,64px)}.cs-source-core{width:auto;margin:0}.cs-impact{padding:56px 0}}

/* Case study — quiet editorial treatment */
.cs-subtle{padding-bottom:0}
.cs-simple-hero{padding-top:72px;padding-bottom:34px}
.cs-simple-kicker,.cs-simple-type,.cs-simple-label{font-size:11px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;margin:0}
.cs-simple-kicker,.cs-simple-type{opacity:.62}
.cs-simple-hero h1{font-size:clamp(38px,5vw,72px);line-height:1;letter-spacing:-.04em;font-weight:400;max-width:900px;margin:12px 0 22px}
.cs-simple-image{padding-top:10px;padding-bottom:72px}
.cs-simple-placeholder{width:100%;aspect-ratio:16/7;background:#f1f1ef;display:flex;align-items:center;justify-content:center;color:#777;font-size:11px;letter-spacing:.02em}
.cs-simple-intro{display:grid;grid-template-columns:minmax(0,2fr) minmax(180px,.7fr);gap:clamp(50px,10vw,150px);padding-bottom:86px}
.cs-simple-intro>div>p{font-size:clamp(20px,2.25vw,30px);line-height:1.28;letter-spacing:-.025em;max-width:820px;margin:0;font-weight:400}
.cs-simple-intro aside span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;opacity:.55}
.cs-simple-intro aside p{font-size:13px;line-height:1.65;margin:12px 0 0}
.cs-simple-section{border-top:1px solid #d8d8d5;padding-top:18px;padding-bottom:78px}
.cs-simple-label{opacity:.55;margin-bottom:25px}
.cs-simple-copy{max-width:780px;font-size:17px;line-height:1.55;margin:0 0 18px}
.cs-simple-section h2{font-size:clamp(28px,3.2vw,46px);font-weight:400;letter-spacing:-.035em;line-height:1.05;margin:0 0 22px}
.cs-simple-flow{display:flex;align-items:center;gap:18px;margin-top:46px;font-size:14px}
.cs-simple-flow span{border-bottom:1px solid #111;padding:0 0 6px;min-width:110px}
.cs-simple-flow i{font-style:normal;opacity:.45}.cs-simple-flow .cs-gap{font-size:19px;margin:0 8px;opacity:.65}
.cs-simple-before-after{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,8vw,120px);max-width:1000px}
.cs-simple-before-after span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;opacity:.55}
.cs-simple-before-after p{font-size:18px;line-height:1.5;margin:12px 0 0;max-width:430px}
.cs-simple-image-small{padding-top:0;padding-bottom:82px}.cs-simple-image-small .cs-simple-placeholder{aspect-ratio:16/6}
.cs-simple-process{max-width:850px}
.cs-simple-process p{display:grid;grid-template-columns:38px 1fr;gap:12px;margin:0;padding:13px 0;border-bottom:1px solid #e1e1df;font-size:15px;line-height:1.5}
.cs-simple-process p:first-child{border-top:1px solid #e1e1df}
.cs-simple-process span{font-size:11px;opacity:.5;padding-top:3px}
.cs-simple-last{padding-bottom:90px}
.cs-subtle .cs-bottom-nav{border-top:1px solid #d8d8d5;padding-top:16px;margin-top:0}
@media(max-width:700px){.cs-simple-hero{padding-top:46px;padding-bottom:28px}.cs-simple-image{padding-bottom:52px}.cs-simple-intro{grid-template-columns:1fr;gap:38px;padding-bottom:62px}.cs-simple-section{padding-bottom:58px}.cs-simple-flow{gap:10px;flex-wrap:wrap}.cs-simple-flow span{min-width:auto}.cs-simple-before-after{grid-template-columns:1fr;gap:40px}.cs-simple-image-small{padding-bottom:60px}}

/* Case study — extra minimal */
.cs-minimal .cs-simple-hero{padding-top:64px;padding-bottom:26px}
.cs-minimal .cs-simple-kicker,.cs-minimal .cs-simple-type,.cs-minimal .cs-simple-label{font-size:10px;letter-spacing:.045em;text-transform:none;opacity:.48}
.cs-minimal .cs-simple-hero h1{font-size:clamp(34px,4.3vw,60px);line-height:1.04;letter-spacing:-.035em;max-width:760px;margin:10px 0 14px}
.cs-minimal .cs-simple-image{padding-top:6px;padding-bottom:60px}
.cs-minimal .cs-simple-placeholder{background:#f6f6f4;color:rgba(17,17,17,.35);font-size:10px}
.cs-minimal-intro{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(220px,.8fr);gap:clamp(40px,8vw,110px);padding-bottom:72px}
.cs-minimal-intro>p:first-child{font-size:clamp(18px,1.8vw,24px);line-height:1.42;letter-spacing:-.015em;max-width:760px;margin:0}
.cs-minimal-role{font-size:13px;line-height:1.6;margin:0;color:rgba(17,17,17,.72)}
.cs-minimal-role span{display:block;font-size:10px;letter-spacing:.045em;color:rgba(17,17,17,.45);margin-bottom:8px}
.cs-minimal-section{padding-top:0;padding-bottom:66px;border-top:0}
.cs-minimal-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,8vw,120px);max-width:980px}
.cs-minimal-grid>div{border-top:1px solid rgba(17,17,17,.12);padding-top:12px}
.cs-minimal-grid p:not(.cs-simple-label){font-size:15px;line-height:1.55;max-width:420px;margin:9px 0 0}
.cs-minimal .cs-simple-section h2,.cs-minimal .cs-minimal-section h2{font-size:clamp(24px,2.6vw,38px);line-height:1.1;letter-spacing:-.025em;margin:0 0 16px;font-weight:400}
.cs-minimal .cs-simple-copy,.cs-minimal-workflow>p:last-child{font-size:15px;line-height:1.6;max-width:720px;margin:0}
.cs-minimal .cs-simple-image-small{padding-top:0;padding-bottom:68px}
.cs-minimal-workflow{max-width:none}
.cs-minimal .cs-simple-last{padding-bottom:76px}
.cs-minimal .cs-bottom-nav{border-top:1px solid rgba(17,17,17,.12);padding-top:14px}
@media(max-width:700px){.cs-minimal .cs-simple-hero{padding-top:42px}.cs-minimal-intro{grid-template-columns:1fr;gap:28px;padding-bottom:54px}.cs-minimal-grid{grid-template-columns:1fr;gap:34px}.cs-minimal-section{padding-bottom:52px}.cs-minimal .cs-simple-image{padding-bottom:48px}.cs-minimal .cs-simple-image-small{padding-bottom:52px}}


/* Case study image carousel — matches project navigation */
.cs-case-carousel{position:relative;width:100%;aspect-ratio:16/7;background:#f6f6f4;overflow:hidden}
.cs-case-slide{position:absolute;inset:0;opacity:0;pointer-events:none}
.cs-case-slide.is-active{opacity:1;pointer-events:auto}
.cs-case-slide .cs-simple-placeholder{width:100%;height:100%;aspect-ratio:auto}
.cs-case-carousel .project-nav{z-index:3}
.cs-case-carousel .project-count{z-index:3;color:#111}
.cs-enter-section h2{font-size:clamp(19px,1.9vw,27px)!important;letter-spacing:-.015em!important;margin-bottom:12px!important}
.cs-enter-section strong{font-weight:500}

/* --- Case study title: align with landing-page title / MENU start --- */
body.case-study-detail-page .cs-simple-hero h1{
  margin-left:50% !important;
  margin-right:0 !important;
  text-align:left !important;
  transform:translateX(-10px);
  max-width:none !important;
}
@media(max-width:700px){
  body.case-study-detail-page .cs-simple-hero h1{
    margin-left:0 !important;
    transform:none;
  }
}


/* --- Case study v2: LP title spacing + project-scale carousel arrows --- */

/* Match the Case Studies landing-page title's vertical rhythm and exact
   left-edge alignment beneath MENU. */
body.case-study-detail-page main{
  padding-top:34px !important;
}
body.case-study-detail-page .cs-simple-hero{
  padding-top:20px !important;
  padding-bottom:28px !important;
}
body.case-study-detail-page .cs-simple-hero .section-page-title{
  margin-left:50% !important;
  margin-right:0 !important;
  text-align:left !important;
  transform:translateX(-10px) !important;
  max-width:calc(50% + 10px) !important;
}

/* Give the arrow buttons room to live beside the carousel rather than on top
   of the screenshot area. */
body.case-study-detail-page .cs-simple-image{
  overflow:visible !important;
}
body.case-study-detail-page .cs-case-carousel{
  overflow:visible !important;
}

/* Exact project-page arrow artwork sizing. */
body.case-study-detail-page .cs-case-carousel .project-nav{
  top:50% !important;
  width:58px !important;
  height:58px !important;
  z-index:20 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  overflow:visible !important;
}
body.case-study-detail-page .cs-case-carousel .project-nav img{
  display:block !important;
  width:46px !important;
  max-width:none !important;
  height:auto !important;
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
}

/* Previous points left; next points right. */
body.case-study-detail-page .cs-case-carousel .project-nav.prev{
  left:-64px !important;
  transform:translateY(-50%) !important;
}
body.case-study-detail-page .cs-case-carousel .project-nav.prev img{
  transform:rotate(180deg) !important;
}
body.case-study-detail-page .cs-case-carousel .project-nav.next{
  right:-64px !important;
  transform:translateY(-50%) !important;
}
body.case-study-detail-page .cs-case-carousel .project-nav.next img{
  transform:none !important;
}

/* Counter remains quiet and centered beneath the image. */
body.case-study-detail-page .cs-case-carousel .project-count{
  bottom:14px !important;
  color:#111 !important;
}

@media(max-width:800px){
  body.case-study-detail-page main{
    padding-top:32px !important;
  }
  body.case-study-detail-page .cs-simple-hero{
    padding-top:18px !important;
    padding-bottom:24px !important;
  }
  body.case-study-detail-page .cs-simple-hero .section-page-title{
    margin-left:0 !important;
    max-width:none !important;
    transform:none !important;
  }

  /* Keep controls reachable on small screens instead of pushing them beyond
     the viewport edge. */
  body.case-study-detail-page .cs-case-carousel .project-nav{
    width:46px !important;
    height:46px !important;
  }
  body.case-study-detail-page .cs-case-carousel .project-nav img{
    width:36px !important;
  }
  body.case-study-detail-page .cs-case-carousel .project-nav.prev{
    left:8px !important;
  }
  body.case-study-detail-page .cs-case-carousel .project-nav.next{
    right:8px !important;
  }
}


/* --- Case study v3: combine intro + ownership + solution copy --- */
body.case-study-detail-page .cs-combined-intro{
  padding-top:0 !important;
  padding-bottom:66px !important;
}
body.case-study-detail-page .cs-combined-intro .cs-simple-copy + .cs-simple-copy{
  margin-top:14px !important;
}


/* --- Case study v4: intro matches Resume role-title typography --- */
body.case-study-detail-page .cs-combined-intro h2,
body.case-study-detail-page .cs-combined-intro .cs-simple-copy{
  max-width:1200px !important;
  font-size:clamp(27px,3.2vw,48px) !important;
  font-weight:400 !important;
  line-height:.98 !important;
  letter-spacing:-.045em !important;
}

body.case-study-detail-page .cs-combined-intro h2{
  margin:0 0 22px !important;
}

body.case-study-detail-page .cs-combined-intro .cs-simple-copy{
  margin:0 !important;
}

body.case-study-detail-page .cs-combined-intro .cs-simple-copy + .cs-simple-copy{
  margin-top:22px !important;
}

@media(max-width:800px){
  body.case-study-detail-page .cs-combined-intro h2,
  body.case-study-detail-page .cs-combined-intro .cs-simple-copy{
    font-size:clamp(27px,7vw,40px) !important;
  }
}


/* --- v177: rebuilt universal nav (name / MENU / logo) --- */
body header nav{
  position:relative !important;
}

/* Name has its own class now, so it cannot inherit MENU's centered positioning. */
body header .site-name{
  position:absolute !important;
  top:10px !important;
  left:20px !important;
  right:auto !important;
  transform:none !important;
  margin:0 !important;
  padding:0 !important;
  font-family:"Roboto",Arial,Helvetica,sans-serif !important;
  font-size:10px !important;
  font-weight:400 !important;
  line-height:1 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  color:#111 !important;
  z-index:4 !important;
}

/* MENU remains browser-centered. */
body header .menu-toggle{
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
}

/* Logo is independently pinned to the right. */
body header .site-logo{
  position:absolute !important;
  top:3px !important;
  right:20px !important;
  left:auto !important;
  width:auto !important;
  height:28px !important;
  display:block !important;
  transform:none !important;
  filter:none !important;
  z-index:4 !important;
}

/* White identity treatment on black/dark nav states. */
body.project-detail-page header .site-name,
body.home-hero-page header .site-name,
body header.is-scrolled .site-name,
body .menu-state:checked ~ header .site-name{
  color:#fff !important;
}

body.project-detail-page header .site-logo,
body.home-hero-page header .site-logo,
body header.is-scrolled .site-logo,
body .menu-state:checked ~ header .site-logo{
  filter:brightness(0) invert(1) !important;
}

/* Keep name and logo visible when the fullscreen menu opens. */
body .menu-state:checked ~ header .site-name,
body .menu-state:checked ~ header .site-logo{
  visibility:visible !important;
  opacity:1 !important;
}

/* Narrow screens: preserve MENU in the center and logo on the right.
   Hide the name before it can collide with the centered MENU. */
@media(max-width:560px){
  body header .site-name{
    display:none !important;
  }

  body header .site-logo{
    top:4px !important;
    right:10px !important;
    height:23px !important;
  }
}

@media(min-width:561px) and (max-width:800px){
  body header .site-name{
    top:9px !important;
    left:14px !important;
    font-size:9px !important;
  }

  body header .site-logo{
    top:3px !important;
    right:14px !important;
    height:26px !important;
  }
}


/* --- v178: logo moves from top nav into fullscreen menu --- */
body header .site-logo{
  display:none !important;
}

/* Large LN logo beneath Contact / Social in the open menu. */
.menu-dropdown-logo{
  position:absolute;
  left:calc(50% - 18px);
  top:445px;
  width:min(260px, calc(100vw - 48px));
  height:auto;
  pointer-events:none;
}

.menu-dropdown-logo img{
  display:block;
  width:100%;
  height:auto;
  filter:brightness(0) invert(1);
}

@media(max-width:800px){
  .menu-dropdown-logo{
    left:24px;
    top:445px;
    width:min(220px, calc(100vw - 48px));
  }
}

@media(max-width:480px){
  .menu-dropdown-logo{
    top:455px;
    width:min(190px, calc(100vw - 48px));
  }
}

/* --- v179: visible logo inside fullscreen menu --- */
.menu-overlay .menu-dropdown-logo{
  position:absolute !important;
  left:44px !important;
  top:440px !important;
  width:240px !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:10 !important;
  pointer-events:none !important;
}
.menu-overlay .menu-dropdown-logo img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  filter:brightness(0) invert(1) !important;
}
@media(max-width:480px){
  .menu-overlay .menu-dropdown-logo{
    left:24px !important;
    top:455px !important;
    width:180px !important;
  }
}


/* --- v180: dropdown logo correctly nested + slightly smaller --- */
.menu-overlay .menu-dropdown-logo{
  position:absolute !important;
  left:44px !important;
  top:435px !important;
  width:175px !important;
  height:auto !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:10 !important;
  pointer-events:none !important;
}

.menu-overlay .menu-dropdown-logo img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  filter:brightness(0) invert(1) !important;
}

@media(max-width:480px){
  .menu-overlay .menu-dropdown-logo{
    left:24px !important;
    top:450px !important;
    width:145px !important;
  }
}


/* --- v181: visually align Laura Newman with centered MENU --- */
body header .site-name{
  top:12px !important;
}

@media(min-width:561px) and (max-width:800px){
  body header .site-name{
    top:11px !important;
  }
}


/* --- v182: align Resume + Case Studies title-to-content spacing with Work --- */
body .resume-title-block{
  padding-bottom:18px !important;
}

body .resume-page > .resume-section:first-of-type{
  padding-top:0 !important;
}

body .case-studies-intro{
  padding-bottom:18px !important;
}

body .case-study-list{
  padding-top:0 !important;
}


/* --- v183: make Resume + Case Studies LP title spacing match Work --- */
/* Work remains untouched; these two pages inherit its visual top rhythm explicitly. */

body .resume-page{
  padding-top:34px !important;
}

body .resume-title-block{
  padding-top:18px !important;
  padding-bottom:24px !important;
}

body .resume-title-block .section-page-title{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

body .case-studies-page{
  padding-top:34px !important;
}

body .case-studies-intro{
  padding-top:18px !important;
  padding-bottom:24px !important;
}

body .case-studies-intro .section-page-title{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* Keep first content immediately after the standardized title block. */
body .resume-page > .resume-section:first-of-type,
body .case-study-list{
  padding-top:0 !important;
}


/* --- v184: Resume + Case Studies use the exact About Me LP hero structure --- */
/* Neutralize legacy page-specific top spacing. */
body .resume-page,
body .case-studies-page{
  padding-top:0 !important;
}

body .resume-page > .compact-page-hero,
body .case-studies-page > .compact-page-hero{
  padding:20px 0 30px !important;
}

body .resume-page > .resume-section:first-of-type,
body .case-studies-page > .case-study-list{
  padding-top:0 !important;
}

@media(max-width:600px){
  body .resume-page > .compact-page-hero,
  body .case-studies-page > .compact-page-hero{
    padding:18px 0 26px !important;
  }
}


/* --- v185: restore normal LP top offset for Resume + Case Studies --- */
/* About Me gets 70px from the global main rule before its 20px hero padding.
   Resume and Case Studies are themselves the <main>, so their page classes had
   been wiping that 70px out. Restore it explicitly so all three align. */
body .resume-page,
body .case-studies-page{
  padding-top:70px !important;
}

body .resume-page > .compact-page-hero,
body .case-studies-page > .compact-page-hero{
  padding-top:20px !important;
  padding-bottom:30px !important;
}

@media(max-width:600px){
  body .resume-page,
  body .case-studies-page{
    padding-top:70px !important;
  }

  body .resume-page > .compact-page-hero,
  body .case-studies-page > .compact-page-hero{
    padding-top:18px !important;
    padding-bottom:26px !important;
  }
}

/* v186 — menu is the homepage */
body.menu-home-page{margin:0!important;min-height:100vh!important;background:#000!important;color:#fff!important;overflow:hidden!important;}
body.menu-home-page header{position:fixed!important;inset:0 0 auto 0!important;height:34px!important;background:#000!important;color:#fff!important;z-index:20!important;border:0!important;}
body.menu-home-page header .site-name{color:#fff!important;top:12px!important;}
body.menu-home-page .menu-home-static{position:fixed!important;inset:0!important;background:#000!important;color:#fff!important;z-index:10!important;}
body.menu-home-page .menu-home-static .menu-inner{display:block!important;min-height:100vh!important;padding:0!important;}
body.menu-home-page .menu-home-static .menu-links{
 position:absolute!important;top:76px!important;left:calc(50% - 18px)!important;
 width:min(520px,calc(100vw - 48px))!important;margin:0!important;
 display:flex!important;flex-direction:column!important;align-items:flex-start!important;text-align:left!important;
}
body.menu-home-page .menu-home-static .menu-links a{
 display:block!important;width:max-content!important;color:#fff!important;
 font-size:clamp(38px,3vw,50px)!important;line-height:1.04!important;
 letter-spacing:-.045em!important;font-weight:400!important;
}
body.menu-home-page .menu-home-static .menu-contact{
 position:absolute!important;left:calc(50% - 18px)!important;top:374px!important;
 width:min(520px,calc(100vw - 48px))!important;display:grid!important;
 grid-template-columns:max-content max-content!important;gap:52px!important;
}
body.menu-home-page .menu-home-static .menu-dropdown-logo{
 position:absolute!important;left:44px!important;top:435px!important;width:175px!important;
 display:block!important;visibility:visible!important;opacity:1!important;
}
body.menu-home-page .menu-home-static .menu-dropdown-logo img{
 display:block!important;width:100%!important;height:auto!important;filter:brightness(0) invert(1)!important;
}
@media(max-width:800px){
 body.menu-home-page .menu-home-static .menu-links{left:44px!important;top:76px!important;}
 body.menu-home-page .menu-home-static .menu-contact{left:44px!important;top:374px!important;}
}
@media(max-width:480px){
 body.menu-home-page .menu-home-static .menu-links{left:24px!important;top:70px!important;width:calc(100vw - 48px)!important;}
 body.menu-home-page .menu-home-static .menu-contact{left:24px!important;top:340px!important;width:calc(100vw - 48px)!important;gap:28px!important;}
 body.menu-home-page .menu-home-static .menu-dropdown-logo{left:24px!important;top:440px!important;width:145px!important;}
}

/* v187 — Laura Newman is the universal home link */
body header a.site-name{
  text-decoration:none !important;
  cursor:pointer !important;
  pointer-events:auto !important;
}


/* --- v188: index uses the exact same fullscreen-menu layout --- */
body.menu-home-page{
  margin:0 !important;
  min-height:100vh !important;
  background:#000 !important;
  color:#fff !important;
  overflow:hidden !important;
}

/* Keep the universal name/header treatment, but on black. */
body.menu-home-page header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:4000 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  pointer-events:none !important;
}

body.menu-home-page header .site-name{
  color:#fff !important;
  pointer-events:auto !important;
}

/* Permanently show the standard menu overlay on the homepage. */
body.menu-home-page .menu-home-overlay{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  z-index:3000 !important;
  background:#000 !important;
  color:#fff !important;
}

/* Ensure the static homepage inherits the exact same positions/sizes
   as the normal opened menu; no custom homepage placement. */
body.menu-home-page .menu-home-overlay .menu-links{
  top:76px !important;
  left:calc(50% - 18px) !important;
  transform:none !important;
  width:min(520px, calc(100vw - 48px)) !important;
}

body.menu-home-page .menu-home-overlay .menu-contact{
  left:calc(50% - 18px) !important;
  top:374px !important;
  bottom:auto !important;
  transform:none !important;
  width:min(520px, calc(100vw - 48px)) !important;
}

body.menu-home-page .menu-home-overlay .menu-dropdown-logo{
  left:44px !important;
  top:435px !important;
  width:175px !important;
}

/* With Home removed, remap the electric hover colors to the same destinations. */
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1):hover,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1):focus-visible{
  color:#F5FF58 !important;
}
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):hover,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):focus-visible{
  color:#58FFD1 !important;
}
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3):hover,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3):focus-visible{
  color:#FF5878 !important;
}
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4):hover,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4):focus-visible{
  color:#FF7E58 !important;
}

@media(max-width:800px){
  body.menu-home-page .menu-home-overlay .menu-links{
    top:68px !important;
    left:24px !important;
    width:calc(100vw - 48px) !important;
  }

  body.menu-home-page .menu-home-overlay .menu-contact{
    left:24px !important;
    right:24px !important;
    width:auto !important;
    top:330px !important;
  }

  body.menu-home-page .menu-home-overlay .menu-dropdown-logo{
    left:24px !important;
    top:450px !important;
    width:145px !important;
  }
}


/* --- v189: index HELLO + matching arrow hover colors --- */
body.menu-home-page .index-hello{
  position:absolute !important;
  top:11px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  margin:0 !important;
  padding:0 !important;
  color:#fff !important;
  font-family:"Roboto",Arial,Helvetica,sans-serif !important;
  font-size:10px !important;
  font-weight:400 !important;
  line-height:1 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  text-decoration:underline !important;
  text-underline-offset:2px !important;
  pointer-events:none !important;
}

/* Index arrows should inherit the exact hovered destination color. */
body.menu-home-page .menu-home-overlay .menu-links a::before{
  background:none !important;
  background-color:currentColor !important;
  -webkit-mask:url("img/arrow_long_black.svg") center / contain no-repeat !important;
  mask:url("img/arrow_long_black.svg") center / contain no-repeat !important;
  filter:none !important;
}

/* Keep the same destination colors as the menu words. */
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1):hover,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1):focus-visible{
  color:#ff58bd !important;
}
body.menu-home-page .me#f58bdnu-home-overlay .menu-links a:nth-child(2):hover,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):focus-visible{
  color:#58FFD1 !important;
}
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3):hover,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3):focus-visible{
  color:#FF5878 !important;
}
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4):hover,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4):focus-visible{
  color:#FF7E58 !important;
}

@media(max-width:800px){
  body.menu-home-page .index-hello{
    top:10px !important;
    font-size:9px !important;
  }
}


/* --- v190: case-study CLOSE fix + index arrows + no footer --- */

/* Footer is retired site-wide. */
body footer{
  display:none !important;
}

/* Figma / case-study detail menu: make CLOSE render above every header layer. */
body.case-study-detail-page .menu-state:checked ~ .menu-overlay{
  z-index:3000 !important;
}
body.case-study-detail-page .menu-state:checked ~ header{
  z-index:4000 !important;
  background:transparent !important;
  pointer-events:none !important;
}
body.case-study-detail-page .menu-state:checked ~ header .site-name{
  color:#fff !important;
  pointer-events:auto !important;
}
body.case-study-detail-page .menu-state:checked ~ header .menu-toggle{
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
body.case-study-detail-page .menu-overlay .menu-close{
  position:fixed !important;
  top:11px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  z-index:5000 !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  color:#fff !important;
  pointer-events:auto !important;
}

/* Index arrows: use the actual white PNG and color it to match each word.
   This is more reliable in Firefox than the mask-based version. */
body.menu-home-page .menu-home-overlay .menu-links a::before{
  background:url("img/arrow_long_black.svg") center / contain no-repeat !important;
  background-color:transparent !important;
  -webkit-mask:none !important;
  mask:none !important;
}

/* Work — acid green */
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1):hover::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1):focus-visible::before{
  filter:brightness(0) saturate(100%) invert(91%) sepia(93%) saturate(1072%) hue-rotate(16deg) brightness(108%) contrast(104%) !important;
}
/* Resume — blue */
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):hover::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):focus-visible::before{
  filter:brightness(0) saturate(100%) invert(43%) sepia(95%) saturate(3360%) hue-rotate(222deg) brightness(101%) contrast(105%) !important;
}
/* Case Studies — purple */
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3):hover::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3):focus-visible::before{
  filter:brightness(0) saturate(100%) invert(57%) sepia(76%) saturate(3060%) hue-rotate(229deg) brightness(102%) contrast(101%) !important;
}
/* About Me — orange */
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4):hover::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4):focus-visible::before{
  filter:brightness(0) saturate(100%) invert(48%) sepia(99%) saturate(3551%) hue-rotate(359deg) brightness(102%) contrast(105%) !important;
}

@media(max-width:800px){
  body.case-study-detail-page .menu-overlay .menu-close{
    top:10px !important;
  }
}

/* v191 — real Case Studies thumbnail */
.case-study-thumb.case-study-thumb-figma > img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
}


/* --- v192: constrain real case-study carousel images to the carousel --- */
body.case-study-detail-page .cs-case-carousel{
  position:relative !important;
  width:100% !important;
  aspect-ratio:16 / 7 !important;
  overflow:hidden !important;
  background:#f6f6f4 !important;
}

body.case-study-detail-page .cs-case-slide{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
}

body.case-study-detail-page .cs-case-slide img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
}

body.case-study-detail-page .cs-case-slide:not(.is-active){
  display:none !important;
}

body.case-study-detail-page .cs-case-slide.is-active{
  display:block !important;
}


/* --- v193: restore case-study carousel arrows outside the image frame --- */
body.case-study-detail-page .cs-simple-image{
  overflow:visible !important;
}

body.case-study-detail-page .cs-case-carousel{
  overflow:visible !important;
}

/* Keep the screenshot itself clipped to the carousel frame. */
body.case-study-detail-page .cs-case-slide{
  overflow:hidden !important;
}

/* Restore arrow visibility/placement. */
body.case-study-detail-page .cs-case-carousel .project-nav{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:30 !important;
}

body.case-study-detail-page .cs-case-carousel .project-nav.prev{
  left:-64px !important;
}

body.case-study-detail-page .cs-case-carousel .project-nav.next{
  right:-64px !important;
}

@media(max-width:800px){
  body.case-study-detail-page .cs-case-carousel .project-nav.prev{
    left:8px !important;
  }

  body.case-study-detail-page .cs-case-carousel .project-nav.next{
    right:8px !important;
  }
}

/* v194 — case study detail mirrors Work project pages */
body.case-study-detail-page main.cs-project-layout{padding-top:0!important;margin:0!important}
body.case-study-detail-page .cs-project-layout>.cs-simple-image{width:100%!important;max-width:none!important;padding:0!important;margin:0!important}
body.case-study-detail-page .cs-project-layout .cs-case-carousel{width:100%!important;aspect-ratio:auto!important;min-height:0!important;background:var(--paper)!important}
body.case-study-detail-page .cs-project-layout .cs-case-slide{position:static!important;display:none!important;width:100%!important;height:auto!important;overflow:hidden!important}
body.case-study-detail-page .cs-project-layout .cs-case-slide.is-active{display:flex!important;align-items:center!important;justify-content:center!important}
body.case-study-detail-page .cs-project-layout .cs-case-slide img{width:auto!important;max-width:100%!important;height:auto!important;max-height:calc(100vh - 145px)!important;object-fit:contain!important;margin:0 auto!important}
body.case-study-detail-page .cs-project-copy{width:100%!important;max-width:none!important;margin:0!important;padding:34px var(--site-gutter) 0!important}
body.case-study-detail-page .cs-project-details{grid-template-columns:minmax(220px,1fr) minmax(0,2fr)!important;column-gap:64px!important;align-items:start!important;margin-top:30px!important;margin-bottom:0!important;padding:24px 0 34px!important;border-top:1px solid var(--ink)!important;border-bottom:0!important}
body.case-study-detail-page .cs-project-longform,body.case-study-detail-page .cs-project-longform p{max-width:900px!important;font-size:23.4px!important;line-height:1.45!important;text-transform:none!important;letter-spacing:normal!important}
body.case-study-detail-page .cs-project-section{border-top:1px solid var(--ink);padding:28px 0 44px}
body.case-study-detail-page .cs-project-section .cs-minimal-grid{max-width:none!important}
body.case-study-detail-page .cs-project-section .cs-minimal-grid>div{border-top:0!important;padding-top:0!important}
body.case-study-detail-page .cs-project-section .cs-minimal-grid p:not(.cs-simple-label),body.case-study-detail-page .cs-project-workflow>p:last-child{max-width:680px!important;font-size:15px!important;line-height:1.55!important;margin-top:9px!important}
body.case-study-detail-page .cs-project-workflow>p:last-child{max-width:900px!important}
body.case-study-detail-page .cs-project-copy .project-bottom-nav{border-top:1px solid var(--ink)!important}
body.case-study-detail-page .cs-project-layout .cs-case-carousel .project-nav.prev{left:22px!important}
body.case-study-detail-page .cs-project-layout .cs-case-carousel .project-nav.next{right:22px!important}
@media(max-width:800px){
 body.case-study-detail-page .cs-project-details{grid-template-columns:1fr!important;gap:28px!important}
 body.case-study-detail-page .cs-project-longform,body.case-study-detail-page .cs-project-longform p{font-size:20px!important}
 body.case-study-detail-page .cs-project-layout .cs-case-carousel .project-nav.prev{left:10px!important}
 body.case-study-detail-page .cs-project-layout .cs-case-carousel .project-nav.next{right:10px!important}
}


/* --- v195: visual workflow + case-study bottom-nav cleanup --- */
body.case-study-detail-page .cs-workflow-visual{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  gap:14px;
  align-items:stretch;
  margin-top:24px;
}

body.case-study-detail-page .cs-workflow-step{
  min-height:180px;
  padding:18px;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(17,17,17,.16);
}

body.case-study-detail-page .cs-workflow-step .cs-workflow-num{
  font-size:10px;
  line-height:1;
  letter-spacing:.08em;
  margin-bottom:auto;
  opacity:.55;
}

body.case-study-detail-page .cs-workflow-step strong{
  display:block;
  font-size:18px;
  line-height:1.05;
  letter-spacing:-.02em;
  font-weight:500;
  margin-top:32px;
}

body.case-study-detail-page .cs-workflow-step p{
  margin:10px 0 0 !important;
  max-width:none !important;
  font-size:13px !important;
  line-height:1.45 !important;
}

body.case-study-detail-page .cs-workflow-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  opacity:.45;
}

/* Menu-hover palette */
body.case-study-detail-page .cs-workflow-pink{background:#FF58BD;}
body.case-study-detail-page .cs-workflow-green{background:#F5FF58;}
body.case-study-detail-page .cs-workflow-blue{background:#58FFD1;color:#fff;}
body.case-study-detail-page .cs-workflow-purple{background:#FF5878;}

/* Bottom nav: match Work project-page spacing and separation. */
body.case-study-detail-page .cs-case-bottom-nav{
  width:100% !important;
  min-height:48px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:24px !important;
  border-top:1px solid var(--ink) !important;
  margin:0 !important;
  padding:0 !important;
}

body.case-study-detail-page .cs-case-bottom-nav .project-back,
body.case-study-detail-page .cs-case-bottom-nav .project-next{
  display:flex !important;
  align-items:center !important;
  width:auto !important;
  min-height:48px !important;
  height:48px !important;
  margin:0 !important;
  padding:0 !important;
  font-size:11px !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  letter-spacing:.09em !important;
}

body.case-study-detail-page .cs-case-bottom-nav .project-next{
  margin-left:auto !important;
  text-align:right !important;
  opacity:.5;
}

@media(max-width:900px){
  body.case-study-detail-page .cs-workflow-visual{
    grid-template-columns:1fr 1fr;
    gap:12px;
  }

  body.case-study-detail-page .cs-workflow-arrow{
    display:none;
  }
}

@media(max-width:600px){
  body.case-study-detail-page .cs-workflow-visual{
    grid-template-columns:1fr;
  }

  body.case-study-detail-page .cs-workflow-step{
    min-height:150px;
  }

  body.case-study-detail-page .cs-case-bottom-nav{
    min-height:44px !important;
    gap:14px !important;
  }

  body.case-study-detail-page .cs-case-bottom-nav .project-back,
  body.case-study-detail-page .cs-case-bottom-nav .project-next{
    min-height:44px !important;
    height:44px !important;
    font-size:9px !important;
  }
}


/* --- v196: workflow refinements --- */
body.case-study-detail-page .cs-workflow-step{
  border:0 !important;
  color:#000 !important;
}

body.case-study-detail-page .cs-workflow-step *,
body.case-study-detail-page .cs-workflow-blue,
body.case-study-detail-page .cs-workflow-blue *{
  color:#000 !important;
}

body.case-study-detail-page .cs-workflow-arrow{
  opacity:1 !important;
}

body.case-study-detail-page .cs-workflow-arrow img{
  display:block !important;
  width:28px !important;
  height:auto !important;
  filter:none !important;
}

@media(max-width:900px){
  body.case-study-detail-page .cs-workflow-arrow{
    display:none !important;
  }
}


/* --- v197: brighter highlighter workflow palette --- */
body.case-study-detail-page .cs-workflow-pink{
  background:#FF58BD !important;
}
body.case-study-detail-page .cs-workflow-green{
  background:#F5FF58 !important;
}
body.case-study-detail-page .cs-workflow-blue{
  background:#58FFD1 !important;
}
body.case-study-detail-page .cs-workflow-purple{
  background:#FF5878 !important;
}


/* --- v198: universal Color Kit palette --- */
/* All site accent colors now come from the approved nine-color Color Kit. */
body.case-study-detail-page .cs-workflow-pink{background:#FF7EF8 !important;}
body.case-study-detail-page .cs-workflow-green{background:var(--duckling-fluff) !important;}
body.case-study-detail-page .cs-workflow-blue{background:var(--near-moon) !important;}
body.case-study-detail-page .cs-workflow-purple{background:#6AFF58 !important;}

/* --- v200: clean menu rollover arrows using the original arrow artwork --- */
/* One arrow only. The PNG is used as a mask so it takes on the exact same
   currentColor as each menu label without introducing a second CSS-drawn arrow. */
.menu-overlay .menu-links a::before,
body.menu-home-page .menu-home-overlay .menu-links a::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:50% !important;
  width:.72em !important;
  height:.72em !important;
  background-color:currentColor !important;
  background-image:none !important;
  -webkit-mask-image:url("img/arrow_long_black.svg") !important;
  mask-image:url("img/arrow_long_black.svg") !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
  -webkit-mask-position:center !important;
  mask-position:center !important;
  -webkit-mask-size:contain !important;
  mask-size:contain !important;
  filter:none !important;
  opacity:0 !important;
  transform:translate(-115%,-54%) !important;
  transition:opacity .14s ease, transform .18s ease !important;
}

.menu-overlay .menu-links a::after,
body.menu-home-page .menu-home-overlay .menu-links a::after{
  content:none !important;
  display:none !important;
}

.menu-overlay .menu-links a:hover::before,
.menu-overlay .menu-links a:focus-visible::before,
body.menu-home-page .menu-home-overlay .menu-links a:hover::before,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible::before{
  opacity:1 !important;
  background-color:currentColor !important;
  transform:translate(-115%,-54%) !important;
}

/* --- menu rollover arrows: use the site PNG asset as the source --- */
.menu-overlay .menu-links a::before,
body.menu-home-page .menu-home-overlay .menu-links a::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:50% !important;
  width:.72em !important;
  height:.72em !important;
  background:currentColor !important;
  -webkit-mask:url("img/arrow_long_black.svg") center / contain no-repeat !important;
  mask:url("img/arrow_long_black.svg") center / contain no-repeat !important;
  opacity:0 !important;
  transform:translate(-115%,-54%) !important;
  pointer-events:none !important;
  transition:opacity .14s ease !important;
}
.menu-overlay .menu-links a:hover::before,
.menu-overlay .menu-links a:focus-visible::before,
body.menu-home-page .menu-home-overlay .menu-links a:hover::before,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible::before{
  opacity:1 !important;
}

/* --- v202: definitive menu arrow fix ---
   Use the original PNG directly. Remove the later mask-based experiments that
   were preventing the arrow from rendering, then tint the white PNG to match
   each menu item's Color Kit rollover. */
.menu-overlay .menu-links a::before,
body.menu-home-page .menu-home-overlay .menu-links a::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:50% !important;
  width:.72em !important;
  height:.72em !important;
  display:block !important;
  background-color:transparent !important;
  background-image:url("img/arrow_long_black.svg") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  -webkit-mask:none !important;
  mask:none !important;
  opacity:0 !important;
  transform:translate(-115%,-50%) !important;
  pointer-events:none !important;
  transition:opacity .14s ease, transform .18s ease !important;
}

.menu-overlay .menu-links a:hover::before,
.menu-overlay .menu-links a:focus-visible::before,
body.menu-home-page .menu-home-overlay .menu-links a:hover::before,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible::before{
  opacity:1 !important;
  transform:translate(-115%,-50%) !important;
}

/* Tint the white PNG to the exact menu rollover family. */
.menu-overlay .menu-links a:nth-child(1)::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1)::before{
  filter:brightness(0) saturate(100%) invert(46.2%) sepia(54.4%) saturate(2099%) hue-rotate(-57.2deg) brightness(113.3%) contrast(109.3%) !important;
}
.menu-overlay .menu-links a:nth-child(2)::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2)::before{
  filter:brightness(0) saturate(100%) invert(87.9%) sepia(96%) saturate(4858%) hue-rotate(-31.3deg) brightness(196.7%) contrast(96.1%) !important;
}
.menu-overlay .menu-links a:nth-child(3)::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3)::before{
  filter:brightness(0) saturate(100%) invert(28.4%) sepia(41.4%) saturate(835%) hue-rotate(-59.4deg) brightness(166.9%) contrast(118.8%) !important;
}
.menu-overlay .menu-links a:nth-child(4)::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4)::before{
  filter:brightness(0) saturate(100%) invert(98.1%) sepia(60.5%) saturate(3061%) hue-rotate(131.5deg) brightness(168.1%) contrast(82%) !important;
}

/* --- v203: universal typography hierarchy ---
   Tiny Rollneck project pages are the source of truth.
   Align landing pages, Work cards, Case Studies, Resume and About to the
   same eyebrow / editorial heading / descriptor / section-label language. */

:root{
  --type-eyebrow-size:11px;
  --type-eyebrow-tracking:.12em;
  --type-descriptor-size:13px;
  --type-section-label-size:10px;
  --type-section-label-tracking:.10em;
  --type-muted:#777;
}

/* One landing-page title treatment everywhere. */
.section-page-title,
.page-hero h1.section-page-title,
.compact-page-hero .section-page-title{
  font-size:clamp(43px,4.8vw,72px) !important;
  font-weight:300 !important;
  line-height:.9 !important;
  letter-spacing:-.035em !important;
  text-transform:none !important;
  width:max-content !important;
  margin-left:50% !important;
  margin-right:0 !important;
  text-align:left !important;
}

/* Match the vertical rhythm of Work on all LPs without changing their layouts. */
body .work-page,
body .resume-page,
body .case-studies-page{
  padding-top:0 !important;
}
body .work-page > .wrap{
  padding-top:20px;
}
body .work-page > .wrap > .section-page-title{
  margin-bottom:30px !important;
}
body .resume-page > .compact-page-hero,
body .case-studies-page > .compact-page-hero,
body.page-about .compact-page-hero{
  padding:20px 0 30px !important;
}

/* Universal eyebrow / metadata language. */
.project-kicker,
.work-title,
.case-study-kicker,
.resume-role-meta,
.resume-kicker{
  font-size:var(--type-eyebrow-size) !important;
  line-height:1.35 !important;
  font-weight:400 !important;
  text-transform:uppercase !important;
  letter-spacing:var(--type-eyebrow-tracking) !important;
  color:#111 !important;
}

/* Universal quiet descriptor language. */
.project-descriptor,
.work-services,
.case-study-subtitle{
  font-size:var(--type-descriptor-size) !important;
  line-height:1.2 !important;
  font-weight:400 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
  color:var(--type-muted) !important;
}

/* Universal section labels: MY ROLE / EXPERIENCE / BEFORE / HOW IT WORKS. */
.project-details-grid h3,
.resume-section-heading,
.cs-simple-label,
.cs-section-label{
  font-size:var(--type-section-label-size) !important;
  line-height:1.25 !important;
  font-weight:400 !important;
  text-transform:uppercase !important;
  letter-spacing:var(--type-section-label-tracking) !important;
  color:#111 !important;
  opacity:1 !important;
}

/* Work LP: same three-step hierarchy as the project hero, scaled for cards. */
.work-name-line{
  display:block !important;
  font-size:inherit !important;
  line-height:inherit !important;
}
.work-title{
  display:block;
  margin:0 0 6px !important;
}
.work-subtitle{
  display:block;
  color:#111 !important;
  font-size:clamp(22px,2.1vw,32px) !important;
  font-weight:400 !important;
  line-height:1 !important;
  letter-spacing:-.035em !important;
}
.work-services{
  margin-top:8px !important;
}

/* Case Studies LP: use the same hierarchy as Work / project pages. */
.case-study-meta{
  margin-top:12px !important;
}
.case-study-kicker{
  margin:0 0 6px !important;
}
.case-study-name-line{
  display:block !important;
  font-size:inherit !important;
  line-height:inherit !important;
}
.case-study-title{
  display:block;
  color:#111 !important;
  font-size:clamp(22px,2.1vw,32px) !important;
  font-weight:400 !important;
  line-height:1 !important;
  letter-spacing:-.035em !important;
}
.case-study-subtitle{
  display:block;
  margin-top:8px;
}

/* Resume: retain the existing grid/layout, but use project-page typography DNA. */
.resume-section-heading{
  padding:18px 0 !important;
  border-bottom:1px solid var(--ink) !important;
}
.resume-role-meta{
  line-height:1.55 !important;
}
.resume-role-main h2{
  margin:0 0 14px !important;
  font-size:clamp(24px,3vw,46px) !important;
  font-weight:400 !important;
  line-height:.96 !important;
  letter-spacing:-.045em !important;
}
.resume-role-main p{
  font-size:15px !important;
  line-height:1.55 !important;
}
.resume-list-block p{
  font-size:15px !important;
  line-height:1.55 !important;
}

/* About uses the same editorial-heading family as Resume roles. */
body.page-about .about-copy{
  font-size:clamp(24px,3vw,46px) !important;
  font-weight:400 !important;
  line-height:1.04 !important;
  letter-spacing:-.04em !important;
}

/* Case-study detail already shares the project hero; standardize lower labels. */
body.case-study-detail-page .cs-simple-label{
  margin-bottom:9px !important;
}
body.case-study-detail-page .cs-project-section h2{
  font-weight:400;
  letter-spacing:-.035em;
}

@media(max-width:800px){
  .section-page-title,
  .page-hero h1.section-page-title,
  .compact-page-hero .section-page-title{
    font-size:clamp(37px,9.6vw,56px) !important;
  }
  .work-subtitle,
  .case-study-title{
    font-size:clamp(21px,6vw,29px) !important;
  }
  .resume-role-main h2,
  body.page-about .about-copy{
    font-size:clamp(24px,7vw,38px) !important;
  }
}

/* --- v204: project / case-study / resume alignment pass --- */
/* 1. Project narratives use the same description-column width as Case Studies. */
body.project-detail-page .project-details-grid .project-longform,
body.project-detail-page .project-details-grid .project-longform p{
  max-width:900px !important;
}

/* 2. Case-study detail pages use the same always-black, in-flow hero nav as Work projects. */
body.case-study-detail-page header,
body.case-study-detail-page header.is-scrolled{
  position:sticky !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  background:#000 !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:none !important;
}
body.case-study-detail-page header .wrap,
body.case-study-detail-page header.is-scrolled .wrap,
body.case-study-detail-page header nav,
body.case-study-detail-page header.is-scrolled nav{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  background:#000 !important;
}
body.case-study-detail-page header .site-name,
body.case-study-detail-page header .menu-toggle,
body.case-study-detail-page header.is-scrolled .site-name,
body.case-study-detail-page header.is-scrolled .menu-toggle{
  color:#fff !important;
}
body.case-study-detail-page main.cs-project-layout{
  padding-top:0 !important;
  margin-top:0 !important;
}
body.case-study-detail-page .cs-project-layout > .cs-simple-image,
body.case-study-detail-page .cs-project-layout .cs-case-carousel{
  margin-top:0 !important;
}

/* 3. Resume job titles use the exact editorial title scale of project/case-study heroes. */
body.page-resume .resume-role-main h2{
  font-size:clamp(24px,3.5vw,55px) !important;
  font-weight:400 !important;
  line-height:.9 !important;
  letter-spacing:-.055em !important;
}

@media(max-width:800px){
  body.page-resume .resume-role-main h2{
    font-size:clamp(28px,7vw,40px) !important;
  }
}

/* --- v205: use Resume job-title scale for project + case-study hero titles --- */
/* Restore Resume job titles to their original size. */
body.page-resume .resume-role-main h2{
  margin:0 0 14px !important;
  font-size:clamp(27px,3.2vw,48px) !important;
  font-weight:400 !important;
  line-height:.98 !important;
  letter-spacing:-.045em !important;
}

/* Project detail + Case Study detail titles now match Resume job titles. */
body.project-detail-page .project-title-line,
body.case-study-detail-page .project-title-line{
  font-size:clamp(27px,3.2vw,48px) !important;
  font-weight:400 !important;
  line-height:.98 !important;
  letter-spacing:-.045em !important;
}

@media(max-width:800px){
  body.page-resume .resume-role-main h2,
  body.project-detail-page .project-title-line,
  body.case-study-detail-page .project-title-line{
    font-size:clamp(27px,7vw,40px) !important;
    line-height:.98 !important;
  }
}


/* --- v206: Case Studies LP uses the exact Work LP title/header structure --- */
body.page-case-studies .case-studies-page > .wrap{
  padding-top:20px !important;
}
body.page-case-studies .case-studies-page > .wrap > .section-page-title{
  margin-bottom:30px !important;
}
body.page-case-studies .case-study-list{
  padding-top:0 !important;
}


/* --- v207: index role descriptor alignment --- */
body.menu-home-page .index-role{
  position:absolute !important;
  left:44px !important;
  top:394px !important;
  z-index:3500 !important;
  margin:0 !important;
  padding:0 !important;
  color:#fff !important;
  font-family:"Roboto",Arial,Helvetica,sans-serif !important;
  font-size:10px !important;
  font-weight:400 !important;
  line-height:1.45 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}

@media(max-width:800px){
  body.menu-home-page .index-role{
    left:24px !important;
    top:366px !important;
    max-width:calc(100vw - 48px) !important;
    white-space:normal !important;
  }
}


/* --- v209: homepage role descriptor — guaranteed visible and aligned with email --- */
body.menu-home-page > .index-role{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  position:fixed !important;
  left:44px !important;
  top:395px !important;
  z-index:4500 !important;
  margin:0 !important;
  padding:0 !important;
  color:#fff !important;
  font-family:"Roboto",Arial,Helvetica,sans-serif !important;
  font-size:10px !important;
  font-weight:400 !important;
  line-height:1.45 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  pointer-events:none !important;
}
@media(max-width:800px){
  body.menu-home-page > .index-role{
    left:24px !important;
    top:351px !important;
    max-width:calc(100vw - 48px) !important;
    white-space:normal !important;
  }
}

/* ==========================================================
   v215 — MENU COLOR CONTROL — EDIT THIS PART ONLY

   Uses YOUR designed arrow2short PNG artwork directly.
   No CSS-drawn arrow. No mask. No filter.

   Keep the text color + arrow artwork next to each other so
   you can experiment without hunting through the stylesheet.
   To make them match, use the same hex in the text value and
   in the arrow filename. To make them different, mix them.
   ========================================================== */

/* WORK */
.menu-overlay .menu-links a:nth-child(1),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1){
  --menu-text-color:#6AFF58;                                  /* word */
  --menu-arrow-image:url("img/arrow_long_black.svg");       /* designed arrow */
}

/* RESUME */
.menu-overlay .menu-links a:nth-child(2),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2){
  --menu-text-color:#58FFD1;                                  /* word */
  --menu-arrow-image:url("img/arrow_long_black.svg");       /* designed arrow */
}

/* CASE STUDIES */
.menu-overlay .menu-links a:nth-child(3),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3){
  --menu-text-color:#A858FF;                                  /* word */
  --menu-arrow-image:url("img/arrow_long_black.svg");       /* designed arrow */
}

/* ABOUT ME */
.menu-overlay .menu-links a:nth-child(4),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4){
  --menu-text-color:#FF58BD;                                  /* word */
  --menu-arrow-image:url("img/arrow_long_black.svg");       /* designed arrow */
}


/* ==========================================================
   v216 — DESIGNED ARROW ENGINE — LEAVE THIS PART ALONE
   ========================================================== */

/* Menu text uses the editable color above. */
.menu-overlay .menu-links a:nth-child(1):hover,
.menu-overlay .menu-links a:nth-child(1):focus-visible,
.menu-overlay .menu-links a:nth-child(2):hover,
.menu-overlay .menu-links a:nth-child(2):focus-visible,
.menu-overlay .menu-links a:nth-child(3):hover,
.menu-overlay .menu-links a:nth-child(3):focus-visible,
.menu-overlay .menu-links a:nth-child(4):hover,
.menu-overlay .menu-links a:nth-child(4):focus-visible,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1):hover,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1):focus-visible,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):hover,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):focus-visible,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3):hover,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3):focus-visible,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4):hover,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4):focus-visible{
  color:var(--menu-text-color) !important;
  opacity:1 !important;
}

/* Inner wrappers, if present, follow the link color. */
.menu-overlay .menu-links a:hover > div,
.menu-overlay .menu-links a:focus-visible > div,
.menu-overlay .menu-links a:hover > span,
.menu-overlay .menu-links a:focus-visible > span,
body.menu-home-page .menu-home-overlay .menu-links a:hover > div,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible > div,
body.menu-home-page .menu-home-overlay .menu-links a:hover > span,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible > span{
  color:inherit !important;
}

/* Use the actual arrow2short PNG as ::before. */
.menu-overlay .menu-links a:nth-child(1)::before,
.menu-overlay .menu-links a:nth-child(2)::before,
.menu-overlay .menu-links a:nth-child(3)::before,
.menu-overlay .menu-links a:nth-child(4)::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1)::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2)::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3)::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4)::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:auto !important;
  top:50% !important;
  width:.72em !important;
  height:.72em !important;
  display:block !important;

  background-color:transparent !important;
  background-image:var(--menu-arrow-image) !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;

  -webkit-mask:none !important;
  mask:none !important;
  filter:none !important;
  border:0 !important;

  opacity:0 !important;
  transform:translate(-115%,-50%) !important;
  pointer-events:none !important;
  transition:opacity .14s ease, transform .18s ease !important;
}

/* Reveal the designed arrow on rollover/focus. */
.menu-overlay .menu-links a:nth-child(1):hover::before,
.menu-overlay .menu-links a:nth-child(1):focus-visible::before,
.menu-overlay .menu-links a:nth-child(2):hover::before,
.menu-overlay .menu-links a:nth-child(2):focus-visible::before,
.menu-overlay .menu-links a:nth-child(3):hover::before,
.menu-overlay .menu-links a:nth-child(3):focus-visible::before,
.menu-overlay .menu-links a:nth-child(4):hover::before,
.menu-overlay .menu-links a:nth-child(4):focus-visible::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1):hover::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1):focus-visible::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):hover::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):focus-visible::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3):hover::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3):focus-visible::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4):hover::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4):focus-visible::before{
  opacity:1 !important;
}

/* Make sure the temporary CSS-drawn arrow head stays off. */
.menu-overlay .menu-links a:nth-child(1)::after,
.menu-overlay .menu-links a:nth-child(2)::after,
.menu-overlay .menu-links a:nth-child(3)::after,
.menu-overlay .menu-links a:nth-child(4)::after,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1)::after,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2)::after,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3)::after,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4)::after{
  content:none !important;
  display:none !important;
}

/* ==========================================================
   v217 — LN LOGO PALETTE HOVER
   White normally; on hover, cycle through the full Color Kit.
   Uses the existing logo artwork — no replacement image.
   ========================================================== */

/* The older logo rules intentionally disabled pointer events.
   Turn hover back on without changing the logo's placement. */
body .menu-overlay .menu-dropdown-logo,
body.menu-home-page .menu-home-overlay .menu-dropdown-logo,
body.menu-home-page .menu-home-static .menu-dropdown-logo{
  pointer-events:auto !important;
}

/* Keep the original artwork white at rest. The animated custom
   property lets the palette cycle win even over older !important
   filter declarations elsewhere in this stylesheet. */
body .menu-overlay .menu-dropdown-logo img,
body.menu-home-page .menu-home-overlay .menu-dropdown-logo img,
body.menu-home-page .menu-home-static .menu-dropdown-logo img{
  --logo-palette-filter:brightness(0) invert(1);
  filter:var(--logo-palette-filter) !important;
  transform-origin:center center;
  transition:transform .18s ease !important;
  pointer-events:none !important;
}

@media (hover:hover) and (pointer:fine){
  body .menu-overlay .menu-dropdown-logo:hover img,
  body.menu-home-page .menu-home-overlay .menu-dropdown-logo:hover img,
  body.menu-home-page .menu-home-static .menu-dropdown-logo:hover img{
    animation:ln-logo-palette-cycle 2.15s steps(1,end) infinite;
    transform:scale(1.035);
  }
}

/*
  Color Kit order:
  #58FFD1  Near Moon
  #58FF8C  Illicit Green
  #6AFF58  Screamin' Green
  #AFFF58  Inchworm
  #F5FF58  Duckling Fluff
  #FFC358  Orange Delight
  #FF7E58  Melon
  #FF5878  Warm Pink
  #FF58BD  Eosin Pink
*/
@keyframes ln-logo-palette-cycle{
  0%,11%{
    --logo-palette-filter:brightness(0) saturate(100%) invert(69.10%) sepia(36.13%) saturate(832.40%) hue-rotate(100.17deg) brightness(184.88%) contrast(57.82%);
  }
  11.1%,22%{
    --logo-palette-filter:brightness(0) saturate(100%) invert(72.56%) sepia(7.51%) saturate(3939.59%) hue-rotate(83.89deg) brightness(149.74%) contrast(64.86%);
  }
  22.1%,33%{
    --logo-palette-filter:brightness(0) saturate(100%) invert(93.55%) sepia(51.24%) saturate(1064.56%) hue-rotate(67.05deg) brightness(272.79%) contrast(16.92%);
  }
  33.1%,44%{
    --logo-palette-filter:brightness(0) saturate(100%) invert(68.94%) sepia(62.81%) saturate(474.07%) hue-rotate(56.46deg) brightness(148.29%) contrast(102.14%);
  }
  44.1%,55%{
    --logo-palette-filter:brightness(0) saturate(100%) invert(58.31%) sepia(12.67%) saturate(1678.27%) hue-rotate(42.08deg) brightness(168.81%) contrast(139.00%);
  }
  55.1%,66%{
    --logo-palette-filter:brightness(0) saturate(100%) invert(54.66%) sepia(68.82%) saturate(555.53%) hue-rotate(329.90deg) brightness(141.17%) contrast(125.03%);
  }
  66.1%,77%{
    --logo-palette-filter:brightness(0) saturate(100%) invert(56.19%) sepia(42.91%) saturate(1637.99%) hue-rotate(322.53deg) brightness(141.16%) contrast(38.22%);
  }
  77.1%,88%{
    --logo-palette-filter:brightness(0) saturate(100%) invert(46.19%) sepia(84.82%) saturate(690.82%) hue-rotate(306.79deg) brightness(123.20%) contrast(141.88%);
  }
  88.1%,100%{
    --logo-palette-filter:brightness(0) saturate(100%) invert(22.78%) sepia(43.39%) saturate(1717.02%) hue-rotate(280.94deg) brightness(247.37%) contrast(53.18%);
  }
}

/* Respect reduced-motion preferences: one palette color on hover,
   rather than continuously cycling. */
@media (prefers-reduced-motion:reduce){
  body .menu-overlay .menu-dropdown-logo:hover img,
  body.menu-home-page .menu-home-overlay .menu-dropdown-logo:hover img,
  body.menu-home-page .menu-home-static .menu-dropdown-logo:hover img{
    animation:none !important;
    --logo-palette-filter:brightness(0) saturate(100%) invert(69.10%) sepia(36.13%) saturate(832.40%) hue-rotate(100.17deg) brightness(184.88%) contrast(57.82%);
    transform:none !important;
  }
}

/* ==========================================================
   v218 — LAURA NEWMAN PALETTE HOVER
   Same Color Kit cycle as the LN logo hover.
   Normal header color remains unchanged until hover/focus.
   ========================================================== */

@media (hover:hover) and (pointer:fine){
  body header a.site-name:hover,
  body header a.site-name:focus-visible,
  body.menu-home-page header a.site-name:hover,
  body.menu-home-page header a.site-name:focus-visible,
  body.project-detail-page header a.site-name:hover,
  body.project-detail-page header a.site-name:focus-visible,
  body header.is-scrolled a.site-name:hover,
  body header.is-scrolled a.site-name:focus-visible,
  body .menu-state:checked ~ header a.site-name:hover,
  body .menu-state:checked ~ header a.site-name:focus-visible{
    --site-name-palette-color:#58FFD1;
    color:var(--site-name-palette-color) !important;
    -webkit-text-fill-color:#58FFD1;
    animation:ln-name-palette-cycle 2.15s steps(1,end) infinite;
  }
}

@keyframes ln-name-palette-cycle{
  0%,11%{
    --site-name-palette-color:#58FFD1;
    -webkit-text-fill-color:#58FFD1;
  }
  11.1%,22%{
    --site-name-palette-color:#58FF8C;
    -webkit-text-fill-color:#58FF8C;
  }
  22.1%,33%{
    --site-name-palette-color:#6AFF58;
    -webkit-text-fill-color:#6AFF58;
  }
  33.1%,44%{
    --site-name-palette-color:#AFFF58;
    -webkit-text-fill-color:#AFFF58;
  }
  44.1%,55%{
    --site-name-palette-color:#F5FF58;
    -webkit-text-fill-color:#F5FF58;
  }
  55.1%,66%{
    --site-name-palette-color:#FFC358;
    -webkit-text-fill-color:#FFC358;
  }
  66.1%,77%{
    --site-name-palette-color:#FF7E58;
    -webkit-text-fill-color:#FF7E58;
  }
  77.1%,88%{
    --site-name-palette-color:#FF5878;
    -webkit-text-fill-color:#FF5878;
  }
  88.1%,100%{
    --site-name-palette-color:#FF58BD;
    -webkit-text-fill-color:#FF58BD;
  }
}

@media (prefers-reduced-motion:reduce){
  body header a.site-name:hover,
  body header a.site-name:focus-visible,
  body.menu-home-page header a.site-name:hover,
  body.menu-home-page header a.site-name:focus-visible,
  body.project-detail-page header a.site-name:hover,
  body.project-detail-page header a.site-name:focus-visible,
  body header.is-scrolled a.site-name:hover,
  body header.is-scrolled a.site-name:focus-visible,
  body .menu-state:checked ~ header a.site-name:hover,
  body .menu-state:checked ~ header a.site-name:focus-visible{
    animation:none !important;
    --site-name-palette-color:#58FFD1;
    color:var(--site-name-palette-color) !important;
  }
}

/* ==========================================================
   v219 — MOBILE + CAROUSEL UX PASS
   ========================================================== */

/* Universal menu order is now Work / Case Studies / Resume / About Me.
   Keep each destination's existing palette attached to the right label. */
.menu-overlay .menu-links a:nth-child(1),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1){
  --menu-text-color:#6AFF58;
  --menu-arrow-image:url("img/arrow_long_black.svg");
}
.menu-overlay .menu-links a:nth-child(2),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2){
  --menu-text-color:#A858FF;
  --menu-arrow-image:url("img/arrow_long_black.svg");
}
.menu-overlay .menu-links a:nth-child(3),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3){
  --menu-text-color:#58FFD1;
  --menu-arrow-image:url("img/arrow_long_black.svg");
}
.menu-overlay .menu-links a:nth-child(4),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4){
  --menu-text-color:#FF58BD;
  --menu-arrow-image:url("img/arrow_long_black.svg");
}

/* Stable menu-arrow hover: reserve the arrow's hit area at rest instead of
   moving the anchor out from under the pointer. This removes hover jitter. */
.menu-overlay .menu-links a,
body.menu-home-page .menu-home-overlay .menu-links a{
  padding-left:1.15em !important;
  margin-left:-1.15em !important;
  transform:none !important;
  transition:color .14s ease, opacity .14s ease !important;
}
.menu-overlay .menu-links a::before,
body.menu-home-page .menu-home-overlay .menu-links a::before{
  left:0 !important;
  transform:none !important;
  transition:opacity .14s ease !important;
}
.menu-overlay .menu-links a:hover,
.menu-overlay .menu-links a:focus-visible,
body.menu-home-page .menu-home-overlay .menu-links a:hover,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible{
  padding-left:1.15em !important;
  margin-left:-1.15em !important;
  transform:none !important;
}
.menu-overlay .menu-links a:hover::before,
.menu-overlay .menu-links a:focus-visible::before,
body.menu-home-page .menu-home-overlay .menu-links a:hover::before,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible::before{
  transform:none !important;
}

/* Laura Newman stays visible at the upper left on phones, including while
   the fullscreen menu is open. */
@media(max-width:560px){
  body header .site-name{
    display:block !important;
    top:11px !important;
    left:14px !important;
    font-size:9px !important;
  }
}

body .menu-state:checked ~ header{
  z-index:4000 !important;
  background:transparent !important;
  pointer-events:none !important;
}
body .menu-state:checked ~ header .site-name{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  color:#fff !important;
  pointer-events:auto !important;
}
body .menu-state:checked ~ header .menu-toggle{
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
body .menu-overlay .menu-close{
  z-index:5000 !important;
}

/* Mobile menu gets the full viewport width instead of the desktop half-column.
   This prevents Case Studies from clipping off the right edge. */
@media(max-width:800px){
  .menu-overlay{
    min-height:100dvh !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
  }
  .menu-overlay .menu-links,
  body.menu-home-page .menu-home-overlay .menu-links{
    top:76px !important;
    left:24px !important;
    right:24px !important;
    transform:none !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
  }
  .menu-overlay .menu-links a,
  body.menu-home-page .menu-home-overlay .menu-links a{
    max-width:100% !important;
    font-size:clamp(34px,9.6vw,48px) !important;
    line-height:1.02 !important;
    white-space:nowrap !important;
  }
  .menu-overlay .menu-contact,
  body.menu-home-page .menu-home-overlay .menu-contact{
    left:24px !important;
    right:24px !important;
    top:320px !important;
    bottom:auto !important;
    width:auto !important;
    transform:none !important;
  }
  .menu-overlay .menu-dropdown-logo,
  body.menu-home-page .menu-home-overlay .menu-dropdown-logo{
    left:24px !important;
    top:435px !important;
    width:145px !important;
  }
}

@media(max-width:390px){
  .menu-overlay .menu-contact,
  body.menu-home-page .menu-home-overlay .menu-contact{
    grid-template-columns:1fr !important;
    gap:14px !important;
    top:310px !important;
  }
  .menu-overlay .menu-dropdown-logo,
  body.menu-home-page .menu-home-overlay .menu-dropdown-logo{
    top:455px !important;
    width:132px !important;
  }
}

/* Responsive pictures should completely fill the existing LP thumbnail frame. */
.work-thumb picture,
.case-study-thumb picture{
  display:block;
  width:100%;
  height:100%;
}
.work-thumb picture img,
.case-study-thumb picture img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Carousel controls now live directly below the media on both Work projects
   and Case Study detail pages. */
body.project-detail-page .project-hero-carousel,
body.case-study-detail-page .cs-case-carousel{
  overflow:visible !important;
  margin-bottom:56px !important;
  touch-action:pan-y pinch-zoom;
}
body.project-detail-page .project-slide,
body.case-study-detail-page .cs-case-slide{
  overflow:hidden !important;
}

body.project-detail-page .project-nav,
body.case-study-detail-page .cs-case-carousel .project-nav{
  top:calc(100% + 5px) !important;
  width:46px !important;
  height:38px !important;
  transform:none !important;
  z-index:30 !important;
}
body.project-detail-page .project-nav.prev,
body.case-study-detail-page .cs-case-carousel .project-nav.prev{
  left:var(--site-gutter,24px) !important;
  right:auto !important;
  transform:none !important;
}
body.project-detail-page .project-nav.next,
body.case-study-detail-page .cs-case-carousel .project-nav.next{
  right:var(--site-gutter,24px) !important;
  left:auto !important;
  transform:none !important;
}
body.project-detail-page .project-nav img,
body.case-study-detail-page .cs-case-carousel .project-nav img{
  width:37px !important; /* ~20% smaller than the prior 46px artwork */
}
body.project-detail-page .project-nav.prev img,
body.case-study-detail-page .cs-case-carousel .project-nav.prev img{
  transform:rotate(180deg) !important;
}
body.project-detail-page .project-nav.next img,
body.case-study-detail-page .cs-case-carousel .project-nav.next img{
  transform:none !important;
}
body.project-detail-page .project-count,
body.case-study-detail-page .cs-case-carousel .project-count{
  top:calc(100% + 18px) !important;
  bottom:auto !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  color:#111 !important;
  z-index:30 !important;
}

@media(max-width:800px){
  body.project-detail-page .project-hero-carousel,
  body.case-study-detail-page .cs-case-carousel{
    margin-bottom:50px !important;
  }
  body.project-detail-page .project-nav,
  body.case-study-detail-page .cs-case-carousel .project-nav{
    top:calc(100% + 4px) !important;
    width:40px !important;
    height:36px !important;
  }
  body.project-detail-page .project-nav.prev,
  body.case-study-detail-page .cs-case-carousel .project-nav.prev{
    left:14px !important;
  }
  body.project-detail-page .project-nav.next,
  body.case-study-detail-page .cs-case-carousel .project-nav.next{
    right:14px !important;
  }
  body.project-detail-page .project-nav img,
  body.case-study-detail-page .cs-case-carousel .project-nav img{
    width:29px !important; /* ~20% smaller than the prior 36px mobile artwork */
  }
  body.project-detail-page .project-count,
  body.case-study-detail-page .cs-case-carousel .project-count{
    top:calc(100% + 16px) !important;
  }
}

/* Active carousel images can be clicked/tapped to open a clean fullscreen view. */
body.project-detail-page .project-slide.is-active img,
body.case-study-detail-page .cs-case-slide.is-active img{
  cursor:zoom-in;
}
body.lightbox-open{
  overflow:hidden !important;
}
.media-lightbox{
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:56px 24px 24px;
  background:rgba(0,0,0,.96);
  color:#fff;
  touch-action:pinch-zoom;
}
.media-lightbox.is-open{
  display:flex;
}
.media-lightbox-stage{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:auto;
  touch-action:pinch-zoom;
}
.media-lightbox-stage img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}
.media-lightbox-close{
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  z-index:1;
  padding:0;
  border:0;
  background:transparent;
  color:#fff;
  font-family:"Roboto",Arial,Helvetica,sans-serif;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.11em;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}

/* Three-way footer nav: back / Back to Top / next. */
body.project-detail-page .project-bottom-nav,
body.case-study-detail-page .cs-case-bottom-nav{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
  align-items:center !important;
  gap:18px !important;
}
body.project-detail-page .project-bottom-nav .project-back,
body.case-study-detail-page .cs-case-bottom-nav .project-back{
  justify-self:start !important;
  margin:0 !important;
}
body.project-detail-page .project-bottom-nav .project-next,
body.case-study-detail-page .cs-case-bottom-nav .project-next{
  justify-self:end !important;
  margin:0 !important;
  text-align:right !important;
}
body .project-bottom-nav .back-to-top{
  justify-self:center !important;
  white-space:nowrap;
  font-family:"Roboto",Arial,Helvetica,sans-serif;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  text-transform:uppercase !important;
  letter-spacing:.11em !important;
  text-decoration:underline !important;
  text-underline-offset:2px !important;
}

@media(max-width:600px){
  body.project-detail-page .project-bottom-nav,
  body.case-study-detail-page .cs-case-bottom-nav{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
    gap:8px !important;
  }
  body.project-detail-page .project-bottom-nav .project-back,
  body.project-detail-page .project-bottom-nav .project-next,
  body.case-study-detail-page .cs-case-bottom-nav .project-back,
  body.case-study-detail-page .cs-case-bottom-nav .project-next{
    font-size:9px !important;
    line-height:1.2 !important;
    height:auto !important;
    min-height:44px !important;
  }
  body .project-bottom-nav .back-to-top{
    font-size:9px !important;
  }
}

/* v219 spacing follow-up: the new below-carousel control rail now occupies the
   space that used to be plain hero-to-copy padding. */
body.project-detail-page .project-copy,
body.case-study-detail-page .cs-project-copy{
  padding-top:10px !important;
}

body .project-bottom-nav .back-to-top{
  text-decoration-thickness:.5px !important;
  text-decoration-skip-ink:auto !important;
}

@media(max-width:800px){
  body.project-detail-page .project-copy,
  body.case-study-detail-page .cs-project-copy{
    padding-top:8px !important;
  }
}

/* ==========================================================
   v220 — HOVER + CAROUSEL DETAIL REFINEMENTS
   ========================================================== */

/* Menu rollover: keep the LINK'S hit box completely still. Only the visible
   word slides to the right, while the designed arrow pops into the word's
   original position. This keeps the older interaction without the jitter or
   the faint "ghost" arrows seen when moving quickly between rows. */
.menu-overlay .menu-links a,
body.menu-home-page .menu-home-overlay .menu-links a{
  position:relative !important;
  width:max-content !important;
  max-width:100% !important;
  padding-left:0 !important;
  margin-left:0 !important;
  transform:none !important;
  transition:color .12s ease, opacity .12s ease !important;
}

.menu-overlay .menu-links .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links .menu-link-text{
  display:inline-block !important;
  transform:translateX(0) !important;
  transition:transform .18s cubic-bezier(.2,.7,.2,1) !important;
  will-change:transform;
}

.menu-overlay .menu-links a::before,
body.menu-home-page .menu-home-overlay .menu-links a::before{
  left:0 !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  opacity:0 !important;
  transition:none !important;
}

.menu-overlay .menu-links a:hover,
.menu-overlay .menu-links a:focus-visible,
body.menu-home-page .menu-home-overlay .menu-links a:hover,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible{
  padding-left:0 !important;
  margin-left:0 !important;
  transform:none !important;
}

.menu-overlay .menu-links a:hover .menu-link-text,
.menu-overlay .menu-links a:focus-visible .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:hover .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible .menu-link-text{
  transform:translateX(1.15em) !important;
}

.menu-overlay .menu-links a:hover::before,
.menu-overlay .menu-links a:focus-visible::before,
body.menu-home-page .menu-home-overlay .menu-links a:hover::before,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible::before{
  opacity:1 !important;
  transform:translateY(-50%) !important;
}

/* Desktop: return the carousel arrows to the SIDES of the image, while
   keeping the newer smaller arrow size. The image count remains underneath. */
@media(min-width:801px){
  body.project-detail-page .project-nav,
  body.case-study-detail-page .cs-case-carousel .project-nav{
    top:50% !important;
    width:46px !important;
    height:46px !important;
    transform:translateY(-50%) !important;
  }

  body.project-detail-page .project-nav.prev,
  body.case-study-detail-page .cs-case-carousel .project-nav.prev{
    left:22px !important;
    right:auto !important;
    transform:translateY(-50%) !important;
  }

  body.project-detail-page .project-nav.next,
  body.case-study-detail-page .cs-case-carousel .project-nav.next{
    right:22px !important;
    left:auto !important;
    transform:translateY(-50%) !important;
  }

  body.project-detail-page .project-nav img,
  body.case-study-detail-page .cs-case-carousel .project-nav img{
    width:37px !important;
  }

  body.project-detail-page .project-count,
  body.case-study-detail-page .cs-case-carousel .project-count{
    top:calc(100% + 18px) !important;
    bottom:auto !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    color:#111 !important;
  }
}

/* Mobile intentionally keeps both arrows and the count under the carousel. */
@media(max-width:800px){
  body.project-detail-page .project-nav,
  body.case-study-detail-page .cs-case-carousel .project-nav{
    top:calc(100% + 4px) !important;
    transform:none !important;
  }
  body.project-detail-page .project-nav.prev,
  body.case-study-detail-page .cs-case-carousel .project-nav.prev{
    left:14px !important;
    right:auto !important;
    transform:none !important;
  }
  body.project-detail-page .project-nav.next,
  body.case-study-detail-page .cs-case-carousel .project-nav.next{
    right:14px !important;
    left:auto !important;
    transform:none !important;
  }
}

/* Back to Top should read as part of the footer navigation, not as a colored
   accent. Keep its underline treatment but inherit the same black as the
   neighboring footer type. */
body .project-bottom-nav .back-to-top,
body .resume-bottom-nav .back-to-top{
  color:#111 !important;
  opacity:1 !important;
}

/* Enlarged-image CLOSE uses the same 34px desktop / 32px mobile top bar and
   the exact MENU/CLOSE typography position. */
.media-lightbox{
  padding:34px 0 0 !important;
  background:#000 !important;
  box-sizing:border-box !important;
}
.media-lightbox::before{
  content:"";
  position:fixed;
  inset:0 0 auto 0;
  height:34px;
  background:#000;
  z-index:1;
  pointer-events:none;
}
.media-lightbox-stage{
  height:calc(100dvh - 34px) !important;
  padding:0 24px 24px !important;
  box-sizing:border-box !important;
}
.media-lightbox-close{
  top:11px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  z-index:2 !important;
  margin:0 !important;
  padding:0 !important;
  font-family:"Roboto",Arial,Helvetica,sans-serif !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  text-transform:uppercase !important;
  letter-spacing:.11em !important;
  text-decoration:underline !important;
  text-decoration-thickness:.5px !important;
  text-underline-offset:2px !important;
}
@media(max-width:800px){
  .media-lightbox{
    padding-top:32px !important;
  }
  .media-lightbox::before{
    height:32px;
  }
  .media-lightbox-stage{
    height:calc(100dvh - 32px) !important;
    padding:0 14px 14px !important;
  }
  .media-lightbox-close{
    top:10px !important;
  }
}

/* Resume gets the same centered Back to Top language at the very bottom. */
body.page-resume .resume-bottom-nav{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-top:1px solid var(--ink);
  margin-top:0;
}
body.page-resume .resume-bottom-nav .back-to-top{
  font-family:"Roboto",Arial,Helvetica,sans-serif;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.11em;
  text-decoration:underline;
  text-decoration-thickness:.5px;
  text-underline-offset:2px;
}
@media(max-width:600px){
  body.page-resume .resume-bottom-nav{
    min-height:44px;
  }
  body.page-resume .resume-bottom-nav .back-to-top{
    font-size:9px;
  }
}


/* ==========================================================
   v221 — MENU ARROW SCALE + CASE STUDY SUMMARY + FOOTER TYPE
   ========================================================== */

/* Menu rollover refinement: make the designed arrow ~20% larger while
   reducing the visible arrow-to-word gap by ~20%. The anchor itself remains
   stationary, so the smooth no-jitter behavior from v220 is preserved. */
.menu-overlay .menu-links a::before,
body.menu-home-page .menu-home-overlay .menu-links a::before{
  width:.864em !important;
  height:.864em !important;
}
.menu-overlay .menu-links a:hover .menu-link-text,
.menu-overlay .menu-links a:focus-visible .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:hover .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible .menu-link-text{
  transform:translateX(1.21em) !important;
}

/* Back to Top should use the exact same typographic voice and color as the
   adjacent footer navigation. Keep only the underline as its differentiator. */
body .project-bottom-nav .back-to-top,
body .resume-bottom-nav .back-to-top,
body.page-resume .resume-bottom-nav .back-to-top{
  color:#111 !important;
  opacity:1 !important;
  font-family:"Roboto",Arial,Helvetica,sans-serif !important;
  font-size:11px !important;
  font-weight:400 !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  letter-spacing:.09em !important;
  text-decoration:underline !important;
  text-decoration-thickness:.5px !important;
  text-underline-offset:2px !important;
}
@media(max-width:600px){
  body .project-bottom-nav .back-to-top,
  body .resume-bottom-nav .back-to-top,
  body.page-resume .resume-bottom-nav .back-to-top{
    font-size:9px !important;
  }
}

/* Digital-ad case study: the old HOW IT WORKS section repeated the Before /
   After story. Collapse the story into one cleaner three-column summary. */
body.case-study-detail-page .cs-process-summary-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:clamp(28px,4vw,64px) !important;
  max-width:none !important;
}
body.case-study-detail-page .cs-process-summary-grid > div{
  min-width:0;
}
body.case-study-detail-page .cs-process-summary-grid p:not(.cs-simple-label){
  max-width:none !important;
}
@media(max-width:800px){
  body.case-study-detail-page .cs-process-summary-grid{
    grid-template-columns:1fr !important;
    gap:30px !important;
  }
}

/* The case-study NEXT link is now an active destination rather than a
   coming-soon placeholder, so it should read at full strength. */
body.case-study-detail-page .cs-case-bottom-nav .project-next{
  opacity:1 !important;
  color:#111 !important;
}

/* ==========================================================
   v222 — MENU ARROW SIZE + TIGHTER GAP
   ========================================================== */

/* Grow the menu arrows another ~20%. Keeping the text shift at 1.21em means
   the larger arrow fills more of the reserved space, cutting the visible
   arrow-to-word gap by roughly 50% without changing the stable hover target. */
.menu-overlay .menu-links a::before,
body.menu-home-page .menu-home-overlay .menu-links a::before{
  width:1.037em !important;
  height:1.037em !important;
}

.menu-overlay .menu-links a:hover .menu-link-text,
.menu-overlay .menu-links a:focus-visible .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:hover .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible .menu-link-text{
  transform:translateX(1.21em) !important;
}

/* ==========================================================
   v223 — MENU ARROW: VISIBLY LARGER + MUCH TIGHTER GAP
   ========================================================== */

/* The arrow PNGs have visual breathing room inside their own canvas, so the
   previous percentage changes barely registered. Increase the rendered asset
   another ~20% and reduce the text travel itself, which is what actually
   controls the visible arrow-to-word gap. */
.menu-overlay .menu-links a::before,
body.menu-home-page .menu-home-overlay .menu-links a::before{
  width:1.244em !important;
  height:1.244em !important;
}

.menu-overlay .menu-links a:hover .menu-link-text,
.menu-overlay .menu-links a:focus-visible .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:hover .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible .menu-link-text{
  transform:translateX(1.08em) !important;
}

/* ==========================================================
   v224 — MENU ARROW SCALE / GAP + INDEX COLOR SYNC
   ========================================================== */

/* Make the rollover arrow another ~20% larger. */
.menu-overlay .menu-links a::before,
body.menu-home-page .menu-home-overlay .menu-links a::before{
  width:1.493em !important;
  height:1.493em !important;
}

/* Pull the word much closer to the arrow. This cuts the remaining visible
   gap by about half while leaving the link's hover hit-area stationary. */
.menu-overlay .menu-links a:hover .menu-link-text,
.menu-overlay .menu-links a:focus-visible .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:hover .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible .menu-link-text{
  transform:translateX(.92em) !important;
}

/* The homepage had older color-filter rules with extra :hover specificity,
   which could recolor the designed arrow independently from its word.
   Disable those filters here so EVERY menu uses the same paired word/PNG
   palette: Work green / Case Studies purple / Resume mint / About Me pink. */
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1):hover::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1):focus-visible::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):hover::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):focus-visible::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3):hover::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3):focus-visible::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4):hover::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4):focus-visible::before{
  filter:none !important;
  background-image:var(--menu-arrow-image) !important;
}

/* ==========================================================
   v225 — MENU ARROW SCALE
   ========================================================== */

/* Increase the rollover arrows by another ~30% while preserving the
   current tight arrow-to-word spacing and stable hover behavior. */
.menu-overlay .menu-links a::before,
body.menu-home-page .menu-home-overlay .menu-links a::before{
  width:1.941em !important;
  height:1.941em !important;
}

/* ==========================================================
   v226 — MOBILE THUMBNAIL CROP: FAVOR TOP EDGE
   ========================================================== */

/* When a desktop-format thumbnail is shown inside the shallower mobile card,
   anchor the crop to the top instead of centering it. This keeps faces / heads
   from being cut off. Custom mobile thumbnails are unaffected unless they need
   cropping, in which case they will also favor their top edge. */
@media(max-width:700px){
  /* Keep Work/project thumbnails top-aligned on mobile. */
  .work-thumb img{
    object-position:50% 0% !important;
  }

  /* Center Case Study thumbnails within their mobile frames. */
  .case-study-thumb img{
    object-position:50% 50% !important;
  }
}

/* ==========================================================
   v227 — ONE SVG ARROW + SVG LOGO
   ==========================================================
   MENU COLOR CONTROL — edit only the four values below.
   The menu word AND arrow use the same --menu-text-color.
   The arrow artwork is now one file: img/arrow_long_black.svg
   ========================================================== */

/* WORK */
.menu-overlay .menu-links a:nth-child(1),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1){
  --menu-text-color:#6AFF58;
}

/* CASE STUDIES */
.menu-overlay .menu-links a:nth-child(2),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2){
  --menu-text-color:#A858FF;
}

/* RESUME */
.menu-overlay .menu-links a:nth-child(3),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3){
  --menu-text-color:#58FFD1;
}

/* ABOUT ME */
.menu-overlay .menu-links a:nth-child(4),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4){
  --menu-text-color:#FF58BD;
}

/* The word and arrow always share the same color. */
.menu-overlay .menu-links a:hover,
.menu-overlay .menu-links a:focus-visible,
body.menu-home-page .menu-home-overlay .menu-links a:hover,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible{
  color:var(--menu-text-color) !important;
  opacity:1 !important;
}

/* Use the black SVG as a mask, so CSS can recolor it with currentColor.
   This replaces all of the old per-color PNG arrow files. */
.menu-overlay .menu-links a::before,
body.menu-home-page .menu-home-overlay .menu-links a::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:50% !important;
  width:1.45em !important;
  height:.58em !important;
  display:block !important;

  background:none !important;
  background-color:currentColor !important;
  background-image:none !important;
  -webkit-mask:url("img/arrow_long_black.svg") center / contain no-repeat !important;
  mask:url("img/arrow_long_black.svg") center / contain no-repeat !important;
  filter:none !important;
  border:0 !important;

  opacity:0 !important;
  transform:translateY(-50%) !important;
  pointer-events:none !important;
  transition:none !important;
}

/* Keep the interaction you liked: arrow appears in the word's old position,
   then the word slides right. Gap is intentionally very tight. */
.menu-overlay .menu-links a:hover .menu-link-text,
.menu-overlay .menu-links a:focus-visible .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:hover .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible .menu-link-text{
  transform:translateX(1.52em) !important;
}

.menu-overlay .menu-links a:hover::before,
.menu-overlay .menu-links a:focus-visible::before,
body.menu-home-page .menu-home-overlay .menu-links a:hover::before,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible::before{
  opacity:1 !important;
  transform:translateY(-50%) !important;
}

/* Older homepage rules used color filters on individual arrows. Neutralize
   them at matching specificity so the SVG always follows the word color. */
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1):hover::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1):focus-visible::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):hover::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):focus-visible::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3):hover::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3):focus-visible::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4):hover::before,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4):focus-visible::before,
.menu-overlay .menu-links a:nth-child(1):hover::before,
.menu-overlay .menu-links a:nth-child(1):focus-visible::before,
.menu-overlay .menu-links a:nth-child(2):hover::before,
.menu-overlay .menu-links a:nth-child(2):focus-visible::before,
.menu-overlay .menu-links a:nth-child(3):hover::before,
.menu-overlay .menu-links a:nth-child(3):focus-visible::before,
.menu-overlay .menu-links a:nth-child(4):hover::before,
.menu-overlay .menu-links a:nth-child(4):focus-visible::before{
  background:none !important;
  background-color:currentColor !important;
  background-image:none !important;
  -webkit-mask:url("img/arrow_long_black.svg") center / contain no-repeat !important;
  mask:url("img/arrow_long_black.svg") center / contain no-repeat !important;
  filter:none !important;
}


/* ==========================================================
   v228 — SVG MENU ARROW: DIRECT IMAGE + COLOR FILTER
   ==========================================================
   The external SVG mask was not rendering reliably in-browser.
   Use the SVG itself as the background image instead, then colorize the
   black artwork with a per-item filter matched to the menu word color.
   This keeps the arrow visible and preserves the exact same hover motion.
   ========================================================== */

/* Keep the word + arrow color controls together. */
.menu-overlay .menu-links a:nth-child(1),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1){
  --menu-text-color:#FF0000;
  --menu-arrow-filter:invert(88.223%) sepia(22.448%) saturate(1466.144%) hue-rotate(67.702deg) brightness(121.008%) contrast(80.330%);
}
.menu-overlay .menu-links a:nth-child(2),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2){
  --menu-text-color:#A858FF;
  --menu-arrow-filter:invert(32.670%) sepia(69.123%) saturate(1784.445%) hue-rotate(216.199deg) brightness(128.582%) contrast(59.399%);
}
.menu-overlay .menu-links a:nth-child(3),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3){
  --menu-text-color:#58FFD1;
  --menu-arrow-filter:invert(36.140%) sepia(30.498%) saturate(863.000%) hue-rotate(103.202deg) brightness(293.438%) contrast(72.799%);
}
.menu-overlay .menu-links a:nth-child(4),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4){
  --menu-text-color:#FF58BD;
  --menu-arrow-filter:invert(65.452%) sepia(81.618%) saturate(1369.618%) hue-rotate(275.998deg) brightness(78.219%) contrast(34.093%);
}

/* IMPORTANT: render the actual SVG directly. No mask. */
.menu-overlay .menu-links a::before,
body.menu-home-page .menu-home-overlay .menu-links a::before{
  content:"" !important;
  background-color:transparent !important;
  background-image:url("img/arrow_long_black.svg") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  -webkit-mask:none !important;
  mask:none !important;
  filter:var(--menu-arrow-filter) !important;
}

/* Match the menu word to the same paired color. */
.menu-overlay .menu-links a:hover,
.menu-overlay .menu-links a:focus-visible,
body.menu-home-page .menu-home-overlay .menu-links a:hover,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible{
  color:var(--menu-text-color) !important;
}

/* Reassert the visible hover state after the older mask experiments. */
.menu-overlay .menu-links a:hover::before,
.menu-overlay .menu-links a:focus-visible::before,
body.menu-home-page .menu-home-overlay .menu-links a:hover::before,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible::before{
  opacity:1 !important;
  background-image:url("img/arrow_long_black.svg") !important;
  -webkit-mask:none !important;
  mask:none !important;
  filter:var(--menu-arrow-filter) !important;
}


/* ==========================================================
   v229 — MENU ARROW: REAL <img> ELEMENT (NO MASK / PSEUDO)
   ==========================================================
   The SVG itself now lives in the menu markup as an <img>. This avoids the
   browser inconsistencies we were seeing with external SVG masks/backgrounds.
   The old ::before arrow is explicitly disabled below.
   ========================================================== */

/* Disable every previous pseudo-element arrow experiment. */
.menu-overlay .menu-links a::before,
body.menu-home-page .menu-home-overlay .menu-links a::before{
  content:none !important;
  display:none !important;
  background:none !important;
  -webkit-mask:none !important;
  mask:none !important;
}

/* Keep the menu link itself stationary so the hover hit-area never jitters. */
.menu-overlay .menu-links a,
body.menu-home-page .menu-home-overlay .menu-links a{
  position:relative !important;
  padding-left:0 !important;
  transform:none !important;
  overflow:visible !important;
}

/* The actual SVG arrow. */
.menu-overlay .menu-links .menu-link-arrow,
body.menu-home-page .menu-home-overlay .menu-links .menu-link-arrow{
  position:absolute !important;
  left:0 !important;
  top:50% !important;
  width:1.70em !important;
  height:.68em !important;
  display:block !important;
  object-fit:contain !important;
  object-position:left center !important;
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(-50%) !important;
  transform-origin:left center !important;
  pointer-events:none !important;
  transition:opacity .10s ease, visibility 0s linear .10s !important;
}

/* Menu color controls. The word and its SVG arrow stay paired. */
.menu-overlay .menu-links a:nth-child(1),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1){
  --menu-text-color:#FF0000;
  --menu-arrow-filter:invert(88.223%) sepia(22.448%) saturate(1466.144%) hue-rotate(67.702deg) brightness(121.008%) contrast(80.330%);
}
.menu-overlay .menu-links a:nth-child(2),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2){
  --menu-text-color:#A858FF;
  --menu-arrow-filter:invert(32.670%) sepia(69.123%) saturate(1784.445%) hue-rotate(216.199deg) brightness(128.582%) contrast(59.399%);
}
.menu-overlay .menu-links a:nth-child(3),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3){
  --menu-text-color:#58FFD1;
  --menu-arrow-filter:invert(36.140%) sepia(30.498%) saturate(863.000%) hue-rotate(103.202deg) brightness(293.438%) contrast(72.799%);
}
.menu-overlay .menu-links a:nth-child(4),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4){
  --menu-text-color:#FF58BD;
  --menu-arrow-filter:invert(65.452%) sepia(81.618%) saturate(1369.618%) hue-rotate(275.998deg) brightness(78.219%) contrast(34.093%);
}

.menu-overlay .menu-links a .menu-link-arrow,
body.menu-home-page .menu-home-overlay .menu-links a .menu-link-arrow{
  filter:var(--menu-arrow-filter) !important;
}

.menu-overlay .menu-links a:hover,
.menu-overlay .menu-links a:focus-visible,
body.menu-home-page .menu-home-overlay .menu-links a:hover,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible{
  color:var(--menu-text-color) !important;
  opacity:1 !important;
}

/* Arrow appears; only the text moves. Approx .08em visual gap. */
.menu-overlay .menu-links a:hover .menu-link-arrow,
.menu-overlay .menu-links a:focus-visible .menu-link-arrow,
body.menu-home-page .menu-home-overlay .menu-links a:hover .menu-link-arrow,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible .menu-link-arrow{
  opacity:1 !important;
  visibility:visible !important;
  transition:opacity .10s ease, visibility 0s !important;
}

.menu-overlay .menu-links a .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a .menu-link-text{
  display:inline-block !important;
  transform:translateX(0) !important;
  transition:transform .18s cubic-bezier(.2,.7,.2,1) !important;
  will-change:transform;
}
.menu-overlay .menu-links a:hover .menu-link-text,
.menu-overlay .menu-links a:focus-visible .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:hover .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible .menu-link-text{
  transform:translateX(1.78em) !important;
}


/* ==========================================================
   v231 — SHORT MENU ARROW + MUCH TIGHTER WORD GAP
   ==========================================================
   Menu markup now uses img/arrow_short_black.svg.
   Keep the arrow size unchanged and reduce the remaining visual
   visible arrow-to-word gap by ~70%.
   ========================================================== */
.menu-overlay .menu-links a:hover .menu-link-text,
.menu-overlay .menu-links a:focus-visible .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:hover .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible .menu-link-text{
  transform:translateX(1.18em) !important;
}


/* ==========================================================
   v232 — MENU ARROW COLOR: EXACT MATCH TO WORD
   ==========================================================
   The arrow is now a real span masked by arrow_short_black.svg.
   It uses currentColor, so the arrow and hovered word are always
   exactly the same color on the index and every menu overlay.
   ========================================================== */
.menu-overlay .menu-links .menu-link-arrow,
body.menu-home-page .menu-home-overlay .menu-links .menu-link-arrow{
  display:block !important;
  background-color:currentColor !important;
  -webkit-mask-image:url("img/arrow_short_black.svg") !important;
  -webkit-mask-repeat:no-repeat !important;
  -webkit-mask-position:left center !important;
  -webkit-mask-size:contain !important;
  mask-image:url("img/arrow_short_black.svg") !important;
  mask-repeat:no-repeat !important;
  mask-position:left center !important;
  mask-size:contain !important;
  filter:none !important;
  object-fit:initial !important;
  object-position:initial !important;
}

/* Keep one shared palette for the homepage/index menu and dropdown menus. */
.menu-overlay .menu-links a:nth-child(1),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1){
  --menu-text-color:#6AFF58 !important;
}
.menu-overlay .menu-links a:nth-child(2),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2){
  --menu-text-color:#A858FF !important;
}
.menu-overlay .menu-links a:nth-child(3),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3){
  --menu-text-color:#58FFD1 !important;
}
.menu-overlay .menu-links a:nth-child(4),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4){
  --menu-text-color:#FF58BD !important;
}


/* ==========================================================
   v234 — INLINE SVG MENU ARROWS / ONE HEX CONTROLS BOTH
   ==========================================================
   EDIT ONLY THE FOUR --menu-color HEX VALUES BELOW.
   The menu arrow is now inline SVG using currentColor, so the
   word and arrow are always exactly the same color. No filters.
   No linked arrow image is required for the menu.
   ========================================================== */

/* WORK */
.menu-overlay .menu-links a:nth-child(1),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1){
  --menu-color:#6AFF58;
}

/* CASE STUDIES */
.menu-overlay .menu-links a:nth-child(2),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2){
  --menu-color:#58FFD1;
}

/* RESUME */
.menu-overlay .menu-links a:nth-child(3),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3){
  --menu-color:#FF58BD;
}

/* ABOUT ME */
.menu-overlay .menu-links a:nth-child(4),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4){
  --menu-color:#FFC358;
}

/* Keep the link itself stationary so the hover hit-area never jitters. */
.menu-overlay .menu-links a,
body.menu-home-page .menu-home-overlay .menu-links a{
  position:relative !important;
  padding-left:0 !important;
  transform:none !important;
  overflow:visible !important;
}

/* Inline arrow: inherits the exact same color as its link. */
.menu-overlay .menu-links .menu-link-arrow,
body.menu-home-page .menu-home-overlay .menu-links .menu-link-arrow{
  position:absolute !important;
  left:0 !important;
  top:50% !important;
  width:1.70em !important;
  height:.68em !important;
  display:block !important;
  overflow:visible !important;
  color:inherit !important;
  fill:currentColor !important;
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(-50%) !important;
  transform-origin:left center !important;
  pointer-events:none !important;
  transition:opacity .10s ease, visibility 0s linear .10s !important;
  background:none !important;
  -webkit-mask:none !important;
  mask:none !important;
  filter:none !important;
}

.menu-overlay .menu-links .menu-link-arrow path,
body.menu-home-page .menu-home-overlay .menu-links .menu-link-arrow path{
  fill:currentColor !important;
}

/* One color now controls BOTH word + arrow. */
.menu-overlay .menu-links a:hover,
.menu-overlay .menu-links a:focus-visible,
body.menu-home-page .menu-home-overlay .menu-links a:hover,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible{
  color:var(--menu-color) !important;
  opacity:1 !important;
}

.menu-overlay .menu-links a:hover .menu-link-arrow,
.menu-overlay .menu-links a:focus-visible .menu-link-arrow,
body.menu-home-page .menu-home-overlay .menu-links a:hover .menu-link-arrow,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible .menu-link-arrow{
  opacity:1 !important;
  visibility:visible !important;
  transition:opacity .10s ease, visibility 0s !important;
}

/* Preserve the current smooth text slide + tight arrow spacing. */
.menu-overlay .menu-links a .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a .menu-link-text{
  display:inline-block !important;
  transform:translateX(0) !important;
  transition:transform .18s cubic-bezier(.2,.7,.2,1) !important;
  will-change:transform;
}
.menu-overlay .menu-links a:hover .menu-link-text,
.menu-overlay .menu-links a:focus-visible .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:hover .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible .menu-link-text{
  transform:translateX(1.18em) !important;
}

/* ==========================================================
   v235 — INLINE SVG MENU COLOR SYNC — DEFINITIVE OVERRIDE
   ==========================================================
   Edit ONLY the four --menu-color values in v234 above.
   Older nth-child hover rules were more specific than the v234
   generic hover selector, so the word could keep an old color
   while the inline SVG arrow used the new color. These rules
   explicitly force BOTH the word and SVG to the same variable.
   ========================================================== */

.menu-overlay .menu-links a:nth-child(1):hover,
.menu-overlay .menu-links a:nth-child(1):focus-visible,
.menu-overlay .menu-links a:nth-child(2):hover,
.menu-overlay .menu-links a:nth-child(2):focus-visible,
.menu-overlay .menu-links a:nth-child(3):hover,
.menu-overlay .menu-links a:nth-child(3):focus-visible,
.menu-overlay .menu-links a:nth-child(4):hover,
.menu-overlay .menu-links a:nth-child(4):focus-visible,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1):hover,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1):focus-visible,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):hover,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):focus-visible,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3):hover,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3):focus-visible,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4):hover,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4):focus-visible{
  color:var(--menu-color) !important;
  opacity:1 !important;
}

.menu-overlay .menu-links a:nth-child(1):hover .menu-link-text,
.menu-overlay .menu-links a:nth-child(1):focus-visible .menu-link-text,
.menu-overlay .menu-links a:nth-child(2):hover .menu-link-text,
.menu-overlay .menu-links a:nth-child(2):focus-visible .menu-link-text,
.menu-overlay .menu-links a:nth-child(3):hover .menu-link-text,
.menu-overlay .menu-links a:nth-child(3):focus-visible .menu-link-text,
.menu-overlay .menu-links a:nth-child(4):hover .menu-link-text,
.menu-overlay .menu-links a:nth-child(4):focus-visible .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1):hover .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1):focus-visible .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):hover .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):focus-visible .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3):hover .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3):focus-visible .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4):hover .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4):focus-visible .menu-link-text{
  color:var(--menu-color) !important;
}

.menu-overlay .menu-links a:nth-child(1):hover .menu-link-arrow,
.menu-overlay .menu-links a:nth-child(1):focus-visible .menu-link-arrow,
.menu-overlay .menu-links a:nth-child(2):hover .menu-link-arrow,
.menu-overlay .menu-links a:nth-child(2):focus-visible .menu-link-arrow,
.menu-overlay .menu-links a:nth-child(3):hover .menu-link-arrow,
.menu-overlay .menu-links a:nth-child(3):focus-visible .menu-link-arrow,
.menu-overlay .menu-links a:nth-child(4):hover .menu-link-arrow,
.menu-overlay .menu-links a:nth-child(4):focus-visible .menu-link-arrow,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1):hover .menu-link-arrow,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1):focus-visible .menu-link-arrow,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):hover .menu-link-arrow,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):focus-visible .menu-link-arrow,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3):hover .menu-link-arrow,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3):focus-visible .menu-link-arrow,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4):hover .menu-link-arrow,
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4):focus-visible .menu-link-arrow{
  color:var(--menu-color) !important;
  fill:currentColor !important;
}

.menu-overlay .menu-links a .menu-link-arrow path,
body.menu-home-page .menu-home-overlay .menu-links a .menu-link-arrow path{
  fill:currentColor !important;
}

/* ==========================================================
   v236 — INLINE SVG ARROW: REMOVE LEGACY FILTER OVERRIDE
   ==========================================================
   Older v229/v233 rules target `a .menu-link-arrow` with higher
   specificity and an !important filter. That filter was still
   recoloring the inline SVG even though its fill used currentColor.
   This final rule neutralizes every legacy arrow filter so the SVG
   and menu word both follow the same --menu-color value exactly.
   ========================================================== */
.menu-overlay .menu-links a .menu-link-arrow,
body.menu-home-page .menu-home-overlay .menu-links a .menu-link-arrow{
  filter:none !important;
  color:inherit !important;
  fill:currentColor !important;
}

.menu-overlay .menu-links a .menu-link-arrow path,
body.menu-home-page .menu-home-overlay .menu-links a .menu-link-arrow path{
  fill:currentColor !important;
  stroke:currentColor !important;
}

/* ==========================================================
   v238 — MENU ARROW / WORD SPACING
   Increase the existing arrow-to-word spacing by 30px.
   ========================================================== */
.menu-overlay .menu-links a:hover .menu-link-text,
.menu-overlay .menu-links a:focus-visible .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:hover .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible .menu-link-text{
  transform:translateX(calc(1.32em + 20px)) !important;
}
/* ==========================================================
   v246 — INDEX HELLO UFO HOVER
   Animated GIF appears to the right of HELLO without shifting it.
   ========================================================== */
body.menu-home-page .index-hello{
  pointer-events:auto !important;
  cursor:default;
}

body.menu-home-page .index-hello::after{
  content:"";
  position:absolute;
  left:calc(100% + 10px);
  top:50%;
  width:20px;
  height:30px;
  transform:translate(-6px,-50%);
  opacity:0;
  background:url("img/UFO_animated.gif") center / contain no-repeat;
  text-decoration:none;
  pointer-events:none;
  transition:opacity .14s ease, transform .18s cubic-bezier(.2,.7,.2,1);
}

body.menu-home-page .index-hello:hover::after,
body.menu-home-page .index-hello:focus-visible::after{
  opacity:1;
  transform:translate(0,-50%);
}

@media(prefers-reduced-motion:reduce){
  body.menu-home-page .index-hello::after{
    transition:none;
    transform:translate(0,-50%);
  }
}

/* ==========================================================
   v242 — INDEX RESPONSIVE ALIGNMENT
   ========================================================== */

/* Keep the index navigation and contact column anchored beneath HELLO at every
   responsive width. Earlier mobile rules snapped these blocks to the left gutter. */
@media (max-width:800px){
  body.menu-home-page .menu-home-overlay .menu-links{
    left:calc(50% - 18px) !important;
    right:16px !important;
    width:auto !important;
    max-width:none !important;
    transform:none !important;
  }

  body.menu-home-page .menu-home-overlay .menu-contact{
    left:calc(50% - 18px) !important;
    right:16px !important;
    width:auto !important;
    transform:none !important;
  }
}

/* Keep click-to-enlarge functionality, but remove the visible zoom-in cue. */
body.project-detail-page .project-slide.is-active img,
body.case-study-detail-page .cs-case-slide.is-active img{
  cursor:default !important;
}


/* ==========================================================
   v244 — WORK + RESUME ONLY / CROSS-BROWSER CAROUSEL ARROWS
   ========================================================== */

/* With Case Studies + About Me removed, preserve the existing Resume hover
   color even though Resume is now the second menu item. */
.menu-overlay .menu-links a:nth-child(2),
body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2){
  --menu-color:#FF58BD !important;
}

/* Project carousel arrows are inline SVG now, so they no longer depend on
   an external SVG request. Menu arrows are intentionally untouched. */
body.project-detail-page .project-nav .carousel-arrow-svg{
  display:block !important;
  width:37px !important;
  height:auto !important;
  overflow:visible !important;
  pointer-events:none !important;
}
body.project-detail-page .project-nav.prev .carousel-arrow-svg{
  transform:rotate(180deg) !important;
}
body.project-detail-page .project-nav.next .carousel-arrow-svg{
  transform:none !important;
}
@media(max-width:800px){
  body.project-detail-page .project-nav .carousel-arrow-svg{
    width:29px !important;
  }
}


/* ==========================================================
   RESUME — TOP OPERATIONS / TOOLS / AI BLOCK
   ========================================================== */
body.page-resume .resume-skills-top{
  padding-top:0;
  padding-bottom:52px;
}

body.page-resume .resume-skills-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr 1.15fr;
  gap:42px;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
}

body.page-resume .resume-skill-col{
  padding:20px 0 28px;
}

body.page-resume .resume-skill-col .resume-section-heading{
  padding:0 0 17px;
  border-bottom:0;
}

body.page-resume .resume-skill-col p{
  margin:0;
  max-width:620px;
  font-size:18px;
  line-height:1.48;
}

body.page-resume .resume-role-years{
  margin:-6px 0 18px;
  font-size:11px;
  line-height:1.3;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.58;
}

body.page-resume .resume-role-progression{
  margin-top:28px;
  padding-top:15px;
  border-top:1px solid rgba(17,17,17,.22);
}

body.page-resume .resume-role-progression > div{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:7px 0;
  font-size:14px;
  line-height:1.4;
}

body.page-resume .resume-role-progression > div span:last-child{
  white-space:nowrap;
  opacity:.58;
}

body.page-resume .resume-progression-note{
  margin-top:10px !important;
  font-size:13px !important;
  opacity:.72;
}

@media(max-width:900px){
  body.page-resume .resume-skills-grid{
    grid-template-columns:1fr;
    gap:0;
  }

  body.page-resume .resume-skill-col{
    padding:20px 0 24px;
    border-bottom:1px solid rgba(17,17,17,.22);
  }

  body.page-resume .resume-skill-col:last-child{
    border-bottom:0;
  }

  body.page-resume .resume-skill-col p{
    font-size:16px;
  }
}


/* ==========================================================
   v248 — RESTORE TOP-CENTER LABELS
   Keep HELLO visible on the index and MENU visible on interior pages.
   ========================================================== */

/* Index: the permanently visible menu overlay must never cover HELLO. */
body.menu-home-page header{
  z-index:5000 !important;
}

body.menu-home-page .index-hello{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:5001 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

/* Interior pages: explicitly restore MENU whenever the menu is closed. */
body:not(.menu-home-page) header{
  z-index:5000 !important;
}

body:not(.menu-home-page) .menu-state:not(:checked) ~ header .menu-toggle{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:5001 !important;
}

/* Preserve the normal opened-menu behavior: MENU disappears and CLOSE takes over. */
body:not(.menu-home-page) .menu-state:checked ~ header .menu-toggle{
  visibility:hidden !important;
  opacity:0 !important;
}


/* ==========================================================
   v250 — INTERIOR MENU CLOSE STACKING FIX
   When the fullscreen menu is open, place it above the sticky header so
   CLOSE remains visible and clickable on Creative Operations + Resume.
   ========================================================== */

body:not(.menu-home-page) .menu-state:checked ~ header{
  z-index:900 !important;
}

body:not(.menu-home-page) .menu-state:checked ~ .menu-overlay{
  z-index:6000 !important;
}

body:not(.menu-home-page) .menu-state:checked ~ .menu-overlay .menu-close{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  z-index:6001 !important;
}


/* ==========================================================
   v252 — LP MENU NAME MATCHES INDEX EXACTLY
   Laura Newman in the open interior menu uses the same position,
   typography, responsive behavior, and hover palette as the index name.
   ========================================================== */

body:not(.menu-home-page) .menu-overlay .menu-overlay-name{
  position:fixed !important;
  top:12px !important;
  left:20px !important;
  right:auto !important;
  transform:none !important;
  margin:0 !important;
  padding:0 !important;
  z-index:6002 !important;

  font-family:"Roboto",Arial,Helvetica,sans-serif !important;
  font-size:10px !important;
  font-weight:400 !important;
  line-height:1 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  white-space:nowrap !important;

  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

/* Match the index/site-name palette rollover. */
@media (hover:hover) and (pointer:fine){
  body:not(.menu-home-page) .menu-overlay .menu-overlay-name:hover,
  body:not(.menu-home-page) .menu-overlay .menu-overlay-name:focus-visible{
    --site-name-palette-color:#58FFD1;
    color:var(--site-name-palette-color) !important;
    -webkit-text-fill-color:#58FFD1 !important;
    animation:ln-name-palette-cycle 2.15s steps(1,end) infinite;
  }
}

/* Same responsive placement as the universal/index site name. */
@media(min-width:561px) and (max-width:800px){
  body:not(.menu-home-page) .menu-overlay .menu-overlay-name{
    top:11px !important;
    left:14px !important;
    font-size:9px !important;
  }
}

/* The index hides the name before it can collide on very narrow screens. */
@media(max-width:560px){
  body:not(.menu-home-page) .menu-overlay .menu-overlay-name{
    display:none !important;
  }
}


/* ==========================================================
   v261 — ABOUT ME / RESUME / INDEX REFINEMENTS
   ========================================================== */

/* Rename handled in HTML. Keep the open-menu Laura Newman in the exact same
   viewport position as the closed header name so it never jumps on open. */
body:not(.menu-home-page) .menu-overlay .menu-overlay-name{
  top:22px !important;
  left:44px !important;
}
@media(min-width:561px) and (max-width:800px){
  body:not(.menu-home-page) .menu-overlay .menu-overlay-name{
    top:21px !important;
    left:28px !important;
  }
}

/* Resume navigation stays black from the moment the page loads. */
body.page-resume header,
body.page-resume header.is-scrolled,
body.page-resume .menu-state:not(:checked) ~ header{
  background:#000 !important;
  background-color:#000 !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:none !important;
}
body.page-resume header .site-name,
body.page-resume header .menu-toggle,
body.page-resume header.is-scrolled .site-name,
body.page-resume header.is-scrolled .menu-toggle,
body.page-resume .menu-state:not(:checked) ~ header .site-name,
body.page-resume .menu-state:not(:checked) ~ header .menu-toggle{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

/* Resume: remove the two full-width rules surrounding the top skill block. */
body.page-resume .resume-skills-grid{
  border-top:0 !important;
  border-bottom:0 !important;
}

/* Index: the two primary destinations are intentionally more expressive. */
body.menu-home-page .menu-home-overlay .menu-links a{
  font-size:clamp(58px,5vw,82px) !important;
  font-style:italic !important;
  line-height:.96 !important;
  letter-spacing:-.05em !important;
}

/* Larger inline SVG hover arrows on both the index and interior menu. */
.menu-overlay .menu-links a .menu-link-arrow,
body.menu-home-page .menu-home-overlay .menu-links a .menu-link-arrow{
  width:1.95em !important;
  height:.78em !important;
}

/* Give the larger arrow enough room without moving the hover hit area. */
.menu-overlay .menu-links a:hover .menu-link-text,
.menu-overlay .menu-links a:focus-visible .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:hover .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible .menu-link-text{
  transform:translateX(calc(1.75em + 20px)) !important;
}

@media(max-width:800px){
  body.menu-home-page .menu-home-overlay .menu-links a{
    font-size:clamp(54px,15vw,76px) !important;
  }
}

/* ==========================================================
   v262 — UNIVERSAL MENU COMPOSITION + PALETTE CYCLE
   Keep the index and every interior menu visually identical.
   ========================================================== */

/* One menu type treatment everywhere: larger + italic. */
body .menu-overlay .menu-links a,
body.menu-home-page .menu-home-overlay .menu-links a{
  font-size:clamp(58px,5vw,82px) !important;
  font-style:italic !important;
  font-weight:400 !important;
  line-height:.96 !important;
  letter-spacing:-.05em !important;
}

/* Use one vertical position for the menu words on every page. */
body .menu-overlay .menu-links,
body.menu-home-page .menu-home-overlay .menu-links{
  top:76px !important;
  left:calc(50% - 18px) !important;
  transform:none !important;
  width:min(520px, calc(100vw - 48px)) !important;
  max-width:none !important;
  align-items:flex-start !important;
  text-align:left !important;
}

/* Arrows: 20% smaller than v261 while preserving the close arrow-to-word gap. */
body .menu-overlay .menu-links a .menu-link-arrow,
body.menu-home-page .menu-home-overlay .menu-links a .menu-link-arrow{
  width:1.56em !important;
  height:.624em !important;
}
body .menu-overlay .menu-links a:hover .menu-link-text,
body .menu-overlay .menu-links a:focus-visible .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:hover .menu-link-text,
body.menu-home-page .menu-home-overlay .menu-links a:focus-visible .menu-link-text{
  transform:translateX(calc(1.40em + 16px)) !important;
}

/* Words + inline arrows use the same animated palette as Laura Newman / LN logo. */
@media (hover:hover) and (pointer:fine){
  body .menu-overlay .menu-links a:hover,
  body .menu-overlay .menu-links a:focus-visible,
  body.menu-home-page .menu-home-overlay .menu-links a:hover,
  body.menu-home-page .menu-home-overlay .menu-links a:focus-visible{
    --site-name-palette-color:#58FFD1;
    color:var(--site-name-palette-color) !important;
    -webkit-text-fill-color:var(--site-name-palette-color) !important;
    animation:ln-name-palette-cycle 2.15s steps(1,end) infinite !important;
    opacity:1 !important;
  }

  body .menu-overlay .menu-links a:hover .menu-link-text,
  body .menu-overlay .menu-links a:focus-visible .menu-link-text,
  body .menu-overlay .menu-links a:hover .menu-link-arrow,
  body .menu-overlay .menu-links a:focus-visible .menu-link-arrow,
  body.menu-home-page .menu-home-overlay .menu-links a:hover .menu-link-text,
  body.menu-home-page .menu-home-overlay .menu-links a:focus-visible .menu-link-text,
  body.menu-home-page .menu-home-overlay .menu-links a:hover .menu-link-arrow,
  body.menu-home-page .menu-home-overlay .menu-links a:focus-visible .menu-link-arrow{
    color:inherit !important;
    fill:currentColor !important;
    -webkit-text-fill-color:inherit !important;
  }
}

@media (prefers-reduced-motion:reduce){
  body .menu-overlay .menu-links a:hover,
  body .menu-overlay .menu-links a:focus-visible,
  body.menu-home-page .menu-home-overlay .menu-links a:hover,
  body.menu-home-page .menu-home-overlay .menu-links a:focus-visible{
    animation:none !important;
    color:#58FFD1 !important;
    -webkit-text-fill-color:#58FFD1 !important;
  }
}

/* Contact + Social: directly beneath Laura Newman (same left edge), while the
   top of this block aligns horizontally with the top of About Me. */
body .menu-overlay .menu-contact,
body.menu-home-page .menu-home-overlay .menu-contact{
  top:76px !important;
  left:40px !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;
  width:auto !important;
  max-width:none !important;
  grid-template-columns:max-content max-content !important;
  gap:36px !important;
  align-items:start !important;
}

/* Open-menu Laura Newman occupies the exact same viewport coordinate as the
   closed header name. Header .wrap has 20px padding and .site-name has 20px left. */
body:not(.menu-home-page) .menu-overlay .menu-overlay-name{
  top:12px !important;
  left:40px !important;
  right:auto !important;
  transform:none !important;
}

@media(max-width:800px){
  body .menu-overlay .menu-links,
  body.menu-home-page .menu-home-overlay .menu-links{
    top:72px !important;
    left:calc(50% - 18px) !important;
    right:14px !important;
    width:auto !important;
    max-width:none !important;
  }

  body .menu-overlay .menu-links a,
  body.menu-home-page .menu-home-overlay .menu-links a{
    font-size:clamp(54px,15vw,76px) !important;
  }

  body .menu-overlay .menu-contact,
  body.menu-home-page .menu-home-overlay .menu-contact{
    top:72px !important;
    left:28px !important;
    right:auto !important;
    width:auto !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  body:not(.menu-home-page) .menu-overlay .menu-overlay-name{
    top:11px !important;
    left:28px !important;
  }
}

/* On narrow phones the header name itself is pinned at 14px within the
   14px-padded full-width nav, so keep the open-menu replacement at 28px too. */
@media(max-width:560px){
  body:not(.menu-home-page) .menu-overlay .menu-overlay-name{
    display:block !important;
    top:11px !important;
    left:28px !important;
    font-size:9px !important;
  }
}

/* v262b — beat legacy per-item !important color rules while retaining the
   same editable palette animation used by the name and logo. */
@media (hover:hover) and (pointer:fine){
  body .menu-overlay .menu-links a:nth-child(1):hover,
  body .menu-overlay .menu-links a:nth-child(1):focus-visible,
  body .menu-overlay .menu-links a:nth-child(2):hover,
  body .menu-overlay .menu-links a:nth-child(2):focus-visible,
  body .menu-overlay .menu-links a:nth-child(3):hover,
  body .menu-overlay .menu-links a:nth-child(3):focus-visible,
  body .menu-overlay .menu-links a:nth-child(4):hover,
  body .menu-overlay .menu-links a:nth-child(4):focus-visible,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1):hover,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(1):focus-visible,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):hover,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):focus-visible,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3):hover,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(3):focus-visible,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4):hover,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(4):focus-visible{
    --site-name-palette-color:#58FFD1;
    --menu-color:var(--site-name-palette-color) !important;
    color:var(--site-name-palette-color) !important;
    -webkit-text-fill-color:var(--site-name-palette-color) !important;
    animation:ln-name-palette-cycle 2.15s steps(1,end) infinite !important;
    opacity:1 !important;
  }
}

/* ==========================================================
   v266 — LOCKED TYPE SYSTEM
   User names: H1 / H2 / SM1 / Descriptor
   About Me + Resume use only these four typography styles.
   ========================================================== */
:root{
  --ts-font:"Roboto",Arial,Helvetica,sans-serif;

  /* H1 — based on Resume page title */
  --ts-h1-size:clamp(43px,4.8vw,72px);
  --ts-h1-weight:300;
  --ts-h1-line:.9;
  --ts-h1-tracking:-.035em;

  /* H2 — based on Resume role title */
  --ts-h2-size:clamp(27px,3.2vw,48px);
  --ts-h2-weight:300;
  --ts-h2-line:.98;
  --ts-h2-tracking:-.045em;

  /* SM1 — small uppercase label / metadata */
  --ts-sm1-size:11px;
  --ts-sm1-weight:400;
  --ts-sm1-line:1.55;
  --ts-sm1-tracking:.12em;

  /* Descriptor — Resume descriptive/body copy */
  --ts-descriptor-size:15px;
  --ts-descriptor-weight:400;
  --ts-descriptor-line:1.55;
  --ts-descriptor-tracking:0em;
}

/* Deliberately high specificity: these named classes are the source of truth
   even where older page-specific rules remain in the stylesheet. */
body.page-resume .type-h1.type-h1.type-h1,
body.page-creative-operations .type-h1.type-h1.type-h1{
  font-family:var(--ts-font) !important;
  font-size:var(--ts-h1-size) !important;
  font-weight:var(--ts-h1-weight) !important;
  font-style:normal !important;
  line-height:var(--ts-h1-line) !important;
  letter-spacing:var(--ts-h1-tracking) !important;
  text-transform:none !important;
}

body.page-resume .type-h2.type-h2.type-h2,
body.page-creative-operations .type-h2.type-h2.type-h2{
  font-family:var(--ts-font) !important;
  font-size:var(--ts-h2-size) !important;
  font-weight:var(--ts-h2-weight) !important;
  font-style:normal !important;
  line-height:var(--ts-h2-line) !important;
  letter-spacing:var(--ts-h2-tracking) !important;
  text-transform:none !important;
}

body.page-resume .type-sm1.type-sm1.type-sm1,
body.page-creative-operations .type-sm1.type-sm1.type-sm1{
  font-family:var(--ts-font) !important;
  font-size:var(--ts-sm1-size) !important;
  font-weight:var(--ts-sm1-weight) !important;
  font-style:normal !important;
  line-height:var(--ts-sm1-line) !important;
  letter-spacing:var(--ts-sm1-tracking) !important;
  text-transform:uppercase !important;
}

body.page-resume .type-descriptor.type-descriptor.type-descriptor,
body.page-creative-operations .type-descriptor.type-descriptor.type-descriptor{
  font-family:var(--ts-font) !important;
  font-size:var(--ts-descriptor-size) !important;
  font-weight:var(--ts-descriptor-weight) !important;
  font-style:normal !important;
  line-height:var(--ts-descriptor-line) !important;
  letter-spacing:var(--ts-descriptor-tracking) !important;
  text-transform:none !important;
}

/* ABOUT ME — hierarchy built exclusively from H1 / H2 / SM1 / Descriptor. */
body.page-creative-operations .work-about-intro h1{max-width:760px;}
body.page-creative-operations .work-about-intro-copy{font-size:inherit;line-height:inherit;}
body.page-creative-operations .work-selected-head h2{max-width:900px;}
body.page-creative-operations .work-selected-head p{max-width:none;white-space:nowrap;}
body.page-creative-operations .work-selected-caption{align-items:end;margin-bottom:18px;}
body.page-creative-operations .work-selected-caption .type-h2{margin:0;}
body.page-creative-operations .work-selected-caption .type-sm1{padding-bottom:4px;opacity:.52;text-align:right;}
body.page-creative-operations .work-editorial-section > .type-h1{margin-bottom:48px;}
body.page-creative-operations .work-editorial-row,
body.page-creative-operations .work-approach-item{
  grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);
  column-gap:86px;
  align-items:start;
}
body.page-creative-operations .work-editorial-row .type-h2,
body.page-creative-operations .work-approach-item .type-h2{max-width:420px;margin:0;}
body.page-creative-operations .work-editorial-row .type-descriptor,
body.page-creative-operations .work-approach-item .type-descriptor,
body.page-creative-operations .work-management-copy .type-descriptor{max-width:760px;margin-top:0;}

/* RESUME — same four styles, with layout kept intact. */
body.page-resume .resume-skill-col .type-descriptor{max-width:620px;margin:0;}
body.page-resume .resume-role-main > .type-h2{margin:0 0 14px !important;}
body.page-resume .resume-role-main > .type-descriptor{max-width:810px;margin:0 0 10px;}
body.page-resume .resume-role-main > .type-descriptor:last-child{margin-bottom:0;}
body.page-resume .resume-role-years.type-sm1{margin:-6px 0 18px;opacity:.58;}
body.page-resume .resume-role-progression .type-descriptor{font-size:var(--ts-descriptor-size) !important;}
body.page-resume .resume-role-progression .type-sm1{white-space:nowrap;opacity:.58;}
body.page-resume .resume-progression-note.type-descriptor{font-size:var(--ts-descriptor-size) !important;opacity:.72;}

@media(max-width:800px){
  :root{
    --ts-h1-size:clamp(37px,9.6vw,56px);
    --ts-h2-size:clamp(27px,7vw,40px);
  }
  body.page-creative-operations .work-selected-head p{white-space:normal;}
  body.page-creative-operations .work-editorial-row,
  body.page-creative-operations .work-approach-item{
    grid-template-columns:1fr;
    gap:12px;
  }
}


/* v266 — preserve the existing universal fullscreen menu typography.
   Body-page redesign is scoped to About Me + Resume only. */
body .menu-overlay .menu-links a,
body.menu-home-page .menu-home-overlay .menu-links a{
  font-family:"Roboto",Arial,Helvetica,sans-serif !important;
  font-size:clamp(43px,4.8vw,72px) !important;
  font-weight:300 !important;
  font-style:normal !important;
  line-height:.9 !important;
  letter-spacing:-.035em !important;
  text-transform:none !important;
}
@media(max-width:800px){
  body .menu-overlay .menu-links a,
  body.menu-home-page .menu-home-overlay .menu-links a{
    font-size:clamp(37px,9.6vw,56px) !important;
  }
}


/* v267 — Resume top skills: equal spacing on both sides of column rules. */
body.page-resume .resume-skill-col .resume-section-heading{
  padding:0 0 17px !important;
  margin:0 0 17px !important;
  border-bottom:1px solid var(--ink) !important;
}
body.page-resume .resume-skill-col > .type-descriptor{
  margin-top:0 !important;
}


/* v268 — Resume cleanup: black content type, clean role progression, no contact section. */
body.page-resume .resume-page,
body.page-resume .resume-page *{
  color:#000 !important;
  -webkit-text-fill-color:#000 !important;
}

/* Keep the promotion history aligned as two clean columns. */
body.page-resume .resume-role-progression{
  display:grid !important;
  grid-template-columns:1fr !important;
  row-gap:0 !important;
}
body.page-resume .resume-role-progression > div{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:baseline !important;
  column-gap:24px !important;
  width:100% !important;
  padding:7px 0 !important;
}
body.page-resume .resume-role-progression > div > span:first-child{
  justify-self:start !important;
  text-align:left !important;
}
body.page-resume .resume-role-progression > div > span:last-child{
  justify-self:end !important;
  text-align:right !important;
  opacity:1 !important;
}
body.page-resume .resume-role-progression .type-sm1,
body.page-resume .resume-progression-note.type-descriptor,
body.page-resume .resume-role-years.type-sm1{
  opacity:1 !important;
}


/* ==========================================================
   v271 — MENU PALETTE OFFSETS + LOGO POSITION
   Universal refinements requested Sept 13, 2026.
   ========================================================== */

/* Laura Newman: always use the same full palette cycle on the closed header
   and its open-menu counterpart. */
@media (hover:hover) and (pointer:fine){
  body header a.site-name:hover,
  body header a.site-name:focus-visible,
  body.menu-home-page header a.site-name:hover,
  body.menu-home-page header a.site-name:focus-visible,
  body:not(.menu-home-page) .menu-overlay a.menu-overlay-name:hover,
  body:not(.menu-home-page) .menu-overlay a.menu-overlay-name:focus-visible{
    --site-name-palette-color:#58FFD1;
    color:var(--site-name-palette-color) !important;
    -webkit-text-fill-color:var(--site-name-palette-color) !important;
    animation:ln-name-palette-cycle 2.15s steps(1,end) infinite !important;
    opacity:1 !important;
  }
}

/* Resume uses the same palette as About Me, offset so the first hover color
   is Orange Delight instead of Near Moon. The arrow inherits the word color. */
@keyframes ln-resume-palette-cycle{
  0%,11%{--site-name-palette-color:#FFC358;-webkit-text-fill-color:#FFC358;}
  11.1%,22%{--site-name-palette-color:#FF7E58;-webkit-text-fill-color:#FF7E58;}
  22.1%,33%{--site-name-palette-color:#FF5878;-webkit-text-fill-color:#FF5878;}
  33.1%,44%{--site-name-palette-color:#FF58BD;-webkit-text-fill-color:#FF58BD;}
  44.1%,55%{--site-name-palette-color:#58FFD1;-webkit-text-fill-color:#58FFD1;}
  55.1%,66%{--site-name-palette-color:#58FF8C;-webkit-text-fill-color:#58FF8C;}
  66.1%,77%{--site-name-palette-color:#6AFF58;-webkit-text-fill-color:#6AFF58;}
  77.1%,88%{--site-name-palette-color:#AFFF58;-webkit-text-fill-color:#AFFF58;}
  88.1%,100%{--site-name-palette-color:#F5FF58;-webkit-text-fill-color:#F5FF58;}
}
@media (hover:hover) and (pointer:fine){
  body .menu-overlay .menu-links a:nth-child(2):hover,
  body .menu-overlay .menu-links a:nth-child(2):focus-visible,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):hover,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):focus-visible{
    --site-name-palette-color:#FFC358 !important;
    --menu-color:#FFC358 !important;
    color:var(--site-name-palette-color) !important;
    -webkit-text-fill-color:var(--site-name-palette-color) !important;
    animation:ln-resume-palette-cycle 2.15s steps(1,end) infinite !important;
    opacity:1 !important;
  }
  body .menu-overlay .menu-links a:nth-child(2):hover .menu-link-text,
  body .menu-overlay .menu-links a:nth-child(2):focus-visible .menu-link-text,
  body .menu-overlay .menu-links a:nth-child(2):hover .menu-link-arrow,
  body .menu-overlay .menu-links a:nth-child(2):focus-visible .menu-link-arrow,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):hover .menu-link-text,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):focus-visible .menu-link-text,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):hover .menu-link-arrow,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):focus-visible .menu-link-arrow{
    color:inherit !important;
    fill:currentColor !important;
    -webkit-text-fill-color:inherit !important;
  }
}
@media (prefers-reduced-motion:reduce){
  body .menu-overlay .menu-links a:nth-child(2):hover,
  body .menu-overlay .menu-links a:nth-child(2):focus-visible,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):hover,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):focus-visible{
    animation:none !important;
    color:#FFC358 !important;
    -webkit-text-fill-color:#FFC358 !important;
  }
}

/* Move the LN logo up ~100px in every fullscreen menu. */
body .menu-overlay .menu-dropdown-logo,
body.menu-home-page .menu-home-overlay .menu-dropdown-logo,
body.menu-home-page .menu-home-static .menu-dropdown-logo{
  top:335px !important;
}
@media(max-width:800px){
  body .menu-overlay .menu-dropdown-logo,
  body.menu-home-page .menu-home-overlay .menu-dropdown-logo,
  body.menu-home-page .menu-home-static .menu-dropdown-logo{
    top:335px !important;
  }
}
@media(max-width:390px){
  body .menu-overlay .menu-dropdown-logo,
  body.menu-home-page .menu-home-overlay .menu-dropdown-logo,
  body.menu-home-page .menu-home-static .menu-dropdown-logo{
    top:355px !important;
  }
}

/* ==========================================================
   v272 — RESUME MENU COLOR CYCLE FIX
   Same palette cycle as the universal menu, rotated to start orange.
   Animate the actual color property so both word + SVG arrow visibly cycle.
   ========================================================== */
@keyframes ln-resume-palette-cycle-v2{
  0%,11%{color:#FFC358;-webkit-text-fill-color:#FFC358;}
  11.1%,22%{color:#FF7E58;-webkit-text-fill-color:#FF7E58;}
  22.1%,33%{color:#FF5878;-webkit-text-fill-color:#FF5878;}
  33.1%,44%{color:#FF58BD;-webkit-text-fill-color:#FF58BD;}
  44.1%,55%{color:#58FFD1;-webkit-text-fill-color:#58FFD1;}
  55.1%,66%{color:#58FF8C;-webkit-text-fill-color:#58FF8C;}
  66.1%,77%{color:#6AFF58;-webkit-text-fill-color:#6AFF58;}
  77.1%,88%{color:#AFFF58;-webkit-text-fill-color:#AFFF58;}
  88.1%,100%{color:#F5FF58;-webkit-text-fill-color:#F5FF58;}
}

@media (hover:hover) and (pointer:fine){
  body .menu-overlay .menu-links a:nth-child(2):hover,
  body .menu-overlay .menu-links a:nth-child(2):focus-visible,
  body .menu-overlay .menu-links a:nth-child(2):hover .menu-link-text,
  body .menu-overlay .menu-links a:nth-child(2):focus-visible .menu-link-text,
  body .menu-overlay .menu-links a:nth-child(2):hover .menu-link-arrow,
  body .menu-overlay .menu-links a:nth-child(2):focus-visible .menu-link-arrow,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):hover,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):focus-visible,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):hover .menu-link-text,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):focus-visible .menu-link-text,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):hover .menu-link-arrow,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):focus-visible .menu-link-arrow{
    animation:ln-resume-palette-cycle-v2 2.15s steps(1,end) infinite !important;
  }

  body .menu-overlay .menu-links a:nth-child(2):hover .menu-link-arrow,
  body .menu-overlay .menu-links a:nth-child(2):focus-visible .menu-link-arrow,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):hover .menu-link-arrow,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):focus-visible .menu-link-arrow{
    fill:currentColor !important;
  }
}

/* ==========================================================
   v273 — RESUME MENU COLOR CYCLE — conflict-proof fix
   Previous rules pinned Resume to orange via !important.
   Animate a dedicated custom property instead; the visible
   word + SVG arrow inherit its current value.
   ========================================================== */
@keyframes resume-menu-color-cycle-v3{
  0%,11%   { --resume-cycle-color:#FFC358; }
  11.1%,22%{ --resume-cycle-color:#FF7E58; }
  22.1%,33%{ --resume-cycle-color:#FF5878; }
  33.1%,44%{ --resume-cycle-color:#FF58BD; }
  44.1%,55%{ --resume-cycle-color:#58FFD1; }
  55.1%,66%{ --resume-cycle-color:#58FF8C; }
  66.1%,77%{ --resume-cycle-color:#6AFF58; }
  77.1%,88%{ --resume-cycle-color:#AFFF58; }
  88.1%,100%{ --resume-cycle-color:#F5FF58; }
}

@media (hover:hover) and (pointer:fine){
  body .menu-overlay .menu-links a:nth-child(2):hover,
  body .menu-overlay .menu-links a:nth-child(2):focus-visible,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):hover,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):focus-visible{
    --resume-cycle-color:#FFC358;
    color:var(--resume-cycle-color) !important;
    -webkit-text-fill-color:var(--resume-cycle-color) !important;
    animation:resume-menu-color-cycle-v3 2.15s steps(1,end) infinite !important;
  }

  body .menu-overlay .menu-links a:nth-child(2):hover .menu-link-text,
  body .menu-overlay .menu-links a:nth-child(2):focus-visible .menu-link-text,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):hover .menu-link-text,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):focus-visible .menu-link-text{
    color:inherit !important;
    -webkit-text-fill-color:inherit !important;
    animation:none !important;
  }

  body .menu-overlay .menu-links a:nth-child(2):hover .menu-link-arrow,
  body .menu-overlay .menu-links a:nth-child(2):focus-visible .menu-link-arrow,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):hover .menu-link-arrow,
  body.menu-home-page .menu-home-overlay .menu-links a:nth-child(2):focus-visible .menu-link-arrow{
    color:inherit !important;
    fill:currentColor !important;
    animation:none !important;
  }
}