.right-icons{display:flex;align-items:center;gap:18px;margin-right:22px;position:relative;z-index:20;}
.hamburger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;font-size:31px;color:#333;cursor:pointer;line-height:1;border-radius:10px;transition:background .2s ease,color .2s ease;user-select:none;}
.hamburger:hover{background:rgba(255,255,255,.65);color:#111;}
.sidenav{height:100%;width:0;position:fixed;z-index:40;top:0;right:0;background:rgba(28,28,30,.97);overflow-x:hidden;overflow-y:auto;transition:width .28s ease;box-shadow:-10px 0 30px rgba(0,0,0,.22);}
.sidenav-inner{padding:82px 26px 26px;display:flex;flex-direction:column;gap:4px;min-width:260px;}
.sidenav-heading{font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:1.5rem;color:#fff;margin-bottom:10px;opacity:.95;}
.sidenav a{padding:12px 0;text-decoration:none;font-size:1.18rem;line-height:1.2;color:#f3f4f6;display:block;transition:color .2s ease,opacity .2s ease;white-space:normal;}
.sidenav a:hover,.sidenav a.active{color:#8ec5ff;}
.sidenav .closebtn{position:absolute;top:14px;right:18px;font-size:38px;line-height:1;color:#fff;text-decoration:none;z-index:41;cursor:pointer;}
.testimonial-sidenav{background:linear-gradient(180deg,rgba(35,35,38,.98),rgba(56,56,62,.98));}
.testimonial-nav-content{padding:82px 26px 26px;min-width:300px;color:#fff;}
.testimonial-nav-content h3{font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:1.6rem;margin:0 0 16px;color:#fff;}
body.nav-open, body.testimonial-open{overflow:hidden;}
@media (max-width:700px){.sidenav{max-width:100vw}.testimonial-nav-content,.sidenav-inner{min-width:auto;width:100%}.right-icons{margin-right:14px;gap:12px}}

.person-icon-btn {
  background: transparent;
  border: 0;
  padding: 0;
  line-height: 0;
}
.hero-blurb {
  max-width: 920px;
  margin: 10px auto 26px;
  text-align: center;
  font-family: "Afacad Flux", sans-serif;
  font-size: 1.04rem;
  line-height: 1.7;
  color: #3f3f46;
}
.page-header {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 14px;
  text-align: center;
}
.page-heading {
  font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 2.2rem;
  line-height: 1.1;
  margin: 10px 0 8px;
  color: #2f2f33;
}
.page-subtitle {
  font-family: "Afacad Flux", sans-serif;
  font-size: 1.05rem;
  color: #6b7280;
  margin-bottom: 18px;
}
.page-intro {
  font-family: "Afacad Flux", sans-serif;
  font-size: 1.04rem;
  line-height: 1.7;
  color: #4b5563;
  max-width: 900px;
  margin: 0 auto 10px;
}
.section-header{
  width:100%;
  grid-column:1/-1;
  margin:34px 0 4px;
  font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:1.7rem;
  color:#3f3f46;
  text-align:left;
}
.section-subtitle{
  width:100%;
  grid-column:1/-1;
  margin:0 0 18px;
  font-family:"Afacad Flux", sans-serif;
  font-size:1.02rem;
  color:#6b7280;
  text-align:left;
}
.section-grid{
  width:100%;
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.section-link-wrap{
  width:100%;
  grid-column:1/-1;
  margin:10px 0 10px;
  text-align:left;
}
.section-link{
  display:inline-block;
  font-family:"Afacad Flux", sans-serif;
  font-size:1rem;
  font-weight:600;
  color:#4b5563;
  text-decoration:none;
  border-bottom:1px solid #d1d5db;
  padding-bottom:2px;
}
.section-link:hover{
  color:#111827;
  border-bottom-color:#111827;
}
.feature-card.image-tile{
  position:relative;
  min-height:250px;
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:0;
  border-radius:22px;
  overflow:hidden;
  background:#ffffff;
  border:1px solid rgba(17,24,39,.08);
  box-shadow:0 14px 30px rgba(0,0,0,.10);
  cursor:pointer;
  transition:transform .22s ease, box-shadow .22s ease;
}
.feature-card.image-tile:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 34px rgba(0,0,0,.16);
}
.feature-copy{
  width:54%;
  padding:26px 22px 22px 24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:#111827;
  position:relative;
  z-index:2;
}
.feature-kicker{
  font-family:"Afacad Flux",sans-serif;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6b7280;
  margin-bottom:8px;
}
.feature-title{
  font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:1.6rem;
  line-height:1.05;
  margin:0 0 10px;
  color:#1f2937;
}
.feature-desc{
  font-family:"Afacad Flux",sans-serif;
  font-size:.98rem;
  line-height:1.45;
  color:#4b5563;
  margin:0 0 18px;
}
.feature-btn{
  align-self:flex-start;
  background:#2F80ED;
  color:#fff;
  border:none;
  border-radius:999px;
  padding:11px 18px;
  font-family:"Afacad Flux",sans-serif;
  font-size:.92rem;
  font-weight:600;
  transition:all .2s ease;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
}
.feature-card:hover .feature-btn{
  background:#1C63C9;
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.25);
}
.feature-media{
  width:46%;
  min-height:250px;
  position:relative;
  background:linear-gradient(180deg,rgba(243,244,246,1),rgba(229,231,235,1));
}
.feature-media:after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:60%;
  background:linear-gradient(to right, rgba(255,255,255,.42), transparent);
  pointer-events:none;
}
.feature-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.popup-content{
  max-width:1000px;
}
.portfolio_image{
  width:100%;
  max-width:900px;
  height:auto;
  display:block;
  margin:20px auto;
}
.popup-content iframe,
.popup-content video{
  width:100%;
  max-width:900px;
  border-radius:12px;
  margin:16px auto;
}
.contact-wrap{
  max-width: 760px;
  margin: 0 auto;
}
.contact-form{
  max-width: 760px;
  margin: 0 auto;
  padding: 26px;
  background: rgba(255,255,255,.86);
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}
.contact-form label{
  display:block;
  font-weight:600;
  margin-top:14px;
  font-family:"Afacad Flux", sans-serif;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  padding:12px;
  margin-top:6px;
  border:1px solid #d1d5db;
  border-radius:12px;
  font-size:1rem;
  background:#fff;
}
.contact-form button{
  margin-top:16px;
  padding:12px 22px;
  background-color:#2F80ED;
  color:white;
  border:none;
  border-radius:999px;
  cursor:pointer;
  font-size:1rem;
  font-weight:600;
}
.contact-form button:hover{
  background:#1C63C9;
}
.flash-message {
  margin: 0 auto 18px;
  max-width: 760px;
  padding: 12px 16px;
  border-radius: 12px;
  font-family:"Afacad Flux", sans-serif;
}
.flash-success { background:#dcfce7; color:#166534; }
.flash-error { background:#fee2e2; color:#991b1b; }
.testimonial-nav-content { padding: 80px 26px 26px; color:#fff; }
.testimonial-card {
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}
.testimonial-card p {
  font-family:"Afacad Flux",sans-serif;
  margin:0 0 12px;
  line-height:1.65;
  color:rgba(255,255,255,.92);
  font-size:1.12rem;
  max-width:none;
}
.testimonial-card span {
  display:block;
  font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:1.02rem;
  font-weight:600;
  color:#ffffff;
  letter-spacing:.01em;
  opacity:1;
}
.admin-link-inline{
  display:inline-block;
  margin-top:16px;
  color:#1C63C9;
  font-weight:600;
}
@media (max-width:1100px){
  .feature-copy{width:58%;}
  .feature-media{width:42%;}
}
@media (max-width:900px){
  .section-grid{grid-template-columns:1fr;gap:20px}
  .section-header,.section-subtitle,.section-link-wrap{text-align:center}
  .feature-card.image-tile{min-height:220px}
  .feature-copy{width:56%;padding:22px 18px}
  .feature-title{font-size:1.45rem}
  .feature-desc{font-size:.94rem}
  .feature-media{width:44%;min-height:220px}
  .hero-blurb{font-size:1rem}
}
@media (max-width:560px){
  .feature-card.image-tile{flex-direction:column;min-height:auto}
  .feature-copy,.feature-media{width:100%}
  .feature-media{min-height:190px;order:2}
  .feature-copy{order:1}
}


/* Updated portfolio card layout: full-bleed image card with content overlaid at the bottom */
.section-grid{align-items:start;}
.portfolio-card.poster-card{
  display:block;
  cursor:pointer;
  min-height:100%;
}
.portfolio-card-frame{
  position:relative;
  background:#111827;
  border-radius:0;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.22);
  transition:transform .24s ease, box-shadow .24s ease;
}
.portfolio-card.poster-card:hover .portfolio-card-frame{
  transform:translateY(-8px) scale(1.01);
  box-shadow:0 28px 56px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.06);
}
.portfolio-card-frame::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 50% 100%, rgba(96,165,250,.22), rgba(96,165,250,0) 48%), linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  opacity:0;
  transition:opacity .28s ease;
  pointer-events:none;
  z-index:3;
}
.portfolio-card.poster-card:hover .portfolio-card-frame::after{
  opacity:1;
}
.portfolio-card-image{
  position:relative;
  aspect-ratio: 16 / 12;
  background:#1f2937;
  overflow:hidden;
}
.portfolio-card-image::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(7,10,16,.92) 0%, rgba(7,10,16,.78) 22%, rgba(7,10,16,.25) 52%, rgba(7,10,16,.02) 78%);
  z-index:1;
  pointer-events:none;
}
.portfolio-card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .45s ease, filter .3s ease;
}
.portfolio-card.poster-card:hover .portfolio-card-image img{
  transform:scale(1.04);
  filter:saturate(1.06) contrast(1.04);
}
.portfolio-card-overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  padding:18px 18px 16px;
}
.portfolio-card-kicker{
  font-family:"Afacad Flux",sans-serif;
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.86);
  margin-bottom:8px;
}
.portfolio-card-title{
  font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:1.5rem;
  line-height:1.08;
  color:#fff;
  margin:0 0 8px;
  text-shadow:0 2px 10px rgba(0,0,0,.25);
}
.portfolio-card-desc{
  font-family:"Afacad Flux",sans-serif;
  font-size:1rem;
  line-height:1.45;
  color:rgba(255,255,255,.95);
  margin:0;
  max-width:none;
  text-shadow:0 2px 8px rgba(0,0,0,.24);
}
@media (max-width:900px){
  .portfolio-card-title{font-size:1.28rem;}
  .portfolio-card-overlay{padding:16px 16px 14px;}
}

/* =============================================
   Luxury Dark Cinematic Frontend Pass
   ============================================= */
:root{
  --bg-0:#090b10;
  --bg-1:#0d1118;
  --bg-2:#121826;
  --surface-0:rgba(255,255,255,0.035);
  --surface-1:rgba(255,255,255,0.06);
  --surface-2:rgba(255,255,255,0.10);
  --border-0:rgba(255,255,255,0.08);
  --border-1:rgba(255,255,255,0.14);
  --text-0:#f5f7fb;
  --text-1:#d6dce8;
  --text-2:#9ea8bb;
  --accent:#7cc1ff;
  --accent-strong:#53a9ff;
  --shadow-lg:0 26px 80px rgba(0,0,0,.52);
}

html{
  background:var(--bg-0);
}
body{
  background:
    radial-gradient(900px 480px at 15% 0%, rgba(84,126,255,.11), transparent 60%),
    radial-gradient(900px 520px at 85% 8%, rgba(0,190,255,.09), transparent 58%),
    linear-gradient(180deg, #0a0d13 0%, #090b10 100%);
  color:var(--text-1);
  min-height:100vh;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,0));
  opacity:.18;
  z-index:-1;
}
.gradient-background{display:none;}

p,
ul,
li{
  color:var(--text-1);
}

a{color:var(--accent);}
a:hover{color:#a5d7ff;}

.navbar{
  padding:18px 22px;
  background:linear-gradient(180deg, rgba(7,10,16,.78), rgba(7,10,16,.18) 72%, transparent);
  backdrop-filter:blur(14px);
}
.hamburger,
.navbar .person-icon{
  color:var(--text-0);
}
.hamburger{
  width:46px;
  height:46px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.hamburger:hover{
  background:rgba(255,255,255,.11);
  color:#fff;
}
.person-icon-btn{
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  padding:2px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.icon-person-speech-bubble{filter:drop-shadow(0 6px 16px rgba(0,0,0,.28));}
.icon-person-speech-bubble path:last-child,
.icon-person-speech-bubble path:nth-child(2),
.icon-person-speech-bubble path:first-child{fill:#dbe8ff;}

.side-nav,
.sidenav{
  background:linear-gradient(180deg, rgba(12,16,24,.97), rgba(8,10,16,.98));
  box-shadow:-14px 0 50px rgba(0,0,0,.42);
  border-left:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(16px);
}
.sidenav::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:220px;
  background:radial-gradient(circle at top right, rgba(124,193,255,.14), transparent 62%);
  pointer-events:none;
}
.sidenav-heading,
.testimonial-nav-content h3{color:var(--text-0);letter-spacing:.01em;}
.sidenav a{color:var(--text-1);}
.sidenav a:hover,.sidenav a.active{color:#fff;}
.sidenav a.active{position:relative;}
.sidenav a.active::before{
  content:"";
  position:absolute;
  left:-14px;
  top:50%;
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--accent);
  transform:translateY(-50%);
  box-shadow:0 0 18px rgba(124,193,255,.8);
}

.main-content{
  width:min(1320px, 100% - 72px);
  margin-top:130px;
  padding-bottom:120px;
}
.small-text,
.senior-ux-designer-text,
.page-subtitle,
.section-subtitle,
.hero-blurb,
.page-intro{
  font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.small-text{
  color:#8f9bb0;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.84rem;
  font-weight:600;
  animation:none;
  opacity:1;
}
.large-text{
  color:var(--text-0);
  background:none !important;
  -webkit-background-clip:initial;
  font-size:clamp(3rem, 6vw, 5.7rem);
  line-height:.95;
  letter-spacing:-.05em;
  font-weight:800;
  margin-top:10px;
  animation:none;
  opacity:1;
  text-align:center;
  text-shadow:0 18px 60px rgba(0,0,0,.38);
}
.senior-ux-designer-text{
  color:var(--text-2);
  font-size:clamp(1.02rem, 2vw, 1.35rem);
  font-weight:500;
  margin-top:14px;
  letter-spacing:.01em;
  animation:none;
  opacity:1;
}
.hero-blurb,
.page-intro{
  max-width:860px;
  margin:18px auto 0;
  color:var(--text-2);
  font-size:1.02rem;
  line-height:1.8;
  text-align:center;
}
.page-header{
  margin:0 auto 38px;
  max-width:980px;
}
.page-heading{
  color:var(--text-0);
  letter-spacing:-.035em;
  font-size:clamp(2.2rem, 4vw, 4rem);
  margin:12px 0 10px;
}
.page-subtitle{
  color:var(--text-2);
  margin-bottom:14px;
}

.image-grid{
  width:100%;
  gap:18px;
  margin-top:56px;
  margin-bottom:0;
}
.section-header{
  color:var(--text-0);
  font-size:clamp(1.5rem, 2vw, 2rem);
  font-weight:700;
  letter-spacing:-.03em;
  margin:62px 0 6px;
}
.section-subtitle{
  color:var(--text-2);
  max-width:760px;
  line-height:1.7;
  margin:0 0 24px;
}
.section-grid{
  gap:28px;
}
.section-link-wrap{margin:18px 0 6px;}
.section-link{
  color:var(--text-1);
  border-bottom:1px solid rgba(255,255,255,.18);
}
.section-link:hover{
  color:#fff;
  border-bottom-color:rgba(255,255,255,.8);
}

/* Cinematic poster cards */
.section-grid:hover .portfolio-card-frame{opacity:.62; transform:scale(.985);}
.section-grid:hover .portfolio-card.poster-card:hover .portfolio-card-frame{opacity:1; transform:translateY(-12px) scale(1.02);}
.portfolio-card.poster-card{position:relative; isolation:isolate;}
.portfolio-card-frame{
  border-radius:0;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, #11161f, #0d1118);
  box-shadow:var(--shadow-lg);
  transition:transform .38s cubic-bezier(.22,1,.36,1), box-shadow .38s cubic-bezier(.22,1,.36,1), opacity .28s ease, border-color .28s ease;
}
.portfolio-card-frame::before{
  content:"";
  position:absolute;
  inset:-1px;
  border:1px solid transparent;
  opacity:0;
  background:linear-gradient(140deg, rgba(255,255,255,.18), rgba(255,255,255,.03), rgba(124,193,255,.18));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  padding:1px;
  pointer-events:none;
  transition:opacity .28s ease;
}
.portfolio-card-frame::after{
  opacity:.45;
  background:
    radial-gradient(80% 55% at 50% 100%, rgba(91,163,255,.32), rgba(91,163,255,0) 58%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
}
.portfolio-card.poster-card:hover .portfolio-card-frame{
  border-color:rgba(255,255,255,.16);
  box-shadow:0 34px 80px rgba(0,0,0,.62), 0 0 0 1px rgba(124,193,255,.12);
}
.portfolio-card.poster-card:hover .portfolio-card-frame::before{opacity:1;}
.portfolio-card-image{
  aspect-ratio: 16 / 18;
  background:#0f141d;
}
.portfolio-card-image::before{
  background:linear-gradient(to top, rgba(5,8,13,.98) 0%, rgba(5,8,13,.88) 16%, rgba(5,8,13,.48) 38%, rgba(5,8,13,.08) 72%);
}
.portfolio-card-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.06), transparent 26%);
  mix-blend-mode:screen;
  opacity:.46;
  z-index:1;
  pointer-events:none;
}
.portfolio-card-image img{
  filter:saturate(.94) contrast(1.02) brightness(.92);
  transition:transform .7s cubic-bezier(.22,1,.36,1), filter .35s ease;
}
.portfolio-card.poster-card:hover .portfolio-card-image img{
  transform:scale(1.085);
  filter:saturate(1.04) contrast(1.07) brightness(1);
}
.portfolio-card-overlay{
  padding:22px 22px 20px;
}
.portfolio-card-client{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#eef2fb;
  font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:.78rem;
  font-weight:600;
  line-height:1;
  margin-bottom:10px;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}
.portfolio-card-kicker{
  color:rgba(223,231,245,.78);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  margin-bottom:10px;
}
.portfolio-card-title{
  font-size:clamp(1.28rem, 2vw, 1.85rem);
  letter-spacing:-.03em;
  margin-bottom:8px;
}
.portfolio-card-desc{
  color:rgba(230,236,245,.82);
  font-size:.96rem;
  line-height:1.58;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Popup / project detail */
.popup{
  background:rgba(5,7,11,.78);
  backdrop-filter:blur(12px);
}
.popup-content{
  background:linear-gradient(180deg, rgba(15,19,28,.98), rgba(10,13,20,.98));
  color:var(--text-1);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  box-shadow:0 30px 90px rgba(0,0,0,.56);
  max-width:min(1100px, calc(100vw - 64px));
  max-height:86vh;
  padding:42px 42px 34px;
}
.popup-content h1,
.popup-content h2,
.popup-content h3,
.popup-content .large-text,
.popup-content .small-text{color:var(--text-0); background:none !important;}
.popup-content .small-text{font-size:.9rem; letter-spacing:.12em; text-transform:uppercase;}
.popup-content p,
.popup-content ul,
.popup-content li{color:var(--text-1); max-width:820px;}
.popup-content iframe,
.popup-content video,
.popup .portfolio_image{
  border-radius:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.34);
}
.popup .close-btn{
  top:16px;
  right:22px;
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:42px;
  color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  text-shadow:none;
}
.popup .close-btn:hover{background:rgba(255,255,255,.12);}

/* Testimonial rail */
.testimonial-sidenav{
  background:linear-gradient(180deg, rgba(14,18,27,.98), rgba(9,12,18,.98));
}
.testimonial-nav-content{padding:88px 28px 28px;}
.testimonial-card{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 18px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
}
.testimonial-card p{color:#eef4ff;font-size:1.02rem;line-height:1.72;}
.testimonial-card span{color:#9ad1ff; font-size:.95rem; letter-spacing:.02em;}

/* Contact page */
.contact-form{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 24px 60px rgba(0,0,0,.34);
  backdrop-filter:blur(10px);
}
.contact-form label{color:var(--text-1);}
.contact-form input,
.contact-form textarea{
  background:rgba(7,10,16,.75);
  border:1px solid rgba(255,255,255,.1);
  color:var(--text-0);
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:rgba(124,193,255,.5);
  box-shadow:0 0 0 3px rgba(124,193,255,.14);
}
.contact-form button{
  background:linear-gradient(180deg, #7bc1ff, #53a9ff);
  color:#06111f;
  box-shadow:0 12px 26px rgba(83,169,255,.24);
}
.contact-form button:hover{background:linear-gradient(180deg, #93d0ff, #66b4ff);}
.flash-success{background:rgba(34,197,94,.14); color:#bcf7d0; border:1px solid rgba(34,197,94,.22);}
.flash-error{background:rgba(248,113,113,.14); color:#ffd3d3; border:1px solid rgba(248,113,113,.22);}

/* General readability */
.person-icon{margin-right:12px;}
.right-icons{gap:14px;}
.image-grid.show{opacity:1; visibility:visible; transform:none;}

@media (max-width: 1100px){
  .main-content{width:min(1200px, calc(100% - 42px));}
  .section-grid{gap:22px;}
}
@media (max-width: 900px){
  .main-content{width:min(100%, calc(100% - 28px)); margin-top:112px;}
  .small-text{text-align:center;}
  .section-header,.section-subtitle,.section-link-wrap{text-align:center;}
  .section-grid:hover .portfolio-card-frame{opacity:1; transform:none;}
  .portfolio-card-frame{box-shadow:0 18px 48px rgba(0,0,0,.42);}
  .portfolio-card.poster-card:hover .portfolio-card-frame{transform:translateY(-6px) scale(1.01);}
  .popup-content{padding:34px 20px 26px; max-width:calc(100vw - 24px);}
}
@media (max-width: 640px){
  .navbar{padding:14px 14px 10px;}
  .main-content{width:calc(100% - 20px);}
  .portfolio-card-image{aspect-ratio:4 / 5;}
  .portfolio-card-overlay{padding:18px 16px 16px;}
  .section-header{margin-top:48px;}
  .hero-blurb,.page-intro{font-size:.98rem;}
}


.popup-project-header{max-width:860px;margin:0 auto 28px;padding:0 0 24px;border-bottom:1px solid rgba(255,255,255,.08);text-align:center}.popup-project-kicker{font-family:Inter,system-ui,sans-serif;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.68);margin-bottom:10px}.popup-project-title{font-family:Inter,system-ui,sans-serif;font-size:clamp(2rem,4vw,3.1rem);line-height:1.02;font-weight:700;letter-spacing:-.03em;color:#f5f7fb;margin:0 0 12px}.popup-project-summary{max-width:780px;margin:0 auto;color:rgba(233,239,248,.82);font-size:1.05rem;line-height:1.6}.portfolio-card-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Frontend alignment for editor-inserted media only */
.popup-content .wysiwyg-media.align-center,
.popup-content .editor-media.align-center,
.popup-content figure.align-center {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

.popup-content .wysiwyg-media.align-right,
.popup-content .editor-media.align-right,
.popup-content figure.align-right {
  display: table;
  margin-left: auto;
  margin-right: 0;
}

.popup-content .wysiwyg-media.align-left,
.popup-content .editor-media.align-left,
.popup-content figure.align-left {
  display: table;
  margin-left: 0;
  margin-right: auto;
}

.popup-content .wysiwyg-media.wrap-left,
.popup-content .editor-media.wrap-left,
.popup-content figure.wrap-left {
  float: left;
  margin: 8px 22px 14px 0;
  max-width: min(48%, 420px);
}

.popup-content .wysiwyg-media.wrap-right,
.popup-content .editor-media.wrap-right,
.popup-content figure.wrap-right {
  float: right;
  margin: 8px 0 14px 22px;
  max-width: min(48%, 420px);
}

.popup-content .wysiwyg-media img,
.popup-content .editor-media img,
.popup-content figure img {
  display: block;
  max-width: 100%;
  height: auto;
}

.popup-content::after,
.popup-content #popup-text::after {
  content: "";
  display: block;
  clear: both;
}

@media (max-width: 700px) {
  .popup-content .wysiwyg-media.wrap-left,
  .popup-content .wysiwyg-media.wrap-right,
  .popup-content .editor-media.wrap-left,
  .popup-content .editor-media.wrap-right,
  .popup-content figure.wrap-left,
  .popup-content figure.wrap-right {
    float: none;
    display: table;
    margin: 14px auto;
    max-width: 100%;
  }
}

/* WYSIWYG frontend alignment + YouTube sizing fixes */
.popup-content img{
  max-width:100%;
  height:auto;
}

.popup-content img.align-center,
.popup-content img[data-align="center"]{
  display:block;
  margin:20px auto;
  float:none;
}

.popup-content img.align-left,
.popup-content img[data-align="left"]{
  display:block;
  float:left;
  margin:10px 22px 12px 0;
}

.popup-content img.align-right,
.popup-content img[data-align="right"]{
  display:block;
  float:right;
  margin:10px 0 12px 22px;
}

.popup-content img.wrap-left,
.popup-content img[data-wrap="left"]{
  display:block;
  float:left;
  margin:10px 22px 12px 0;
  max-width:min(45%, 420px);
}

.popup-content img.wrap-right,
.popup-content img[data-wrap="right"]{
  display:block;
  float:right;
  margin:10px 0 12px 22px;
  max-width:min(45%, 420px);
}

.popup-content iframe[src*="youtube.com"],
.popup-content iframe[src*="youtu.be"]{
  display:block;
  width:100%;
  max-width:900px;
  aspect-ratio:16 / 9;
  height:auto;
  margin:16px auto;
}

.popup-content p::after,
.popup-content li::after{
  content:"";
  display:block;
  clear:both;
}

@media (max-width:700px){
  .popup-content img.wrap-left,
  .popup-content img.wrap-right,
  .popup-content img[data-wrap="left"],
  .popup-content img[data-wrap="right"]{
    float:none;
    display:block;
    max-width:100%;
    margin:16px auto;
  }

  .popup-content img.align-left,
  .popup-content img.align-right,
  .popup-content img[data-align="left"],
  .popup-content img[data-align="right"]{
    float:none;
    display:block;
    margin:16px auto;
  }
}

/* Testimonial read more */
.testimonial-card p{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:5;
  overflow:hidden;
  position:relative;
}

.testimonial-card.has-readmore p::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2.4em;
  background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(9,12,18,.96));
  pointer-events:none;
}

.testimonial-card.expanded p{
  display:block;
  overflow:visible;
  -webkit-line-clamp:unset;
}

.testimonial-card.expanded p::after{
  display:none;
}

.testimonial-readmore{
  appearance:none;
  background:transparent;
  border:0;
  padding:0;
  margin:2px 0 12px;
  color:#9ad1ff;
  font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:.92rem;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
}

.testimonial-readmore:hover{
  color:#c8e6ff;
}

.testimonial-readmore:focus-visible{
  outline:2px solid rgba(154,209,255,.75);
  outline-offset:4px;
  border-radius:4px;
}

.popup-project-client{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#e7edf8;font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:.88rem;font-weight:600;line-height:1;margin:0 auto 14px;box-shadow:0 10px 24px rgba(0,0,0,.18)}

/* =============================================
   Amazing pass: cleaner hero, sharper cards, better admin output
   ============================================= */
.floating-brand{
  display:inline-flex;
  flex-direction:column;
  gap:2px;
  color:#fff;
  text-decoration:none;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}
.floating-brand-title{font-weight:800;font-size:.96rem;line-height:1;color:#fff;letter-spacing:-.02em;}
.floating-brand-subtitle{font-size:.72rem;color:rgba(229,238,255,.72);line-height:1.1;}
.navbar.scrolled .floating-brand{background:rgba(11,15,22,.78);backdrop-filter:blur(14px);}
.main-content > .small-text:first-child::before{
  content:"";
  display:inline-block;
  width:34px;
  height:1px;
  margin:0 12px 4px 0;
  background:linear-gradient(90deg, transparent, rgba(124,193,255,.85));
}
.main-content > .small-text:first-child::after{
  content:"";
  display:inline-block;
  width:34px;
  height:1px;
  margin:0 0 4px 12px;
  background:linear-gradient(90deg, rgba(124,193,255,.85), transparent);
}
.hero-blurb{
  padding:0 18px;
}
.hero-blurb::after{
  content:"Product design • AI workflows • Motion • Creative production";
  display:flex;
  width:max-content;
  max-width:calc(100vw - 48px);
  margin:24px auto 0;
  padding:10px 14px;
  border-radius:999px;
  color:#cfe6ff;
  background:rgba(124,193,255,.08);
  border:1px solid rgba(124,193,255,.16);
  font-size:.86rem;
  line-height:1.2;
  letter-spacing:.02em;
  box-shadow:0 16px 40px rgba(0,0,0,.24);
}
.section-header{
  display:flex;
  align-items:center;
  gap:14px;
}
.section-header::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.16), transparent);
}
.portfolio-card.poster-card:focus-visible .portfolio-card-frame,
.portfolio-card.poster-card:focus .portfolio-card-frame{
  outline:3px solid rgba(124,193,255,.75);
  outline-offset:5px;
}
.portfolio-card-frame{
  transform-style:preserve-3d;
}
.portfolio-card.poster-card:hover .portfolio-card-overlay{
  transform:translateY(-2px);
}
.portfolio-card-overlay{transition:transform .34s cubic-bezier(.22,1,.36,1);}
.section-link{
  padding:11px 16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  box-shadow:0 14px 34px rgba(0,0,0,.18);
}
.section-link::after{content:"  →";}
.section-link:hover{background:rgba(255,255,255,.08);}
.popup-content h2:not(.popup-project-title){
  font-size:1.35rem;
  letter-spacing:-.02em;
  margin:28px auto 10px;
  max-width:820px;
}
.popup-content a{
  color:#9ad1ff;
  text-decoration:underline;
  text-underline-offset:3px;
}
.contact-form{
  position:relative;
  overflow:hidden;
}
.contact-form::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:120px;
  background:radial-gradient(circle at 20% 0%, rgba(124,193,255,.16), transparent 60%);
  pointer-events:none;
}
.contact-form > *{position:relative;z-index:1;}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;transition-duration:.01ms !important;}
}
@media (max-width:900px){
  .section-header{justify-content:center;}
  .section-header::after{display:none;}
  .hero-blurb::after{width:auto;justify-content:center;text-align:center;white-space:normal;}
}
body.popup-open{overflow:hidden;}

/* Standard project case study flow */
.project-detail{
  width:100%;
}
.project-detail-body{
  display:flex;
  flex-direction:column;
  gap:28px;
  max-width:960px;
  margin:0 auto;
}
.case-study-section{
  display:grid;
  grid-template-columns:minmax(160px, 240px) minmax(0, 1fr);
  gap:28px;
  align-items:start;
  padding:28px 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.case-study-section:first-child{
  border-top:0;
  padding-top:6px;
}
.case-study-section h3,
.project-detail-body > h3{
  margin:0;
  color:#f5f7fb;
  font-size:.88rem;
  line-height:1.25;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800;
  position:sticky;
  top:0;
}
.case-study-copy{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.case-study-copy p,
.case-study-copy li{
  color:rgba(233,239,248,.84);
  font-size:1.02rem;
  line-height:1.72;
  margin:0;
}
.case-study-copy ul,
.case-study-copy ol{
  margin:0;
  padding-left:22px;
}
.case-study-media,
.case-study-copy .video-embed,
.case-study-copy img.portfolio_image{
  width:100%;
  margin:4px auto 8px;
}
.case-study-media{
  display:block;
}
.project-detail-body img.portfolio_image,
.case-study-media img,
.case-study-copy img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}
.project-detail-body .video-embed{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 40px rgba(0,0,0,.34);
  background:#05070b;
}
.project-detail-body .video-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.project-detail-body > p,
.project-detail-body > ul,
.project-detail-body > ol{
  max-width:820px;
  margin:0 auto;
  color:rgba(233,239,248,.84);
  font-size:1.02rem;
  line-height:1.72;
}
@media (max-width:760px){
  .popup-content{max-width:calc(100vw - 24px);padding:30px 20px 28px;}
  .case-study-section{grid-template-columns:1fr;gap:12px;padding:24px 0;}
  .case-study-section h3{position:static;}
}

/* Case study system upgrade: consistent two-column anatomy */
#popup-text{
  width:100%;
}
.project-detail{
  width:100%;
}
.project-detail-hero{
  max-width:960px;
  margin:0 auto 18px;
  padding:8px 0 30px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.project-eyebrow{
  margin:0 0 12px !important;
  max-width:none !important;
  color:#9ad1ff !important;
  font-size:.78rem !important;
  line-height:1.2 !important;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.project-detail-hero h2{
  margin:0 !important;
  max-width:880px !important;
  color:#fff !important;
  font-size:clamp(2.35rem, 5vw, 5.25rem) !important;
  line-height:.95 !important;
  letter-spacing:-.07em !important;
}
.project-hero-summary{
  margin:20px 0 0 !important;
  max-width:760px !important;
  color:rgba(233,239,248,.82) !important;
  font-size:clamp(1.08rem, 1.8vw, 1.35rem) !important;
  line-height:1.55 !important;
}
.project-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
  color:rgba(233,239,248,.62);
  font-size:.9rem;
  letter-spacing:.04em;
}
.project-feature-media{
  width:100%;
  max-width:960px;
  margin:0 auto 4px;
}
.project-feature-media img,
.project-feature-media video,
.project-feature-media iframe{
  width:100%;
  display:block;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 24px 70px rgba(0,0,0,.38);
  background:#05070b;
}
.project-detail-body{
  max-width:960px;
  gap:0;
}
.case-study-section{
  grid-template-columns:minmax(150px, 220px) minmax(0, 1fr);
  gap:34px;
  padding:34px 0;
  border-top:1px solid rgba(255,255,255,.1);
}
.case-study-section > h3{
  color:rgba(255,255,255,.9);
  font-size:.76rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:850;
  line-height:1.35;
  padding-top:5px;
  position:static;
}
.case-study-copy{
  gap:18px;
  min-width:0;
}
.case-study-copy > *:first-child{margin-top:0 !important;}
.case-study-copy > *:last-child{margin-bottom:0 !important;}
.case-study-copy p,
.case-study-copy li{
  max-width:720px !important;
  color:rgba(235,240,248,.82) !important;
  font-size:1.04rem;
  line-height:1.74;
}
.case-study-copy ul,
.case-study-copy ol{
  max-width:720px !important;
  margin:0 !important;
  padding-left:1.2rem !important;
}
.case-study-copy li{margin-top:.65rem;}
.case-study-copy img.portfolio_image,
.case-study-copy figure,
.case-study-copy .video-embed{
  max-width:100% !important;
  margin:12px 0 4px !important;
}
.case-study-copy img.portfolio_image,
.case-study-copy figure img,
.project-detail-body img.portfolio_image{
  border-radius:20px;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 20px 54px rgba(0,0,0,.32);
}
.case-study-copy strong{color:#fff;}
@media (max-width:760px){
  .project-detail-hero{padding:0 0 22px;margin-bottom:6px;}
  .project-detail-hero h2{font-size:clamp(2rem, 12vw, 3.3rem) !important;}
  .case-study-section{grid-template-columns:1fr;gap:14px;padding:26px 0;}
  .case-study-section > h3{padding-top:0;}
}

/* Unified image + YouTube media gallery */
.project-media-gallery{
  max-width:960px;
  margin:38px auto 0;
  padding:28px;
  position:relative;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  box-shadow:0 28px 90px rgba(0,0,0,.36);
}
.media-gallery-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0 0 16px;
  color:rgba(255,255,255,.92);
  font-family:Inter, system-ui, sans-serif;
}
.media-gallery-heading span{
  font-size:.78rem;
  font-weight:850;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#9ad1ff;
}
.media-gallery-heading strong{
  font-size:.86rem;
  font-weight:700;
  color:rgba(255,255,255,.55);
}
.media-stage{
  width:100%;
}
.media-stage-item{width:100%;}
.media-details{padding:15px 4px 2px;color:rgba(255,255,255,.9);font-family:Inter,system-ui,sans-serif}
.media-details strong{display:block;font-size:1rem;line-height:1.35}
.media-details p{margin:5px 0 0;color:rgba(255,255,255,.62);font-size:.9rem;line-height:1.55}
.media-frame{
  width:100%;
  aspect-ratio:16/9;
  display:block;
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:#05070b;
  box-shadow:0 18px 54px rgba(0,0,0,.34);
}
.media-frame-image{
  padding:0;
  cursor:zoom-in;
}
.media-frame img,
.media-frame iframe{
  width:100%;
  height:100%;
  display:block;
  border:0;
}
.media-frame img{
  object-fit:contain;
  background:#05070b;
  transition:transform .5s ease;
}
.media-frame-image:hover img{
  transform:scale(1.018);
}

.media-frame-html iframe{
  background:#fff;
}
.media-html-thumb{
  width:100%;
  height:100%;
  display:grid;
  place-content:center;
  gap:2px;
  background:linear-gradient(135deg, rgba(40,111,149,.14), rgba(118,90,166,.14));
  color:var(--text-0, #17191d);
  font-family:Inter,system-ui,sans-serif;
}
.media-html-thumb span{font-size:1.15rem;font-weight:850;letter-spacing:-.06em;line-height:1;}
.media-html-thumb small{font-size:.55rem;font-weight:850;letter-spacing:.12em;opacity:.65;}
.media-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(5,8,14,.78);
  color:#fff;
  font-size:32px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(0,0,0,.35);
  backdrop-filter:blur(12px);
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.media-arrow:hover{
  transform:translateY(-50%) scale(1.06);
  background:rgba(25,33,48,.94);
  border-color:rgba(154,209,255,.45);
}
.media-prev{left:6px;}
.media-next{right:6px;}
.media-thumbs{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:14px 2px 2px;
  scroll-snap-type:x proximity;
}
.media-thumb{
  flex:0 0 86px;
  height:58px;
  position:relative;
  overflow:hidden;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  padding:0;
  cursor:pointer;
  opacity:.62;
  scroll-snap-align:start;
  transition:opacity .18s ease, transform .18s ease, border-color .18s ease;
}
.media-thumb:hover,
.media-thumb.active{
  opacity:1;
  transform:translateY(-2px);
  border-color:rgba(154,209,255,.72);
}
.media-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.media-play-dot{
  position:absolute;
  inset:auto auto 6px 6px;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(0,0,0,.72);
  color:#fff;
  font-size:11px;
  padding-left:2px;
}
.media-lightbox{
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:34px;
  background:rgba(0,0,0,.86);
  backdrop-filter:blur(12px);
}
.media-lightbox.active{display:flex;}
.media-lightbox img{
  max-width:min(1200px, 94vw);
  max-height:88vh;
  border-radius:18px;
  box-shadow:0 24px 80px rgba(0,0,0,.55);
}
.media-lightbox-close{
  position:fixed;
  top:18px;
  right:22px;
  width:46px;
  height:46px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:32px;
  line-height:1;
  cursor:pointer;
}
@media (max-width:760px){
  .project-media-gallery{padding:16px;border-radius:22px;margin-top:28px;}
  .media-gallery-heading{align-items:flex-start;flex-direction:column;gap:4px;}
  .media-frame{border-radius:16px;}
  .media-arrow{width:40px;height:40px;font-size:28px;}
  .media-prev{left:0;}
  .media-next{right:0;}
  .media-thumb{flex-basis:74px;height:50px;border-radius:10px;}
}

/* Phase 2 portfolio polish */
.portfolio-controls{
  margin:0 auto 34px;
  max-width:1180px;
  padding:18px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.028));
  border-radius:24px;
  box-shadow:0 18px 60px rgba(0,0,0,.22);
}
.portfolio-search{display:block;margin-bottom:14px;}
.portfolio-search span{display:block;margin:0 0 8px;font-size:.74rem;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.62);font-weight:800;}
.portfolio-search input{
  width:100%;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(5,8,13,.72);
  color:#fff;
  padding:15px 18px;
  font:inherit;
  outline:none;
}
.portfolio-search input:focus{border-color:rgba(151,212,255,.72);box-shadow:0 0 0 4px rgba(151,212,255,.12);}
.portfolio-filter-row{display:flex;flex-wrap:wrap;gap:9px;}
.filter-pill{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.055);
  color:rgba(255,255,255,.78);
  border-radius:999px;
  padding:9px 13px;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.04em;
  cursor:pointer;
}
.filter-pill.active,
.filter-pill:hover{background:rgba(151,212,255,.16);border-color:rgba(151,212,255,.42);color:#fff;}
.portfolio-empty{display:none;margin-top:18px;color:rgba(255,255,255,.68);text-align:center;}
.portfolio-empty.active{display:block;}
.portfolio-card.is-hidden-by-filter{display:none;}
.card-tag-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;}
.card-tag-row span{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:5px 8px;color:rgba(255,255,255,.78);background:rgba(0,0,0,.2);}
.project-phase2-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:26px 0 8px;
  padding:14px 0 4px;
}
.project-phase2-tags,.project-phase2-stats{display:flex;flex-wrap:wrap;gap:9px;}
.project-phase2-tags span{
  border:1px solid rgba(151,212,255,.32);
  background:rgba(151,212,255,.105);
  color:#dff1ff;
  border-radius:999px;
  padding:8px 12px;
  font-size:.72rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  font-weight:900;
}
.project-phase2-stats strong{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.055);
  color:#fff;
  border-radius:16px;
  padding:9px 12px;
  font-size:.9rem;
}
.related-projects{border-top:1px solid rgba(255,255,255,.11);margin-top:48px;padding-top:34px;}
.related-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:16px;}
.related-heading span{font-size:.75rem;color:#9fd8ff;letter-spacing:.18em;text-transform:uppercase;font-weight:900;}
.related-heading strong{font-size:1.35rem;color:#fff;}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.related-card{
  text-align:left;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.045);
  border-radius:20px;
  padding:10px;
  color:#fff;
  cursor:pointer;
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.related-card:hover{transform:translateY(-4px);border-color:rgba(151,212,255,.35);background:rgba(151,212,255,.08);}
.related-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px;margin-bottom:10px;background:#111;}
.related-card span{display:block;color:#9fd8ff;font-size:.68rem;text-transform:uppercase;letter-spacing:.13em;font-weight:900;margin:0 2px 5px;}
.related-card strong{display:block;font-size:1rem;line-height:1.2;margin:0 2px 4px;}
.reveal-on-scroll{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease;}
.reveal-on-scroll.is-visible{opacity:1;transform:none;}
@media (max-width:760px){
  .project-phase2-meta{align-items:flex-start;flex-direction:column;}
  .related-grid{grid-template-columns:1fr;}
  .related-heading{align-items:flex-start;flex-direction:column;}
}

/* Phase 2 cleanup: wider search, cleaner nav brand, true results-only filtering */
.floating-brand,
.navbar.scrolled .floating-brand{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}
.floating-brand:hover{color:#fff;}

.portfolio-controls{
  grid-column:1 / -1;
  width:min(1280px, 100%);
  max-width:none;
  margin:0 auto 52px;
  padding:20px 22px;
}
.portfolio-filter-row{gap:10px 12px;}

.portfolio-section{
  grid-column:1 / -1;
  width:100%;
}
.portfolio-section.is-empty-filter-section{display:none;}
.image-grid.results-mode{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:28px;
}
.image-grid.results-mode .portfolio-controls{
  margin-bottom:24px;
}
.image-grid.results-mode .portfolio-section,
.image-grid.results-mode .section-grid{
  display:contents;
}
.image-grid.results-mode .section-header,
.image-grid.results-mode .section-subtitle,
.image-grid.results-mode .section-link-wrap{
  display:none;
}
.image-grid.results-mode .portfolio-card{
  grid-column:auto;
}
.portfolio-empty.active{
  padding:14px 0 4px;
}

@media (max-width: 1100px){
  .image-grid.results-mode{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .portfolio-controls{width:100%;}
}
@media (max-width: 720px){
  .image-grid.results-mode{grid-template-columns:1fr;}
  .portfolio-controls{padding:16px;border-radius:18px;}
}

/* Phase 2.1: nav search modal and dedicated results page */
.nav-search-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.88);
  cursor:pointer;
  transition:background .2s ease, transform .2s ease, border-color .2s ease;
}
.nav-search-button:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(151,212,255,.32);
  transform:translateY(-1px);
}
.site-search-modal{
  position:fixed;
  inset:0;
  z-index:90;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:96px 24px 24px;
}
.site-search-modal.active{display:flex;}
.site-search-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(14px);
}
.site-search-panel{
  position:relative;
  width:min(860px,100%);
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(20,24,31,.98),rgba(10,13,18,.98));
  box-shadow:0 30px 90px rgba(0,0,0,.48);
  padding:34px;
  color:#fff;
}
.site-search-close{
  position:absolute;
  right:18px;
  top:14px;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.72);
  font-size:34px;
  line-height:1;
  cursor:pointer;
}
.site-search-kicker{
  font-family:"Inter",system-ui,sans-serif;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.76rem;
  font-weight:800;
  color:#9bd3ff;
  margin-bottom:10px;
}
.site-search-panel h2,
.search-results-hero h1{
  font-family:"Inter",system-ui,sans-serif;
  font-size:clamp(2rem,5vw,4.4rem);
  line-height:.98;
  letter-spacing:-.055em;
  margin:0 0 24px;
  color:#fff;
}
.site-search-form{
  display:flex;
  gap:12px;
  align-items:center;
}
.site-search-form input{
  flex:1;
  min-width:0;
  height:58px;
  border-radius:0;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.28);
  color:#fff;
  padding:0 18px;
  font-size:1.08rem;
  outline:none;
}
.site-search-form input:focus{
  border-color:rgba(151,212,255,.72);
  box-shadow:0 0 0 4px rgba(151,212,255,.12);
}
.site-search-form button{
  height:58px;
  border:0;
  border-radius:0;
  padding:0 24px;
  background:#fff;
  color:#0b0f16;
  font-weight:800;
  cursor:pointer;
}
.site-search-hint,
.search-results-hero p{
  margin:14px 0 0;
  color:rgba(255,255,255,.62);
  font-family:"Afacad Flux",sans-serif;
  font-size:1rem;
}
.search-results-page{
  width:min(1320px, calc(100vw - 64px));
  margin:42px auto 80px;
}
.search-results-hero{
  padding:54px 0 42px;
  border-bottom:1px solid rgba(255,255,255,.10);
  margin-bottom:34px;
}
.results-search-form{max-width:920px;}
.search-results-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
}
.search-empty-state{
  padding:42px 0;
  color:rgba(255,255,255,.68);
  font-family:"Afacad Flux",sans-serif;
  font-size:1.25rem;
}
@media (max-width:1100px){.search-results-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:720px){
  .site-search-modal{padding:80px 14px 14px;}
  .site-search-panel{padding:26px 18px;}
  .site-search-form{flex-direction:column;align-items:stretch;}
  .search-results-page{width:calc(100vw - 28px);}
  .search-results-grid{grid-template-columns:1fr;}
}

/* Phase 2.2: compact nav search, modal results, bottom keywords */
.nav-search-svg{width:20px;height:20px;display:block;color:currentColor;}
.site-search-panel{width:min(980px,100%);border-radius:0;padding:28px;max-height:calc(100vh - 120px);overflow:auto;}
.site-search-form{margin-right:42px;}
.site-search-form input{height:64px;font-size:1.12rem;}
.site-search-form button,.site-search-kicker,.site-search-panel h2,.site-search-hint{display:none!important;}
.site-search-results{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.site-search-result{display:none;align-items:center;gap:16px;width:100%;text-align:left;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.045);color:#fff;padding:12px;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease;}
.site-search-result.active{display:flex;}
.site-search-result:hover{background:rgba(255,255,255,.08);border-color:rgba(151,212,255,.34);transform:translateY(-1px);}
.site-search-result img{width:104px;height:68px;object-fit:cover;flex:0 0 auto;background:rgba(255,255,255,.05);}
.site-search-result-copy{display:flex;flex-direction:column;gap:3px;min-width:0;}
.site-search-result-copy strong{font-family:"Inter",system-ui,sans-serif;font-size:1rem;letter-spacing:-.02em;}
.site-search-result-copy em{font-style:normal;color:#9bd3ff;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800;}
.site-search-result-copy span{color:rgba(229,238,255,.72);font-family:"Afacad Flux",sans-serif;font-size:1rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.site-search-empty{display:block;padding:20px 0;color:rgba(255,255,255,.58);font-family:"Afacad Flux",sans-serif;font-size:1.1rem;}
.site-search-empty.hidden{display:none;}
.project-phase2-meta{margin-top:48px;border-top:1px solid rgba(255,255,255,.10);padding-top:24px;}
.project-media-gallery + .project-phase2-meta{margin-top:24px;}
.portfolio-controls:not(:has(.portfolio-filter-row)){display:none;}
.portfolio-controls{margin-bottom:28px;}
@media (max-width:720px){
  .site-search-modal{padding:72px 12px 12px;}
  .site-search-panel{padding:18px;max-height:calc(100vh - 86px);}
  .site-search-form{margin-right:36px;}
  .site-search-form input{height:76px;font-size:1.15rem;padding:0 16px;}
  .site-search-result{gap:12px;padding:10px;align-items:flex-start;}
  .site-search-result img{width:82px;height:58px;}
  .site-search-result-copy span{-webkit-line-clamp:3;}
}

/* Phase 2.3: cleaner category filter row */
.portfolio-controls:has(.portfolio-filter-row){
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
}
.portfolio-filter-row{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
}
.filter-pill{
  background:rgba(255,255,255,.055);
}
.filter-pill.active,
.filter-pill:hover{
  background:rgba(151,212,255,.18);
}
@media (max-width:720px){
  .portfolio-controls:has(.portfolio-filter-row){
    margin-bottom:22px!important;
  }
}

/* Experience page moved out of the homepage */
.experience-page{
  width:min(1120px, calc(100vw - 48px));
  margin:0 auto;
  padding:130px 0 80px;
}
.experience-hero{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:36px;
  align-items:start;
  padding-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.experience-hero span,
.experience-year{
  color:#9bd3ff;
  font-family:"Inter",system-ui,sans-serif;
  font-size:.78rem;
  line-height:1.2;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:900;
}
.experience-hero h1{
  margin:0;
  color:#fff;
  font-family:"Inter",system-ui,sans-serif;
  font-size:clamp(3.6rem, 8vw, 8rem);
  line-height:.9;
  letter-spacing:-.075em;
  font-weight:900;
}
.experience-hero p{
  grid-column:2;
  max-width:780px;
  margin:10px 0 0;
  color:rgba(229,238,255,.72);
  font-family:"Afacad Flux",sans-serif;
  font-size:clamp(1.2rem,2vw,1.55rem);
  line-height:1.35;
}
.experience-note{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:36px;
  margin:34px 0 10px;
  padding:18px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.experience-note strong{
  color:rgba(255,255,255,.86);
  font-family:"Inter",system-ui,sans-serif;
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.experience-note p{
  margin:0;
  color:rgba(229,238,255,.64);
  font-family:"Afacad Flux",sans-serif;
  font-size:1.05rem;
  line-height:1.4;
}
.experience-note code{
  color:#fff;
  background:rgba(255,255,255,.08);
  padding:2px 6px;
  border-radius:6px;
}
.experience-timeline{
  position:relative;
  margin-top:20px;
}
.experience-timeline:before{
  content:"";
  position:absolute;
  left:220px;
  top:0;
  bottom:0;
  width:1px;
  background:rgba(151,212,255,.2);
}
.experience-row{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:36px;
  position:relative;
  padding:34px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.experience-row:before{
  content:"";
  position:absolute;
  left:215px;
  top:42px;
  width:11px;
  height:11px;
  border-radius:999px;
  background:#9bd3ff;
  box-shadow:0 0 0 8px rgba(151,212,255,.12);
}
.experience-main h2{
  margin:0;
  color:#fff;
  font-family:"Inter",system-ui,sans-serif;
  font-size:clamp(1.6rem,3vw,3rem);
  line-height:1;
  letter-spacing:-.055em;
  font-weight:900;
}
.experience-main h3{
  margin:10px 0 0;
  color:#9bd3ff;
  font-family:"Inter",system-ui,sans-serif;
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:900;
}
.experience-main p{
  max-width:780px;
  margin:16px 0 0;
  color:rgba(229,238,255,.72);
  font-family:"Afacad Flux",sans-serif;
  font-size:1.16rem;
  line-height:1.43;
}
.experience-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}
.experience-tags span{
  color:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.12);
  padding:7px 10px;
  font-family:"Inter",system-ui,sans-serif;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:900;
}
.related-heading strong{display:none!important;}
@media (max-width:760px){
  .experience-page{width:calc(100vw - 28px);padding:108px 0 58px;}
  .experience-hero,.experience-note,.experience-row{grid-template-columns:1fr;gap:12px;}
  .experience-hero p{grid-column:1;}
  .experience-timeline:before{left:6px;}
  .experience-row{padding-left:30px;}
  .experience-row:before{left:1px;top:41px;}
}


/* Falling-thumbnail homepage */
.falling-home-header{
  display:flex;
  min-height:clamp(190px,28vh,330px);
  align-items:flex-end;
  justify-content:center;
  padding:20px 0 clamp(40px,7vh,84px);
  text-align:center;
}
.falling-home-header h1{
  margin:0;
  color:var(--text-0);
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:clamp(3.2rem,8vw,7.4rem);
  font-weight:800;
  line-height:.88;
  letter-spacing:-.065em;
  text-shadow:0 24px 70px rgba(0,0,0,.42);
}
.falling-project-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  width:100%;
  margin:0 auto;
  padding:0 0 70px;
  opacity:1;
  visibility:visible;
}
.falling-project-card{
  position:relative;
  min-width:0;
  aspect-ratio:16 / 11;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:#10141c;
  box-shadow:none;
  cursor:pointer;
  opacity:0;
  transform:translate3d(var(--fall-x,0),-190px,0) rotate(var(--fall-rotate,0deg)) scale(.94);
  transform-origin:50% 100%;
  will-change:transform,opacity;
}
.falling-project-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 -80px 100px rgba(0,0,0,.08);
  pointer-events:none;
}
.falling-project-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s cubic-bezier(.22,1,.36,1),filter .35s ease;
}
.falling-project-card.is-landed{
  animation:homepage-project-land .9s var(--fall-delay,0ms) cubic-bezier(.18,.86,.26,1.18) both;
}
.falling-project-card:hover img,
.falling-project-card:focus-visible img{
  transform:scale(1.045);
  filter:brightness(1.06);
}
.falling-project-card:hover{
  box-shadow:none;
}
.falling-project-card:focus-visible{
  outline:3px solid rgba(124,193,255,.85);
  outline-offset:5px;
}
@keyframes homepage-project-land{
  0%{opacity:0;transform:translate3d(var(--fall-x,0),-190px,0) rotate(var(--fall-rotate,0deg)) scale(.94)}
  58%{opacity:1;transform:translate3d(0,13px,0) rotate(calc(var(--fall-rotate,0deg) * -.12)) scale(1.012)}
  76%{transform:translate3d(0,-7px,0) rotate(calc(var(--fall-rotate,0deg) * .05)) scale(.997)}
  90%{transform:translate3d(0,3px,0) rotate(0deg) scale(1.002)}
  100%{opacity:1;transform:translate3d(0,0,0) rotate(0deg) scale(1)}
}
@media (max-width:760px){
  .falling-home-header{min-height:150px;padding:10px 0 38px;align-items:flex-end}
  .falling-home-header h1{font-size:clamp(2.55rem,13.5vw,4.4rem);letter-spacing:-.06em}
  .falling-project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding-bottom:44px}
  .falling-project-card{aspect-ratio:4 / 3;border-radius:0;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  .falling-project-card{opacity:1;transform:none;animation:none!important}
  .falling-project-card img{transition:none}
}

/* ==========================================================
   LiteCMS v1.4 — Light Editorial Theme + Restrained Glass
   Glass is reserved for navigation, search, and modal chrome.
   ========================================================== */
:root{
  --bg-0:#f4f1ea;
  --bg-1:#faf9f5;
  --bg-2:#e9e4da;
  --surface-0:rgba(255,255,255,.46);
  --surface-1:rgba(255,255,255,.68);
  --surface-2:rgba(255,255,255,.88);
  --border-0:rgba(25,29,34,.09);
  --border-1:rgba(25,29,34,.15);
  --text-0:#17191c;
  --text-1:#353a40;
  --text-2:#6b7077;
  --accent:#286f95;
  --accent-strong:#165b7e;
  --accent-soft:#ddecf3;
  --warm-accent:#db765c;
  --warm-soft:#f3ddd5;
  --shadow-lg:0 26px 70px rgba(45,39,31,.14);
}

html{background:var(--bg-0);}
body{
  background:
    radial-gradient(900px 580px at 7% -3%, rgba(77,153,190,.16), transparent 63%),
    radial-gradient(820px 560px at 95% 5%, rgba(219,118,92,.12), transparent 62%),
    linear-gradient(180deg,#faf9f5 0%,#f4f1ea 55%,#efebe3 100%);
  color:var(--text-1);
}
body::before{
  background-image:
    linear-gradient(rgba(26,32,38,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,32,38,.035) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0));
  mask-image:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0));
  opacity:.34;
}
p,ul,li{color:var(--text-1);}
a{color:var(--accent);}
a:hover{color:var(--accent-strong);}

/* Restrained glass navigation */
.navbar{
  background:linear-gradient(180deg,rgba(250,249,245,.68),rgba(250,249,245,.12) 74%,transparent);
  backdrop-filter:blur(12px) saturate(125%);
  -webkit-backdrop-filter:blur(12px) saturate(125%);
}
.navbar.scrolled{
  background:rgba(250,249,245,.78);
  border-bottom:1px solid rgba(25,29,34,.08);
  box-shadow:0 12px 36px rgba(45,39,31,.09);
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
}
.floating-brand,.navbar.scrolled .floating-brand{color:var(--text-0);}
.floating-brand:hover{color:var(--accent-strong);}
.floating-brand-title{color:var(--text-0);}
.floating-brand-subtitle{color:var(--text-2);}
.hamburger,.navbar .person-icon,.nav-search-button{color:var(--text-0);}
.hamburger,.person-icon-btn,.nav-search-button{
  border:1px solid rgba(25,29,34,.10);
  background:rgba(255,255,255,.56);
  box-shadow:0 10px 28px rgba(45,39,31,.09),inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter:blur(16px) saturate(145%);
  -webkit-backdrop-filter:blur(16px) saturate(145%);
}
.hamburger:hover,.person-icon-btn:hover,.nav-search-button:hover{
  color:var(--accent-strong);
  background:rgba(255,255,255,.84);
  border-color:rgba(40,111,149,.25);
  box-shadow:0 14px 34px rgba(45,39,31,.12),0 0 0 4px rgba(40,111,149,.06);
}
.icon-person-speech-bubble{filter:none;}
.icon-person-speech-bubble path:first-child,
.icon-person-speech-bubble path:nth-child(2),
.icon-person-speech-bubble path:last-child{fill:currentColor;}

/* Light glass side navigation */
.side-nav,.sidenav,.testimonial-sidenav{
  background:rgba(250,249,245,.88);
  border-left:1px solid rgba(25,29,34,.10);
  box-shadow:-18px 0 55px rgba(45,39,31,.16);
  backdrop-filter:blur(28px) saturate(140%);
  -webkit-backdrop-filter:blur(28px) saturate(140%);
}
.sidenav::before{
  background:
    radial-gradient(circle at top right,rgba(77,153,190,.20),transparent 58%),
    radial-gradient(circle at 30% 0%,rgba(219,118,92,.12),transparent 52%);
}
.sidenav-heading,.testimonial-nav-content h3{color:var(--text-0);}
.sidenav a{color:var(--text-1);}
.sidenav a:hover,.sidenav a.active{color:var(--accent-strong);}
.sidenav a.active::before{background:var(--warm-accent);box-shadow:0 0 0 6px rgba(219,118,92,.12);}
.sidenav .closebtn{color:var(--text-0);}
.testimonial-nav-content{color:var(--text-1);}
.testimonial-card{
  background:rgba(255,255,255,.54);
  border:1px solid rgba(25,29,34,.09);
  box-shadow:0 16px 38px rgba(45,39,31,.09),inset 0 1px 0 rgba(255,255,255,.78);
}
.testimonial-card p{color:var(--text-1);}
.testimonial-card span{color:var(--accent-strong);}
.testimonial-card strong{color:var(--text-0);}
.testimonial-readmore{color:var(--accent);}
.testimonial-readmore:hover{color:var(--accent-strong);}

/* Typography and editorial dividers */
.small-text{color:var(--accent-strong);}
.large-text,.page-heading,.section-header{color:var(--text-0);text-shadow:none;}
.senior-ux-designer-text,.page-subtitle,.section-subtitle,.hero-blurb,.page-intro{color:var(--text-2);}
.main-content > .small-text:first-child::before{
  background:linear-gradient(90deg,transparent,rgba(40,111,149,.72));
}
.main-content > .small-text:first-child::after{
  background:linear-gradient(90deg,rgba(219,118,92,.66),transparent);
}
.section-header::after{background:linear-gradient(90deg,rgba(25,29,34,.16),transparent);}
.section-link{
  color:var(--text-0);
  border-color:rgba(25,29,34,.13);
  background:rgba(255,255,255,.42);
  box-shadow:0 10px 28px rgba(45,39,31,.07);
}
.section-link:hover{color:var(--accent-strong);background:rgba(255,255,255,.78);border-color:rgba(40,111,149,.25);}
.hero-blurb::after{
  color:var(--accent-strong);
  background:rgba(255,255,255,.50);
  border-color:rgba(40,111,149,.16);
  box-shadow:0 14px 36px rgba(45,39,31,.08);
}

/* Portfolio listing cards stay image-first, with light exterior chrome */
.section-grid:hover .portfolio-card-frame{opacity:.76;}
.portfolio-card-frame{
  background:#fff;
  border-color:rgba(25,29,34,.09);
  box-shadow:0 20px 52px rgba(45,39,31,.12);
}
.portfolio-card-frame::before{
  background:linear-gradient(140deg,rgba(40,111,149,.28),rgba(255,255,255,.04),rgba(219,118,92,.26));
}
.portfolio-card-frame::after{background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 35%);}
.portfolio-card.poster-card:hover .portfolio-card-frame{
  border-color:rgba(40,111,149,.24);
  box-shadow:0 34px 78px rgba(45,39,31,.19),0 0 0 1px rgba(40,111,149,.08);
}
.portfolio-card-client{box-shadow:none;}
.filter-pill{background:rgba(255,255,255,.52);color:var(--text-1);border-color:rgba(25,29,34,.10);}
.filter-pill.active,.filter-pill:hover{background:var(--accent-soft);color:var(--accent-strong);border-color:rgba(40,111,149,.20);}

/* Light project experience */
.popup{
  background:rgba(225,221,212,.64);
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
}
.popup-content{
  background:rgba(253,252,248,.94);
  color:var(--text-1);
  border:1px solid rgba(25,29,34,.10);
  box-shadow:0 34px 100px rgba(45,39,31,.22),inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter:blur(24px) saturate(125%);
  -webkit-backdrop-filter:blur(24px) saturate(125%);
}
.popup-content h1,.popup-content h2,.popup-content h3,
.popup-content .large-text,.popup-content .small-text{color:var(--text-0);}
.popup-content p,.popup-content ul,.popup-content li{color:var(--text-1);}
.popup-content a{color:var(--accent-strong);}
.popup .close-btn{
  color:var(--text-0);
  background:rgba(255,255,255,.64);
  border-color:rgba(25,29,34,.10);
  box-shadow:0 10px 28px rgba(45,39,31,.10);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.popup .close-btn:hover{color:var(--accent-strong);background:#fff;}
.popup-project-header{border-bottom-color:rgba(25,29,34,.10);}
.popup-project-kicker,.project-eyebrow{color:var(--accent-strong);}
.popup-project-title,.project-detail-hero h2{color:var(--text-0);}
.popup-project-summary,.project-hero-summary{color:var(--text-2);}
.popup-project-client{
  color:var(--text-1);
  background:rgba(255,255,255,.64);
  border-color:rgba(25,29,34,.10);
  box-shadow:none;
}
.project-detail-hero,.case-study-section,.project-phase2-meta{border-color:rgba(25,29,34,.10);}
.case-study-section > h3,.case-study-section h3,.project-detail-body > h3{color:var(--text-0);}
.case-study-copy p,.case-study-copy li,.project-detail-body > p,.project-detail-body > li{color:var(--text-1);}
.case-study-copy strong{color:var(--text-0);}
.project-meta span,.project-phase2-tags span,.experience-tags span{
  color:var(--text-1);
  border-color:rgba(25,29,34,.11);
  background:rgba(255,255,255,.46);
}
.project-phase2-stats strong{color:var(--text-0);}
.project-media-gallery{
  background:rgba(255,255,255,.48);
  border-color:rgba(25,29,34,.09);
  box-shadow:0 22px 56px rgba(45,39,31,.10);
}
.media-gallery-heading span{color:var(--accent-strong);}
.media-gallery-heading strong{color:var(--text-0);}
.media-gallery-stage{background:#ebe7df;border-color:rgba(25,29,34,.09);}
.media-gallery-caption{color:var(--text-1);background:rgba(253,252,248,.92);border-color:rgba(25,29,34,.08);}
.media-gallery-caption strong{color:var(--text-0);}
.media-gallery-thumb{background:#fff;border-color:rgba(25,29,34,.10);}
.media-gallery-thumb.active{border-color:var(--accent);box-shadow:0 0 0 3px rgba(40,111,149,.12);}
.media-gallery-nav{color:var(--text-0);background:rgba(255,255,255,.72);border-color:rgba(25,29,34,.10);box-shadow:0 10px 28px rgba(45,39,31,.12);}
.media-gallery-nav:hover{background:#fff;color:var(--accent-strong);}
.related-heading span,.related-card span{color:var(--accent-strong);}
.related-heading strong,.related-card strong{color:var(--text-0);}
.related-card{
  color:var(--text-0);
  background:rgba(255,255,255,.48);
  border-color:rgba(25,29,34,.09);
  box-shadow:0 14px 34px rgba(45,39,31,.08);
}
.related-card:hover{background:#fff;border-color:rgba(40,111,149,.22);box-shadow:0 20px 46px rgba(45,39,31,.13);}
.related-card img{background:#ebe7df;}

/* Search glass panel */
.site-search-backdrop{background:rgba(225,221,212,.66);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
.site-search-panel{
  color:var(--text-0);
  background:rgba(253,252,248,.90);
  border-color:rgba(25,29,34,.10);
  box-shadow:0 32px 90px rgba(45,39,31,.20),inset 0 1px 0 rgba(255,255,255,.85);
  backdrop-filter:blur(26px) saturate(130%);
  -webkit-backdrop-filter:blur(26px) saturate(130%);
}
.site-search-close{color:var(--text-2);}
.site-search-close:hover{color:var(--text-0);}
.site-search-form input{
  background:rgba(255,255,255,.70);
  color:var(--text-0);
  border-color:rgba(25,29,34,.12);
}
.site-search-form input::placeholder{color:#8b8f95;}
.site-search-form input:focus{border-color:rgba(40,111,149,.58);box-shadow:0 0 0 4px rgba(40,111,149,.10);}
.site-search-result{
  color:var(--text-0);
  background:rgba(255,255,255,.48);
  border-color:rgba(25,29,34,.09);
}
.site-search-result:hover{background:#fff;border-color:rgba(40,111,149,.22);}
.site-search-result img{background:#ebe7df;}
.site-search-result-copy em{color:var(--accent-strong);}
.site-search-result-copy span,.site-search-empty{color:var(--text-2);}
.search-results-hero{border-color:rgba(25,29,34,.10);}
.search-results-hero h1{color:var(--text-0);}
.search-results-hero p,.search-empty-state{color:var(--text-2);}

/* Contact and general forms */
.contact-form{
  background:rgba(255,255,255,.54);
  border-color:rgba(25,29,34,.09);
  box-shadow:0 24px 60px rgba(45,39,31,.12);
  backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
}
.contact-form label{color:var(--text-1);}
.contact-form input,.contact-form textarea{
  background:rgba(255,255,255,.78);
  color:var(--text-0);
  border-color:rgba(25,29,34,.12);
}
.contact-form input:focus,.contact-form textarea:focus{border-color:rgba(40,111,149,.52);box-shadow:0 0 0 4px rgba(40,111,149,.10);}
.contact-form button{background:linear-gradient(180deg,#337fa3,#286f95);color:#fff;box-shadow:0 12px 26px rgba(40,111,149,.20);}
.contact-form button:hover{background:linear-gradient(180deg,#286f95,#165b7e);}
.flash-success{background:#e5f4e9;color:#24623a;border-color:#cbe7d3;}
.flash-error{background:#f8e6e2;color:#8b3a2b;border-color:#efd0c8;}

/* Experience page */
.experience-hero,.experience-note,.experience-row{border-color:rgba(25,29,34,.10);}
.experience-hero span,.experience-year,.experience-main h3{color:var(--accent-strong);}
.experience-hero h1,.experience-main h2{color:var(--text-0);}
.experience-hero p,.experience-note p,.experience-main p{color:var(--text-2);}
.experience-note strong{color:var(--text-0);}
.experience-note code{color:var(--accent-strong);background:var(--accent-soft);}
.experience-timeline:before{background:rgba(40,111,149,.22);}
.experience-row:before{background:var(--warm-accent);box-shadow:0 0 0 8px rgba(219,118,92,.12);}

/* Homepage visual signature: one glass plane + two line elements */
.falling-home-header{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.falling-home-header::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:clamp(230px,32vw,500px);
  aspect-ratio:1;
  left:clamp(-110px,3vw,48px);
  top:clamp(-210px,-12vw,-90px);
  border:1px solid rgba(40,111,149,.24);
  border-radius:50%;
  box-shadow:inset 0 0 90px rgba(77,153,190,.08),0 0 0 28px rgba(77,153,190,.025);
}
.falling-home-header::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:clamp(110px,14vw,220px);
  height:clamp(160px,22vw,320px);
  right:clamp(-40px,8vw,140px);
  top:clamp(-30px,2vw,32px);
  border:1px solid rgba(25,29,34,.09);
  background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(255,255,255,.20));
  box-shadow:0 28px 70px rgba(45,39,31,.10),inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  transform:rotate(11deg);
}
.falling-home-header h1{color:var(--text-0);text-shadow:none;position:relative;z-index:1;}
.falling-home-header h1::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-22px;
  width:clamp(76px,10vw,150px);
  height:4px;
  background:linear-gradient(90deg,var(--accent),var(--warm-accent));
  transform:translateX(-50%);
}
.falling-project-card{background:#e8e4dc;}
.falling-project-card::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 -60px 80px rgba(25,29,34,.03);}
.falling-project-card:focus-visible{outline-color:rgba(40,111,149,.82);}

@media (max-width:760px){
  .falling-home-header::before{left:-145px;top:-170px;}
  .falling-home-header::after{right:-60px;top:-20px;opacity:.78;}
  .falling-home-header h1::after{bottom:-15px;height:3px;}
}

@media (prefers-reduced-transparency:reduce){
  .navbar,.navbar.scrolled,.hamburger,.person-icon-btn,.nav-search-button,
  .side-nav,.sidenav,.testimonial-sidenav,.popup-content,.site-search-panel,.contact-form{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:#faf9f5!important;
  }
}

/* v1.4 specificity and legacy component corrections */
.project-eyebrow{color:var(--accent-strong)!important;}
.project-detail-hero h2{color:var(--text-0)!important;}
.project-hero-summary{color:var(--text-2)!important;}
.case-study-copy p,.case-study-copy li{color:var(--text-1)!important;}
.project-detail-hero{border-bottom-color:rgba(25,29,34,.10);}
.project-feature-media img,.project-feature-media video,.project-feature-media iframe{
  border-color:rgba(25,29,34,.10);
  box-shadow:0 22px 62px rgba(45,39,31,.14);
  background:#e8e4dc;
}
.case-study-copy img.portfolio_image,.case-study-copy figure img,.project-detail-body img.portfolio_image{
  border-color:rgba(25,29,34,.09);
  box-shadow:0 18px 48px rgba(45,39,31,.12);
}
.media-gallery-heading{color:var(--text-0);}
.media-gallery-heading strong{color:var(--text-2);}
.media-details{color:var(--text-1);}
.media-details strong{color:var(--text-0);}
.media-details p{color:var(--text-2);}
.media-frame{
  background:#e8e4dc;
  border-color:rgba(25,29,34,.10);
  box-shadow:0 18px 48px rgba(45,39,31,.13);
}
.media-frame img{background:#e8e4dc;}
.media-arrow{
  color:var(--text-0);
  background:rgba(255,255,255,.74);
  border-color:rgba(25,29,34,.11);
  box-shadow:0 12px 30px rgba(45,39,31,.13);
}
.media-arrow:hover{
  color:var(--accent-strong);
  background:#fff;
  border-color:rgba(40,111,149,.26);
}
.media-thumb{background:rgba(255,255,255,.68);border-color:rgba(25,29,34,.11);}
.media-thumb:hover,.media-thumb.active{border-color:rgba(40,111,149,.62);box-shadow:0 0 0 3px rgba(40,111,149,.10);}
.portfolio-search span{color:var(--text-2);}
.portfolio-search input{
  background:rgba(255,255,255,.72);
  color:var(--text-0);
  border-color:rgba(25,29,34,.12);
}
.portfolio-search input:focus{border-color:rgba(40,111,149,.54);box-shadow:0 0 0 4px rgba(40,111,149,.10);}
.portfolio-empty{color:var(--text-2);}


/* LiteCMS v1.5: restored editorial homepage cards and light testimonial fade */
.testimonial-card.has-readmore p::after{
  background:linear-gradient(to bottom,rgba(253,252,248,0),rgba(253,252,248,.97));
}

/* The restored homepage uses the standard section/card system. */
 .main-content > .image-grid{margin-top:54px;}
.main-content > .image-grid .portfolio-section:first-child .section-header{margin-top:28px;}

/* LiteCMS v1.7: custom testimonials navigation icon */
.testimonial-nav-icon{
  display:block;
  width:32px;
  height:32px;
  object-fit:contain;
  pointer-events:none;
  transition:transform .22s ease,filter .22s ease,opacity .22s ease;
}
.person-icon-btn:hover .testimonial-nav-icon{
  transform:scale(1.06);
  filter:drop-shadow(0 5px 10px rgba(40,111,149,.18));
}
.person-icon-btn:focus-visible{
  outline:3px solid rgba(40,111,149,.28);
  outline-offset:3px;
}
@media (max-width:700px){
  .testimonial-nav-icon{width:30px;height:30px;}
}

/* LiteCMS v1.8: remove the glass circle behind the testimonials icon */
.navbar .person-icon.person-icon-btn,
.navbar .person-icon.person-icon-btn:hover,
.navbar .person-icon.person-icon-btn:active{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border-radius:0;
  padding:0;
}


/* =========================================================
   LiteCMS v2.0 — Career / Company Portfolio
   Company → Role → Image-led projects
   ========================================================= */

:root{
  --career-line:rgba(25,29,34,.13);
  --career-muted:#6d716f;
}

/* Career sections replace discipline buckets on the primary portfolio path. */
.career-portfolio{margin-top:72px;}
.career-company-section{
  position:relative;
  padding:76px 0 96px;
  border-top:1px solid var(--career-line);
}
.career-company-section:first-child{border-top:0;padding-top:34px;}
.career-company-heading-row{
  display:grid;
  grid-template-columns:72px minmax(0,1fr) auto;
  align-items:end;
  gap:22px;
  margin:0 0 32px;
}
.career-company-index{
  font-family:"Afacad Flux",Inter,sans-serif;
  font-size:clamp(3.6rem,8vw,7.4rem);
  line-height:.7;
  font-weight:650;
  letter-spacing:-.065em;
  color:rgba(25,29,34,.055);
  user-select:none;
}
.career-company-name{
  margin:0;
  color:var(--text-0);
  font-family:"Afacad Flux",Inter,sans-serif;
  font-size:clamp(2.5rem,5.8vw,5.2rem);
  line-height:.82;
  font-weight:650;
  letter-spacing:-.055em;
}
.career-company-role{
  margin-top:12px;
  color:var(--career-muted);
  font-family:Inter,system-ui,sans-serif;
  font-size:.88rem;
  line-height:1.4;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.career-company-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 0;
  color:var(--text-0);
  text-decoration:none;
  font:600 .84rem/1 Inter,system-ui,sans-serif;
  border-bottom:1px solid rgba(25,29,34,.25);
  transition:border-color .2s ease,color .2s ease;
}
.career-company-link:hover{color:var(--accent-strong);border-color:var(--accent-strong);}

/* Image-led project tiles with adaptive metadata over the artwork. */
.career-project-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px 24px;
  align-items:start;
}
.career-project-card{
  min-width:0;
  cursor:pointer;
  background:transparent;
  border:0;
  box-shadow:none;
  outline:none;
}
.career-project-image{
  position:relative;
  overflow:hidden;
  aspect-ratio:16 / 10;
  background:#e8e5de;
  border-radius:2px;
  box-shadow:0 1px 0 rgba(25,29,34,.05);
  isolation:isolate;
  --overlay-title:#fff;
  --overlay-company:rgba(255,255,255,.80);
  --overlay-shadow:0 1px 8px rgba(0,0,0,.22);
  --overlay-fade-rgb:22,24,27;
}
.career-project-image::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:auto 0 0;
  height:32%;
  pointer-events:none;
  background:linear-gradient(to top,
    rgba(var(--overlay-fade-rgb),.92) 0%,
    rgba(var(--overlay-fade-rgb),.78) 24%,
    rgba(var(--overlay-fade-rgb),.42) 58%,
    rgba(var(--overlay-fade-rgb),0) 100%);
  transition:background .3s ease,opacity .3s ease;
}
.career-project-image.is-light-image{
  --overlay-title:#15181b;
  --overlay-company:rgba(21,24,27,.72);
  --overlay-shadow:0 1px 7px rgba(255,255,255,.18);
}
.career-project-image.is-dark-image{
  --overlay-title:#fff;
  --overlay-company:rgba(255,255,255,.82);
  --overlay-shadow:0 1px 8px rgba(0,0,0,.24);
}
.career-project-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.001);
  transition:transform .55s cubic-bezier(.2,.75,.25,1),filter .35s ease;
}
.career-project-overlay{
  position:absolute;
  z-index:2;
  left:18px;
  right:54px;
  bottom:16px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  pointer-events:none;
  color:var(--overlay-title);
  text-shadow:var(--overlay-shadow);
}
.career-project-title{
  margin:0;
  max-width:100%;
  color:inherit;
  font-family:"Afacad Flux",Inter,system-ui,sans-serif;
  font-size:clamp(1.05rem,1.4vw,1.34rem);
  line-height:1.02;
  font-weight:650;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.career-project-company{
  color:var(--overlay-company);
  font-family:Inter,system-ui,sans-serif;
  font-size:.64rem;
  line-height:1.15;
  font-weight:650;
  letter-spacing:.105em;
  text-transform:uppercase;
}
.career-project-open{
  position:absolute;
  z-index:3;
  top:12px;
  right:12px;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  color:#171a1e;
  background:rgba(250,248,244,.86);
  border:1px solid rgba(25,29,34,.09);
  box-shadow:0 8px 24px rgba(45,39,31,.10);
  backdrop-filter:blur(10px);
  opacity:0;
  transform:translateY(5px);
  transition:opacity .25s ease,transform .25s ease;
  font:600 1rem/1 Inter,sans-serif;
}
.career-project-card:hover .career-project-image img,
.career-project-card:focus-visible .career-project-image img{transform:scale(1.025);}
.career-project-card:hover .career-project-open,
.career-project-card:focus-visible .career-project-open{opacity:1;transform:translateY(0);}
.career-project-card:focus-visible .career-project-image{outline:2px solid var(--accent-strong);outline-offset:4px;}

/* Company/category pages stay almost entirely visual. */
.company-page-header{
  max-width:920px;
  margin:84px 0 64px;
  padding-bottom:42px;
  border-bottom:1px solid var(--career-line);
}
.company-page-label{
  color:var(--career-muted);
  font:600 .75rem/1 Inter,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:16px;
}
.company-page-header h1{
  margin:0;
  color:var(--text-0);
  font-family:"Afacad Flux",Inter,sans-serif;
  font-size:clamp(4rem,10vw,8.2rem);
  line-height:.76;
  font-weight:650;
  letter-spacing:-.07em;
}
.company-page-role{
  margin-top:22px;
  color:var(--text-0);
  font-family:Inter,system-ui,sans-serif;
  font-size:clamp(1rem,1.7vw,1.3rem);
  font-weight:600;
}
.company-page-header p{
  max-width:690px;
  margin:18px 0 0;
  color:var(--text-1);
  font-size:1rem;
  line-height:1.7;
}
.company-project-grid{padding-bottom:110px;}

/* Company nav: company first, role as supporting context. */
.sidenav a .nav-company-name{display:block;}
.sidenav a .nav-company-role{
  display:block;
  margin-top:4px;
  color:var(--career-muted);
  font:500 .66rem/1.3 Inter,sans-serif;
  letter-spacing:.035em;
  text-transform:none;
  white-space:normal;
}
.sidenav a:hover .nav-company-role,.sidenav a.active .nav-company-role{color:inherit;opacity:.72;}

.project-company-role{
  margin:-4px 0 12px;
  color:var(--text-2);
  font:600 .74rem/1.4 Inter,sans-serif;
  letter-spacing:.06em;
}

/* Disable old homepage card effects when the new career card is used. */
.section-grid:hover .career-project-card .portfolio-card-frame{opacity:1;transform:none;}

@media (max-width:1000px){
  .career-project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
  .career-company-heading-row{grid-template-columns:54px minmax(0,1fr) auto;}
}
@media (max-width:700px){
  .career-portfolio{margin-top:50px;}
  .career-company-section{padding:56px 0 72px;}
  .career-company-heading-row{grid-template-columns:1fr auto;gap:14px;margin-bottom:24px;align-items:end;}
  .career-company-index{display:none;}
  .career-company-name{font-size:clamp(2.8rem,14vw,4.8rem);line-height:.82;}
  .career-company-role{font-size:.72rem;margin-top:10px;}
  .career-company-link{font-size:.73rem;}
  .career-project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .career-project-image{aspect-ratio:4 / 3;}
  .career-project-image::after{height:40%;}
  .career-project-overlay{left:12px;right:12px;bottom:11px;gap:4px;}
  .career-project-title{font-size:.88rem;line-height:1.02;}
  .career-project-company{font-size:.52rem;letter-spacing:.085em;}
  .career-project-open{display:none;}
  .company-page-header{margin:62px 0 42px;padding-bottom:30px;}
  .company-page-header h1{font-size:clamp(3.6rem,20vw,6.4rem);}
  .company-project-grid{padding-bottom:80px;}
}
@media (max-width:430px){
  .career-project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .career-project-overlay{left:10px;right:10px;bottom:9px;}
  .career-project-title{font-size:.82rem;}
  .career-project-company{font-size:.49rem;}
  .career-project-image{aspect-ratio:4 / 3;}
}

/* =========================================================
   v2.3 — Career infographic timeline homepage
   ========================================================= */
.portfolio-timeline{position:relative;margin-top:92px;padding:42px 0 120px;--timeline-axis:50%;--timeline-line:rgba(25,29,34,.17);--timeline-dot:#2d78c8;}
.timeline-spine{position:absolute;z-index:0;top:0;bottom:0;left:var(--timeline-axis);width:1px;background:linear-gradient(to bottom,transparent 0,var(--timeline-line) 3%,var(--timeline-line) 97%,transparent 100%);}
.timeline-company{position:relative;z-index:1;padding:0 0 118px;opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.25,1);}
.timeline-company.is-timeline-visible{opacity:1;transform:none;}.timeline-company:last-child{padding-bottom:30px;}
.timeline-company-milestone{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 94px minmax(0,1fr);align-items:center;min-height:240px;margin-bottom:20px;}
.timeline-date-marker{position:relative;z-index:4;grid-column:2;justify-self:center;display:grid;place-items:center;width:86px;min-height:42px;padding:7px 8px;border:1px solid rgba(25,29,34,.12);border-radius:999px;background:rgba(249,247,242,.94);box-shadow:0 8px 24px rgba(53,46,38,.07);backdrop-filter:blur(10px);color:#202428;font:700 .67rem/1 Inter,system-ui,sans-serif;letter-spacing:.085em;text-align:center;}
.timeline-date-marker::before{content:"";position:absolute;z-index:-1;width:13px;height:13px;border-radius:50%;background:var(--timeline-dot);box-shadow:0 0 0 7px rgba(45,120,200,.10);}
.timeline-date-marker span{position:relative;z-index:1;background:rgba(249,247,242,.94);padding:3px 6px;border-radius:999px;}
.timeline-company-copy{max-width:560px;}.timeline-company-left .timeline-company-copy{grid-column:1;justify-self:end;text-align:right;padding-right:clamp(36px,5vw,72px);}.timeline-company-right .timeline-company-copy{grid-column:3;justify-self:start;text-align:left;padding-left:clamp(36px,5vw,72px);}
.timeline-company-kicker{display:block;margin-bottom:10px;color:var(--accent-strong);font:700 .68rem/1 Inter,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;}
.timeline-company-copy h2{margin:0;color:var(--text-0);font-family:"Afacad Flux",Inter,sans-serif;font-size:clamp(3rem,6.6vw,6.8rem);line-height:.78;font-weight:650;letter-spacing:-.065em;text-wrap:balance;}
.timeline-company-role{margin-top:16px;color:var(--text-0);font:600 clamp(.9rem,1.35vw,1.08rem)/1.35 Inter,system-ui,sans-serif;}.timeline-company-period{margin-top:5px;color:var(--text-2);font:500 .78rem/1.4 Inter,system-ui,sans-serif;}
.timeline-company-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--text-0);text-decoration:none;font:650 .74rem/1 Inter,system-ui,sans-serif;border-bottom:1px solid rgba(25,29,34,.22);padding-bottom:5px;}.timeline-company-link:hover{color:var(--accent-strong);border-color:var(--accent-strong);}
.timeline-company-description{max-width:430px;margin:0;color:var(--text-1);font-size:.9rem;line-height:1.72;}.timeline-company-left .timeline-company-description{grid-column:3;padding-left:clamp(36px,5vw,72px);}.timeline-company-right .timeline-company-description{grid-column:1;grid-row:1;text-align:right;justify-self:end;padding-right:clamp(36px,5vw,72px);}
.timeline-project-list{position:relative;}.timeline-project-event{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 94px minmax(0,1fr);align-items:center;min-height:210px;opacity:1;transform:none;transition:opacity .65s ease,transform .65s cubic-bezier(.2,.75,.25,1);}.timeline-project-event.is-timeline-visible{opacity:1;transform:none;}.timeline-event-featured{min-height:500px;}
.timeline-event-dot{position:relative;z-index:3;grid-column:2;justify-self:center;width:9px;height:9px;border-radius:50%;background:#f9f7f2;border:2px solid rgba(45,120,200,.55);box-shadow:0 0 0 5px rgba(45,120,200,.07);}.timeline-event-featured .timeline-event-dot{width:13px;height:13px;background:var(--timeline-dot);border-color:var(--timeline-dot);box-shadow:0 0 0 7px rgba(45,120,200,.10);}
.timeline-event-left > :not(.timeline-event-dot){grid-column:1;justify-self:end;}.timeline-event-right > :not(.timeline-event-dot){grid-column:3;justify-self:start;}.timeline-event-left > .timeline-featured-project,.timeline-event-left > .timeline-project-node{margin-right:clamp(30px,4.5vw,68px);}.timeline-event-right > .timeline-featured-project,.timeline-event-right > .timeline-project-node{margin-left:clamp(30px,4.5vw,68px);}.timeline-event-regular.timeline-event-left > .timeline-project-node,.timeline-event-regular.timeline-event-right > .timeline-project-node{transform:translateX(var(--timeline-scatter));}
.timeline-featured-project{width:min(590px,42vw);cursor:pointer;outline:none;}.timeline-featured-label{margin:0 0 10px;color:var(--text-2);font:700 .62rem/1 Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;}
.timeline-featured-visual,.timeline-node-visual{position:relative;isolation:isolate;overflow:hidden;background:#e8e5de;--overlay-title:#fff;--overlay-company:rgba(255,255,255,.80);--overlay-shadow:0 1px 8px rgba(0,0,0,.22);--overlay-fade-rgb:22,24,27;}.timeline-featured-visual{aspect-ratio:16 / 10;border-radius:3px;box-shadow:0 18px 48px rgba(49,43,35,.11);}
.timeline-featured-visual::after,.timeline-node-visual::after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:34%;pointer-events:none;background:linear-gradient(to top,rgba(var(--overlay-fade-rgb),.94) 0%,rgba(var(--overlay-fade-rgb),.78) 28%,rgba(var(--overlay-fade-rgb),.36) 66%,rgba(var(--overlay-fade-rgb),0) 100%);}
.timeline-featured-visual.is-light-image,.timeline-node-visual.is-light-image{--overlay-title:#15181b;--overlay-company:rgba(21,24,27,.72);--overlay-shadow:0 1px 7px rgba(255,255,255,.18);}.timeline-featured-visual.is-dark-image,.timeline-node-visual.is-dark-image{--overlay-title:#fff;--overlay-company:rgba(255,255,255,.82);--overlay-shadow:0 1px 8px rgba(0,0,0,.24);}
.timeline-featured-visual img,.timeline-node-visual img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.75,.25,1);}.timeline-featured-project:hover .timeline-featured-visual img,.timeline-featured-project:focus-visible .timeline-featured-visual img{transform:scale(1.025);}
.timeline-image-overlay{position:absolute;z-index:2;left:20px;right:58px;bottom:18px;color:var(--overlay-title);text-shadow:var(--overlay-shadow);pointer-events:none;}.timeline-image-overlay span{display:block;margin-bottom:5px;color:var(--overlay-company);font:700 .61rem/1.15 Inter,system-ui,sans-serif;letter-spacing:.105em;text-transform:uppercase;}.timeline-image-overlay h3{margin:0;color:inherit;font-family:"Afacad Flux",Inter,sans-serif;font-size:clamp(1.35rem,2.2vw,2.25rem);line-height:.95;font-weight:650;letter-spacing:-.045em;}
.timeline-project-arrow{position:absolute;z-index:3;top:14px;right:14px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#171a1e;background:rgba(250,248,244,.88);border:1px solid rgba(25,29,34,.09);box-shadow:0 8px 24px rgba(45,39,31,.10);backdrop-filter:blur(10px);opacity:.88;}
.timeline-project-node{position:relative;width:var(--timeline-node-size,126px);cursor:pointer;outline:none;transition:width .48s cubic-bezier(.2,.8,.25,1),transform .48s cubic-bezier(.2,.8,.25,1),filter .3s ease;}.timeline-node-visual{width:var(--timeline-node-size,126px);height:var(--timeline-node-size,126px);aspect-ratio:1;border-radius:50%;box-shadow:0 12px 34px rgba(49,43,35,.13);transition:width .48s cubic-bezier(.2,.8,.25,1),height .48s cubic-bezier(.2,.8,.25,1),border-radius .48s cubic-bezier(.2,.8,.25,1),box-shadow .3s ease;}.timeline-node-visual::after{opacity:0;transition:opacity .3s ease;}.timeline-node-overlay{opacity:0;transition:opacity .28s ease .08s;}
.timeline-node-label{display:block;max-width:150px;margin-top:9px;color:var(--text-1);font:600 .68rem/1.25 Inter,system-ui,sans-serif;text-align:center;transition:opacity .2s ease;}.timeline-node-details{overflow:hidden;max-height:0;opacity:0;padding:0 20px;background:rgba(255,255,255,.78);border:0 solid rgba(25,29,34,.08);border-top:0;border-radius:0 0 16px 16px;box-shadow:0 18px 46px rgba(49,43,35,.10);backdrop-filter:blur(12px);transition:max-height .42s ease,opacity .28s ease,padding .42s ease,border-width .2s ease;}.timeline-node-kicker{display:block;color:var(--accent-strong);font:700 .61rem/1 Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;}.timeline-node-details p{margin:10px 0 0;color:var(--text-1);font-size:.82rem;line-height:1.55;}.timeline-node-open-hint{display:block;margin-top:14px;color:var(--text-2);font:650 .64rem/1.3 Inter,system-ui,sans-serif;letter-spacing:.02em;}
.timeline-project-node:hover:not(.is-expanded) .timeline-node-visual,.timeline-project-node:focus-visible:not(.is-expanded) .timeline-node-visual{box-shadow:0 15px 38px rgba(49,43,35,.20);}.timeline-project-node.is-expanded{width:min(410px,40vw);transform:none !important;z-index:8;}.timeline-project-node.is-expanded .timeline-node-visual{width:100%;height:auto;aspect-ratio:16 / 10;border-radius:16px 16px 0 0;box-shadow:0 16px 46px rgba(49,43,35,.12);}.timeline-project-node.is-expanded .timeline-node-visual::after,.timeline-project-node.is-expanded .timeline-node-overlay{opacity:1;}.timeline-project-node.is-expanded .timeline-node-label{opacity:0;height:0;margin:0;overflow:hidden;}.timeline-project-node.is-expanded .timeline-node-details{max-height:260px;opacity:1;padding:18px 20px 20px;border-width:1px;}.timeline-project-node.is-expanded .timeline-image-overlay h3{font-size:1.55rem;}
@media (max-width:900px){.portfolio-timeline{--timeline-axis:38px;margin-top:64px;padding-top:22px;}.timeline-spine{left:38px;}.timeline-company{padding-bottom:88px;}.timeline-company-milestone,.timeline-project-event{grid-template-columns:76px minmax(0,1fr);}.timeline-company-milestone{min-height:210px;align-items:start;padding-top:16px;}.timeline-date-marker{grid-column:1;grid-row:1;justify-self:center;width:68px;min-height:36px;font-size:.57rem;}.timeline-company-copy,.timeline-company-left .timeline-company-copy,.timeline-company-right .timeline-company-copy{grid-column:2;grid-row:1;justify-self:start;text-align:left;padding:4px 0 0 22px;max-width:none;}.timeline-company-copy h2{font-size:clamp(3.2rem,14vw,5.8rem);}.timeline-company-description,.timeline-company-left .timeline-company-description,.timeline-company-right .timeline-company-description{grid-column:2;grid-row:2;text-align:left;justify-self:start;padding:0 0 0 22px;margin-top:-32px;max-width:620px;}.timeline-project-event{min-height:180px;}.timeline-event-featured{min-height:400px;}.timeline-event-dot{grid-column:1;justify-self:center;}.timeline-event-left > :not(.timeline-event-dot),.timeline-event-right > :not(.timeline-event-dot){grid-column:2;justify-self:start;margin-left:22px;margin-right:0;}.timeline-event-regular.timeline-event-left > .timeline-project-node,.timeline-event-regular.timeline-event-right > .timeline-project-node{transform:none;}.timeline-featured-project{width:min(660px,calc(100vw - 112px));}.timeline-project-node.is-expanded{width:min(430px,calc(100vw - 112px));}}
@media (max-width:560px){.portfolio-timeline{--timeline-axis:28px;margin-top:52px;padding-bottom:80px;}.timeline-spine{left:28px;}.timeline-company{padding-bottom:70px;}.timeline-company-milestone,.timeline-project-event{grid-template-columns:56px minmax(0,1fr);}.timeline-date-marker{width:54px;min-height:34px;padding:6px 4px;font-size:.49rem;letter-spacing:.055em;}.timeline-company-copy,.timeline-company-left .timeline-company-copy,.timeline-company-right .timeline-company-copy{padding-left:14px;}.timeline-company-copy h2{font-size:clamp(2.8rem,15vw,4.7rem);}.timeline-company-role{font-size:.82rem;margin-top:12px;}.timeline-company-description,.timeline-company-left .timeline-company-description,.timeline-company-right .timeline-company-description{padding-left:14px;font-size:.82rem;margin-top:-24px;}.timeline-event-dot{grid-column:1;}.timeline-event-left > :not(.timeline-event-dot),.timeline-event-right > :not(.timeline-event-dot){grid-column:2;margin-left:14px;}.timeline-event-featured{min-height:300px;}.timeline-featured-project{width:calc(100vw - 84px);}.timeline-featured-label{font-size:.54rem;}.timeline-featured-visual{aspect-ratio:4 / 3;}.timeline-image-overlay{left:13px;right:42px;bottom:12px;}.timeline-image-overlay span{font-size:.5rem;}.timeline-image-overlay h3{font-size:1.18rem;}.timeline-project-arrow{width:30px;height:30px;top:9px;right:9px;font-size:.82rem;}.timeline-project-node{width:96px;}.timeline-node-visual{width:96px;height:96px;}.timeline-node-label{max-width:108px;font-size:.6rem;}.timeline-project-node.is-expanded{width:calc(100vw - 84px);}.timeline-project-node.is-expanded .timeline-image-overlay h3{font-size:1.2rem;}}
@media (prefers-reduced-motion:reduce){.timeline-company,.timeline-project-event{opacity:1;transform:none;transition:none;}.timeline-project-node,.timeline-node-visual{transition:none;}}



/* v2.3.1 fail-safe timeline: content is always visible, JS only enhances it. */
.timeline-js-ready .timeline-company,.timeline-js-ready .timeline-project-event{will-change:transform,opacity;}

/* =========================================================
   v2.4 — Compact infographic career timeline
   ========================================================= */
@media (min-width:901px){
  .portfolio-timeline{
    width:min(1040px,calc(100% - 48px));
    margin:58px auto 0;
    padding:26px 0 82px;
    --timeline-axis:50%;
    --timeline-line:rgba(37,42,47,.19);
  }
  .timeline-spine{width:2px;background:linear-gradient(to bottom,transparent 0,var(--timeline-line) 1.5%,var(--timeline-line) 98.5%,transparent 100%);}
  .timeline-company{padding-bottom:46px;}
  .timeline-company:last-child{padding-bottom:8px;}
  .timeline-company-milestone{
    grid-template-columns:minmax(0,1fr) 66px minmax(0,1fr);
    min-height:118px;
    margin-bottom:4px;
    align-items:center;
  }
  .timeline-date-marker{
    grid-column:2;
    width:62px;
    min-height:30px;
    padding:4px 5px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    color:var(--timeline-company-accent,var(--accent-strong));
    font-size:.63rem;
    letter-spacing:.075em;
  }
  .timeline-date-marker::before{
    width:10px;
    height:10px;
    background:var(--timeline-company-accent,var(--timeline-dot));
    box-shadow:0 0 0 5px rgba(255,255,255,.95),0 0 0 6px color-mix(in srgb,var(--timeline-company-accent,var(--timeline-dot)) 35%,transparent);
  }
  .timeline-date-marker span{
    transform:translateY(-23px);
    background:var(--surface-0,#f9f7f2);
    padding:2px 5px;
    white-space:nowrap;
  }
  .timeline-company-copy{
    position:relative;
    max-width:400px;
    padding:15px 18px 16px !important;
    border-radius:12px;
    background:color-mix(in srgb,var(--timeline-company-accent) 8%,rgba(255,255,255,.86));
    border:1px solid color-mix(in srgb,var(--timeline-company-accent) 22%,transparent);
    box-shadow:0 9px 28px rgba(42,38,32,.055);
  }
  .timeline-company-copy::after{
    content:"";
    position:absolute;
    top:50%;
    width:34px;
    border-top:1px dotted color-mix(in srgb,var(--timeline-company-accent) 56%,transparent);
  }
  .timeline-company-left .timeline-company-copy{grid-column:1;justify-self:end;text-align:right;margin-right:28px;}
  .timeline-company-right .timeline-company-copy{grid-column:3;justify-self:start;text-align:left;margin-left:28px;}
  .timeline-company-left .timeline-company-copy::after{right:-35px;}
  .timeline-company-right .timeline-company-copy::after{left:-35px;}
  .timeline-company-kicker{margin-bottom:5px;color:var(--timeline-company-accent);font-size:.55rem;letter-spacing:.13em;}
  .timeline-company-copy h2{
    font-size:clamp(1.75rem,3vw,2.65rem);
    line-height:.9;
    letter-spacing:-.045em;
  }
  .timeline-company-role{margin-top:8px;font-size:.78rem;}
  .timeline-company-period{margin-top:3px;font-size:.66rem;}
  .timeline-company-link{margin-top:9px;font-size:.62rem;padding-bottom:3px;}
  .timeline-company-description{
    max-width:330px;
    font-size:.73rem;
    line-height:1.48;
    color:var(--text-2);
  }
  .timeline-company-left .timeline-company-description{grid-column:3;padding-left:44px;}
  .timeline-company-right .timeline-company-description{grid-column:1;padding-right:44px;}

  .timeline-project-event{
    grid-template-columns:minmax(0,1fr) 66px minmax(0,1fr);
    min-height:112px;
  }
  .timeline-event-featured{min-height:300px;}
  .timeline-event-dot{grid-column:2;width:7px;height:7px;border-width:1.5px;box-shadow:0 0 0 4px rgba(45,120,200,.05);}
  .timeline-event-featured .timeline-event-dot{width:10px;height:10px;background:var(--timeline-company-accent,var(--timeline-dot));border-color:var(--timeline-company-accent,var(--timeline-dot));box-shadow:0 0 0 5px color-mix(in srgb,var(--timeline-company-accent,var(--timeline-dot)) 10%,transparent);}
  .timeline-project-event::before{
    content:"";
    position:absolute;
    top:50%;
    width:34px;
    border-top:1px dotted rgba(48,54,59,.20);
    pointer-events:none;
  }
  .timeline-event-left::before{left:calc(50% - 34px);}
  .timeline-event-right::before{left:50%;}
  .timeline-event-left > .timeline-featured-project,.timeline-event-left > .timeline-project-node{margin-right:27px;}
  .timeline-event-right > .timeline-featured-project,.timeline-event-right > .timeline-project-node{margin-left:27px;}

  .timeline-featured-project{width:min(420px,39vw);}
  .timeline-featured-label{margin-bottom:6px;font-size:.52rem;letter-spacing:.12em;color:var(--timeline-company-accent,var(--text-2));}
  .timeline-featured-visual{aspect-ratio:16/10;border-radius:18px;box-shadow:0 13px 34px rgba(49,43,35,.10);}
  .timeline-featured-visual::after{height:30%;}
  .timeline-image-overlay{left:16px;right:50px;bottom:14px;}
  .timeline-image-overlay span{font-size:.52rem;}
  .timeline-image-overlay h3{font-size:clamp(1.18rem,1.65vw,1.65rem);}
  .timeline-project-arrow{width:31px;height:31px;top:11px;right:11px;font-size:.8rem;}

  .timeline-project-node{width:var(--timeline-node-size,94px);}
  .timeline-node-visual{width:var(--timeline-node-size,94px);height:var(--timeline-node-size,94px);box-shadow:0 8px 24px rgba(49,43,35,.11);}
  .timeline-node-label{max-width:120px;margin-top:6px;font-size:.58rem;line-height:1.2;}
  .timeline-event-regular.timeline-event-left > .timeline-project-node,.timeline-event-regular.timeline-event-right > .timeline-project-node{transform:translateX(calc(var(--timeline-scatter) * .55));}
  .timeline-project-node.is-expanded{width:min(360px,36vw);}
  .timeline-project-node.is-expanded .timeline-node-visual{border-radius:16px 16px 0 0;}
}

@media (max-width:900px){
  .portfolio-timeline{margin-top:46px;}
  .timeline-company{padding-bottom:54px;}
  .timeline-company-milestone{min-height:142px;}
  .timeline-company-copy h2{font-size:clamp(2.25rem,10vw,4rem);}
  .timeline-company-description,.timeline-company-left .timeline-company-description,.timeline-company-right .timeline-company-description{margin-top:-18px;}
  .timeline-project-event{min-height:132px;}
  .timeline-event-featured{min-height:285px;}
  .timeline-featured-project{width:min(500px,calc(100vw - 112px));}
  .timeline-featured-visual{border-radius:16px;}
}

@media (max-width:560px){
  .portfolio-timeline{margin-top:38px;}
  .timeline-company{padding-bottom:44px;}
  .timeline-company-milestone{min-height:126px;}
  .timeline-company-copy h2{font-size:clamp(2rem,11vw,3.45rem);}
  .timeline-company-description,.timeline-company-left .timeline-company-description,.timeline-company-right .timeline-company-description{margin-top:-12px;}
  .timeline-project-event{min-height:112px;}
  .timeline-event-featured{min-height:245px;}
  .timeline-featured-project{width:calc(100vw - 84px);}
  .timeline-featured-visual{border-radius:14px;}
  .timeline-project-node,.timeline-node-visual{width:82px;height:82px;}
  .timeline-node-label{max-width:94px;}
}

/* =========================================================
   v2.5 — Mobile infographic rhythm + expanded-node layering
   ========================================================= */
.timeline-project-event.has-expanded-node{
  z-index:60;
}
.timeline-project-event.has-expanded-node .timeline-project-node.is-expanded{
  z-index:80;
}

@media (max-width:900px){
  .portfolio-timeline{
    --timeline-axis:42px;
    margin-top:30px;
    padding-top:12px;
  }
  .timeline-spine{left:var(--timeline-axis);}

  /* Company milestones return to normal flow on mobile. This avoids the
     description/link collision caused by the older negative-margin grid. */
  .timeline-company{
    padding-bottom:34px;
  }
  .timeline-company-milestone{
    position:relative;
    display:block;
    min-height:0;
    margin:0 0 20px;
    padding:10px 18px 12px 84px;
  }
  .timeline-date-marker{
    position:absolute;
    left:var(--timeline-axis);
    top:17px;
    width:56px;
    min-height:32px;
    transform:translateX(-50%);
    padding:5px 4px;
    font-size:.49rem;
    letter-spacing:.055em;
  }
  .timeline-company-copy,
  .timeline-company-left .timeline-company-copy,
  .timeline-company-right .timeline-company-copy{
    display:block;
    max-width:520px;
    margin:0;
    padding:0 !important;
    text-align:left;
  }
  .timeline-company-copy::after{display:none;}
  .timeline-company-copy h2{
    font-size:clamp(2.15rem,9vw,3.6rem);
    line-height:.9;
  }
  .timeline-company-role{
    margin-top:8px;
    font-size:.78rem;
  }
  .timeline-company-period{
    margin-top:3px;
    font-size:.66rem;
  }
  .timeline-company-link{
    margin-top:10px;
    font-size:.64rem;
  }
  .timeline-company-description,
  .timeline-company-left .timeline-company-description,
  .timeline-company-right .timeline-company-description{
    display:block;
    max-width:520px;
    margin:12px 0 0;
    padding:0 !important;
    text-align:left;
    font-size:.76rem;
    line-height:1.5;
  }

  /* Project rows become a loose infographic canvas instead of one rigid column. */
  .timeline-project-list{overflow:visible;}
  .timeline-project-event{
    position:relative;
    display:block;
    min-height:104px;
    padding:4px 12px 4px 0;
    overflow:visible;
  }
  .timeline-project-event::before{
    left:var(--timeline-axis) !important;
    top:50%;
    width:var(--timeline-connector,42px);
    border-top:1px dotted rgba(48,54,59,.18);
  }
  .timeline-event-dot{
    position:absolute;
    z-index:4;
    left:var(--timeline-axis);
    top:50%;
    grid-column:auto;
    transform:translate(-50%,-50%);
  }

  .timeline-event-left > :not(.timeline-event-dot),
  .timeline-event-right > :not(.timeline-event-dot){
    margin-right:0;
  }

  .timeline-event-regular > .timeline-project-node{
    margin-left:var(--mobile-node-x,88px) !important;
    transform:none !important;
  }
  .timeline-event-regular:nth-child(7n + 1){--mobile-node-x:82px;--timeline-connector:40px;}
  .timeline-event-regular:nth-child(7n + 2){--mobile-node-x:148px;--timeline-connector:106px;}
  .timeline-event-regular:nth-child(7n + 3){--mobile-node-x:108px;--timeline-connector:66px;}
  .timeline-event-regular:nth-child(7n + 4){--mobile-node-x:194px;--timeline-connector:152px;}
  .timeline-event-regular:nth-child(7n + 5){--mobile-node-x:126px;--timeline-connector:84px;}
  .timeline-event-regular:nth-child(7n + 6){--mobile-node-x:222px;--timeline-connector:180px;}
  .timeline-event-regular:nth-child(7n){--mobile-node-x:92px;--timeline-connector:50px;}

  .timeline-project-node,
  .timeline-node-visual{
    width:74px;
    height:74px;
  }
  .timeline-node-label{
    max-width:100px;
    margin-top:5px;
    font-size:.56rem;
    line-height:1.18;
    text-align:center;
  }

  .timeline-event-featured{
    min-height:230px;
    padding:7px 0 9px;
  }
  .timeline-event-featured::before{
    width:52px;
  }
  .timeline-event-featured > .timeline-featured-project{
    width:min(270px,calc(100vw - 98px));
    margin-left:76px !important;
    margin-right:0 !important;
  }
  .timeline-event-featured:nth-child(even) > .timeline-featured-project{
    margin-left:104px !important;
  }
  .timeline-featured-label{
    margin-bottom:5px;
    font-size:.5rem;
  }
  .timeline-featured-visual{
    aspect-ratio:16/10;
    border-radius:17px;
  }

  /* Expanded nodes temporarily become the visual focus and sit over all
     neighboring events instead of being painted beneath later siblings. */
  .timeline-project-event.has-expanded-node{
    min-height:350px;
    z-index:70;
  }
  .timeline-project-event.has-expanded-node::before{
    opacity:.22;
  }
  .timeline-project-node.is-expanded{
    position:relative;
    z-index:90;
    width:min(300px,calc(100vw - 76px));
    height:auto;
    margin-left:62px !important;
    transform:none !important;
    filter:drop-shadow(0 24px 34px rgba(31,29,25,.16));
  }
  .timeline-project-node.is-expanded .timeline-node-visual{
    width:100%;
    height:auto;
    border-radius:16px 16px 0 0;
  }
  .timeline-project-node.is-expanded .timeline-node-details{
    position:relative;
    z-index:2;
    background:rgba(255,255,255,.96);
  }
}

@media (max-width:560px){
  .portfolio-timeline{
    --timeline-axis:34px;
    margin-top:22px;
    padding-bottom:64px;
  }
  .timeline-company{padding-bottom:26px;}
  .timeline-company-milestone{
    margin-bottom:14px;
    padding:8px 12px 10px 72px;
  }
  .timeline-date-marker{
    top:14px;
    width:50px;
    min-height:30px;
    font-size:.46rem;
  }
  .timeline-company-copy h2{font-size:clamp(2rem,10vw,3.15rem);}
  .timeline-company-description,
  .timeline-company-left .timeline-company-description,
  .timeline-company-right .timeline-company-description{
    margin-top:10px;
    font-size:.74rem;
  }

  .timeline-project-event{
    min-height:92px;
    padding-top:3px;
    padding-bottom:3px;
  }
  .timeline-event-regular:nth-child(7n + 1){--mobile-node-x:72px;--timeline-connector:38px;}
  .timeline-event-regular:nth-child(7n + 2){--mobile-node-x:136px;--timeline-connector:102px;}
  .timeline-event-regular:nth-child(7n + 3){--mobile-node-x:94px;--timeline-connector:60px;}
  .timeline-event-regular:nth-child(7n + 4){--mobile-node-x:178px;--timeline-connector:144px;}
  .timeline-event-regular:nth-child(7n + 5){--mobile-node-x:114px;--timeline-connector:80px;}
  .timeline-event-regular:nth-child(7n + 6){--mobile-node-x:min(214px,calc(100vw - 88px));--timeline-connector:174px;}
  .timeline-event-regular:nth-child(7n){--mobile-node-x:80px;--timeline-connector:46px;}

  .timeline-project-node,
  .timeline-node-visual{
    width:68px;
    height:68px;
  }
  .timeline-node-label{max-width:90px;font-size:.53rem;}

  .timeline-event-featured{min-height:205px;}
  .timeline-event-featured > .timeline-featured-project{
    width:min(248px,calc(100vw - 84px));
    margin-left:62px !important;
  }
  .timeline-event-featured:nth-child(even) > .timeline-featured-project{
    margin-left:min(88px,calc(100vw - 260px)) !important;
  }
  .timeline-featured-visual{border-radius:16px;}
  .timeline-image-overlay{left:12px;right:40px;bottom:11px;}
  .timeline-image-overlay h3{font-size:1.08rem;}

  .timeline-project-event.has-expanded-node{min-height:330px;}
  .timeline-project-node.is-expanded{
    width:min(278px,calc(100vw - 64px));
    margin-left:48px !important;
  }
  .timeline-project-node.is-expanded .timeline-image-overlay h3{font-size:1.12rem;}
}

/* =========================================================
   v2.6 — Project constellation timeline levels
   All project markers are circles. Level controls size while
   stable offsets create an intentionally loose infographic field.
   ========================================================= */
.timeline-project-list{
  position:relative;
  overflow:visible;
}
.timeline-project-event{
  position:relative;
  display:block !important;
  overflow:visible;
  min-height:132px;
  padding:0;
}
.timeline-project-event.timeline-level-featured{min-height:252px;}
.timeline-project-event.timeline-level-major{min-height:188px;}
.timeline-project-event.timeline-level-regular{min-height:138px;}
.timeline-project-event.timeline-level-minor{min-height:104px;}

.timeline-project-event .timeline-event-dot{
  position:absolute !important;
  z-index:3;
  left:50% !important;
  top:50% !important;
  grid-column:auto !important;
  transform:translate(-50%,-50%) !important;
}
.timeline-project-event::before{
  content:"";
  position:absolute;
  z-index:1;
  top:50%;
  width:var(--timeline-gap);
  border-top:1px dotted rgba(48,54,59,.17);
  pointer-events:none;
}
.timeline-event-left::before{right:50%;}
.timeline-event-right::before{left:50%;}

.timeline-project-event > .timeline-project-node{
  position:absolute !important;
  z-index:5;
  top:50% !important;
  right:auto !important;
  margin:0 !important;
  width:var(--constellation-size) !important;
  height:auto !important;
  filter:none;
}
.timeline-event-left > .timeline-project-node{
  left:50% !important;
  transform:translate(calc(-100% - var(--timeline-gap)),calc(-50% + var(--timeline-y))) !important;
}
.timeline-event-right > .timeline-project-node{
  left:50% !important;
  transform:translate(var(--timeline-gap),calc(-50% + var(--timeline-y))) !important;
}

.timeline-node-level-featured{--constellation-size:232px;}
.timeline-node-level-major{--constellation-size:158px;}
.timeline-node-level-regular{--constellation-size:108px;}
.timeline-node-level-minor{--constellation-size:72px;}

.timeline-project-node .timeline-node-visual{
  width:var(--constellation-size) !important;
  height:var(--constellation-size) !important;
  aspect-ratio:1 !important;
  border-radius:50% !important;
  box-shadow:0 11px 30px rgba(49,43,35,.12);
  transition:width .44s cubic-bezier(.2,.8,.25,1),height .44s cubic-bezier(.2,.8,.25,1),border-radius .44s cubic-bezier(.2,.8,.25,1),box-shadow .28s ease,transform .28s ease;
}
.timeline-node-level-featured .timeline-node-visual{box-shadow:0 18px 45px rgba(49,43,35,.15);}
.timeline-node-level-major .timeline-node-visual{box-shadow:0 14px 35px rgba(49,43,35,.13);}
.timeline-project-node:hover:not(.is-expanded) .timeline-node-visual,
.timeline-project-node:focus-visible:not(.is-expanded) .timeline-node-visual{
  transform:scale(1.045);
  box-shadow:0 18px 42px rgba(49,43,35,.18);
}
.timeline-node-label{display:none !important;}
.timeline-node-level-name{
  display:block;
  margin-bottom:7px;
  color:var(--text-2);
  font:700 .56rem/1 Inter,system-ui,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.timeline-node-visual::after,
.timeline-node-overlay{opacity:0;}

/* Expanded project becomes a focused rectangular preview while keeping
   its row above surrounding circles. */
.timeline-project-event.has-expanded-node{
  min-height:430px !important;
  z-index:80 !important;
}
.timeline-project-event.has-expanded-node::before{opacity:.28;}
.timeline-project-event > .timeline-project-node.is-expanded{
  z-index:100 !important;
  width:min(410px,40vw) !important;
  height:auto !important;
}
.timeline-event-left > .timeline-project-node.is-expanded{
  transform:translate(calc(-100% - 54px),-50%) !important;
}
.timeline-event-right > .timeline-project-node.is-expanded{
  transform:translate(54px,-50%) !important;
}
.timeline-project-node.is-expanded .timeline-node-visual{
  width:100% !important;
  height:auto !important;
  aspect-ratio:16/10 !important;
  border-radius:18px 18px 0 0 !important;
  transform:none !important;
}
.timeline-project-node.is-expanded .timeline-node-visual::after,
.timeline-project-node.is-expanded .timeline-node-overlay{opacity:1;}
.timeline-project-node.is-expanded .timeline-node-details{
  max-height:280px;
  opacity:1;
  padding:18px 20px 20px;
  border-width:1px;
}

@media (max-width:900px){
  .timeline-project-event.timeline-level-featured{min-height:210px;}
  .timeline-project-event.timeline-level-major{min-height:156px;}
  .timeline-project-event.timeline-level-regular{min-height:116px;}
  .timeline-project-event.timeline-level-minor{min-height:90px;}

  .timeline-node-level-featured{--constellation-size:180px;}
  .timeline-node-level-major{--constellation-size:132px;}
  .timeline-node-level-regular{--constellation-size:94px;}
  .timeline-node-level-minor{--constellation-size:64px;}

  .timeline-project-event::before{
    left:var(--timeline-axis) !important;
    right:auto !important;
    width:var(--timeline-mobile-gap) !important;
  }
  .timeline-project-event .timeline-event-dot{
    left:var(--timeline-axis) !important;
  }
  .timeline-project-event > .timeline-project-node,
  .timeline-event-left > .timeline-project-node,
  .timeline-event-right > .timeline-project-node{
    left:var(--timeline-axis) !important;
    margin:0 !important;
    transform:translate(var(--timeline-mobile-gap),calc(-50% + var(--timeline-y))) !important;
  }
  .timeline-project-event > .timeline-project-node.is-expanded,
  .timeline-event-left > .timeline-project-node.is-expanded,
  .timeline-event-right > .timeline-project-node.is-expanded{
    left:var(--timeline-axis) !important;
    width:min(320px,calc(100vw - 78px)) !important;
    transform:translate(30px,-50%) !important;
  }
  .timeline-project-event.has-expanded-node{min-height:390px !important;}
}

@media (max-width:560px){
  .timeline-project-event.timeline-level-featured{min-height:186px;}
  .timeline-project-event.timeline-level-major{min-height:142px;}
  .timeline-project-event.timeline-level-regular{min-height:104px;}
  .timeline-project-event.timeline-level-minor{min-height:80px;}

  .timeline-node-level-featured{--constellation-size:158px;}
  .timeline-node-level-major{--constellation-size:116px;}
  .timeline-node-level-regular{--constellation-size:82px;}
  .timeline-node-level-minor{--constellation-size:56px;}

  .timeline-project-event > .timeline-project-node.is-expanded,
  .timeline-event-left > .timeline-project-node.is-expanded,
  .timeline-event-right > .timeline-project-node.is-expanded{
    width:min(286px,calc(100vw - 62px)) !important;
    transform:translate(22px,-50%) !important;
  }
  .timeline-project-event.has-expanded-node{min-height:360px !important;}
}

/* Keep scattered mobile markers inside the viewport regardless of level. */
@media (max-width:900px){
  .timeline-project-event > .timeline-project-node:not(.is-expanded),
  .timeline-event-left > .timeline-project-node:not(.is-expanded),
  .timeline-event-right > .timeline-project-node:not(.is-expanded){
    transform:translate(min(var(--timeline-mobile-gap),calc(100vw - var(--constellation-size) - var(--timeline-axis) - 14px)),calc(-50% + var(--timeline-y))) !important;
  }
}

/* =========================================================
   v2.7 — Dense constellation spacing
   Pull project markers into a tighter infographic cluster while
   preserving varied sizes, offsets and non-rigid positioning.
   ========================================================= */
.timeline-project-event{
  min-height:72px;
}
.timeline-project-event.timeline-level-featured{min-height:176px;}
.timeline-project-event.timeline-level-major{min-height:108px;}
.timeline-project-event.timeline-level-regular{min-height:76px;}
.timeline-project-event.timeline-level-minor{min-height:54px;}

/* Slightly reduce the visual distance between marker and career spine. */
.timeline-project-event::before{
  opacity:.78;
}

/* Company groups should follow one another more tightly too. */
.timeline-company{padding-bottom:48px;}
.timeline-project-list{margin-top:-4px;}

@media (max-width:900px){
  .timeline-company{padding-bottom:24px;}
  .timeline-company-milestone{margin-bottom:10px;}

  .timeline-project-event{min-height:62px;}
  .timeline-project-event.timeline-level-featured{min-height:148px;}
  .timeline-project-event.timeline-level-major{min-height:94px;}
  .timeline-project-event.timeline-level-regular{min-height:66px;}
  .timeline-project-event.timeline-level-minor{min-height:48px;}

  /* Keep the same scattered language on mobile, just much closer together. */
  .timeline-project-event > .timeline-project-node:not(.is-expanded),
  .timeline-event-left > .timeline-project-node:not(.is-expanded),
  .timeline-event-right > .timeline-project-node:not(.is-expanded){
    transform:translate(min(var(--timeline-mobile-gap),calc(100vw - var(--constellation-size) - var(--timeline-axis) - 10px)),calc(-50% + var(--timeline-y))) !important;
  }
}

@media (max-width:560px){
  .timeline-company{padding-bottom:18px;}
  .timeline-company-milestone{margin-bottom:7px;}

  .timeline-project-event{min-height:56px;}
  .timeline-project-event.timeline-level-featured{min-height:132px;}
  .timeline-project-event.timeline-level-major{min-height:84px;}
  .timeline-project-event.timeline-level-regular{min-height:60px;}
  .timeline-project-event.timeline-level-minor{min-height:44px;}
}

/* =========================================================
   v2.8 — Project-attached connectors + wider constellation
   Connectors now belong to the actual project node so vertical
   scatter cannot leave orphaned lines. A few nodes also travel
   farther from the career spine for a less column-like layout.
   ========================================================= */
.timeline-project-event::before{
  display:none !important;
}

/* Move the timeline anchor dot with the project's vertical scatter. */
.timeline-project-event .timeline-event-dot{
  top:calc(50% + var(--timeline-y)) !important;
}

/* Each connector is physically attached to its project circle. */
.timeline-project-event > .timeline-project-node:not(.is-expanded)::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:50%;
  height:0;
  border-top:2px solid color-mix(in srgb, var(--timeline-company-accent) 42%, #65707a 58%);
  opacity:.66;
  pointer-events:none;
}
.timeline-event-right > .timeline-project-node:not(.is-expanded)::before{
  right:100%;
  width:var(--timeline-gap);
}
.timeline-event-left > .timeline-project-node:not(.is-expanded)::before{
  left:100%;
  width:var(--timeline-gap);
}

/* Slightly stronger spine connection dot so the project relationship reads. */
.timeline-project-event .timeline-event-dot{
  width:10px !important;
  height:10px !important;
  border:2px solid color-mix(in srgb, var(--timeline-company-accent) 65%, white 35%) !important;
  background:#fbfaf7 !important;
  box-shadow:0 0 0 5px color-mix(in srgb, var(--timeline-company-accent) 10%, transparent) !important;
}

@media (max-width:900px){
  /* Mobile projects all live to the right of the spine. Use the exact same
     clamped distance for both node translation and connector length. */
  .timeline-project-event{
    --timeline-effective-mobile-gap:min(
      var(--timeline-mobile-gap),
      calc(100vw - var(--constellation-size) - var(--timeline-axis) - 10px)
    );
  }
  .timeline-project-event > .timeline-project-node:not(.is-expanded),
  .timeline-event-left > .timeline-project-node:not(.is-expanded),
  .timeline-event-right > .timeline-project-node:not(.is-expanded){
    transform:translate(var(--timeline-effective-mobile-gap),calc(-50% + var(--timeline-y))) !important;
  }
  .timeline-project-event > .timeline-project-node:not(.is-expanded)::before,
  .timeline-event-left > .timeline-project-node:not(.is-expanded)::before,
  .timeline-event-right > .timeline-project-node:not(.is-expanded)::before{
    right:100% !important;
    left:auto !important;
    width:var(--timeline-effective-mobile-gap) !important;
  }
}

@media (max-width:560px){
  .timeline-project-event{
    --timeline-effective-mobile-gap:min(
      var(--timeline-mobile-gap),
      calc(100vw - var(--constellation-size) - var(--timeline-axis) - 8px)
    );
  }
}


/* =========================================================
   v2.9 — Date-aware project timeline
   Project Month + Year controls chronological order and compressed
   temporal spacing. Month labels stay subtle; the full date remains CMS-only.
   ========================================================= */
.timeline-project-event{
  margin-top:var(--timeline-date-gap,0px);
}
.timeline-project-month{
  position:absolute;
  z-index:6;
  top:calc(50% + var(--timeline-y));
  left:50%;
  color:color-mix(in srgb,var(--timeline-company-accent) 72%,#59616a 28%);
  font:750 .56rem/1 Inter,system-ui,sans-serif;
  letter-spacing:.11em;
  opacity:.72;
  pointer-events:none;
  white-space:nowrap;
}
.timeline-event-right .timeline-project-month{
  transform:translate(calc(-100% - 16px),-50%);
}
.timeline-event-left .timeline-project-month{
  transform:translate(16px,-50%);
}

@media (max-width:900px){
  .timeline-project-event{margin-top:var(--timeline-date-gap-mobile,0px);}
  .timeline-project-month{
    left:var(--timeline-axis);
    transform:translate(calc(-100% - 10px),-50%) !important;
    font-size:.52rem;
    letter-spacing:.08em;
  }
}

@media (max-width:560px){
  .timeline-project-month{font-size:.48rem;opacity:.68;}
}

/* =========================================================
   v2.10 — Stronger milestones + rounded-square project hierarchy
   Company cards share one blue treatment. Project levels use larger
   rounded squares; Featured is already shown at preview scale.
   Expanded non-featured previews float over the timeline without reflow.
   ========================================================= */

/* Company milestones */
.timeline-company-copy{
  background:rgba(232,243,255,.94) !important;
  border-color:rgba(76,145,208,.34) !important;
  box-shadow:0 12px 34px rgba(54,91,124,.10) !important;
}
.timeline-company-kicker{
  color:#2676b5 !important;
  font-size:.68rem !important;
  letter-spacing:.105em !important;
  margin-bottom:8px !important;
}
.timeline-company-copy h2{
  font-size:clamp(2.55rem,4.25vw,4.7rem) !important;
  line-height:.82 !important;
  letter-spacing:-.058em !important;
}
.timeline-company-role{font-size:.88rem !important;}
.timeline-company-period{display:none !important;}

/* Bigger rounded-square project scale. */
.timeline-node-level-featured{--constellation-size:430px;}
.timeline-node-level-major{--constellation-size:220px;}
.timeline-node-level-regular{--constellation-size:160px;}
.timeline-node-level-minor{--constellation-size:116px;}

.timeline-project-node .timeline-node-visual{
  border-radius:24px !important;
  box-shadow:0 14px 34px rgba(49,43,35,.13) !important;
}
.timeline-node-level-major .timeline-node-visual{border-radius:22px !important;}
.timeline-node-level-regular .timeline-node-visual{border-radius:20px !important;}
.timeline-node-level-minor .timeline-node-visual{border-radius:18px !important;}
.timeline-node-level-featured .timeline-node-visual{
  border-radius:26px 26px 0 0 !important;
  box-shadow:0 22px 54px rgba(49,43,35,.16) !important;
}

/* Featured work is already at preview scale. Show its image title and only
   a compact full-project action below it. */
.timeline-node-level-featured .timeline-node-visual::after,
.timeline-node-level-featured .timeline-node-overlay{opacity:1 !important;}
.timeline-node-level-featured .timeline-node-details{
  display:flex !important;
  align-items:center;
  justify-content:flex-end;
  max-height:none !important;
  min-height:50px;
  opacity:1 !important;
  padding:10px 14px !important;
  background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(25,29,34,.08) !important;
  border-top:0 !important;
  border-radius:0 0 26px 26px !important;
  box-shadow:0 20px 48px rgba(49,43,35,.11) !important;
  overflow:visible !important;
}
.timeline-node-level-featured .timeline-node-level-name,
.timeline-node-level-featured .timeline-node-kicker,
.timeline-node-level-featured .timeline-node-details p{display:none !important;}
.timeline-node-level-featured .timeline-node-open-hint{
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  margin:0 !important;
  padding:8px 11px;
  border-radius:999px;
  color:#1b6fa8 !important;
  background:#eaf4ff;
  border:1px solid rgba(38,118,181,.18);
  font-size:.67rem !important;
  font-weight:750 !important;
}
.timeline-node-level-featured .timeline-image-overlay h3{
  font-size:clamp(1.75rem,2.6vw,2.8rem) !important;
}

/* Featured row reserves only its normal visual footprint. Expanded smaller
   work never changes row height, so opening a preview cannot push the page. */
.timeline-project-event.timeline-level-featured{min-height:390px !important;}
.timeline-project-event.timeline-level-major{min-height:142px !important;}
.timeline-project-event.timeline-level-regular{min-height:104px !important;}
.timeline-project-event.timeline-level-minor{min-height:82px !important;}
.timeline-project-event.has-expanded-node{z-index:900 !important;}
.timeline-project-event.has-expanded-node.timeline-level-major{min-height:142px !important;}
.timeline-project-event.has-expanded-node.timeline-level-regular{min-height:104px !important;}
.timeline-project-event.has-expanded-node.timeline-level-minor{min-height:82px !important;}

/* Non-featured preview floats over neighboring timeline items. */
.timeline-project-event > .timeline-project-node.is-expanded{
  position:absolute !important;
  z-index:1000 !important;
  width:min(430px,42vw) !important;
  height:auto !important;
  filter:drop-shadow(0 26px 38px rgba(31,29,25,.18));
}
.timeline-event-left > .timeline-project-node.is-expanded{
  left:50% !important;
  transform:translate(calc(-100% - 44px),calc(-50% + var(--timeline-y))) !important;
}
.timeline-event-right > .timeline-project-node.is-expanded{
  left:50% !important;
  transform:translate(44px,calc(-50% + var(--timeline-y))) !important;
}
.timeline-project-node.is-expanded .timeline-node-visual{
  width:100% !important;
  height:auto !important;
  aspect-ratio:16/10 !important;
  border-radius:24px 24px 0 0 !important;
  transform:none !important;
}
.timeline-project-node.is-expanded .timeline-node-details{
  max-height:280px !important;
  opacity:1 !important;
  padding:18px 20px 20px !important;
  border-width:1px !important;
  border-radius:0 0 24px 24px !important;
  background:rgba(255,255,255,.97) !important;
}

/* Connector / dot layering. The line runs to the exact project edge, but
   sits behind both the timeline dot and the project tile. */
.timeline-project-event > .timeline-project-node:not(.is-expanded){z-index:2 !important;}
.timeline-project-event > .timeline-project-node:not(.is-expanded)::before{
  z-index:0 !important;
  border-top-width:2px !important;
  opacity:.76 !important;
}
.timeline-project-node:not(.is-expanded) .timeline-node-visual{
  position:relative;
  z-index:2;
}
.timeline-project-event .timeline-event-dot{
  z-index:8 !important;
  background:#fbfaf7 !important;
}
.timeline-project-month{z-index:9 !important;}

@media (max-width:900px){
  .timeline-company-copy{
    padding:18px 20px 20px !important;
    border-radius:18px !important;
  }
  .timeline-company-copy h2{
    font-size:clamp(3rem,11.8vw,5rem) !important;
    line-height:.82 !important;
  }
  .timeline-company-kicker{font-size:.64rem !important;}
  .timeline-company-role{font-size:.86rem !important;}

  .timeline-node-level-featured{--constellation-size:min(340px,calc(100vw - 104px));}
  .timeline-node-level-major{--constellation-size:184px;}
  .timeline-node-level-regular{--constellation-size:142px;}
  .timeline-node-level-minor{--constellation-size:106px;}

  .timeline-project-event.timeline-level-featured{min-height:320px !important;}
  .timeline-project-event.timeline-level-major,
  .timeline-project-event.has-expanded-node.timeline-level-major{min-height:124px !important;}
  .timeline-project-event.timeline-level-regular,
  .timeline-project-event.has-expanded-node.timeline-level-regular{min-height:98px !important;}
  .timeline-project-event.timeline-level-minor,
  .timeline-project-event.has-expanded-node.timeline-level-minor{min-height:78px !important;}

  .timeline-project-event > .timeline-project-node.is-expanded,
  .timeline-event-left > .timeline-project-node.is-expanded,
  .timeline-event-right > .timeline-project-node.is-expanded{
    left:var(--timeline-axis) !important;
    width:min(390px,calc(100vw - 78px)) !important;
    transform:translate(30px,calc(-50% + var(--timeline-y))) !important;
  }

  .timeline-node-level-featured .timeline-node-details{
    min-height:46px;
    padding:8px 11px !important;
  }
}

@media (max-width:560px){
  .timeline-company-copy{
    padding:16px 17px 18px !important;
    border-radius:16px !important;
  }
  .timeline-company-copy h2{font-size:clamp(2.7rem,13vw,4.4rem) !important;}
  .timeline-company-kicker{font-size:.59rem !important;}

  .timeline-node-level-featured{--constellation-size:min(292px,calc(100vw - 82px));}
  .timeline-node-level-major{--constellation-size:164px;}
  .timeline-node-level-regular{--constellation-size:126px;}
  .timeline-node-level-minor{--constellation-size:96px;}

  .timeline-project-event.timeline-level-featured{min-height:276px !important;}
  .timeline-project-event.timeline-level-major,
  .timeline-project-event.has-expanded-node.timeline-level-major{min-height:112px !important;}
  .timeline-project-event.timeline-level-regular,
  .timeline-project-event.has-expanded-node.timeline-level-regular{min-height:90px !important;}
  .timeline-project-event.timeline-level-minor,
  .timeline-project-event.has-expanded-node.timeline-level-minor{min-height:72px !important;}

  .timeline-project-event > .timeline-project-node.is-expanded,
  .timeline-event-left > .timeline-project-node.is-expanded,
  .timeline-event-right > .timeline-project-node.is-expanded{
    width:min(330px,calc(100vw - 58px)) !important;
    transform:translate(20px,calc(-50% + var(--timeline-y))) !important;
  }

  .timeline-project-node .timeline-node-visual{border-radius:18px !important;}
  .timeline-node-level-featured .timeline-node-visual{border-radius:22px 22px 0 0 !important;}
  .timeline-node-level-featured .timeline-node-details{border-radius:0 0 22px 22px !important;}
}

/* Keep oversized Featured previews near the spine so their larger footprint
   stays comfortably inside the timeline canvas while smaller work can scatter. */
@media (min-width:901px){
  .timeline-project-event.timeline-level-featured{--timeline-gap:42px !important;}
  .timeline-project-event.timeline-level-featured:nth-child(even){--timeline-gap:68px !important;}
}
@media (max-width:900px){
  .timeline-project-event.timeline-level-featured{--timeline-mobile-gap:22px !important;}
  .timeline-project-event.timeline-level-featured:nth-child(even){--timeline-mobile-gap:30px !important;}
}

/* =========================================================
   v2.11 — Cinematic project focus morph
   Featured work is slightly smaller; non-featured work morphs from its
   timeline tile into a floating focus card without moving the timeline.
   ========================================================= */

/* Featured remains dominant, but no longer crowds nearby company milestones. */
.timeline-node-level-featured{--constellation-size:360px !important;}
.timeline-project-event.timeline-level-featured{min-height:326px !important;}
.timeline-node-level-featured .timeline-image-overlay h3{
  font-size:clamp(1.48rem,2.1vw,2.15rem) !important;
}

/* Focus source stays in its timeline slot so the page never reflows. */
.timeline-project-node{
  transition:opacity .28s ease,filter .28s ease,transform .36s cubic-bezier(.2,.78,.2,1) !important;
}
.timeline-project-node.is-focus-source{
  opacity:.16 !important;
  filter:saturate(.72) blur(.35px) !important;
  pointer-events:none;
}

body.timeline-focus-open{overflow:hidden;}
.timeline-focus-layer{
  position:fixed;
  inset:0;
  z-index:24000;
  pointer-events:none;
  isolation:isolate;
  --focus-rgb:45,120,200;
  --focus-x:50%;
  --focus-y:50%;
}
.timeline-focus-layer.is-active{pointer-events:auto;}
.timeline-focus-backdrop{
  position:absolute;
  inset:0;
  opacity:0;
  background:
    radial-gradient(circle 360px at var(--focus-x) var(--focus-y),rgba(var(--focus-rgb),.18),rgba(var(--focus-rgb),.055) 46%,transparent 76%),
    rgba(248,246,241,.54);
  backdrop-filter:blur(0px) saturate(1);
  -webkit-backdrop-filter:blur(0px) saturate(1);
  transition:opacity .46s ease,backdrop-filter .56s ease,-webkit-backdrop-filter .56s ease;
}
.timeline-focus-layer.is-active .timeline-focus-backdrop{
  opacity:1;
  backdrop-filter:blur(5px) saturate(.92);
  -webkit-backdrop-filter:blur(5px) saturate(.92);
}

.timeline-floating-preview{
  position:fixed;
  z-index:4;
  outline:none;
  cursor:pointer;
  will-change:transform,opacity,filter;
  filter:drop-shadow(0 30px 70px rgba(31,29,25,.20)) drop-shadow(0 15px 48px rgba(var(--focus-rgb),.15));
}
.timeline-floating-preview::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-20px;
  border-radius:38px;
  background:radial-gradient(circle at 50% 44%,rgba(var(--focus-rgb),.19),transparent 67%);
  filter:blur(17px);
  opacity:.82;
  pointer-events:none;
}
.timeline-floating-preview .timeline-focus-card{
  width:100% !important;
  opacity:1 !important;
  filter:none !important;
  transform:none !important;
  pointer-events:none;
}
.timeline-floating-preview .timeline-node-visual{
  position:relative;
  width:100% !important;
  height:auto !important;
  aspect-ratio:16 / 10 !important;
  border-radius:26px 26px 0 0 !important;
  overflow:hidden;
  box-shadow:0 18px 56px rgba(31,29,25,.16) !important;
}
.timeline-floating-preview .timeline-node-visual::after,
.timeline-floating-preview .timeline-node-overlay{opacity:1 !important;}
.timeline-floating-preview .timeline-node-visual img{
  transform:scale(1.045);
  transition:transform .95s cubic-bezier(.16,.82,.18,1);
}
.timeline-floating-preview.is-settled .timeline-node-visual img{transform:scale(1);}
.timeline-floating-preview .timeline-node-visual::before{
  content:"";
  position:absolute;
  z-index:5;
  top:-20%;
  bottom:-20%;
  left:-46%;
  width:31%;
  pointer-events:none;
  background:linear-gradient(100deg,transparent 0,rgba(255,255,255,.08) 18%,rgba(255,255,255,.48) 50%,rgba(255,255,255,.08) 82%,transparent 100%);
  transform:translateX(-175%) skewX(-13deg);
  mix-blend-mode:screen;
}
.timeline-floating-preview.is-settled .timeline-node-visual::before{
  animation:timelineFocusShine .9s .04s cubic-bezier(.2,.68,.25,1) both;
}
@keyframes timelineFocusShine{
  0%{transform:translateX(-175%) skewX(-13deg);opacity:0;}
  18%{opacity:.9;}
  100%{transform:translateX(520%) skewX(-13deg);opacity:0;}
}
.timeline-floating-preview .timeline-node-details{
  display:block !important;
  max-height:none !important;
  opacity:1 !important;
  padding:18px 20px 20px !important;
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(25,29,34,.085) !important;
  border-top:0 !important;
  border-radius:0 0 26px 26px !important;
  box-shadow:0 20px 50px rgba(49,43,35,.11) !important;
  backdrop-filter:blur(18px) saturate(1.08);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
  overflow:hidden !important;
}
.timeline-floating-preview .timeline-node-level-name{
  display:block !important;
  color:#727984;
  font:750 .59rem/1 Inter,system-ui,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.timeline-floating-preview .timeline-node-kicker{display:block !important;margin-top:8px;}
.timeline-floating-preview .timeline-node-details p{display:block !important;margin-top:11px;}
.timeline-floating-preview .timeline-node-open-hint{
  display:inline-flex !important;
  align-items:center;
  margin-top:16px !important;
  color:#1b6fa8 !important;
  font-weight:750 !important;
}
.timeline-floating-preview .timeline-image-overlay h3{
  font-size:clamp(1.55rem,2.3vw,2.25rem) !important;
}

/* The travelling image clone used for both open and close morphs. */
.timeline-morph-ghost{
  position:fixed !important;
  z-index:24005 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
  box-shadow:0 24px 68px rgba(31,29,25,.22),0 15px 52px rgba(var(--overlay-fade-rgb,45,120,200),.14) !important;
  will-change:left,top,width,height,border-radius,transform,filter;
  transform-origin:center center;
}
.timeline-morph-ghost img{width:100% !important;height:100% !important;object-fit:cover !important;}
.timeline-morph-ghost .timeline-image-overlay{opacity:0 !important;}
.timeline-morph-ghost::before{
  content:"";
  position:absolute;
  z-index:6;
  inset:-30%;
  background:linear-gradient(110deg,transparent 34%,rgba(255,255,255,.38) 48%,transparent 62%);
  transform:translateX(-100%);
  animation:timelineGhostGlint .72s cubic-bezier(.2,.7,.2,1) both;
  mix-blend-mode:screen;
}
.timeline-morph-ghost.is-returning::before{animation-direction:reverse;}
@keyframes timelineGhostGlint{
  0%{transform:translateX(-105%);opacity:0;}
  22%{opacity:.72;}
  100%{transform:translateX(105%);opacity:0;}
}

@media (max-width:900px){
  .timeline-node-level-featured{--constellation-size:min(292px,calc(100vw - 110px)) !important;}
  .timeline-project-event.timeline-level-featured{min-height:270px !important;}
  .timeline-floating-preview{
    filter:drop-shadow(0 24px 52px rgba(31,29,25,.20)) drop-shadow(0 12px 36px rgba(var(--focus-rgb),.14));
  }
}
@media (max-width:560px){
  .timeline-node-level-featured{--constellation-size:min(258px,calc(100vw - 88px)) !important;}
  .timeline-project-event.timeline-level-featured{min-height:238px !important;}
  .timeline-node-level-featured .timeline-image-overlay h3{font-size:1.35rem !important;}
  .timeline-floating-preview .timeline-node-visual{border-radius:22px 22px 0 0 !important;}
  .timeline-floating-preview .timeline-node-details{border-radius:0 0 22px 22px !important;padding:15px 16px 17px !important;}
  .timeline-floating-preview .timeline-node-details p{font-size:.78rem !important;line-height:1.48 !important;}
}

@media (prefers-reduced-motion:reduce){
  .timeline-focus-backdrop,.timeline-floating-preview,.timeline-project-node{transition:none !important;}
  .timeline-floating-preview .timeline-node-visual::before,.timeline-morph-ghost::before{animation:none !important;}
}
body.timeline-focus-open{
  overflow:hidden;
  padding-right:var(--timeline-scrollbar-comp,0px);
}
.timeline-focus-layer{overscroll-behavior:contain;}
.timeline-focus-backdrop{touch-action:none;}

/* =========================================================
   v2.12 — Smoother return morph + stronger company separation
   Cross-fade the travelling clone into the real timeline tile and
   give each career chapter a clearer pause before the next milestone.
   ========================================================= */
.timeline-project-node.is-focus-source.is-return-target{
  opacity:1 !important;
  filter:none !important;
  transition:opacity .22s cubic-bezier(.2,.72,.2,1),filter .22s ease !important;
}
.timeline-morph-ghost.is-returning{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translateZ(0);
}
.timeline-morph-ghost.is-returning::before{
  animation:none !important;
  opacity:0 !important;
}

/* Leave a deliberate pause after the last project of one employer before
   the next company milestone card begins. */
.timeline-company{
  padding-bottom:110px !important;
}
.timeline-company:last-child{
  padding-bottom:34px !important;
}

@media (max-width:900px){
  .timeline-company{padding-bottom:78px !important;}
  .timeline-company:last-child{padding-bottom:28px !important;}
}

@media (max-width:560px){
  .timeline-company{padding-bottom:62px !important;}
  .timeline-company:last-child{padding-bottom:24px !important;}
}


/* ============================================================
   v2.13 — Independent / Previous Work subgroup
   ============================================================ */
.timeline-subsection-marker{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:minmax(0,1fr) 94px minmax(0,1fr);
  align-items:center;
  min-height:150px;
  margin:54px 0 28px;
}
.timeline-subsection-dot{
  position:absolute;
  z-index:4;
  left:var(--timeline-axis);
  top:50%;
  width:13px;
  height:13px;
  border-radius:50%;
  background:#2d78c8;
  box-shadow:0 0 0 7px rgba(45,120,200,.10);
  transform:translate(-50%,-50%);
}
.timeline-subsection-card{
  position:relative;
  grid-column:3;
  justify-self:start;
  width:min(390px,calc(100vw - 80px));
  margin-left:clamp(36px,5vw,72px);
  padding:22px 24px 21px;
  border:1px solid rgba(45,120,200,.20);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(232,242,252,.96),rgba(239,246,253,.88));
  box-shadow:0 16px 42px rgba(58,72,88,.08);
}
.timeline-subsection-card::before{
  content:"";
  position:absolute;
  z-index:-1;
  right:100%;
  top:50%;
  width:calc(clamp(36px,5vw,72px) + 47px);
  border-top:1.5px solid rgba(45,120,200,.34);
}
.timeline-subsection-card>span{
  display:block;
  margin-bottom:7px;
  color:#2d78c8;
  font:750 .62rem/1 Inter,system-ui,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.timeline-subsection-card h3{
  margin:0;
  color:var(--text-0);
  font-family:"Afacad Flux",Inter,sans-serif;
  font-size:clamp(2.1rem,4vw,3.4rem);
  line-height:.88;
  letter-spacing:-.055em;
}
.timeline-subsection-card p{
  margin:12px 0 0;
  color:var(--text-1);
  font-size:.82rem;
  line-height:1.55;
}
.timeline-subsection-card a{
  display:inline-flex;
  gap:7px;
  margin-top:14px;
  padding-bottom:4px;
  border-bottom:1px solid rgba(25,29,34,.20);
  color:var(--text-0);
  text-decoration:none;
  font:650 .7rem/1 Inter,system-ui,sans-serif;
}
.timeline-project-list-previous-work{margin-top:4px;}
.company-subcategory{
  margin:20px 0 0;
  padding:72px 0 30px;
  border-top:1px solid var(--career-line);
  scroll-margin-top:100px;
}
.company-subcategory-header{max-width:820px;margin:0 0 36px;}
.company-subcategory-header>span{
  display:block;
  margin-bottom:10px;
  color:var(--accent-strong);
  font:700 .68rem/1 Inter,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.company-subcategory-header h2{
  margin:0;
  color:var(--text-0);
  font-family:"Afacad Flux",Inter,sans-serif;
  font-size:clamp(3.4rem,8vw,6.8rem);
  line-height:.78;
  font-weight:650;
  letter-spacing:-.065em;
}
.company-subcategory-header p{max-width:650px;margin:18px 0 0;color:var(--text-1);font-size:.94rem;line-height:1.65;}
.company-subcategory-grid{padding-bottom:90px;}
.sidenav a.nav-company-child{
  margin:-5px 0 6px 18px;
  padding-top:5px;
  padding-bottom:8px;
  color:var(--career-muted);
  font-size:.72rem;
  border-left:1px solid rgba(45,120,200,.20);
  padding-left:14px;
}
.sidenav a.nav-company-child:hover{color:var(--accent-strong);}
@media (max-width:700px){
  .timeline-subsection-marker{display:block;min-height:0;margin:52px 0 24px;padding-left:calc(var(--timeline-axis) + 54px);}
  .timeline-subsection-dot{top:34px;}
  .timeline-subsection-card{width:calc(100vw - var(--timeline-axis) - 78px);margin:0;padding:18px 18px 17px;border-radius:17px;}
  .timeline-subsection-card::before{right:100%;left:auto;top:34px;width:54px;}
  .timeline-subsection-card h3{font-size:clamp(2rem,11vw,3rem);}
  .company-subcategory{padding-top:52px;}
  .company-subcategory-header{margin-bottom:26px;}
  .company-subcategory-header h2{font-size:clamp(3rem,16vw,5rem);}
}

/* =========================================================
   v2.14 — Featured image card treatment
   Featured projects are a single landscape image card. Company/title live
   inside the image fade, with Explore aligned on the title row. No footer.
   ========================================================= */
.timeline-node-level-featured{
  --constellation-size:380px !important;
}
.timeline-node-level-featured .timeline-node-visual{
  width:100% !important;
  height:auto !important;
  aspect-ratio:16 / 10 !important;
  border-radius:26px !important;
  overflow:hidden !important;
  box-shadow:0 20px 54px rgba(49,43,35,.16) !important;
}
.timeline-node-level-featured .timeline-node-details{
  display:none !important;
}
.timeline-node-level-featured .timeline-image-overlay{
  left:22px !important;
  right:22px !important;
  bottom:19px !important;
}
.timeline-node-level-featured .timeline-image-overlay > span:not(.timeline-featured-explore){
  margin-bottom:7px !important;
  font-size:.62rem !important;
  letter-spacing:.105em !important;
}
.timeline-featured-title-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  min-width:0;
}
.timeline-node-level-featured .timeline-featured-title-row h3{
  min-width:0;
  margin:0 !important;
  font-size:clamp(1.72rem,2.35vw,2.55rem) !important;
  line-height:.92 !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.timeline-featured-explore{
  flex:0 0 auto;
  display:inline-flex !important;
  align-items:center;
  gap:7px;
  margin:0 0 1px !important;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  background:rgba(255,255,255,.90);
  color:#17191c !important;
  box-shadow:0 7px 22px rgba(0,0,0,.14);
  text-shadow:none !important;
  font:760 .68rem/1 Inter,system-ui,sans-serif !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
  backdrop-filter:blur(10px) saturate(1.06);
  -webkit-backdrop-filter:blur(10px) saturate(1.06);
  transition:transform .24s cubic-bezier(.2,.8,.2,1),background .24s ease,box-shadow .24s ease;
}
.timeline-featured-explore b{
  font-size:.78rem;
  font-weight:700;
  transition:transform .24s cubic-bezier(.2,.8,.2,1);
}
.timeline-node-level-featured:hover .timeline-featured-explore,
.timeline-node-level-featured:focus-visible .timeline-featured-explore{
  transform:translateY(-1px);
  background:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.timeline-node-level-featured:hover .timeline-featured-explore b,
.timeline-node-level-featured:focus-visible .timeline-featured-explore b{
  transform:translate(2px,-2px);
}
.timeline-project-event.timeline-level-featured{
  min-height:278px !important;
}

@media (max-width:900px){
  .timeline-node-level-featured{
    --constellation-size:min(326px,calc(100vw - 102px)) !important;
  }
  .timeline-project-event.timeline-level-featured{
    min-height:242px !important;
  }
  .timeline-node-level-featured .timeline-node-visual{
    border-radius:22px !important;
  }
  .timeline-node-level-featured .timeline-image-overlay{
    left:16px !important;
    right:16px !important;
    bottom:14px !important;
  }
  .timeline-node-level-featured .timeline-featured-title-row h3{
    font-size:clamp(1.35rem,6vw,1.82rem) !important;
  }
  .timeline-featured-explore{
    padding:7px 10px;
    font-size:.62rem !important;
  }
}

@media (max-width:560px){
  .timeline-node-level-featured{
    --constellation-size:min(286px,calc(100vw - 76px)) !important;
  }
  .timeline-project-event.timeline-level-featured{
    min-height:216px !important;
  }
  .timeline-node-level-featured .timeline-image-overlay > span:not(.timeline-featured-explore){
    font-size:.51rem !important;
  }
  .timeline-node-level-featured .timeline-featured-title-row{
    gap:10px;
  }
  .timeline-node-level-featured .timeline-featured-title-row h3{
    font-size:1.28rem !important;
  }
  .timeline-featured-explore{
    padding:6px 9px;
    font-size:.58rem !important;
  }
}

/* ============================================================
   v2.16 — Mobile timeline rhythm
   Mobile project rows now reserve enough room for their actual tile size,
   use a reduced vertical scatter, and compress long date gaps. Desktop is
   intentionally unchanged.
   ============================================================ */
@media (max-width:900px){
  /* Date remains structural, but long gaps are intentionally compressed on
     narrow screens. The PHP value is already capped; this keeps CSS resilient. */
  .timeline-project-event{
    margin-top:clamp(0px,var(--timeline-date-gap-mobile,0px),24px) !important;
  }

  /* A project row must be at least as tall as its tile. This prevents the
     next dated project from painting through it while retaining a compact flow. */
  .timeline-project-event.timeline-level-featured{min-height:220px !important;}
  .timeline-project-event.timeline-level-major{min-height:194px !important;}
  .timeline-project-event.timeline-level-regular{min-height:152px !important;}
  .timeline-project-event.timeline-level-minor{min-height:116px !important;}

  /* Keep the constellation feel, but use the dedicated smaller mobile Y drift. */
  .timeline-project-event > .timeline-project-node:not(.is-expanded),
  .timeline-event-left > .timeline-project-node:not(.is-expanded),
  .timeline-event-right > .timeline-project-node:not(.is-expanded){
    transform:translate(
      var(--timeline-effective-mobile-gap),
      calc(-50% + var(--timeline-y-mobile,0px))
    ) !important;
  }
  .timeline-project-event .timeline-event-dot,
  .timeline-project-month{
    top:calc(50% + var(--timeline-y-mobile,0px)) !important;
  }

  /* Give the first project a clean beat after the company description without
     reproducing the large dead zones visible in the previous mobile pass. */
  .timeline-project-list{
    margin-top:8px !important;
  }

  /* Slightly more breathing room around the company card itself, then a
     consistent handoff into the project constellation. */
  .timeline-company-milestone{
    margin-bottom:18px !important;
  }
}

@media (max-width:560px){
  .timeline-project-event.timeline-level-featured{min-height:202px !important;}
  .timeline-project-event.timeline-level-major{min-height:174px !important;}
  .timeline-project-event.timeline-level-regular{min-height:136px !important;}
  .timeline-project-event.timeline-level-minor{min-height:106px !important;}

  .timeline-company-milestone{margin-bottom:14px !important;}
  .timeline-project-list{margin-top:6px !important;}
}

/* ============================================================
   v2.17 — Mobile structural timeline flow
   Desktop remains unchanged. On tablet/mobile, project tiles participate in
   normal document flow so their actual visual height reserves space. Horizontal
   scatter remains; vertical scatter is disabled to eliminate collisions.
   ============================================================ */
@media (max-width:900px){
  /* Company chapters get a clean, predictable handoff into their projects. */
  .timeline-company{
    padding-bottom:72px !important;
  }
  .timeline-company:last-child{
    padding-bottom:30px !important;
  }
  .timeline-company-milestone{
    margin-bottom:0 !important;
  }
  .timeline-project-list{
    margin-top:26px !important;
    overflow:visible !important;
  }

  /* The event itself becomes a real flow container. Date spacing is retained,
     but intentionally capped for narrow layouts. */
  .timeline-project-event,
  .timeline-project-event.timeline-level-featured,
  .timeline-project-event.timeline-level-major,
  .timeline-project-event.timeline-level-regular,
  .timeline-project-event.timeline-level-minor,
  .timeline-project-event.has-expanded-node{
    display:block !important;
    min-height:0 !important;
    height:auto !important;
    overflow:visible !important;
    margin-top:clamp(0px,var(--timeline-date-gap-mobile,0px),18px) !important;
  }
  .timeline-project-event.timeline-level-featured{padding:16px 0 20px !important;}
  .timeline-project-event.timeline-level-major{padding:13px 0 15px !important;}
  .timeline-project-event.timeline-level-regular{padding:11px 0 13px !important;}
  .timeline-project-event.timeline-level-minor{padding:9px 0 11px !important;}

  /* Mobile keeps the infographic scatter horizontally, but the tile is no
     longer absolutely positioned. Its real size now determines row height. */
  .timeline-project-event > .timeline-project-node:not(.is-expanded),
  .timeline-event-left > .timeline-project-node:not(.is-expanded),
  .timeline-event-right > .timeline-project-node:not(.is-expanded){
    position:relative !important;
    top:auto !important;
    right:auto !important;
    left:auto !important;
    display:block !important;
    margin-top:0 !important;
    margin-right:0 !important;
    margin-bottom:0 !important;
    margin-left:calc(var(--timeline-axis) + var(--timeline-effective-mobile-gap)) !important;
    transform:none !important;
  }

  /* Anchors follow the actual center of the flow row. With vertical drift gone,
     connector, month and dot always point to the project they belong to. */
  .timeline-project-event .timeline-event-dot,
  .timeline-project-month{
    top:50% !important;
  }
  .timeline-project-event .timeline-event-dot{
    left:var(--timeline-axis) !important;
  }

  .timeline-project-event > .timeline-project-node:not(.is-expanded)::before,
  .timeline-event-left > .timeline-project-node:not(.is-expanded)::before,
  .timeline-event-right > .timeline-project-node:not(.is-expanded)::before{
    right:100% !important;
    left:auto !important;
    width:var(--timeline-effective-mobile-gap) !important;
    z-index:0 !important;
  }

  /* Floating focus remains independent of flow, preserving the cinematic morph. */
  .timeline-project-event > .timeline-project-node.is-expanded,
  .timeline-event-left > .timeline-project-node.is-expanded,
  .timeline-event-right > .timeline-project-node.is-expanded{
    position:absolute !important;
  }
}

@media (max-width:560px){
  .timeline-company{
    padding-bottom:58px !important;
  }
  .timeline-company:last-child{
    padding-bottom:24px !important;
  }
  .timeline-project-list{
    margin-top:22px !important;
  }
  .timeline-project-event{
    margin-top:clamp(0px,var(--timeline-date-gap-mobile,0px),14px) !important;
  }
  .timeline-project-event.timeline-level-featured{padding:14px 0 18px !important;}
  .timeline-project-event.timeline-level-major{padding:11px 0 13px !important;}
  .timeline-project-event.timeline-level-regular{padding:10px 0 12px !important;}
  .timeline-project-event.timeline-level-minor{padding:8px 0 10px !important;}
}

/* =========================================================
   v2.19 — Experience-driven company cards + company page back link
   ========================================================= */
.company-page-back{
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  margin:0 0 20px;
  border:1px solid rgba(25,29,34,.12);
  border-radius:999px;
  background:rgba(255,255,255,.68);
  color:var(--text-0);
  text-decoration:none;
  box-shadow:0 8px 26px rgba(45,39,31,.07);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  font:600 1.35rem/1 Inter,system-ui,sans-serif;
  transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.company-page-back:hover{
  transform:translateX(-4px);
  background:rgba(255,255,255,.94);
  border-color:rgba(45,120,200,.28);
  box-shadow:0 10px 30px rgba(45,39,31,.10);
}
.company-page-back:focus-visible{outline:2px solid var(--accent-strong);outline-offset:4px;}

/* Make the homepage company CTA read as a real action, not footnote text. */
.timeline-company-link{
  margin-top:18px !important;
  gap:10px !important;
  font-size:.9rem !important;
  font-weight:720 !important;
  padding-bottom:6px !important;
}
.timeline-company-link span{font-size:1.05em;transition:transform .2s ease;}
.timeline-company-link:hover span{transform:translate(2px,-2px);}

@media (max-width:760px){
  .company-page-back{width:40px;height:40px;margin-bottom:17px;font-size:1.2rem;}
  .timeline-company-link{font-size:.86rem !important;margin-top:14px !important;}
}

/* =========================================================
   v2.21 — Mobile work feed
   Phones intentionally do not render the career timeline. The desktop
   timeline remains unchanged; mobile gets company headings + large cards.
   ========================================================= */
.mobile-work-feed{display:none;}

@media (max-width:760px){
  /* Turn the timeline off completely on mobile. This is deliberately a
     separate presentation, not another breakpoint patch on the timeline. */
  .portfolio-timeline{display:none !important;}
  .mobile-work-feed{
    display:block;
    width:min(100%,680px);
    margin:52px auto 0;
    padding:0 18px 78px;
  }
  .mobile-work-company{
    margin:0 0 72px;
  }
  .mobile-work-company:last-child{margin-bottom:18px;}
  .mobile-work-company-header{
    margin:0 0 22px;
    padding:0 2px;
  }
  .mobile-work-company-header h2{
    margin:0;
    color:var(--text-0);
    font-family:"Afacad Flux",Inter,sans-serif;
    font-size:clamp(2.75rem,13vw,4.35rem);
    line-height:.84;
    font-weight:650;
    letter-spacing:-.06em;
  }
  .mobile-work-company-header p{
    margin:12px 0 0;
    color:var(--text-1);
    font:600 .9rem/1.35 Inter,system-ui,sans-serif;
  }
  .mobile-work-company-header a{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:13px;
    padding-bottom:4px;
    border-bottom:1px solid rgba(25,29,34,.2);
    color:var(--text-0);
    text-decoration:none;
    font:700 .82rem/1 Inter,system-ui,sans-serif;
  }
  .mobile-work-cards{
    display:grid;
    gap:18px;
  }
  .mobile-work-card{
    position:relative;
    width:100%;
    margin:0;
    cursor:pointer;
    outline:none;
    border-radius:24px;
  }
  .mobile-work-card:focus-visible{
    outline:3px solid color-mix(in srgb,var(--accent-strong) 55%,transparent);
    outline-offset:4px;
  }
  .mobile-work-card-visual{
    position:relative;
    width:100%;
    aspect-ratio:16/10;
    overflow:hidden;
    border-radius:24px;
    background:#e8e6e1;
    box-shadow:0 14px 34px rgba(49,43,35,.12);
    --overlay-fade-rgb:22,24,27;
  }
  .mobile-work-card-visual img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s cubic-bezier(.2,.8,.25,1);
  }
  .mobile-work-card-visual::after{
    content:"";
    position:absolute;
    inset:auto 0 0;
    height:43%;
    pointer-events:none;
    background:linear-gradient(to top,
      rgba(var(--overlay-fade-rgb),.92) 0%,
      rgba(var(--overlay-fade-rgb),.72) 32%,
      rgba(var(--overlay-fade-rgb),.28) 68%,
      rgba(var(--overlay-fade-rgb),0) 100%);
  }
  .mobile-work-card-overlay{
    position:absolute;
    z-index:2;
    left:18px;
    right:16px;
    bottom:16px;
    color:#fff;
    text-shadow:0 1px 10px rgba(0,0,0,.18);
  }
  .mobile-work-card-visual.is-light-image .mobile-work-card-overlay{
    color:#11161b;
    text-shadow:0 1px 8px rgba(255,255,255,.18);
  }
  .mobile-work-card-overlay > span{
    display:block;
    margin-bottom:5px;
    font:750 .58rem/1 Inter,system-ui,sans-serif;
    letter-spacing:.095em;
    text-transform:uppercase;
    opacity:.9;
  }
  .mobile-work-card-title-row{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
  }
  .mobile-work-card-title-row h3{
    min-width:0;
    margin:0;
    font-family:"Afacad Flux",Inter,sans-serif;
    font-size:clamp(1.65rem,8vw,2.35rem);
    line-height:.92;
    font-weight:650;
    letter-spacing:-.045em;
  }
  .mobile-work-card-title-row b{
    flex:none;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:10px 13px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:999px;
    background:rgba(255,255,255,.82);
    color:#171a1e;
    box-shadow:0 7px 20px rgba(0,0,0,.10);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    font:750 .74rem/1 Inter,system-ui,sans-serif;
    text-shadow:none;
  }
  .mobile-work-card-title-row b i{font-style:normal;font-size:1.02em;}
  .mobile-work-card:active .mobile-work-card-visual img{transform:scale(.985);}
  .mobile-work-subsection{
    margin:34px 0 17px;
    padding-top:28px;
    border-top:1px solid rgba(25,29,34,.10);
  }
  .mobile-work-subsection span{
    color:var(--accent-strong);
    font:750 .6rem/1 Inter,system-ui,sans-serif;
    letter-spacing:.12em;
    text-transform:uppercase;
  }
  .mobile-work-subsection h3{
    margin:5px 0 0;
    color:var(--text-0);
    font-family:"Afacad Flux",Inter,sans-serif;
    font-size:2.15rem;
    line-height:.95;
    font-weight:650;
    letter-spacing:-.045em;
  }
}

@media (max-width:420px){
  .mobile-work-feed{padding-left:14px;padding-right:14px;margin-top:42px;}
  .mobile-work-company{margin-bottom:62px;}
  .mobile-work-cards{gap:14px;}
  .mobile-work-card,.mobile-work-card-visual{border-radius:20px;}
  .mobile-work-card-overlay{left:15px;right:13px;bottom:13px;}
  .mobile-work-card-title-row{gap:9px;}
  .mobile-work-card-title-row b{padding:9px 11px;font-size:.68rem;}
}


/* =========================================================
   Website UX Audit service page
   ========================================================= */
.ux-audit-teaser{
  width:min(1040px,calc(100% - 48px));
  margin:48px auto 10px;
  padding:24px 26px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:28px;
  border:1px solid rgba(25,29,34,.11);
  border-radius:18px;
  background:linear-gradient(125deg,rgba(255,255,255,.72),rgba(221,236,243,.48));
  box-shadow:0 16px 44px rgba(45,39,31,.07);
}
.ux-audit-teaser-copy{min-width:0;}
.ux-audit-eyebrow,.ux-audit-section-kicker{
  display:block;
  color:var(--accent-strong);
  font:700 .66rem/1 Inter,system-ui,sans-serif;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.ux-audit-teaser h2{margin:8px 0 7px;color:var(--text-0);font-family:"Afacad Flux",Inter,sans-serif;font-size:clamp(1.75rem,3.2vw,2.65rem);line-height:.95;font-weight:650;letter-spacing:-.045em;}
.ux-audit-teaser p{margin:0;max-width:720px;color:var(--text-2);font:400 .91rem/1.6 Inter,system-ui,sans-serif;text-align:left;}
.ux-audit-teaser-action{display:flex;flex-direction:column;align-items:flex-end;gap:9px;white-space:nowrap;}
.ux-audit-teaser-price{color:var(--text-0);font:700 1.55rem/1 Inter,system-ui,sans-serif;letter-spacing:-.04em;}
.ux-audit-arrow-link{display:inline-flex;align-items:center;gap:8px;color:var(--text-0);text-decoration:none;font:650 .76rem/1.2 Inter,system-ui,sans-serif;border-bottom:1px solid rgba(25,29,34,.22);padding-bottom:5px;}
.ux-audit-arrow-link:hover{color:var(--accent-strong);border-color:var(--accent-strong);}

.ux-audit-page{width:100%;padding:4px 0 30px;}
.ux-audit-hero{width:min(1120px,100%);margin:0 auto 108px;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr);gap:72px;align-items:end;padding-top:26px;}
.ux-audit-hero-copy h1{max-width:850px;margin:14px 0 24px;color:var(--text-0);font-family:"Afacad Flux",Inter,sans-serif;font-size:clamp(4rem,8.4vw,8.4rem);line-height:.78;font-weight:650;letter-spacing:-.072em;text-wrap:balance;}
.ux-audit-lede{max-width:790px!important;margin:0!important;color:var(--text-1)!important;font:450 clamp(1.04rem,1.6vw,1.25rem)/1.7 Inter,system-ui,sans-serif!important;text-align:left!important;}
.ux-audit-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;}
.ux-audit-button{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 18px;border-radius:999px;text-decoration:none;font:650 .78rem/1 Inter,system-ui,sans-serif;letter-spacing:.01em;transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease;}
.ux-audit-button:hover{transform:translateY(-2px);}
.ux-audit-button-primary{background:var(--text-0);color:#fff;border:1px solid var(--text-0);box-shadow:0 12px 30px rgba(24,27,31,.14);}
.ux-audit-button-primary:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff;}
.ux-audit-button-secondary{background:rgba(255,255,255,.55);color:var(--text-0);border:1px solid rgba(25,29,34,.13);}
.ux-audit-button-secondary:hover{background:#fff;color:var(--accent-strong);border-color:rgba(40,111,149,.28);}
.ux-audit-price-card{padding:25px 25px 27px;border:1px solid rgba(25,29,34,.11);border-radius:20px;background:rgba(255,255,255,.62);box-shadow:0 22px 54px rgba(45,39,31,.09);}
.ux-audit-price-label{display:block;color:var(--text-2);font:650 .7rem/1 Inter,sans-serif;text-transform:uppercase;letter-spacing:.12em;}
.ux-audit-price{display:block;margin-top:12px;color:var(--text-0);font:720 clamp(3rem,5vw,4.5rem)/.9 Inter,sans-serif;letter-spacing:-.06em;}
.ux-audit-price-note{display:block;margin-top:8px;color:var(--accent-strong);font:650 .72rem/1 Inter,sans-serif;}
.ux-audit-price-card ul{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid rgba(25,29,34,.10);max-width:none;font-weight:400;}
.ux-audit-price-card li{position:relative;margin:0;padding:8px 0 8px 20px;color:var(--text-1);font:500 .8rem/1.45 Inter,sans-serif;}
.ux-audit-price-card li::before{content:"✓";position:absolute;left:0;color:var(--accent-strong);font-weight:800;}

.ux-audit-narrow{width:min(830px,100%);margin-left:auto;margin-right:auto;}
.ux-audit-intro{margin-bottom:116px;}
.ux-audit-intro h2,.ux-audit-implementation h2{margin:14px 0 24px;color:var(--text-0);font-family:"Afacad Flux",Inter,sans-serif;font-size:clamp(2.45rem,5vw,4.4rem);line-height:.92;font-weight:650;letter-spacing:-.052em;text-wrap:balance;}
.ux-audit-intro p,.ux-audit-implementation p{max-width:790px;margin:0 0 16px;color:var(--text-1);font:400 1rem/1.8 Inter,sans-serif;text-align:left;}

.ux-audit-review,.ux-audit-included,.ux-audit-process{width:min(1120px,100%);margin:0 auto 120px;}
.ux-audit-section-heading{max-width:750px;margin-bottom:34px;}
.ux-audit-section-heading h2{margin:12px 0 0;color:var(--text-0);font-family:"Afacad Flux",Inter,sans-serif;font-size:clamp(3rem,6vw,5.7rem);line-height:.85;font-weight:650;letter-spacing:-.06em;text-wrap:balance;}
.ux-audit-section-heading p{margin:16px 0 0;max-width:660px;color:var(--text-2);font:400 1rem/1.7 Inter,sans-serif;text-align:left;}
.ux-audit-review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid rgba(25,29,34,.13);border-left:1px solid rgba(25,29,34,.13);}
.ux-audit-review-grid article{min-height:190px;padding:24px 26px;border-right:1px solid rgba(25,29,34,.13);border-bottom:1px solid rgba(25,29,34,.13);background:rgba(255,255,255,.22);}
.ux-audit-review-grid article>span{color:var(--warm-accent);font:750 .66rem/1 Inter,sans-serif;letter-spacing:.12em;}
.ux-audit-review-grid h3{margin:22px 0 9px;color:var(--text-0);font:650 1.1rem/1.2 Inter,sans-serif;letter-spacing:-.02em;}
.ux-audit-review-grid p{margin:0;max-width:470px;color:var(--text-2);font:400 .86rem/1.65 Inter,sans-serif;text-align:left;}

.ux-audit-included{padding:54px 58px;border-radius:26px;background:linear-gradient(135deg,rgba(22,91,126,.96),rgba(31,57,68,.96));box-shadow:0 28px 70px rgba(34,48,54,.18);}
.ux-audit-included .ux-audit-section-kicker{color:#a9d5e9;}
.ux-audit-included .ux-audit-section-heading h2{color:#fff;}
.ux-audit-included .ux-audit-section-heading p{color:rgba(255,255,255,.72);}
.ux-audit-deliverables{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.ux-audit-deliverables article{display:grid;grid-template-columns:42px minmax(0,1fr);gap:16px;padding:24px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.06);}
.ux-audit-deliverable-number{color:#a9d5e9;font:750 .68rem/1 Inter,sans-serif;letter-spacing:.11em;padding-top:4px;}
.ux-audit-deliverables h3{margin:0 0 8px;color:#fff;font:650 1rem/1.25 Inter,sans-serif;}
.ux-audit-deliverables p{margin:0;max-width:none;color:rgba(255,255,255,.72);font:400 .84rem/1.65 Inter,sans-serif;text-align:left;}

.ux-audit-process-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(25,29,34,.13);}
.ux-audit-process-grid li{margin:0;padding:27px 24px 20px;border-right:1px solid rgba(25,29,34,.13);}
.ux-audit-process-grid li:last-child{border-right:0;}
.ux-audit-process-grid li>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--warm-soft);color:#934b39;font:750 .72rem/1 Inter,sans-serif;}
.ux-audit-process-grid h3{margin:26px 0 10px;color:var(--text-0);font:650 1rem/1.25 Inter,sans-serif;}
.ux-audit-process-grid p{margin:0;color:var(--text-2);font:400 .82rem/1.65 Inter,sans-serif;text-align:left;}

.ux-audit-cta{width:min(1120px,100%);margin:0 auto 108px;padding:48px 52px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:end;border:1px solid rgba(25,29,34,.10);border-radius:26px;background:linear-gradient(125deg,rgba(243,221,213,.72),rgba(255,255,255,.62) 48%,rgba(221,236,243,.7));box-shadow:0 22px 58px rgba(45,39,31,.08);}
.ux-audit-cta h2{max-width:760px;margin:12px 0 13px;color:var(--text-0);font-family:"Afacad Flux",Inter,sans-serif;font-size:clamp(2.7rem,5.4vw,5rem);line-height:.86;font-weight:650;letter-spacing:-.058em;text-wrap:balance;}
.ux-audit-cta p{margin:0;max-width:680px;color:var(--text-1);font:400 .94rem/1.7 Inter,sans-serif;text-align:left;}
.ux-audit-cta-price{display:flex;min-width:180px;flex-direction:column;align-items:flex-end;gap:8px;}
.ux-audit-cta-price>span{color:var(--text-2);font:650 .66rem/1 Inter,sans-serif;text-transform:uppercase;letter-spacing:.11em;}
.ux-audit-cta-price>strong{margin-bottom:12px;color:var(--text-0);font:750 3rem/.9 Inter,sans-serif;letter-spacing:-.06em;}
.ux-audit-implementation{margin-bottom:10px;text-align:center;}
.ux-audit-implementation h2{max-width:780px;margin-left:auto;margin-right:auto;}
.ux-audit-implementation p{max-width:720px;margin:0 auto 22px;text-align:center;}
.ux-audit-implementation .ux-audit-arrow-link{margin-top:2px;}

.contact-service-note{grid-column:1/-1;display:flex;flex-direction:column;gap:5px;margin-bottom:8px;padding:16px 18px;border:1px solid rgba(40,111,149,.18);border-radius:12px;background:rgba(221,236,243,.45);}
.contact-service-note strong{color:var(--text-0);font:650 .94rem/1.2 Inter,sans-serif;}
.contact-service-note span{color:var(--text-2);font:400 .78rem/1.45 Inter,sans-serif;}

@media (max-width:900px){
  .ux-audit-teaser{width:100%;margin-top:38px;}
  .ux-audit-hero{grid-template-columns:1fr;gap:34px;margin-bottom:84px;}
  .ux-audit-hero-copy h1{font-size:clamp(3.8rem,12vw,6.6rem);}
  .ux-audit-price-card{max-width:520px;}
  .ux-audit-review,.ux-audit-included,.ux-audit-process,.ux-audit-cta{margin-bottom:86px;}
  .ux-audit-process-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ux-audit-process-grid li:nth-child(2){border-right:0;}
  .ux-audit-process-grid li:nth-child(-n+2){border-bottom:1px solid rgba(25,29,34,.13);}
  .ux-audit-cta{grid-template-columns:1fr;align-items:start;}
  .ux-audit-cta-price{align-items:flex-start;}
}
@media (max-width:620px){
  .ux-audit-page{padding-top:0;}
  .ux-audit-teaser{grid-template-columns:1fr;padding:21px 20px;gap:20px;border-radius:15px;}
  .ux-audit-teaser-action{align-items:flex-start;}
  .ux-audit-hero{padding-top:6px;margin-bottom:70px;}
  .ux-audit-hero-copy h1{font-size:clamp(3.25rem,17vw,5rem);line-height:.8;}
  .ux-audit-lede{font-size:.98rem!important;}
  .ux-audit-hero-actions{flex-direction:column;align-items:stretch;}
  .ux-audit-button{width:100%;}
  .ux-audit-intro{margin-bottom:78px;}
  .ux-audit-intro h2,.ux-audit-implementation h2{font-size:clamp(2.35rem,12vw,3.55rem);}
  .ux-audit-review,.ux-audit-included,.ux-audit-process,.ux-audit-cta{margin-bottom:74px;}
  .ux-audit-section-heading h2{font-size:clamp(2.75rem,14vw,4.2rem);}
  .ux-audit-review-grid{grid-template-columns:1fr;}
  .ux-audit-review-grid article{min-height:0;padding:22px 20px;}
  .ux-audit-included{padding:34px 22px;border-radius:20px;}
  .ux-audit-deliverables{grid-template-columns:1fr;}
  .ux-audit-deliverables article{padding:20px;}
  .ux-audit-process-grid{grid-template-columns:1fr;}
  .ux-audit-process-grid li{border-right:0;border-bottom:1px solid rgba(25,29,34,.13)!important;padding:24px 18px;}
  .ux-audit-process-grid li:last-child{border-bottom:0!important;}
  .ux-audit-cta{padding:34px 22px;border-radius:20px;gap:30px;}
  .ux-audit-cta h2{font-size:clamp(2.6rem,13vw,4rem);}
}


/* v2.23: standalone project deep links */
.standalone-project-shell{
  width:min(1180px, calc(100% - 40px));
  margin:118px auto 80px;
}
.standalone-project-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 28px;
  color:var(--accent-strong);
  font-family:Inter,system-ui,sans-serif;
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
}
.standalone-project-back:hover{text-decoration:underline;}
.standalone-project-content{
  padding:clamp(26px,4vw,56px);
  border:1px solid rgba(25,29,34,.10);
  border-radius:30px;
  background:rgba(253,252,248,.82);
  box-shadow:0 30px 90px rgba(45,39,31,.12);
}
.standalone-project-content .project-detail-hero{padding-top:0;}
.standalone-project-content .project-media-gallery{box-shadow:0 20px 50px rgba(45,39,31,.09);}
.standalone-project-missing{min-height:55vh;}
@media (max-width:760px){
  .standalone-project-shell{width:min(100% - 24px, 1180px);margin-top:94px;margin-bottom:36px;}
  .standalone-project-content{padding:24px 18px;border-radius:22px;}
}

/* =========================================================
   v2.31 — Recruiter work browser: Company / Discipline
   ========================================================= */
.work-browser{
  width:min(1180px,calc(100% - 48px));
  margin:64px auto 4px;
  padding:18px 20px;
  border:1px solid rgba(25,29,34,.10);
  border-radius:22px;
  background:rgba(250,248,244,.66);
  box-shadow:0 16px 46px rgba(49,43,35,.055);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.work-browser-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.work-browser-kicker{
  display:block;
  margin-bottom:5px;
  color:var(--text-0);
  font:750 .69rem/1 Inter,system-ui,sans-serif;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.work-browser-description{
  margin:0;
  color:var(--text-2);
  font:500 .84rem/1.45 Inter,system-ui,sans-serif;
  transition:opacity .22s ease,transform .22s ease;
}
.work-browser-mode{
  flex:none;
  display:inline-grid;
  grid-template-columns:1fr 1fr;
  gap:3px;
  padding:4px;
  border:1px solid rgba(25,29,34,.09);
  border-radius:999px;
  background:rgba(255,255,255,.52);
}
.work-browser-mode-btn,
.work-browser-filter{
  appearance:none;
  border:0;
  font-family:Inter,system-ui,sans-serif;
  cursor:pointer;
  white-space:nowrap;
}
.work-browser-mode-btn{
  padding:10px 15px;
  border-radius:999px;
  background:transparent;
  color:var(--text-2);
  font-size:.78rem;
  font-weight:700;
  transition:background .26s ease,color .26s ease,box-shadow .26s ease,transform .2s ease;
}
.work-browser-mode-btn:hover{color:var(--text-0);}
.work-browser-mode-btn.is-active{
  color:#171a1e;
  background:rgba(255,255,255,.96);
  box-shadow:0 6px 18px rgba(42,38,32,.09);
}
.work-browser-mode-btn:active{transform:scale(.975);}
.work-browser-mode-btn:focus-visible,
.work-browser-filter:focus-visible{
  outline:3px solid color-mix(in srgb,var(--accent-strong) 26%,transparent);
  outline-offset:2px;
}
.work-browser-disciplines{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  max-height:0;
  margin-top:0;
  opacity:0;
  overflow:hidden;
  transform:translateY(-7px);
  pointer-events:none;
  transition:max-height .38s cubic-bezier(.2,.8,.25,1),margin-top .38s ease,opacity .22s ease,transform .38s cubic-bezier(.2,.8,.25,1);
}
.work-browser-disciplines.is-open{
  max-height:100px;
  margin-top:15px;
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.work-browser-filter{
  padding:8px 11px;
  border:1px solid rgba(25,29,34,.10);
  border-radius:999px;
  background:rgba(255,255,255,.42);
  color:var(--text-2);
  font-size:.72rem;
  font-weight:680;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .18s ease;
}
.work-browser-filter:hover{color:var(--text-0);border-color:rgba(25,29,34,.18);}
.work-browser-filter.is-active{
  color:#fff;
  border-color:#202428;
  background:#202428;
}
.work-browser-filter:active{transform:scale(.965);}
.work-browser-count{
  margin-left:auto;
  color:var(--text-2);
  font:650 .67rem/1 Inter,system-ui,sans-serif;
  letter-spacing:.035em;
}
.work-filter-hidden{display:none !important;}
.work-browser-empty{
  grid-column:1/-1;
  padding:56px 20px;
  color:var(--text-2);
  text-align:center;
  font:600 .88rem/1.5 Inter,system-ui,sans-serif;
}

@media (min-width:761px){
  .portfolio-timeline.work-view-discipline{
    width:min(1180px,calc(100% - 48px));
    margin:28px auto 0;
    padding:28px 0 118px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-flow:dense;
    align-items:start;
    gap:24px;
  }
  .portfolio-timeline.work-view-discipline > .timeline-spine,
  .portfolio-timeline.work-view-discipline .timeline-company-milestone,
  .portfolio-timeline.work-view-discipline .timeline-subsection-marker,
  .portfolio-timeline.work-view-discipline .timeline-event-dot,
  .portfolio-timeline.work-view-discipline .timeline-project-month{
    display:none !important;
  }
  .portfolio-timeline.work-view-discipline .timeline-company,
  .portfolio-timeline.work-view-discipline .timeline-project-list{
    display:contents !important;
  }
  .portfolio-timeline.work-view-discipline .timeline-project-event{
    position:relative !important;
    display:block !important;
    min-height:0 !important;
    height:auto !important;
    padding:0 !important;
    margin:0 !important;
    opacity:1 !important;
    transform:none;
    overflow:visible !important;
  }
  .portfolio-timeline.work-view-discipline .timeline-project-event::before{display:none !important;}
  .portfolio-timeline.work-view-discipline .timeline-project-event.timeline-level-featured{
    grid-column:span 2;
  }
  .portfolio-timeline.work-view-discipline .timeline-project-event > .timeline-project-node,
  .portfolio-timeline.work-view-discipline .timeline-event-left > .timeline-project-node,
  .portfolio-timeline.work-view-discipline .timeline-event-right > .timeline-project-node{
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    transform:none !important;
    filter:none !important;
  }
  .portfolio-timeline.work-view-discipline .timeline-project-node .timeline-node-visual{
    width:100% !important;
    height:auto !important;
    aspect-ratio:16 / 10 !important;
    border-radius:22px !important;
    box-shadow:0 16px 42px rgba(49,43,35,.12);
    transform:none !important;
  }
  .portfolio-timeline.work-view-discipline .timeline-project-event.timeline-level-featured .timeline-node-visual{
    aspect-ratio:16 / 9 !important;
  }
  .portfolio-timeline.work-view-discipline .timeline-node-visual::after,
  .portfolio-timeline.work-view-discipline .timeline-node-overlay{
    opacity:1 !important;
  }
  .portfolio-timeline.work-view-discipline .timeline-node-details{display:none !important;}
  .portfolio-timeline.work-view-discipline .timeline-project-node:hover:not(.is-expanded) .timeline-node-visual,
  .portfolio-timeline.work-view-discipline .timeline-project-node:focus-visible:not(.is-expanded) .timeline-node-visual{
    transform:translateY(-3px) scale(1.01) !important;
    box-shadow:0 22px 50px rgba(49,43,35,.17);
  }
  .portfolio-timeline.work-view-discipline .timeline-image-overlay{
    left:18px;
    right:18px;
    bottom:16px;
  }
  .portfolio-timeline.work-view-discipline .timeline-image-overlay h3{
    font-size:clamp(1.35rem,2vw,2rem);
  }
}

/* The mobile feed already has the right card treatment. Discipline mode simply
   removes company wrappers so the same cards become one continuous list. */
@media (max-width:760px){
  .work-browser{
    width:calc(100% - 28px);
    margin-top:42px;
    padding:15px;
    border-radius:20px;
  }
  .work-browser-topline{display:block;}
  .work-browser-mode{display:grid;width:100%;margin-top:14px;}
  .work-browser-mode-btn{padding:11px 10px;}
  .work-browser-disciplines.is-open{max-height:180px;margin-top:14px;}
  .work-browser-count{width:100%;margin:4px 0 0;padding-left:2px;}
  .mobile-work-feed.work-view-discipline{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:18px;
    margin-top:30px;
  }
  .mobile-work-feed.work-view-discipline .mobile-work-company,
  .mobile-work-feed.work-view-discipline .mobile-work-cards{
    display:contents !important;
  }
  .mobile-work-feed.work-view-discipline .mobile-work-company-header,
  .mobile-work-feed.work-view-discipline .mobile-work-subsection{
    display:none !important;
  }
}

/* Browser-native shared-element transitions make the same project tiles glide
   into their new positions when the recruiter changes the organization. */
::view-transition-group(*){
  animation-duration:.68s;
  animation-timing-function:cubic-bezier(.22,.78,.18,1);
}
::view-transition-old(*),
::view-transition-new(*){
  animation-duration:.46s;
  animation-timing-function:cubic-bezier(.22,.78,.18,1);
}

@media (prefers-reduced-motion:reduce){
  .work-browser-mode-btn,.work-browser-filter,.work-browser-disciplines{transition:none !important;}
}

/* =========================================================
   v2.31.1 — Square project tiles + uniform Discipline grid
   ========================================================= */

/* Project artwork on the homepage is intentionally square-cornered in both
   Company and Discipline views. This only changes the project tiles, not the
   navigation/filter controls. */
.portfolio-timeline .timeline-featured-visual,
.portfolio-timeline .timeline-project-node .timeline-node-visual,
.portfolio-timeline .timeline-project-node.is-expanded .timeline-node-visual,
.portfolio-timeline .timeline-node-level-featured .timeline-node-visual,
.portfolio-timeline .timeline-project-node .timeline-node-details,
.portfolio-timeline .timeline-node-level-featured .timeline-node-details,
.timeline-floating-preview .timeline-node-visual,
.timeline-morph-ghost,
.mobile-work-feed .mobile-work-card,
.mobile-work-feed .mobile-work-card-visual{
  border-radius:0 !important;
}

/* Discipline view is a true equal-tile portfolio grid. Company-specific size
   levels (featured / major / regular / minor) do not affect this view. */
@media (min-width:761px){
  .portfolio-timeline.work-view-discipline{
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-flow:row;
    gap:16px;
    align-items:stretch;
  }
  .portfolio-timeline.work-view-discipline .timeline-project-event,
  .portfolio-timeline.work-view-discipline .timeline-project-event.timeline-level-featured,
  .portfolio-timeline.work-view-discipline .timeline-project-event.timeline-level-major,
  .portfolio-timeline.work-view-discipline .timeline-project-event.timeline-level-regular,
  .portfolio-timeline.work-view-discipline .timeline-project-event.timeline-level-minor{
    grid-column:auto !important;
    width:auto !important;
  }
  .portfolio-timeline.work-view-discipline .timeline-project-node,
  .portfolio-timeline.work-view-discipline .timeline-project-node.timeline-node-level-featured,
  .portfolio-timeline.work-view-discipline .timeline-project-node.timeline-node-level-major,
  .portfolio-timeline.work-view-discipline .timeline-project-node.timeline-node-level-regular,
  .portfolio-timeline.work-view-discipline .timeline-project-node.timeline-node-level-minor{
    width:100% !important;
    height:100% !important;
  }
  .portfolio-timeline.work-view-discipline .timeline-project-node .timeline-node-visual,
  .portfolio-timeline.work-view-discipline .timeline-project-event.timeline-level-featured .timeline-node-visual{
    width:100% !important;
    height:auto !important;
    aspect-ratio:16 / 10 !important;
    border-radius:0 !important;
    box-shadow:0 10px 26px rgba(49,43,35,.10) !important;
  }
  .portfolio-timeline.work-view-discipline .timeline-node-label,
  .portfolio-timeline.work-view-discipline .timeline-node-details{
    display:none !important;
  }
}

@media (min-width:761px) and (max-width:980px){
  .portfolio-timeline.work-view-discipline{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:760px){
  .mobile-work-feed.work-view-discipline{
    gap:14px;
  }
  .mobile-work-feed .mobile-work-card,
  .mobile-work-feed .mobile-work-card-visual{
    border-radius:0 !important;
  }
}

/* =========================================================
   v2.31.2 — Discipline filtering + clean grid
   ========================================================= */

/* The Discipline grid deliberately removes every timeline connector. The
   project cards are a clean portfolio grid here, not a career timeline. */
@media (min-width:761px){
  .portfolio-timeline.work-view-discipline > .timeline-spine,
  .portfolio-timeline.work-view-discipline .timeline-project-event::before,
  .portfolio-timeline.work-view-discipline .timeline-project-event > .timeline-project-node::before,
  .portfolio-timeline.work-view-discipline .timeline-project-node::before,
  .portfolio-timeline.work-view-discipline .timeline-company-copy::after{
    display:none !important;
    content:none !important;
    border:0 !important;
  }

  /* v2.31 gives Discipline cards display:block !important. That rule was
     winning over the generic filter-hidden rule, so the count changed while
     the cards stayed on screen. Keep the same layout, but let filtered
     projects truly leave the grid. */
  .portfolio-timeline.work-view-discipline .timeline-project-event.work-filter-hidden,
  .portfolio-timeline.work-view-discipline [data-work-project].work-filter-hidden{
    display:none !important;
  }
}

@media (max-width:760px){
  .mobile-work-feed.work-view-discipline .mobile-work-card.work-filter-hidden,
  .mobile-work-feed.work-view-discipline [data-work-project].work-filter-hidden{
    display:none !important;
  }
}


/* =========================================================
   v2.31.3 — Header view switch + hero discipline filters
   ========================================================= */
/* The old descriptive hero chip is replaced by real discipline controls. */
.hero-blurb::after{
  content:none !important;
  display:none !important;
}

/* Company / Discipline now lives in the persistent header, immediately before Testimonials. */
.homepage-view-switch{
  display:inline-grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:2px;
  padding:3px;
  border:1px solid rgba(25,29,34,.10);
  border-radius:999px;
  background:rgba(255,255,255,.58);
  box-shadow:0 10px 28px rgba(45,39,31,.075),inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter:blur(16px) saturate(145%);
  -webkit-backdrop-filter:blur(16px) saturate(145%);
}
.homepage-view-switch-btn{
  appearance:none;
  border:0;
  border-radius:999px;
  padding:8px 12px;
  background:transparent;
  color:var(--text-2);
  font:700 .70rem/1 Inter,system-ui,sans-serif;
  letter-spacing:.01em;
  cursor:pointer;
  white-space:nowrap;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .16s ease;
}
.homepage-view-switch-btn:hover{color:var(--text-0);}
.homepage-view-switch-btn.is-active{
  color:#fff;
  background:#202428;
  box-shadow:0 5px 14px rgba(32,36,40,.18);
}
.homepage-view-switch-btn:active{transform:scale(.97);}
.homepage-view-switch-btn:focus-visible{
  outline:3px solid color-mix(in srgb,var(--accent-strong) 26%,transparent);
  outline-offset:2px;
}

/* The previous "Product design • AI workflows..." pill becomes the live filter bar. */
.homepage-discipline-filter{
  width:max-content;
  max-width:calc(100% - 48px);
  margin:24px auto 8px;
  padding:6px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  border:1px solid rgba(40,111,149,.16);
  border-radius:999px;
  background:rgba(255,255,255,.52);
  box-shadow:0 14px 36px rgba(45,39,31,.08);
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.homepage-discipline-filter::-webkit-scrollbar{display:none;}
.homepage-discipline-filter-btn{
  position:relative;
  appearance:none;
  border:0;
  background:transparent;
  color:var(--accent-strong);
  padding:8px 11px;
  border-radius:999px;
  font:650 .82rem/1.1 Inter,system-ui,sans-serif;
  letter-spacing:.01em;
  white-space:nowrap;
  cursor:pointer;
  transition:color .18s ease,background .18s ease,box-shadow .18s ease,transform .16s ease;
}
.homepage-discipline-filter-btn + .homepage-discipline-filter-btn::before{
  content:"•";
  position:absolute;
  left:-3px;
  top:50%;
  transform:translateY(-51%);
  color:var(--accent-strong);
  opacity:.82;
  pointer-events:none;
}
.homepage-discipline-filter-btn:hover{
  color:var(--text-0);
  background:rgba(255,255,255,.58);
}
.homepage-discipline-filter-btn.is-active{
  color:#fff;
  background:#202428;
  box-shadow:0 5px 15px rgba(32,36,40,.14);
}
.homepage-discipline-filter-btn.is-active::before,
.homepage-discipline-filter-btn.is-active + .homepage-discipline-filter-btn::before{
  opacity:.32;
}
.homepage-discipline-filter-btn:active{transform:scale(.97);}
.homepage-discipline-filter-btn:focus-visible{
  outline:3px solid color-mix(in srgb,var(--accent-strong) 24%,transparent);
  outline-offset:2px;
}

/* The old lower browser panel is no longer rendered. Keep portfolio spacing intentional. */
.homepage-discipline-filter + .homepage-video-hero{margin-top:32px;}
.portfolio-timeline{margin-top:42px;}

@media (max-width:760px){
  .right-icons{gap:10px;}
  .homepage-view-switch{padding:2px;gap:1px;}
  .homepage-view-switch-btn{padding:7px 8px;font-size:.62rem;}
  .homepage-discipline-filter{
    width:calc(100% - 28px);
    max-width:none;
    justify-content:flex-start;
    margin-top:20px;
    padding:5px 8px;
  }
  .homepage-discipline-filter-btn{padding:8px 10px;font-size:.75rem;}
}

@media (max-width:460px){
  .homepage-view-switch-btn{padding:7px 6px;font-size:.58rem;}
  .right-icons{margin-right:8px;gap:8px;}
  .testimonial-nav-icon{width:28px;height:28px;}
  .hamburger{width:40px;height:40px;font-size:28px;}
}

@media (prefers-reduced-motion:reduce){
  .homepage-view-switch-btn,.homepage-discipline-filter-btn{transition:none !important;}
}