/* ============================================
   styles.css — Pixel-perfect portfolio clone
   Matches original layout, typography, spacing
   ============================================ */

/* === FONT FACES — Greycliff CF (original site font) === */
@font-face {
  font-family: 'Greycliff CF';
  src: url('fonts/GreycliffCF-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Greycliff CF';
  src: url('fonts/GreycliffCF-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Greycliff CF';
  src: url('fonts/GreycliffCF-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Greycliff CF';
  src: url('fonts/GreycliffCF-DemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Greycliff CF';
  src: url('fonts/GreycliffCF-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Greycliff CF';
  src: url('fonts/GreycliffCF-ExtraBold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Greycliff CF';
  src: url('fonts/GreycliffCF-Heavy.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* === RESET === */
*,*::before,*::after{box-sizing:border-box}
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,
canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,
fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,
html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,
p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,
table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{
  border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
table{border-collapse:collapse;border-spacing:0}

/* === BASE === */
html{
  -webkit-text-size-adjust:100%;
  background-color:#000;
}
body{
  background-color:#000;
  overflow-x:hidden;
  font-family:'Greycliff CF', system-ui, sans-serif;
}

.opening-flow-atmosphere{
  --flow-atmosphere:0;
  --flow-warmth:0;
  --flow-card:0;
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:var(--flow-atmosphere);
  background:
    radial-gradient(circle at 50% 48%,rgba(51,133,180,calc(.18 * var(--flow-card))) 0%,rgba(51,133,180,0) 34%),
    radial-gradient(circle at 50% 52%,rgba(107,212,144,calc(.12 * var(--flow-warmth))) 0%,rgba(107,212,144,0) 30%),
    radial-gradient(ellipse at 50% 55%,rgba(255,255,255,.035) 0%,rgba(255,255,255,0) 42%);
  mix-blend-mode:screen;
  transition:opacity .18s linear;
}

.opening-flow-atmosphere::after{
  content:'';
  position:absolute;
  inset:0;
  opacity:calc(.08 * var(--flow-atmosphere));
  background-image:
    linear-gradient(rgba(255,255,255,.45) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.45) 1px,transparent 1px);
  background-size:36px 36px;
  mask-image:radial-gradient(circle at 50% 50%,#000 0%,transparent 58%);
}

.visually-hidden{
  clip:rect(0 0 0 0);clip-path:inset(100%);
  height:1px;overflow:hidden;position:absolute;
  white-space:nowrap;width:1px;
}
.sr-only{
  clip:rect(0 0 0 0);clip-path:inset(100%);
  height:1px;overflow:hidden;position:absolute;
  white-space:nowrap;width:1px;
}

/* === SHARED MAX-WIDTH === */
.navigation,
footer .footer__inner{
  margin:0 auto;
  max-width:1532px;
  padding:0 84px;
}
@media(max-width:799px){
  .navigation,
  footer .footer__inner{
    padding:0 20px;
  }
}

/* ========================================
   NAVIGATION
   ======================================== */
.navigation{
  align-items:center;
  display:flex;
  left:50%;
  position:absolute;
  top:84px;
  transform:translateX(-50%);
  width:100%;
  z-index:2;
}
@media(max-width:799px){
  .navigation{top:20px}
}
.navigation::before{
  background-color:#484848;
  content:"";
  display:block;
  height:1px;
  order:2;
  width:100%;
}
@media(max-width:799px){
  .navigation::before{display:none}
}

.navigation__link{
  border-radius:20px;
  flex-shrink:0;
  font-size:0;
  height:56px;
  margin-right:64px;
  order:1;
  width:91px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#fff;
  font-weight:700;
  font-size:14px;
  letter-spacing:1px;
}
@media(max-width:799px){
  .navigation__link{
    border-radius:16px;
    height:44px;
    margin-right:32px;
    width:72px;
  }
}
.navigation__link:focus{
  box-shadow:0 0 0 4px #000,0 0 0 8px #fff;
  outline:none;
}
.navigation__logo{
  font-size:16px;
  font-weight:700;
  color:#fff;
  letter-spacing:2px;
}

/* Hamburger */
.navigation__button{
  -webkit-tap-highlight-color:transparent;
  -webkit-appearance:none;
  background:none;
  border:none;
  border-radius:8px;
  cursor:pointer;
  display:none;
  font-size:0;
  height:44px;
  margin-left:auto;
  order:3;
  padding:0;
  position:relative;
  width:44px;
}
@media(max-width:799px){
  .navigation__button{display:none}
  .js .navigation__button{display:block}
}
.navigation__button::before{
  background-color:#fff;
  content:"";
  display:block;
  height:2px;
  left:50%;
  position:absolute;
  top:50%;
  transform:translate(-50%,-6px);
  transition:transform .4s cubic-bezier(.5,1,.5,1);
  width:32px;
  will-change:transform;
}
.navigation__button::after{
  background-color:#fff;
  content:"";
  display:block;
  height:2px;
  left:50%;
  position:absolute;
  top:50%;
  transform:translate(-50%,4px);
  transition:transform .4s cubic-bezier(.5,1,.5,1);
  width:32px;
  will-change:transform;
}
.navigation__button.open::before{
  transform:translate(-50%,-50%) rotate(45deg);
}
.navigation__button.open::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}

/* Nav Links */
.navigation__list{
  align-items:center;
  display:flex;
  flex-shrink:0;
  margin-left:64px;
  order:3;
}
@media(max-width:799px){
  .navigation__list{
    flex-direction:column;
    margin-left:0;
    pointer-events:auto;
    position:absolute;
    right:20px;
    top:0;
    visibility:visible;
  }
  .js .navigation__list{
    pointer-events:none;
    top:44px;
    transition:visibility 0ms linear .4s;
    visibility:hidden;
  }
  .navigation__list::before{
    background-color:#1b1b1b;
    border-radius:16px;
    bottom:-8px;
    content:"";
    display:block;
    height:calc(100% + 16px);
    position:absolute;
    right:-8px;
    transform:scale(1);
    transform-origin:top right;
    width:calc(100% + 16px);
    will-change:transform;
    z-index:-1;
  }
  .js .navigation__list::before{
    height:calc(100% + 60px);
    transform:scale(0);
    transition:transform .4s cubic-bezier(.5,1,.5,1);
  }
  .navigation__list.open{
    pointer-events:auto;
    transition:visibility 0ms linear 0ms;
    visibility:visible;
  }
  .navigation__list.open::before{
    transform:scale(1);
  }
  .navigation__list.open .navigation__list__item{
    opacity:1;
    transform:translateY(0);
    transition:transform .4s cubic-bezier(0,.5,0,1) .2s,opacity .4s cubic-bezier(0,.5,0,1) .2s;
  }
}
.navigation__list__item{
  margin-left:8px;
  margin-right:8px;
}
@media(max-width:799px){
  .navigation__list__item{
    margin:0;
    opacity:1;
    transform:translateY(0);
  }
  .js .navigation__list__item{
    opacity:0;
    transform:translateY(-24px);
  }
}
.navigation__list__link{
  background-color:hsla(0,0%,98%,0);
  border-radius:12px;
  color:#fff;
  display:inline-block;
  font-family:'Greycliff CF',system-ui,sans-serif;
  padding:14px 24px;
  text-decoration:none;
  transition:background-color .2s cubic-bezier(.5,1,.5,1);
}
.navigation__list__link:focus,
.navigation__list__link:hover{
  background-color:hsla(0,0%,98%,.1);
}
.navigation__list__link:focus{
  box-shadow:0 0 0 4px #000,0 0 0 8px #fff;
  outline:none;
}

/* ========================================
   HERO
   ======================================== */
.hero{
  align-items:center;
  background-color:#000;
  display:flex;
  flex-direction:column;
  font-size:96px;
  height:800px;
  justify-content:flex-start;
  position:relative;
}
@media(max-width:1199px){.hero{font-size:6vw;height:700px}}
@media(max-width:799px){.hero{font-size:9vw;height:500px}}
.enhanced .hero{height:auto}

.hero h1{
  color:#fff;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:96px;
  font-weight:700;
  letter-spacing:-1px;
  line-height:1;
  margin-top:320px;
  max-width:1100px;
  text-align:center;
  z-index:1;
}
@media(max-width:1199px){.hero h1{font-size:72px;margin-top:240px}}
@media(max-width:799px){.hero h1{font-size:32px;letter-spacing:0;margin-top:230px}}
.hero h1:focus{outline:none}
.enhanced .hero h1{
  margin-top:calc(50vh - 1.5em);
  opacity:0;
  transform-origin:center center;
  will-change:opacity,transform,filter;
}
@media(max-width:1199px){.enhanced .hero h1{font-size:8vw;margin-top:calc(50vh - 1.5em)}}
@media(max-width:799px){.enhanced .hero h1{font-size:9vw;letter-spacing:-1px;margin-top:calc(50vh - 1.5em)}}

.hero h1 #hero-key-line{
  -webkit-text-fill-color:transparent;
  background-clip:text;
  -webkit-background-clip:text;
  background-image:linear-gradient(90deg,#E040FB 0%,#C77DFF 25%,#8B5CF6 50%,#3B82F6 75%,#1E3A8A 100%);
  color:#fff;
}
.enhanced .hero h1 #hero-key-line{
  -webkit-text-fill-color:transparent;
  background-clip:text;
  -webkit-background-clip:text;
  background-image:linear-gradient(90deg,#E040FB 0%,#C77DFF 25%,#8B5CF6 50%,#3B82F6 75%,#1E3A8A 100%);
  color:#fff;
}

.hero h1 span[role="text"]{display:inline-block;white-space:pre}
.hero h1 span{display:inline-block}

.hero #hero-canvas-wrap{display:none}
.enhanced .hero #hero-canvas-wrap{
  display:none;
  pointer-events:none;
  position:absolute;
  z-index:3;
}
.hero #hero-canvas{
  display:block;
  height:100%;
  width:100%;
}
.hero #hero-indicator{display:none}
.enhanced .hero #hero-indicator{
  display:block;
  margin-top:.5em;
}

/* ========================================
   PIXEL PERFECT
   ======================================== */
.pixel-perfect{
  align-items:center;
  background-color:#000;
  display:flex;
  height:900px;
  isolation:isolate;
  justify-content:center;
  overflow:hidden;
  position:relative;
  z-index:1;
}
@media(max-width:1199px){.pixel-perfect{height:800px}}
@media(max-width:799px){.pixel-perfect{height:700px}}
.enhanced .pixel-perfect{
  display:block;
  height:500vh;
  opacity:0;
  overflow:initial;
  pointer-events:none;
}
.enhanced .pixel-perfect.active{
  opacity:1;
  pointer-events:auto;
}

.pixel-perfect--sticky{
  height:100%;
  left:0;
  position:absolute;
  top:0;
  width:100%;
}
.enhanced .pixel-perfect--sticky{
  height:100vh;
  position:sticky;
}

.pixel-perfect--copy{
  left:50%;
  max-width:50vw;
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  width:100%;
  z-index:5;
}
@media(max-width:799px){
  .pixel-perfect--copy{max-width:75vw;top:27%}
  .enhanced .pixel-perfect--copy{top:50%}
}

.pixel-perfect p{
  color:#ffffff;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:96px;
  font-weight:800;
  letter-spacing:-1px;
  line-height:1;
  text-align:center;
  text-shadow:0 0 .25em rgba(0,0,0,0.6);
}
@media(max-width:1199px){.pixel-perfect p{font-size:72px}}
@media(max-width:799px){.pixel-perfect p{font-size:32px}}
.pixel-perfect p:focus{outline:none}
.enhanced .pixel-perfect p{
  --flow-scale:1;
  opacity:0;
  transform:translateY(0) scale(1);
  transform-origin:center center;
  will-change:transform,opacity;
}
@media(max-width:1199px){.enhanced .pixel-perfect p{font-size:8vw}}
@media(max-width:799px){.enhanced .pixel-perfect p{font-size:9vw}}

.pixel-perfect #pixel-grid{display:none}
.enhanced .pixel-perfect #pixel-grid{
  display:block;
  height:100%;
  pointer-events:none;
  position:absolute;
  width:100%;
  z-index:4;
}

/* ========================================
   CAPABILITY
   ======================================== */
.capability{
  background-color:#000;
  display:block;
  height:900px;
  overflow:hidden;
  position:relative;
  z-index:3;
}
@media(max-width:1199px){.capability{height:800px}}
@media(max-width:799px){.capability{height:500px}}
.enhanced .capability{
  background:transparent;
  height:650vh;
  margin-top:-100vh;
  opacity:0;
  overflow:initial;
  pointer-events:none;
  z-index:2;
  --cap-flow-presence:0;
}
.enhanced .capability.active{
  opacity:1;
  pointer-events:auto;
}

.capability--sticky{
  height:100%;
  left:0;
  position:absolute;
  top:0;
  width:100%;
}
.enhanced .capability--sticky{
  height:100vh;
  overflow:hidden;
  position:sticky;
}
.capability--sticky::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 55%,rgba(51,133,180,calc(.12 * var(--cap-flow-presence,0))) 0%,rgba(51,133,180,0) 42%),
    linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,calc(.36 * var(--cap-flow-presence,0))) 100%);
  opacity:1;
  pointer-events:none;
  z-index:0;
}
.capability--sticky::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(0,0,0,.4) 100%);
  pointer-events:none;
  z-index:11;
  opacity:var(--cap-vig, 0);
  will-change:opacity;
}

/* --- Ambient Glow --- */
.cap-ambient{
  pointer-events:none;
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.cap-ambient__orb{
  position:absolute;
  border-radius:50%;
  filter:blur(120px);
  opacity:0;
  will-change:opacity,transform;
}
.cap-ambient__orb--1{
  width:40vw;height:40vw;
  background:radial-gradient(circle,rgba(104,189,231,.12) 0%,transparent 70%);
  top:20%;right:-5%;
}
.cap-ambient__orb--2{
  width:30vw;height:30vw;
  background:radial-gradient(circle,rgba(107,212,144,.08) 0%,transparent 70%);
  bottom:10%;left:-5%;
}

/* --- Connection Canvas --- */
#cap-connections{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:1;
}

/* --- Morph Canvas (circle→browser bridge) --- */
/* FIXED overlay — lives OUTSIDE both sections so no section boundary
   can cut through the circle. This is what makes the transition seamless. */
#cap-morph{
  position:fixed;
  top:0;
  left:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:50;
  display:none;
}

/* --- Browser Glow (blue light bleed) --- */
.cap-browser__glow{
  position:absolute;
  width:140%;
  height:140%;
  top:-20%;
  left:-20%;
  background:radial-gradient(ellipse at 50% 50%,rgba(51,133,180,.15) 0%,rgba(51,133,180,.05) 40%,transparent 70%);
  pointer-events:none;
  opacity:0;
  will-change:opacity;
  filter:blur(40px);
  z-index:-1;
}
.cap-browser__frame{
  position:relative;
}

/* --- Visuals Layer --- */
.cap-visuals{
  position:absolute;
  inset:0;
  z-index:2;
}

/* --- Copy Layer --- */
.capability--copy{
  position:absolute;
  left:50%;
  top:46%;
  transform:translate(-50%, -50%);
  z-index:1;
  max-width:80vw;
  text-align:center;
}
@media(max-width:799px){
  .capability--copy{
    top:42%;
    max-width:90vw;
  }
}

.cap-line,.cap-subline{
  color:#fff;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-weight:700;
  line-height:1.1;
  margin:0;
  opacity:0;
  will-change:transform,opacity,filter;
}
.cap-line{
  font-size:clamp(28px,4.2vw,68px);
  letter-spacing:-.5px;
  text-shadow:0 18px 70px rgba(0,0,0,.72);
}
.cap-subline{
  font-size:clamp(16px,2vw,28px);
  font-weight:500;
  color:rgba(255,255,255,.5);
  margin-top:.75em;
}
.cap-line:focus{outline:none}

/* --- Scenes (shared) --- */
.cap-scene{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:12vh;
  pointer-events:none;
}
@media(max-width:799px){
  .cap-scene{
    padding-top:14vh;
  }
}

/* =====================
   BROWSER WINDOW
   ===================== */
.cap-browser__frame{
  width:min(1160px,88vw);
  aspect-ratio:16/9;
  display:flex;
  flex-direction:column;
  background:rgba(30,30,40,.65);
  border:none;
  border-radius:16px;
  overflow:hidden;
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  box-shadow:
    0 48px 120px rgba(0,0,0,.6),
    0 0 48px rgba(51,133,180,.2),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 1px 0 rgba(255,255,255,.06) inset;
  opacity:0;
  will-change:transform,opacity;
}
@media(max-width:799px){
  .cap-browser__frame{
    width:min(380px,92vw);
  }
}

.cap-browser__chrome{
  display:flex;
  align-items:center;
  padding:12px 16px;
  gap:12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
}

.cap-browser__dots{
  display:flex;
  gap:6px;
  flex-shrink:0;
}
.cap-dot{
  width:10px;height:10px;
  border-radius:50%;
  display:block;
}
.cap-dot--red{background:#FF5F57}
.cap-dot--yellow{background:#FFBD2E}
.cap-dot--green{background:#28CA41}
.cap-dot--dim{background:rgba(255,255,255,.15)}

.cap-browser__url{
  flex:1;
  display:flex;
  align-items:center;
  gap:6px;
  background:rgba(255,255,255,.04);
  border-radius:6px;
  padding:4px 10px;
  font-size:11px;
  color:rgba(255,255,255,.4);
  font-family:system-ui,sans-serif;
}
.cap-browser__url-icon{font-size:9px}
.cap-browser__url-text{letter-spacing:.3px}

/* Wireframe internals */
.cap-browser__viewport{
  flex:1;
  padding:28px 32px;
}
@media(max-width:799px){.cap-browser__viewport{padding:16px}}

.cap-wf{
  opacity:0;
  transform:translateY(6px);
  will-change:transform,opacity;
}

.cap-wf__nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}
.cap-wf__nav-logo{
  width:36px;height:10px;
  background:rgba(255,255,255,.2);
  border-radius:3px;
}
.cap-wf__nav-links{display:flex;gap:10px}
.cap-wf__nav-links span{
  width:32px;height:6px;
  background:rgba(255,255,255,.1);
  border-radius:2px;
  display:block;
}

.cap-wf__hero{
  text-align:center;
  margin-bottom:24px;
  padding:20px 0;
}
.cap-wf__hero-title{
  width:72%;height:12px;
  background:rgba(255,255,255,.15);
  border-radius:4px;
  margin:0 auto 10px;
}
.cap-wf__hero-subtitle{
  width:48%;height:7px;
  background:rgba(255,255,255,.08);
  border-radius:3px;
  margin:0 auto 16px;
}
.cap-wf__hero-btn{
  width:72px;height:22px;
  background:rgba(104,189,231,.25);
  border:1px solid rgba(104,189,231,.3);
  border-radius:6px;
  margin:0 auto;
}

.cap-wf__cards{
  display:flex;
  gap:10px;
}
.cap-wf__card{
  flex:1;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius:8px;
  padding:12px;
}
.cap-wf__card-icon{
  width:20px;height:20px;
  background:rgba(107,212,144,.2);
  border-radius:5px;
  margin-bottom:10px;
}
.cap-wf__card-line{
  height:5px;
  background:rgba(255,255,255,.08);
  border-radius:2px;
  margin-bottom:6px;
}
.cap-wf__card-line--short{width:60%}

/* =====================
   TOOL CARDS
   ===================== */
.cap-tools{
  display:block;
  padding-top:0;
}
@media(min-width:800px){
  .cap-tools{
    padding-right:0;
  }
}

.cap-tool{
  background:linear-gradient(145deg,rgba(34,39,52,.72),rgba(10,13,18,.58));
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  overflow:hidden;
  backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:
    0 26px 80px rgba(0,0,0,.5),
    0 0 34px rgba(104,189,231,.07),
    0 0 0 1px rgba(255,255,255,.04) inset;
  opacity:0;
  position:absolute;
  will-change:transform,opacity;
}
.cap-tool::before{
  background:linear-gradient(90deg,rgba(255,255,255,.14),rgba(255,255,255,0));
  content:"";
  height:1px;
  left:0;
  position:absolute;
  top:0;
  width:100%;
}
.cap-tool::after{
  background:radial-gradient(circle,rgba(104,189,231,.22),transparent 62%);
  content:"";
  height:120px;
  opacity:.55;
  pointer-events:none;
  position:absolute;
  right:-46px;
  top:-52px;
  width:120px;
}

.cap-tool--pipeline{
  left:calc(50% - 340px);
  top:calc(50% + 42px);
  width:min(230px,38vw);
  transform:translateX(-120px) translateY(70px) scale(.78) rotate(-18deg);
  z-index:3;
}
.cap-tool--analytics{
  left:calc(50% + 12px);
  top:calc(50% - 118px);
  width:min(250px,40vw);
  transform:translateX(120px) translateY(-70px) scale(.78) rotate(14deg);
  z-index:5;
}
.cap-tool--team{
  left:calc(50% + 170px);
  top:calc(50% + 96px);
  width:min(205px,36vw);
  transform:translateX(120px) translateY(110px) scale(.78) rotate(18deg);
  z-index:4;
}
@media(max-width:799px){
  .cap-tool--pipeline{
    left:8vw;
    top:52vh;
    width:42vw;
  }
  .cap-tool--analytics{
    left:28vw;
    top:38vh;
    width:48vw;
  }
  .cap-tool--team{
    left:47vw;
    top:57vh;
    width:42vw;
  }
}

.cap-tool__header{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.cap-tool__dot{
  width:6px;height:6px;
  border-radius:50%;
  background:rgba(107,212,144,.6);
  box-shadow:0 0 12px rgba(107,212,144,.42);
  display:block;
}
.cap-tool__title{
  font-size:11px;
  font-family:system-ui,sans-serif;
  color:rgba(255,255,255,.5);
  letter-spacing:.5px;
  font-weight:500;
}

.cap-tool__body{padding:12px}

/* Kanban */
.cap-kanban{display:flex;gap:6px}
.cap-kanban__col{flex:1;display:flex;flex-direction:column;gap:5px}
.cap-kanban__card{
  height:20px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.04);
  border-radius:5px;
  transform:translateY(8px);
  opacity:0;
  will-change:transform,opacity;
}
.cap-kanban__card--accent{background:rgba(104,189,231,.2)}
.cap-kanban__card--teal{background:rgba(29,101,135,.3)}
.cap-kanban__card--green{background:rgba(107,212,144,.2)}

/* Chart */
.cap-chart{
  display:flex;
  align-items:flex-end;
  gap:5px;
  height:78px;
}
.cap-chart__bar{
  flex:1;
  background:linear-gradient(to top,rgba(104,189,231,.5),rgba(162,246,207,.18));
  border-radius:3px 3px 0 0;
  height:0;
  box-shadow:0 0 14px rgba(104,189,231,.1);
  will-change:height;
  transition:height 0s;
}

/* Roster */
.cap-roster{display:flex;flex-direction:column;gap:8px}
.cap-roster__row{
  display:flex;
  align-items:center;
  gap:8px;
  opacity:0;
  transform:translateX(-6px);
  will-change:transform,opacity;
}
.cap-roster__avatar{
  width:18px;height:18px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(104,189,231,.28),rgba(107,212,144,.18));
  flex-shrink:0;
  display:block;
}
.cap-roster__name{
  height:5px;
  width:50px;
  background:rgba(255,255,255,.08);
  border-radius:2px;
  display:block;
}
.cap-roster__name--short{width:34px}
.cap-roster__status{
  width:6px;height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  margin-left:auto;
  display:block;
}
.cap-roster__status--active{background:rgba(107,212,144,.5)}

/* =====================
   TERMINAL
   ===================== */
.cap-terminal__frame{
  width:min(610px,62vw);
  background:
    linear-gradient(180deg,rgba(19,25,34,.9),rgba(7,10,15,.86)),
    radial-gradient(circle at 72% 18%,rgba(104,189,231,.12),transparent 42%);
  border:1px solid rgba(104,189,231,.18);
  border-radius:14px;
  overflow:hidden;
  backdrop-filter:blur(22px) saturate(1.35);
  -webkit-backdrop-filter:blur(22px) saturate(1.35);
  box-shadow:
    0 42px 120px rgba(0,0,0,.7),
    0 0 80px rgba(104,189,231,.1),
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 1px 0 rgba(255,255,255,.08) inset;
  opacity:0;
  position:relative;
  transform:translateY(40px) scale(.95);
  will-change:transform,opacity;
}
.cap-terminal__frame::before{
  background:linear-gradient(90deg,transparent,rgba(174,232,250,.22),transparent);
  content:"";
  height:1px;
  left:-40%;
  opacity:.7;
  position:absolute;
  top:0;
  width:80%;
}
.cap-terminal__frame::after{
  background:radial-gradient(circle,rgba(107,212,144,.16),transparent 64%);
  bottom:-90px;
  content:"";
  height:180px;
  pointer-events:none;
  position:absolute;
  right:-70px;
  width:180px;
}
@media(max-width:799px){
  .cap-terminal__frame{width:min(340px,88vw)}
}

.cap-terminal__chrome{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.05);
  background:rgba(255,255,255,.02);
}
.cap-terminal__title{
  font-size:11px;
  font-family:'SF Mono',ui-monospace,'Cascadia Code',monospace;
  color:rgba(255,255,255,.3);
  letter-spacing:.3px;
}

.cap-terminal__body{
  padding:18px 20px 22px;
  font-family:'SF Mono',ui-monospace,'Cascadia Code',monospace;
  font-size:13px;
  line-height:1.9;
  position:relative;
  z-index:1;
}
@media(max-width:799px){
  .cap-terminal__body{font-size:10px;padding:12px}
}

.cap-term__line{
  opacity:0;
  transform:translateY(4px);
  will-change:transform,opacity;
}

.cap-term__prompt{
  color:rgba(107,212,144,.7);
  margin-right:8px;
}
.cap-term__cmd .cap-term__text{
  color:rgba(201,209,217,.8);
}
.cap-term__check{
  color:rgba(107,212,144,.8);
  margin-right:6px;
}
.cap-term__step .cap-term__text{
  color:rgba(139,148,158,.7);
}
.cap-term__time{
  color:rgba(255,255,255,.2);
  margin-left:auto;
  float:right;
}

.cap-term__progress{
  margin:6px 0;
}
.cap-term__bar{
  height:4px;
  background:rgba(255,255,255,.06);
  border-radius:2px;
  overflow:hidden;
}
.cap-term__bar-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,rgba(107,212,144,.5),rgba(104,189,231,.5));
  border-radius:2px;
  will-change:width;
}

.cap-term__status{
  display:flex;
  align-items:center;
  gap:8px;
}
.cap-term__status-dot{
  width:6px;height:6px;
  border-radius:50%;
  background:rgba(107,212,144,.7);
  box-shadow:0 0 8px rgba(107,212,144,.4);
  display:block;
}
.cap-term__status .cap-term__text{
  color:rgba(107,212,144,.7);
  font-weight:500;
}

/* ========================================
   INTERACTIVE
   ======================================== */
.interactive{
  align-items:center;
  background-color:#000;
  display:flex;
  height:900px;
  justify-content:center;
  overflow:hidden;
  position:relative;
}
@media(max-width:1199px){.interactive{height:800px}}
@media(max-width:799px){.interactive{height:700px}}
.enhanced .interactive{
  display:block;
  height:300vh;
  margin-top:-250vh;
  opacity:0;
  overflow:initial;
  pointer-events:none;
}
.enhanced .interactive.active{
  opacity:1;
  pointer-events:auto;
  z-index:3;
  cursor:none;
}

.interactive--sticky{
  height:100%;
  left:0;
  overflow:hidden;
  position:absolute;
  top:0;
  width:100%;
}
.enhanced .interactive--sticky{
  height:100vh;
  position:sticky;
  overflow:hidden;
}
.interactive--sticky::after{
  background-image:linear-gradient(transparent,#000);
  bottom:0;
  content:"";
  display:block;
  height:50vh;
  left:0;
  pointer-events:none;
  position:absolute;
  width:100%;
  z-index:4;
}

.interactive--copy{
  left:50%;
  max-width:75vw;
  position:absolute;
  text-align:center;
  top:50%;
  transform:translate(-50%,-50%);
  width:100%;
  z-index:5;
}
.interactive--copy span{
  color:#fff;
  display:block;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:96px;
  font-weight:600;
  letter-spacing:-1px;
  line-height:1;
  text-align:center;
  will-change:transform;
}
@media(max-width:1199px){.interactive--copy span{font-size:72px}}
@media(max-width:799px){.interactive--copy span{font-size:32px}}
.interactive--copy span:focus{outline:none}
@media(max-width:1199px){.enhanced .interactive--copy span{font-size:8vw}}
@media(max-width:799px){.enhanced .interactive--copy span{font-size:9vw}}

.interactive #interactive-canvas{display:none}
.enhanced .interactive #interactive-canvas{
  display:block;
  height:100%;
  left:0;
  top:0;
  position:absolute;
  width:100%;
  z-index:4;
}

/* ========================================
   ACCESSIBLE
   ======================================== */
.accessible{
  background-color:#000;
  min-height:600px;
  min-height:max(100vh,600px);
  position:relative;
}
@media(max-width:1199px){.accessible{min-height:800px}}
@media(max-width:799px){.accessible{min-height:500px}}
.enhanced .accessible{
  opacity:0;
  pointer-events:none;
}
@media(max-width:1199px){.enhanced .accessible{min-height:600px;min-height:max(100vh,600px)}}
@media(max-width:799px){.enhanced .accessible{min-height:600px;min-height:max(100vh,600px)}}
.enhanced .accessible.active{
  opacity:1;
  pointer-events:auto;
  z-index:4;
}

.accessible--content{
  left:50%;
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  width:100%;
}
@media(max-width:767px){
  .accessible--content{
    left:0;
    position:static;
    top:0;
    transform:none;
  }
}

.accessible--copy{
  margin:0 auto;
  max-width:80vw;
  text-align:center;
  width:100%;
}
@media(max-width:767px){
  .accessible--copy{margin-top:calc(25vh - 1.5em)}
}
.accessible--copy span{
  color:#fff;
  display:block;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:96px;
  font-weight:600;
  letter-spacing:-1px;
  line-height:1;
  text-align:center;
  will-change:transform;
}
@media(max-width:1199px){.accessible--copy span{font-size:72px}}
@media(max-width:799px){.accessible--copy span{font-size:32px}}
.accessible--copy span:focus{outline:none}
@media(max-width:1199px){.enhanced .accessible--copy span{font-size:8vw}}
@media(max-width:799px){.enhanced .accessible--copy span{font-size:9vw}}

.accessible--icons{
  align-items:center;
  display:flex;
  justify-content:center;
  margin-top:12.5vh;
}
@media(max-width:767px){
  .accessible--icons{flex-direction:column}
}
.accessible--icons .icon-wrapper{
  margin-left:5vw;
  margin-right:5vw;
}
@media(max-width:1199px){
  .accessible--icons .icon-wrapper{margin-left:4vw;margin-right:4vw}
}
@media(max-width:767px){
  .accessible--icons .icon-wrapper{margin-bottom:25vw}
}
.accessible--icons svg{
  width:18vw;
  height:auto;
  transform-origin:center;
}
@media(max-width:767px){
  .accessible--icons svg{width:36vw}
}

/* Icon stroke dash animations */
.enhanced .accessible--icons .icon-circle{
  stroke-dasharray:500;
  stroke-dashoffset:500;
  transition:stroke-dashoffset 2.5s cubic-bezier(.22,1,.36,1);
}
.enhanced .accessible--icons .icon-circle-inner{
  stroke-dasharray:230;
  stroke-dashoffset:230;
  transition:stroke-dashoffset 2s cubic-bezier(.22,1,.36,1) .5s;
}
.enhanced .accessible--icons .icon-shape{
  stroke-dasharray:500;
  stroke-dashoffset:500;
  transition:stroke-dashoffset 2.5s cubic-bezier(.22,1,.36,1);
}
.enhanced .accessible--icons .icon-wave{
  opacity:0;
  transition:opacity .5s ease 2s;
}
.enhanced .accessible.active .icon-circle,
.enhanced .accessible.active .icon-circle-inner,
.enhanced .accessible.active .icon-shape{
  stroke-dashoffset:0;
}
.enhanced .accessible.active .icon-wave{
  opacity:1;
  animation:pulse 1s ease infinite;
}
.icon-wave.w1{animation-delay:.33s!important}
.icon-wave.w2{animation-delay:.66s!important}

@keyframes pulse{
  0%{opacity:.5}
  50%{opacity:1}
  to{opacity:.5}
}

/* ========================================
   DIMENSIONS
   ======================================== */
.dimensions{
  align-items:center;
  background-color:#121212;
  display:flex;
  height:900px;
  justify-content:center;
  overflow:hidden;
  position:relative;
}
@media(max-width:1199px){.dimensions{height:800px}}
@media(max-width:799px){.dimensions{height:700px}}
.enhanced .dimensions{
  display:block;
  height:200vh;
  opacity:0;
  overflow:initial;
  pointer-events:none;
}
.enhanced .dimensions.active{
  opacity:1;
  pointer-events:auto;
  z-index:3;
}

.dimensions--sticky{
  height:100%;
  left:0;
  position:absolute;
  top:0;
  width:100%;
}
.enhanced .dimensions--sticky{
  height:100vh;
  position:sticky;
}

.dimensions--overflow{
  height:100%;
  overflow:hidden;
  position:relative;
  width:100%;
}

.dimensions--gate{display:none}
.enhanced .dimensions--gate{
  background-color:#000;
  display:block;
  height:50%;
  left:0;
  pointer-events:none;
  position:absolute;
  transform:scaleY(1);
  width:100%;
  will-change:transform;
  z-index:1;
}
.dimensions--gate__top{top:0;transform-origin:top}
.dimensions--gate__top .dimensions--gate__inner{bottom:0}
.dimensions--gate__bottom{bottom:0;transform-origin:bottom}
.dimensions--gate__bottom .dimensions--gate__inner{top:0}
.dimensions--gate__inner{
  background-color:#252825;
  height:calc(100% + 100vh);
  position:absolute;
  width:100%;
  will-change:opacity;
}

.dimensions--copy{
  left:50%;
  mix-blend-mode:screen;
  position:absolute;
  text-align:center;
  top:50%;
  transform:translate(-50%,-50%);
  width:100%;
  z-index:4;
  margin:0 auto;
  max-width:1532px;
  padding:0 84px;
}
@media(max-width:799px){
  .dimensions--copy{top:16%;padding:0 20px}
  .enhanced .dimensions--copy{top:50%}
}
.enhanced .dimensions--copy{text-align:left}

.dimensions--copy span{
  color:#fff;
  display:inline-block;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:96px;
  font-weight:600;
  letter-spacing:-1px;
  line-height:1;
  margin-top:.0625em;
  text-align:center;
  will-change:transform;
}
@media(max-width:1199px){.dimensions--copy span{font-size:72px}}
@media(max-width:799px){.dimensions--copy span{font-size:32px}}
@media(max-width:1199px){.enhanced .dimensions--copy span{font-size:8vw}}
@media(max-width:799px){.enhanced .dimensions--copy span{font-size:9vw}}

.dimensions--copy > span{
  display:block;
  text-align:center;
}
.enhanced .dimensions--copy > span{text-align:left}
.dimensions--copy > span:focus{outline:none}

/* Dimension labels */
.dim-label{display:none}
.enhanced .dim-2d{color:#6bd490;display:inline-block;margin-left:.25em;overflow:visible;width:1em}
.enhanced .dim-3d{color:#d66761;display:inline-block;margin-left:.25em;overflow:visible;width:1em}
.enhanced .dim-4d{color:#68bde7;display:inline-block;margin-left:.25em;overflow:visible;width:auto}
.enhanced .dim-label.hidden{display:none;visibility:hidden}

.dimensions #dimensions-canvas{display:none}
.enhanced .dimensions #dimensions-canvas{
  display:block;
  height:100%;
  position:absolute;
  width:100%;
  z-index:2;
}

/* ========================================
   PHOTOGRAPHY
   ======================================== */
.photography{
  background-color:#242424;
  height:100vh;
  overflow:hidden;
  position:relative;
}
.enhanced .photography{
  background-color:#121212;
  opacity:0;
  overflow:initial;
  pointer-events:none;
}
.enhanced .photography.active{
  opacity:1;
  pointer-events:auto;
  z-index:3;
}

.photography--background{
  background-color:#242424;
  bottom:0;
  display:none;
  height:calc(100% + 100vh);
  left:0;
  opacity:0;
  position:absolute;
  width:100%;
  will-change:opacity;
  z-index:1;
}
.enhanced .photography--background{display:block}

.photography--collage{
  height:200%;
  left:0;
  overflow:hidden;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:100%;
  z-index:2;
}

.photo-card{
  border-radius:2vw;
  position:absolute;
  background:linear-gradient(135deg,#1a1a2e,#16213e);
}
@media(max-width:767px){.photo-card{border-radius:4vw}}
.enhanced .photo-card{
  opacity:0;
  transition:transform .8s cubic-bezier(.5,1,.5,1),opacity .2s cubic-bezier(.5,0,1,1);
  will-change:transform;
}
.enhanced .photography--collage.enter .photo-card{
  opacity:1;
  transition:transform .8s cubic-bezier(.5,1,.5,1),opacity .8s cubic-bezier(.5,1,.5,1);
}

/* Photo positions (landscape) */
.photo-1{
  bottom:calc(50% + 120px);left:-.2%;width:28%;aspect-ratio:3/4;
  transform:translate(0) rotate(-20deg);
  background:linear-gradient(135deg,#d66761,#f5c0b2);
}
.enhanced .photo-1{transform:translate(-50%,-100%) rotate(-30deg)}
.enhanced .photography--collage.enter .photo-1{transform:translate(0) rotate(-20deg)}

.photo-2{
  bottom:calc(50% + 68px);left:39.65%;width:21%;aspect-ratio:3/4;
  transform:translate(0) rotate(10deg);
  background:linear-gradient(135deg,#68bde7,#aee8fa);
}
@media(orientation:portrait){.photo-2{display:none}}
.enhanced .photo-2{transform:translate(25%,-100%) rotate(20deg);transition-delay:.2s}
.enhanced .photography--collage.enter .photo-2{transform:translate(0) rotate(10deg)}

.photo-3{
  bottom:calc(50% + 31px);left:74.16%;width:21%;aspect-ratio:3/4;
  transform:translate(0) rotate(30deg);
  background:linear-gradient(135deg,#6bd490,#a2f6cf);
}
.enhanced .photo-3{transform:translate(75%,-100%) rotate(30deg);transition-delay:.15s}
.enhanced .photography--collage.enter .photo-3{transform:translate(0) rotate(30deg)}

.photo-4{
  left:7.98%;top:calc(50% + 2px);width:21%;aspect-ratio:3/4;
  transform:translate(0) rotate(15deg);
  background:linear-gradient(135deg,#aee8fa,#68bde7);
}
.enhanced .photo-4{transform:translate(-50%,100%) rotate(15deg);transition-delay:.1s}
.enhanced .photography--collage.enter .photo-4{transform:translate(0) rotate(15deg)}

.photo-5{
  left:35.13%;top:calc(50% + 142px);width:28%;aspect-ratio:3/4;
  transform:translate(0) rotate(-5deg);
  background:linear-gradient(135deg,#f5c0b2,#d66761);
}
.enhanced .photo-5{transform:translate(12.5%,100%) rotate(0deg);transition-delay:.25s}
.enhanced .photography--collage.enter .photo-5{transform:translate(0) rotate(-5deg)}

.photo-6{
  left:71.87%;top:calc(50% + 117px);width:21%;aspect-ratio:3/4;
  transform:translate(0) rotate(-30deg);
  background:linear-gradient(135deg,#a2f6cf,#6bd490);
}
@media(orientation:portrait){.photo-6{display:none}}
.enhanced .photo-6{transform:translate(75%,100%) rotate(-20deg);transition-delay:50ms}
.enhanced .photography--collage.enter .photo-6{transform:translate(0) rotate(-30deg)}

.photography--copy{
  left:50%;
  max-width:75vw;
  position:absolute;
  text-align:center;
  top:50%;
  transform:translate(-50%,-50%);
  width:100%;
  z-index:3;
}
.photography--copy span{
  color:#fff;
  display:block;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:96px;
  font-weight:600;
  letter-spacing:-1px;
  line-height:1;
  text-align:center;
  will-change:transform;
}
@media(max-width:1199px){.photography--copy span{font-size:72px}}
@media(max-width:799px){.photography--copy span{font-size:32px}}
@media(max-width:1199px){.enhanced .photography--copy span{font-size:8vw}}
@media(max-width:799px){.enhanced .photography--copy span{font-size:9vw}}
.photography--copy span:focus{outline:none}

/* ========================================
   TRAVEL
   ======================================== */
.travel{
  background-color:#242424;
  background-image:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);
  background-position:50%;
  background-repeat:no-repeat;
  background-size:cover;
  height:900px;
  position:relative;
}
@media(max-width:1199px){.travel{height:800px}}
@media(max-width:799px){.travel{height:700px}}
.enhanced .travel{
  background-image:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);
  height:300vh;
  pointer-events:none;
}
.enhanced .travel.active{pointer-events:auto}

.travel--sticky{
  height:100%;
  left:0;
  position:absolute;
  top:0;
  width:100%;
}
.enhanced .travel--sticky{
  height:100vh;
  position:sticky;
}

.travel--copy{
  height:100%;
  left:0;
  overflow:hidden;
  top:0;
  z-index:5;
  position:absolute;
  text-align:center;
  width:100%;
}
.travel--copy span{
  color:#fff;
  display:block;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:96px;
  font-weight:600;
  left:50%;
  letter-spacing:-1px;
  line-height:1;
  position:absolute;
  text-align:center;
  top:50%;
  transform:translate(-50%,-50%);
  width:100%;
  will-change:transform;
}
@media(max-width:1199px){.travel--copy span{font-size:72px}}
@media(max-width:799px){.travel--copy span{font-size:32px}}
@media(max-width:1199px){.enhanced .travel--copy span{font-size:8vw}}
@media(max-width:799px){.enhanced .travel--copy span{font-size:9vw}}
.travel--copy span:focus{outline:none}
.travel--copy span#travel-intro{width:auto}
.enhanced .travel--copy span#travel-intro{width:100%;will-change:transform}

.travel--overlay{
  background-color:#fff;
  height:100%;
  left:0;
  opacity:0;
  pointer-events:none;
  position:absolute;
  top:0;
  width:100%;
  will-change:opacity;
  z-index:4;
}

.travel #adventures-canvas{display:none}
.enhanced .travel #adventures-canvas{
  display:block;
  height:100%;
  position:absolute;
  width:100%;
  z-index:4;
}

/* ========================================
   CONTACT
   ======================================== */
.contact{
  background-color:#fff;
  height:900px;
  position:relative;
}
@media(max-width:1199px){.contact{height:800px}}
@media(max-width:799px){.contact{height:500px}}
.enhanced .contact{
  height:125vh;
  margin-top:-100vh;
  opacity:0;
  pointer-events:none;
}
.enhanced .contact.active{
  opacity:1;
  pointer-events:auto;
  z-index:3;
}

.contact--sticky{
  height:100%;
  left:0;
  position:absolute;
  top:0;
  width:100%;
}
.enhanced .contact--sticky{
  height:100vh;
  position:sticky;
}

.contact--copy{
  left:50%;
  max-width:75vw;
  position:absolute;
  text-align:center;
  top:50%;
  transform:translate(-50%,-50%);
  width:100%;
  z-index:5;
}
.contact--copy p{
  color:#000;
  display:block;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:96px;
  font-weight:600;
  letter-spacing:-1px;
  line-height:1;
  text-align:center;
  width:100%;
  will-change:opacity;
}
@media(max-width:1199px){.contact--copy p{font-size:72px}}
@media(max-width:799px){.contact--copy p{font-size:32px}}
@media(max-width:1199px){.enhanced .contact--copy p{font-size:8vw}}
@media(max-width:799px){.enhanced .contact--copy p{font-size:9vw}}
.contact--copy p:focus{outline:none}

.contact--copy a,
.contact--copy p span{
  display:inline-block;
  will-change:transform;
}

.contact--copy a{
  background-color:#aee8fa;
  border-radius:12px;
  color:#0a1e31;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:16px;
  font-weight:600;
  height:44px;
  padding:14px 28px;
  text-decoration:none;
  transition:background-color .2s cubic-bezier(.5,1,.5,1),color .2s cubic-bezier(.5,1,.5,1);
}
.contact--copy a:focus,
.contact--copy a:hover{
  background-color:#336484;
  color:#eaf4fe;
}
.contact--copy a:focus{
  box-shadow:0 0 0 4px #fff,0 0 0 8px #000;
  outline:none;
}

.contact--cta{
  display:inline-block;
  margin-top:72px;
  position:relative;
  opacity:0;
  transform:translateY(40px);
  will-change:transform,opacity;
}
@media(max-width:1199px){.contact--cta{margin-top:8vw}}
@media(max-width:799px){.contact--cta{margin-top:9vw}}
.contact--cta::before{
  border:2px dashed #242528;
  border-radius:12px;
  content:"";
  display:block;
  height:calc(100% - 4px);
  left:50%;
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%) scale(.9875);
  width:calc(100% - 4px);
  z-index:-1;
}

/* ========================================
   RELAY LANDING STORY
   ======================================== */
.relay-story{
  background:#000;
  color:#fff;
  min-height:720px;
  overflow:hidden;
  position:relative;
}
.enhanced .relay-story{
  height:300vh;
  min-height:0;
  opacity:0;
  overflow:initial;
  pointer-events:none;
}
.enhanced .relay-story + .relay-story{
  margin-top:-128vh;
}
.enhanced .relay-story--proof{
  margin-top:-78vh;
}
.enhanced .relay-story.active{
  pointer-events:auto;
}
.relay-story__sticky{
  height:100%;
  inset:0;
  overflow:hidden;
  position:absolute;
  width:100%;
}
.enhanced .relay-story__sticky{
  height:100vh;
  position:sticky;
  top:0;
}
.enhanced .relay-story.active .relay-story__sticky{
  position:fixed;
  top:0;
  left:0;
}
.relay-story__sticky::before{
  background:
    radial-gradient(circle at var(--rs-x,50%) var(--rs-y,50%),rgba(104,189,231,.14),transparent 24vw),
    radial-gradient(circle at calc(100% - var(--rs-x,50%)) 68%,rgba(107,212,144,.08),transparent 28vw),
    linear-gradient(115deg,rgba(104,189,231,var(--rs-sweep,.02)),transparent 38%,rgba(245,192,178,var(--rs-warm,.025)));
  content:"";
  inset:-15%;
  opacity:var(--rs-ambient,.55);
  pointer-events:none;
  position:absolute;
  transform:translate3d(var(--rs-drift-x,0),var(--rs-drift-y,0),0) scale(var(--rs-bg-scale,1));
  will-change:opacity,transform;
}
.relay-story__sticky::after{
  background:radial-gradient(ellipse at 50% 50%,transparent 38%,rgba(0,0,0,.62) 100%);
  content:"";
  inset:0;
  opacity:var(--rs-vig,.72);
  pointer-events:none;
  position:absolute;
  z-index:6;
}
.relay-story__canvas{
  display:block;
  height:100%;
  inset:0;
  position:absolute;
  width:100%;
  z-index:2;
}
.relay-story__copy{
  left:50%;
  max-width:min(1120px,84vw);
  position:absolute;
  text-align:center;
  top:50%;
  transform:translate(-50%,-50%) translate3d(var(--rs-copy-x,0),var(--rs-copy-y,0),0) scale(var(--rs-copy-scale,1));
  width:100%;
  z-index:10;
  will-change:transform;
}
.relay-story__copy--stack{
  display:flex;
  flex-direction:column;
  gap:.18em;
}
.relay-story__copy p{
  color:#fff;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:clamp(38px,7.2vw,112px);
  font-weight:800;
  letter-spacing:-1px;
  line-height:.96;
  text-align:center;
  text-shadow:0 20px 80px rgba(0,0,0,.45);
  will-change:opacity,transform,filter;
}
.relay-story__copy p:focus{outline:none}
.relay-story__support,
.outcome-subline{
  color:rgba(255,255,255,.58)!important;
  font-size:clamp(18px,2.4vw,34px)!important;
  font-weight:500!important;
  letter-spacing:0!important;
  line-height:1.12!important;
  margin-top:.45em!important;
}
@media(max-width:799px){
  .relay-story{min-height:560px}
  .enhanced .relay-story{height:270vh}
  .relay-story__copy{max-width:88vw}
  .relay-story__copy p{font-size:clamp(32px,10vw,62px);letter-spacing:0}
  .relay-story__support,
  .outcome-subline{font-size:clamp(16px,5vw,22px)!important}
}

.relay-story--wanted{margin-top:-100vh}
.relay-story--wanted .relay-story__copy p{
  background:linear-gradient(90deg,#fff 0%,#aee8fa 40%,#a2f6cf 72%,#fff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.relay-story--wanted .relay-story__sticky::before{
  --rs-ambient:.7;
}

.outcome-system{
  inset:0;
  position:absolute;
  z-index:3;
}
.outcome-card{
  background:rgba(22,26,34,.58);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  box-shadow:0 24px 80px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.03) inset;
  color:#fff;
  min-width:168px;
  padding:18px 20px;
  position:absolute;
  transform:translate3d(0,30px,0) scale(.92);
  will-change:opacity,transform;
  z-index:3;
}
.outcome-card span{
  display:block;
  font-size:34px;
  font-weight:800;
  line-height:1;
}
.outcome-card small{
  color:rgba(255,255,255,.46);
  display:block;
  font-size:12px;
  font-weight:600;
  letter-spacing:.4px;
  margin-top:8px;
  text-transform:uppercase;
}
.outcome-card--time{left:10vw;top:20vh}
.outcome-card--calm{right:12vw;top:18vh}
.outcome-card--growth{bottom:17vh;left:50%;transform:translate3d(-50%,30px,0) scale(.92)}
.outcome-orbit{
  border:1px solid rgba(104,189,231,.12);
  border-radius:50%;
  height:min(62vw,62vh);
  left:50%;
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%) rotate(var(--orbit-rot,0deg)) scale(var(--orbit-scale,.8));
  width:min(62vw,62vh);
  z-index:1;
}
.outcome-orbit--two{
  border-color:rgba(107,212,144,.1);
  height:min(82vw,82vh);
  width:min(82vw,82vh);
}
.outcome-line,
.outcome-subline{
  opacity:0;
  transform:translateY(24px);
}
@media(max-width:799px){
  .outcome-card{min-width:126px;padding:14px 15px}
  .outcome-card span{font-size:26px}
  .outcome-card small{font-size:10px}
  .outcome-card--time{left:6vw;top:17vh}
  .outcome-card--calm{right:6vw;top:66vh}
  .outcome-card--growth{display:none}
}

.relay-story--promise{
  background:linear-gradient(180deg,#000 0%,#040708 50%,#000 100%);
}
.promise-gate{
  background:#000;
  height:50%;
  left:0;
  position:absolute;
  width:100%;
  will-change:transform;
  z-index:7;
}
.promise-gate::after{
  background:linear-gradient(90deg,transparent,rgba(104,189,231,.24),transparent);
  content:"";
  height:1px;
  left:0;
  position:absolute;
  width:100%;
}
.promise-gate--top{top:0;transform-origin:top}
.promise-gate--top::after{bottom:0}
.promise-gate--bottom{bottom:0;transform-origin:bottom}
.promise-gate--bottom::after{top:0}
.promise-grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(3,minmax(120px,1fr));
  left:50%;
  max-width:min(720px,76vw);
  opacity:.18;
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%) perspective(900px) rotateX(58deg);
  width:100%;
  z-index:2;
}
.promise-grid span{
  aspect-ratio:1.9/1;
  border:1px solid rgba(104,189,231,.18);
  border-radius:8px;
  box-shadow:0 0 24px rgba(104,189,231,.08) inset;
}

.relay-story--craft .relay-story__copy p:first-child{
  background:linear-gradient(90deg,#fff 0%,#aee8fa 45%,#f5c0b2 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.craft-specs{
  inset:0;
  pointer-events:none;
  position:absolute;
  z-index:5;
}
.craft-spec{
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  color:rgba(255,255,255,.52);
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  padding:10px 14px;
  position:absolute;
  text-transform:uppercase;
  transform:translateY(18px);
  will-change:opacity,transform;
}
.craft-spec--one{left:12vw;top:20vh}
.craft-spec--two{right:16vw;top:26vh}
.craft-spec--three{left:18vw;bottom:22vh}
.craft-spec--four{right:12vw;bottom:20vh}
@media(max-width:799px){
  .craft-spec{font-size:10px;padding:8px 10px}
  .craft-spec--one{left:7vw;top:18vh}
  .craft-spec--two{right:7vw;top:22vh}
  .craft-spec--three{left:8vw;bottom:18vh}
  .craft-spec--four{right:8vw;bottom:17vh}
}

.relay-story--when{
  background:#000;
}
.enhanced .relay-story--when{
  height:500vh;
}
.when-rings{
  inset:0;
  position:absolute;
  z-index:2;
}
.when-rings span{
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  height:34vmin;
  left:50%;
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%) scale(var(--ring-scale,1));
  width:34vmin;
  will-change:opacity,transform;
}
.when-rings span:nth-child(2){height:54vmin;width:54vmin}
.when-rings span:nth-child(3){height:74vmin;width:74vmin}

/* Dots — individual characters with staggered animation */
.when-dots{
  display:inline;
}
.when-dot{
  display:inline-block;
  opacity:0;
  transform:scale(.5);
  will-change:opacity,transform;
  letter-spacing:2px;
}

/* Radial canvas — sits above rings, below copy */
#when-radial{
  z-index:4;
}

/* Scatter container — pressure-building fragments */
.when-scatter{
  inset:0;
  pointer-events:none;
  position:absolute;
  z-index:12;
}
.when-word{
  color:#1a1a1a;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-weight:700;
  letter-spacing:-.5px;
  line-height:1;
  opacity:0;
  position:absolute;
  transform-origin:center center;
  white-space:nowrap;
  will-change:opacity,transform,left,top;
}

/* Resolve — the final centered "when." */
.when-resolve{
  left:50%;
  opacity:0;
  pointer-events:none;
  position:absolute;
  text-align:center;
  top:50%;
  transform:translate(-50%,-50%) scale(.8);
  will-change:opacity,transform;
  z-index:14;
}
.when-resolve p{
  color:#121212;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:clamp(52px,10vw,148px);
  font-weight:800;
  letter-spacing:-2px;
  line-height:1;
  text-align:center;
}
@media(max-width:799px){
  .when-resolve p{font-size:clamp(38px,14vw,88px)}
}

.contact.relay-story--build{
  background:#000;
  height:260vh;
  min-height:0;
}
.contact.relay-story--build.active{
  opacity:1;
  pointer-events:auto;
  z-index:4;
}
.contact.relay-story--build .relay-story__copy p{
  color:#fff;
}
.contact.relay-story--build .contact--cta{
  margin-top:44px;
  opacity:0;
  position:relative;
  transform:translateY(24px);
  will-change:opacity,transform;
}
.contact.relay-story--build .contact--cta::before{
  border-color:rgba(104,189,231,.34);
}
.contact.relay-story--build .contact--cta a{
  background:linear-gradient(135deg,#aee8fa,#a2f6cf);
  border-radius:12px;
  box-shadow:0 16px 50px rgba(104,189,231,.18);
  color:#061017;
}
.contact.relay-story--build .contact--cta a:focus,
.contact.relay-story--build .contact--cta a:hover{
  background:#fff;
  color:#000;
}
.contact.relay-story--build .contact--cta a:focus{
  box-shadow:0 0 0 4px #000,0 0 0 8px #fff;
}

.relay-story--proof{
  height:100vh;
  min-height:620px;
}
.enhanced .relay-story--proof{
  height:160vh;
}
.proof-window{
  background:rgba(22,26,34,.54);
  border:1px solid rgba(104,189,231,.16);
  border-radius:12px;
  box-shadow:0 40px 120px rgba(0,0,0,.54),0 0 0 1px rgba(255,255,255,.04) inset;
  height:min(46vh,360px);
  left:50%;
  overflow:hidden;
  position:absolute;
  top:54%;
  transform:translate(-50%,-50%) scale(.9);
  width:min(760px,78vw);
  will-change:opacity,transform,filter;
  z-index:3;
}
.proof-window::before{
  background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
  content:"";
  display:block;
  height:38px;
}
.proof-window span{
  background:rgba(255,255,255,.08);
  border-radius:6px;
  display:block;
  height:48px;
  margin:24px;
}
.proof-window span:nth-child(2){
  background:rgba(104,189,231,.18);
  width:72%;
}
.proof-window span:nth-child(3){
  background:rgba(107,212,144,.14);
  width:54%;
}
.relay-story--proof .relay-story__copy{
  top:30%;
}
.relay-story--proof .relay-story__copy p{
  font-size:clamp(32px,5vw,78px);
}

/* ========================================
   WORK
   ======================================== */
.work{
  background-color:#f9f9f9;
  min-height:100vh;
  overflow:hidden;
  padding:128px 20px;
}
@media(max-width:767px){.work{padding:10vh 20px}}
.work:focus{outline:none}

.work--copy{text-align:center}
.work--copy h2{
  color:#242424;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:48px;
  font-weight:600;
  letter-spacing:-.5px;
  margin-bottom:40px;
}
@media(max-width:1199px){.work--copy h2{font-size:4vw}}
@media(max-width:799px){.work--copy h2{font-size:6vw}}

.work--grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  margin:0 auto;
  max-width:764px;
  width:100%;
}
.work--item{
  align-items:flex-start;
  background-color:#fff;
  border-radius:32px;
  color:#242424;
  display:flex;
  flex-direction:column;
  font-family:'Greycliff CF',system-ui,sans-serif;
  margin-bottom:32px;
  padding:32px 32px 24px;
  width:calc(50% - 16px);
  will-change:transform;
}
@media(max-width:767px){.work--item{width:100%}}
.work--item__full{width:100%}
.work--item > :last-child{margin-bottom:8px}

.work--item .work--title{
  align-items:center;
  display:flex;
  margin-bottom:8px;
}
.work--item .work--title h3{
  margin-bottom:0;
  margin-left:8px;
}
.work--item h3{
  font-size:24px;
  font-weight:700;
  margin-bottom:8px;
}
.work--item span{
  display:block;
  font-size:16px;
  font-weight:500;
  margin-bottom:12px;
}
.work--item hr{
  background-color:#c4c4c4;
  border:none;
  height:1px;
  margin-bottom:16px;
  margin-top:0;
  width:100%;
}
.work--item h4{
  font-weight:600;
  margin-bottom:8px;
  font-size:16px;
  line-height:1.5;
}
.work--item p{
  font-size:16px;
  font-weight:400;
  line-height:1.5;
  margin-bottom:auto;
  width:100%;
}
.work--item p + a{margin-top:24px}
.work--item a{
  background-color:#c4c4c4;
  border-radius:12px;
  color:#242424;
  display:inline-block;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:16px;
  font-weight:600;
  height:44px;
  margin-bottom:8px;
  padding:14px 28px;
  text-decoration:none;
  transition:background-color .2s cubic-bezier(.5,1,.5,1),color .2s cubic-bezier(.5,1,.5,1);
}
.work--item a:focus,
.work--item a:hover{
  background-color:#242424;
  color:#f9f9f9;
}
.work--item a:focus{
  box-shadow:0 0 0 4px #000,0 0 0 8px #fff;
  outline:none;
}

/* Colored cards */
.work--item__green{background-color:#a2f6cf;color:#0f270c}
.work--item__green hr{background-color:#6bd490}
.work--item__green a{background-color:#0f270c;color:#ecfeef}
.work--item__green a:focus,.work--item__green a:hover{background-color:#417944;color:#ecfeef}

.work--item__blue{background-color:#aee8fa;color:#0a1e31}
.work--item__blue hr{background-color:#68bde7}
.work--item__blue a{background-color:#0a1e31;color:#eaf4fe}
.work--item__blue a:focus,.work--item__blue a:hover{background-color:#336484;color:#eaf4fe}

.work--item__black{background-color:#1b1b1b;color:#fff;overflow:hidden;position:relative}
.work--item__black canvas#work-bg-canvas{display:none}
.enhanced .work--item__black canvas#work-bg-canvas{
  display:block;
  height:100%;
  left:0;
  position:absolute;
  top:0;
  width:100%;
  z-index:0;
}
.work--item__black h3,
.work--item__black span,
.work--item__black hr,
.work--item__black p,
.work--item__black a{position:relative;z-index:1}
.work--item__black hr{background-color:#484848}
.work--item__black a{color:#1b1b1b}
.work--item__black a:hover{background-color:#fff;color:#1b1b1b}

/* ========================================
   DEVELOPER PROFILE (white variant)
   ======================================== */
.dev-profile{
  background-color:#fff;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
  padding:128px 20px;
}
.dev-profile--gallery-hero{
  overflow:visible;
}

/* Background grid */
.dev-profile--grid{
  background-image:
    linear-gradient(to right, #80808012 1px, transparent 1px),
    linear-gradient(to bottom, #80808012 1px, transparent 1px);
  background-size:24px 24px;
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* Content container */
.dev-profile--content{
  position:relative;
  z-index:1;
  max-width:720px;
  width:100%;
  text-align:center;
}

/* Avatar ring */
.dev-profile--avatar{
  display:inline-block;
  margin-bottom:32px;
  opacity:0;
  transform:scale(0);
  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.dev-profile.in-view .dev-profile--avatar{
  opacity:1;
  transform:scale(1);
}
.dev-profile--avatar-ring{
  width:96px;
  height:96px;
  border-radius:50%;
  border:4px solid #fff;
  background:linear-gradient(135deg, #68bde7, #6bd490);
  box-shadow:0 8px 32px rgba(104,189,231,.3), 0 2px 8px rgba(0,0,0,.06);
}

/* Title */
.dev-profile--title{
  color:#121212;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:72px;
  font-weight:700;
  letter-spacing:-1px;
  line-height:1;
  margin-bottom:24px;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1) .15s, transform .6s cubic-bezier(.22,1,.36,1) .15s;
}
.dev-profile.in-view .dev-profile--title{
  opacity:1;
  transform:translateY(0);
}
@media(max-width:1199px){.dev-profile--title{font-size:8vw}}
@media(max-width:799px){.dev-profile--title{font-size:9vw}}

/* Subtitle */
.dev-profile--subtitle{
  color:#666;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:20px;
  font-weight:400;
  line-height:1.6;
  max-width:600px;
  margin:0 auto 40px;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1) .25s, transform .6s cubic-bezier(.22,1,.36,1) .25s;
}
.dev-profile.in-view .dev-profile--subtitle{
  opacity:1;
  transform:translateY(0);
}
@media(max-width:799px){.dev-profile--subtitle{font-size:16px}}

/* Action buttons */
.dev-profile--actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
  margin-bottom:48px;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1) .35s, transform .6s cubic-bezier(.22,1,.36,1) .35s;
}
.dev-profile.in-view .dev-profile--actions{
  opacity:1;
  transform:translateY(0);
}

.dev-profile--btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:16px;
  font-weight:600;
  padding:14px 32px;
  border-radius:12px;
  text-decoration:none;
  transition:background-color .25s cubic-bezier(.22,1,.36,1),
             color .25s cubic-bezier(.22,1,.36,1),
             transform .2s cubic-bezier(.22,1,.36,1),
             box-shadow .25s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.dev-profile--btn:hover{
  transform:translateY(-2px);
}
.dev-profile--btn:active{
  transform:translateY(0);
}

.dev-profile--btn__primary{
  background-color:#121212;
  color:#fff;
}
.dev-profile--btn__primary:hover{
  background-color:#333;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}
.dev-profile--btn__primary:focus{
  box-shadow:0 0 0 4px #fff, 0 0 0 8px #121212;
  outline:none;
}

.dev-profile--btn__outline{
  background-color:transparent;
  color:#121212;
  border:2px solid #e0e0e0;
}
.dev-profile--btn__outline:hover{
  border-color:#121212;
  background-color:#fafafa;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.dev-profile--btn__outline:focus{
  box-shadow:0 0 0 4px #fff, 0 0 0 8px #121212;
  outline:none;
}

/* Social links */
.dev-profile--socials{
  display:flex;
  justify-content:center;
  gap:16px;
  opacity:0;
  transition:opacity .6s cubic-bezier(.22,1,.36,1) .45s;
}
.dev-profile.in-view .dev-profile--socials{
  opacity:1;
}

.dev-profile--social{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background-color:#f0f0f0;
  color:#121212;
  text-decoration:none;
  transition:background-color .25s cubic-bezier(.22,1,.36,1),
             color .25s cubic-bezier(.22,1,.36,1),
             transform .2s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.dev-profile--social:hover{
  background-color:#121212;
  color:#fff;
  transform:translateY(-3px) scale(1.05);
}
.dev-profile--social:active{
  transform:translateY(0) scale(0.97);
}
.dev-profile--social:focus{
  box-shadow:0 0 0 4px #fff, 0 0 0 8px #121212;
  outline:none;
}

/* Scroll indicator */
.dev-profile--scroll{
  position:absolute;
  bottom:32px;
  left:50%;
  transform:translateX(-50%);
  color:#c4c4c4;
  opacity:0;
  animation:devProfileFadeIn .6s cubic-bezier(.22,1,.36,1) 1s forwards;
}
.dev-profile.in-view .dev-profile--scroll{
  animation:devProfileFadeIn .6s cubic-bezier(.22,1,.36,1) 1s forwards,
            devProfileBounce 1.5s ease-in-out 1.6s infinite;
}

@keyframes devProfileFadeIn{
  to{opacity:1}
}
@keyframes devProfileBounce{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(10px)}
}

/* ========================================
   FOOTER
   ======================================== */
footer{background-color:#f9f9f9}
footer .footer__inner{
  color:gray;
  display:flex;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:12px;
  justify-content:space-between;
  letter-spacing:1px;
  padding-bottom:16px;
  padding-top:16px;
  position:relative;
  text-transform:uppercase;
  width:100%;
  align-items:center;
}
footer .footer__inner::before{
  background-color:#c4c4c4;
  content:"";
  display:block;
  height:1px;
  left:84px;
  position:absolute;
  top:0;
  width:calc(100% - 168px);
}
@media(max-width:799px){
  footer .footer__inner::before{left:20px;width:calc(100% - 40px)}
}

footer .footer__social{
  align-items:center;
  display:flex;
  height:44px;
}
footer .footer__social li{
  height:100%;
  display:flex;
  align-items:center;
}
footer .footer__social a{
  border-radius:12px;
  display:inline-block;
  text-decoration:none;
  padding:8px 12px;
  color:gray;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  transition:color .2s ease;
}
footer .footer__social a:hover{color:#242424}
footer .footer__social a:focus{
  box-shadow:0 0 0 4px #f9f9f9,0 0 0 8px #000;
  outline:none;
}

/* ========================================
   BLOG PAGE OVERRIDES
   ======================================== */

/* White-page body */
.blog-page{
  background-color:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Navigation on white backgrounds */
.navigation--blog{
  position:relative;
  top:0;
  left:0;
  transform:none;
  padding-top:40px;
  padding-bottom:20px;
  background-color:#fff;
  z-index:10;
}
@media(max-width:799px){
  .navigation--blog{padding-top:20px;padding-bottom:10px}
}
.navigation--blog .navigation__logo{
  color:#121212;
}
.navigation--blog::before{
  background-color:#e0e0e0;
}
.navigation--blog .navigation__list__link{
  color:#121212;
}
.navigation--blog .navigation__list__link:focus,
.navigation--blog .navigation__list__link:hover{
  background-color:hsla(0,0%,15%,.08);
}
.navigation--blog .navigation__list__link:focus{
  box-shadow:0 0 0 4px #fff,0 0 0 8px #121212;
}
.navigation--blog .navigation__list__link--active{
  background-color:hsla(0,0%,15%,.06);
  font-weight:600;
}

/* Hamburger on white bg */
.navigation--blog .navigation__button::before,
.navigation--blog .navigation__button::after{
  background-color:#121212;
}

/* Hero as editorial page header */
.dev-profile--hero{
  min-height:auto;
  padding:120px 20px 160px;
  align-items:flex-end;
  justify-content:flex-start;
}
.dev-profile--hero .dev-profile--scroll{
  display:none;
}

/* Editorial hero — left-aligned asymmetric composition */
.dev-profile--hero .dev-profile--content{
  text-align:left;
  max-width:840px;
  margin:0;
  padding-left:clamp(40px, 6vw, 84px);
}

/* Eyebrow label */
.dev-profile--eyebrow{
  display:block;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  color:#999;
  margin-bottom:20px;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1),
             transform .6s cubic-bezier(.22,1,.36,1);
}
.dev-profile.in-view .dev-profile--eyebrow{
  opacity:1;
  transform:translateY(0);
}

/* Hero title — iconic scale */
.dev-profile--hero .dev-profile--title{
  font-size:clamp(48px, 7vw, 96px);
  letter-spacing:-3px;
  line-height:.92;
  margin-bottom:28px;
}

/* Hero subtitle — editorial, narrower */
.dev-profile--hero .dev-profile--subtitle{
  max-width:440px;
  margin:0 0 44px;
  line-height:1.7;
  font-size:17px;
  color:#777;
}

/* Hero buttons — quieter, more refined */
.dev-profile--hero .dev-profile--actions{
  justify-content:flex-start;
  gap:12px;
  margin-bottom:0;
}
.dev-profile--hero .dev-profile--btn{
  font-size:14px;
  padding:12px 24px;
  border-radius:8px;
}
.dev-profile--hero .dev-profile--btn__primary{
  background-color:#1a1a1a;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.dev-profile--hero .dev-profile--btn__primary:hover{
  background-color:#333;
  box-shadow:0 4px 16px rgba(0,0,0,.12);
}
.dev-profile--hero .dev-profile--btn__outline{
  border:1.5px solid #ddd;
  color:#555;
}
.dev-profile--hero .dev-profile--btn__outline:hover{
  border-color:#aaa;
  color:#1a1a1a;
  background-color:#fafafa;
}

/* Atmospheric grid — dissolving downward */
.dev-profile--hero .dev-profile--grid{
  background-image:
    linear-gradient(to right, #80808008 1px, transparent 1px),
    linear-gradient(to bottom, #80808008 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 65%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 65%);
}

/* Ambient glow layer */
.dev-profile--ambient{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 25% 35%, rgba(104,189,231,.035) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 75% 65%, rgba(107,212,144,.025) 0%, transparent 60%);
}

/* Soft vignette */
.dev-profile--vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.025) 100%);
}

/* Grain texture via pseudo-element */
.dev-profile--hero::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:128px 128px;
}

/* ========================================
   GALLERY BURST HERO — Radial photo burst
   ======================================== */

/* Gallery hero overrides */
.dev-profile--gallery-hero{
  min-height:100vh;
  padding:80px 20px 40px;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  overflow:visible;
  clip-path:none;
  gap:0;
}
.dev-profile--gallery-hero .dev-profile--content{
  text-align:center;
  max-width:720px;
  margin:0 auto;
  padding-left:0;
  position:relative;
  z-index:20;
}
.dev-profile--gallery-hero .dev-profile--title{
  font-size:clamp(48px, 7vw, 88px);
  letter-spacing:-2px;
  line-height:.92;
  margin-bottom:20px;
}
.dev-profile--gallery-hero .dev-profile--subtitle{
  max-width:520px;
  margin:0 auto 0;
  text-align:center;
}

/* Gallery burst container */
.gallery-burst{
  position:relative;
  z-index:10;
  width:100%;
  height:420px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  margin-top:0;
  padding-top:0;
}

/* Stage — the center origin point */
.gallery-burst--stage{
  position:relative;
  width:180px;
  height:180px;
}

/* Individual burst card */
.gallery-burst--card{
  position:absolute;
  top:0;
  left:0;
  width:180px;
  height:180px;
  text-decoration:none;
  cursor:pointer;
  border-radius:20px;
  will-change:transform;
  -webkit-user-select:none;
  user-select:none;
  touch-action:none;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.12)) drop-shadow(0 2px 6px rgba(0,0,0,.06));
  transition:filter 0.3s ease;
}
.gallery-burst--card:hover{
  filter:drop-shadow(0 16px 48px rgba(0,0,0,.18)) drop-shadow(0 4px 12px rgba(0,0,0,.1));
}

/* Card inner — handles overflow clip and aspect */
.gallery-burst--card-inner{
  position:relative;
  width:100%;
  height:100%;
  border-radius:20px;
  overflow:hidden;
  background:#f0f0f0;
}
.gallery-burst--card-inner img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.6s cubic-bezier(.22,1,.36,1),
             filter 0.6s cubic-bezier(.22,1,.36,1);
}
.gallery-burst--card:hover .gallery-burst--card-inner img{
  transform:scale(1.06);
  filter:brightness(.92) saturate(1.15);
}

/* Overlay with article label */
.gallery-burst--card-overlay{
  position:absolute;
  inset:0;
  border-radius:20px;
  background:linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.15) 40%, transparent 70%);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:14px 16px;
  opacity:0;
  transition:opacity 0.4s cubic-bezier(.22,1,.36,1);
}
.gallery-burst--card:hover .gallery-burst--card-overlay{
  opacity:1;
}
.gallery-burst--card-tag{
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:9px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
  margin-bottom:4px;
}
.gallery-burst--card-label{
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:13px;
  font-weight:600;
  color:#fff;
  line-height:1.3;
  text-shadow:0 1px 4px rgba(0,0,0,.3);
}

/* Inner ring glow on cards */
.gallery-burst--card-inner::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),
             inset 0 -1px 8px rgba(0,0,0,.06);
  pointer-events:none;
}

/* View All Stories CTA */
.gallery-burst--cta{
  position:relative;
  z-index:20;
  display:flex;
  justify-content:center;
  margin-top:auto;
  padding-top:20px;
  padding-bottom:40px;
}
.gallery-burst--btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:15px;
  font-weight:600;
  padding:14px 32px;
  border-radius:12px;
  text-decoration:none;
  color:#121212;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  border:1.5px solid rgba(0,0,0,.08);
  box-shadow:0 2px 8px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.04);
  transition:background .3s ease,
             transform .25s cubic-bezier(.22,1,.36,1),
             box-shadow .3s ease,
             border-color .3s ease;
  will-change:transform;
}
.gallery-burst--btn:hover{
  background:rgba(255,255,255,.95);
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(0,0,0,.1), 0 12px 32px rgba(0,0,0,.06);
  border-color:rgba(0,0,0,.14);
}
.gallery-burst--btn:active{
  transform:translateY(0);
}
.gallery-burst--btn svg{
  opacity:.6;
  transition:transform .3s ease, opacity .3s ease;
}
.gallery-burst--btn:hover svg{
  opacity:1;
  transform:translateY(2px);
}

/* ── Responsive adjustments ── */
@media(max-width:1099px){
  .gallery-burst{
    height:420px;
  }
  .gallery-burst--card{
    width:150px;
    height:150px;
  }
  .gallery-burst--stage{
    width:150px;
    height:150px;
  }
}
@media(max-width:767px){
  .dev-profile--gallery-hero{
    padding:80px 20px 60px;
  }
  .gallery-burst{
    height:340px;
    margin-top:0;
  }
  .gallery-burst--card{
    width:110px;
    height:110px;
    border-radius:14px;
  }
  .gallery-burst--card-inner{
    border-radius:14px;
  }
  .gallery-burst--card-inner::after{
    border-radius:14px;
  }
  .gallery-burst--card-overlay{
    border-radius:14px;
    padding:8px 10px;
  }
  .gallery-burst--card-tag{
    font-size:7px;
  }
  .gallery-burst--card-label{
    font-size:10px;
  }
  .gallery-burst--stage{
    width:110px;
    height:110px;
  }
  .gallery-burst--cta{
    margin-top:-20px;
  }
}

/* ========================================
   BLOG POSTS GRID — Editorial flow
   ======================================== */
.blog-posts{
  background-color:#f9f9f9;
  padding:32px 20px 128px;
  position:relative;
}
/* Atmospheric gradient bridge from hero */
.blog-posts::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:200px;
  background:linear-gradient(to bottom, #fff 0%, #f9f9f9 100%);
  pointer-events:none;
}
.blog-posts--inner{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  position:relative;
  z-index:1;
}
@media(max-width:1099px){
  .blog-posts--inner{
    grid-template-columns:repeat(2, 1fr);
    gap:24px;
  }
}
@media(max-width:699px){
  .blog-posts--inner{
    grid-template-columns:1fr;
    gap:20px;
  }
}

/* ========================================
   FEATURED ARTICLE — Cinematic Editorial
   ======================================== */
.blog-card--featured{
  grid-column:1 / -1;
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  margin-bottom:32px;
}
.blog-card--featured:hover,
.blog-card--featured:focus-within{
  transform:none;
  box-shadow:none;
  border-color:transparent;
}

/* Featured link wrapper */
.blog-card--featured-link{
  display:block;
  position:relative;
  text-decoration:none;
  color:inherit;
}

/* Cinematic image */
.blog-card--featured-image{
  position:relative;
  width:100%;
  aspect-ratio:21/9;
  border-radius:20px;
  overflow:hidden;
  box-shadow:
    0 4px 16px rgba(0,0,0,.06),
    0 24px 64px rgba(0,0,0,.08);
}
.blog-card--featured-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:contrast(1.05) saturate(1.1);
  transition:transform .7s cubic-bezier(.22,1,.36,1),
             filter .7s cubic-bezier(.22,1,.36,1);
}
.blog-card--featured-link:hover .blog-card--featured-image img,
.blog-card--featured-link:focus .blog-card--featured-image img{
  transform:scale(1.025);
  filter:contrast(1.08) saturate(1.15) brightness(.96);
}

/* Dark cinematic overlay */
.blog-card--featured-image-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.12) 35%, transparent 65%),
    radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.12) 100%);
  transition:opacity .7s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.blog-card--featured-link:hover .blog-card--featured-image-overlay{
  opacity:1.15;
}

/* Inner shadow for image depth */
.blog-card--featured-image::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:20px;
  box-shadow:inset 0 -2px 12px rgba(0,0,0,.08),
             inset 0 1px 0 rgba(255,255,255,.04);
  pointer-events:none;
}

/* Floating editorial content panel */
.blog-card--featured-panel{
  position:absolute;
  bottom:-48px;
  right:40px;
  width:480px;
  max-width:calc(100% - 80px);
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(24px) saturate(1.3);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);
  border-radius:16px;
  border:1px solid rgba(255,255,255,.6);
  padding:36px 32px 30px;
  box-shadow:
    0 4px 8px rgba(0,0,0,.03),
    0 12px 32px rgba(0,0,0,.06),
    0 32px 80px rgba(0,0,0,.08);
  transition:transform .6s cubic-bezier(.22,1,.36,1),
             box-shadow .6s cubic-bezier(.22,1,.36,1);
}
.blog-card--featured-link:hover .blog-card--featured-panel{
  transform:translateY(-6px);
  box-shadow:
    0 4px 8px rgba(0,0,0,.04),
    0 16px 40px rgba(0,0,0,.08),
    0 40px 100px rgba(0,0,0,.1);
}

/* Featured label eyebrow */
.blog-card--featured-label{
  display:inline-block;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#999;
  margin-bottom:14px;
}

/* Featured title */
.blog-card--featured-panel h2{
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:26px;
  font-weight:700;
  letter-spacing:-.5px;
  line-height:1.25;
  color:#121212;
  margin:0 0 12px;
  transition:color .6s cubic-bezier(.22,1,.36,1);
}
.blog-card--featured-link:hover .blog-card--featured-panel h2{
  color:#0a0a0a;
}

/* Featured body text */
.blog-card--featured-panel p{
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:15px;
  font-weight:400;
  line-height:1.65;
  color:#666;
  margin:0 0 20px;
  max-height:calc(1.65em * 3);
  overflow:hidden;
}

/* Featured meta row */
.blog-card--featured-meta{
  display:flex;
  align-items:center;
  gap:10px;
}
.blog-card--featured-readtime{
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:12px;
  font-weight:500;
  color:#aaa;
  margin-left:auto;
}

/* Featured arrow */
.blog-card--featured-arrow{
  position:absolute;
  bottom:30px;
  right:32px;
  font-size:22px;
  color:#bbb;
  transition:transform .5s cubic-bezier(.22,1,.36,1),
             color .5s cubic-bezier(.22,1,.36,1);
}
.blog-card--featured-link:hover .blog-card--featured-arrow{
  transform:translateX(6px);
  color:#666;
}

/* Featured — mobile collapse */
@media(max-width:699px){
  .blog-card--featured-image{
    aspect-ratio:16/10;
    border-radius:16px;
  }
  .blog-card--featured-panel{
    position:relative;
    bottom:auto;
    right:auto;
    width:100%;
    max-width:100%;
    margin-top:-24px;
    margin-left:0;
    border-radius:14px;
  }
  .blog-card--featured-panel h2{
    font-size:22px;
  }
  .blog-card--featured-panel p{
    font-size:14px;
  }
  .blog-card--featured-arrow{
    display:none;
  }
}

/* ============================================================
   EDITORIAL CARD SYSTEM — Regular cards
   ============================================================ */

/* Card base — warm off-white, layered depth */
.blog-card:not(.blog-card--featured){
  --card-bg:#f9f9f8;
  --card-border:rgba(0,0,0,.05);
  --card-radius:14px;
  --ease:cubic-bezier(.22,1,.36,1);
  --duration:500ms;

  position:relative;
  background-color:var(--card-bg);
  border-radius:var(--card-radius);
  border:1px solid var(--card-border);
  font-family:'Greycliff CF',system-ui,sans-serif;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  cursor:pointer;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 4px 12px rgba(0,0,0,.03);

  transition:
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
  will-change:transform;

  /* Reveal animation */
  opacity:0;
  transform:translateY(28px);
}
.blog-card:not(.blog-card--featured).in-view{
  opacity:1;
  transform:translateY(0);
  transition:
    transform .65s var(--ease),
    box-shadow var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    opacity .65s var(--ease);
}
/* Stagger */
.blog-card:nth-child(2).in-view{transition-delay:.06s}
.blog-card:nth-child(3).in-view{transition-delay:.12s}
.blog-card:nth-child(4).in-view{transition-delay:.18s}
.blog-card:nth-child(5).in-view{transition-delay:.24s}
.blog-card:nth-child(6).in-view{transition-delay:.3s}

/* Featured card reveal */
.blog-card--featured{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),
             transform .8s cubic-bezier(.22,1,.36,1);
}
.blog-card--featured.in-view{
  opacity:1;
  transform:translateY(0);
}
.blog-card:not(.blog-card--featured):hover,
.blog-card:not(.blog-card--featured):focus-within{
  transform:translateY(-5px) scale(1.005);
  border-color:rgba(104,189,231,.18);
  box-shadow:
    0 2px 4px rgba(0,0,0,.03),
    0 8px 24px rgba(0,0,0,.06),
    0 24px 48px rgba(0,0,0,.04);
}

/* ---- IMAGE ---- */
.blog-card--image-link{
  display:block;
}
.blog-card--image{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
}
.blog-card--image::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(to bottom, transparent, rgba(0,0,0,.06));
  z-index:1;
  pointer-events:none;
}
.blog-card--image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .65s cubic-bezier(.22,1,.36,1),
             filter .65s cubic-bezier(.22,1,.36,1);
}
.blog-card:hover .blog-card--image img,
.blog-card:focus-within .blog-card--image img{
  transform:scale(1.03);
  filter:brightness(.97) contrast(1.02);
}
.blog-card--image-gradient{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.4) 0%, rgba(0,0,0,.06) 45%, transparent 100%);
  opacity:.45;
  transition:opacity .65s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.blog-card:hover .blog-card--image-gradient,
.blog-card:focus-within .blog-card--image-gradient{
  opacity:.6;
}

/* ---- TAGS ---- */
.blog-card--tags{
  position:absolute;
  bottom:12px;
  left:12px;
  display:flex;
  gap:6px;
  z-index:2;
}
.blog-card--tag{
  display:inline-block;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:6px;
  background-color:rgba(255,255,255,.88);
  backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
  color:#444;
  transition:transform .5s cubic-bezier(.22,1,.36,1),
             background-color .5s cubic-bezier(.22,1,.36,1);
}
.blog-card:hover .blog-card--tag,
.blog-card:focus-within .blog-card--tag{
  background-color:rgba(255,255,255,.95);
  transform:translateY(-1px);
}
.blog-card--tag__blue{
  background-color:rgba(232,244,251,.92);
  color:#2a7ab5;
}
.blog-card--tag__green{
  background-color:rgba(230,249,238,.92);
  color:#2d8a54;
}
.blog-card--tag__red{
  background-color:rgba(252,232,231,.92);
  color:#b5443e;
}

/* ---- CARD BODY ---- */
.blog-card--body{
  padding:20px 20px 0;
  flex:1;
}

/* ---- CARD FOOTER ---- */
.blog-card--footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 20px 18px;
  border-top:1px solid rgba(0,0,0,.05);
  margin-top:14px;
}
.blog-card--author{
  display:flex;
  align-items:center;
  gap:10px;
}
.blog-card--avatar{
  width:30px;
  height:30px;
  border-radius:50%;
  background:linear-gradient(135deg, #68bde7, #6bd490);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:700;
  letter-spacing:.5px;
  border:1.5px solid rgba(255,255,255,.4);
  flex-shrink:0;
  box-shadow:0 1px 3px rgba(0,0,0,.1);
}
.blog-card--author-info{
  display:flex;
  flex-direction:column;
}
.blog-card--author-name{
  font-size:12.5px;
  font-weight:600;
  color:#2a2a2a;
  line-height:1.2;
}
.blog-card--author-info time{
  font-size:11.5px;
  font-weight:500;
  color:#aaa;
  line-height:1.3;
}
.blog-card--readtime{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:11.5px;
  font-weight:500;
  color:#aaa;
}
.blog-card--readtime svg{
  opacity:.5;
}

/* Featured card horizontal layout — no longer used but kept for safety */
.blog-card--content{
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
}

/* ========================================
   CLIENT PORTAL
   ======================================== */
.client-portal-page{
  color:#121212;
}
.client-portal-page *{
  box-sizing:border-box;
}

.portal-eyebrow{
  color:#666;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.4px;
  line-height:1.2;
  margin:0 0 16px;
  text-transform:uppercase;
}

.portal-hero{
  align-items:center;
  background-color:#fff;
  display:grid;
  gap:48px;
  grid-template-columns:minmax(0, 1fr) minmax(280px, 420px);
  min-height:calc(100vh - 116px);
  overflow:hidden;
  padding:88px 84px 112px;
  position:relative;
}
.portal-hero--grid{
  background-image:
    linear-gradient(to right, #1212120a 1px, transparent 1px),
    linear-gradient(to bottom, #1212120a 1px, transparent 1px);
  background-size:28px 28px;
  inset:0;
  pointer-events:none;
  position:absolute;
}
.portal-hero::after{
  background:#121212;
  bottom:0;
  content:"";
  height:8px;
  left:84px;
  position:absolute;
  width:calc(100% - 168px);
}
.portal-hero--content,
.portal-hero--panel{
  min-width:0;
  position:relative;
  z-index:1;
}
.portal-hero--content{
  max-width:820px;
}
.portal-hero h1{
  color:#121212;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:clamp(48px, 8vw, 112px);
  font-weight:800;
  letter-spacing:0;
  line-height:.92;
  margin:0 0 28px;
}
.portal-hero--content > p:not(.portal-eyebrow){
  color:#555;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:21px;
  line-height:1.5;
  margin:0 0 36px;
  max-width:620px;
}
.portal-hero--actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.portal-btn{
  align-items:center;
  border-radius:8px;
  display:inline-flex;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:16px;
  font-weight:700;
  justify-content:center;
  min-height:48px;
  padding:15px 24px;
  text-decoration:none;
  transition:background-color .2s ease,color .2s ease,transform .2s ease,border-color .2s ease;
}
.portal-btn:hover{
  transform:translateY(-2px);
}
.portal-btn:focus{
  box-shadow:0 0 0 4px #fff,0 0 0 8px #121212;
  outline:none;
}
.portal-btn__primary{
  background:#121212;
  color:#fff;
}
.portal-btn__primary:hover{
  background:#333;
}
.portal-btn__secondary{
  background:#fff;
  border:2px solid #ddd;
  color:#121212;
}
.portal-btn__secondary:hover{
  border-color:#121212;
}
.portal-hero--panel{
  background:#121212;
  border-radius:8px;
  color:#fff;
  font-family:'Greycliff CF',system-ui,sans-serif;
  padding:32px;
}
.portal-hero--panel span{
  color:#a2f6cf;
  display:block;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.2px;
  margin-bottom:18px;
  text-transform:uppercase;
}
.portal-hero--panel strong{
  display:block;
  font-size:28px;
  font-weight:800;
  letter-spacing:0;
  line-height:1.05;
  margin-bottom:16px;
}
.portal-hero--panel p{
  color:#d8d8d8;
  font-size:16px;
  line-height:1.55;
  margin:0;
}

.portal-billing,
.portal-options,
.portal-custom{
  font-family:'Greycliff CF',system-ui,sans-serif;
  padding:96px 84px;
}
.portal-billing{
  background:#f9f9f9;
}
.portal-options{
  background:#fff;
}
.portal-section-heading{
  margin:0 auto 40px;
  max-width:900px;
  text-align:center;
}
.portal-section-heading h2,
.portal-custom h2{
  color:#121212;
  font-size:clamp(34px, 5vw, 64px);
  font-weight:800;
  letter-spacing:0;
  line-height:1;
  margin:0 0 18px;
}
.portal-section-heading > p:not(.portal-eyebrow),
.portal-custom p:not(.portal-eyebrow){
  color:#666;
  font-size:18px;
  line-height:1.55;
  margin:0;
}

.portal-action-grid,
.portal-offer-grid{
  display:grid;
  gap:24px;
  margin:0 auto;
  max-width:1180px;
}
.portal-action-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.portal-offer-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
.portal-action-card,
.portal-offer-card{
  border-radius:8px;
  display:flex;
  flex-direction:column;
}
.portal-action-card{
  min-height:300px;
  padding:32px;
}
.portal-action-card span{
  display:block;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.2px;
  margin-bottom:40px;
  text-transform:uppercase;
}
.portal-action-card h3,
.portal-offer-card h3{
  font-size:28px;
  font-weight:800;
  letter-spacing:0;
  line-height:1.08;
  margin:0 0 14px;
}
.portal-action-card p,
.portal-offer-card p{
  line-height:1.55;
  margin:0;
}
.portal-action-card a,
.portal-offer-card a{
  align-self:flex-start;
  border-radius:8px;
  display:inline-flex;
  font-size:15px;
  font-weight:800;
  margin-top:auto;
  min-height:44px;
  padding:13px 20px;
  text-decoration:none;
  transition:background-color .2s ease,color .2s ease,transform .2s ease,border-color .2s ease;
}
.portal-action-card a:hover,
.portal-offer-card a:hover{
  transform:translateY(-2px);
}
.portal-action-card a:focus,
.portal-offer-card a:focus{
  box-shadow:0 0 0 4px #fff,0 0 0 8px #121212;
  outline:none;
}
.portal-action-card__blue{
  background:#aee8fa;
  color:#0a1e31;
}
.portal-action-card__blue a{
  background:#0a1e31;
  color:#eaf4fe;
}
.portal-action-card__green{
  background:#a2f6cf;
  color:#0f270c;
}
.portal-action-card__green a{
  background:#0f270c;
  color:#ecfeef;
}

.portal-offer-card{
  background:#f9f9f9;
  border:1px solid #e8e8e8;
  min-height:340px;
  padding:28px;
}
.portal-offer-card--meta{
  align-items:flex-start;
  display:flex;
  gap:12px;
  justify-content:space-between;
  margin-bottom:34px;
}
.portal-offer-card--meta span,
.portal-offer-card--meta small{
  font-size:12px;
  font-weight:800;
  letter-spacing:1px;
  line-height:1.2;
  text-transform:uppercase;
}
.portal-offer-card--meta span{
  color:#555;
  max-width:170px;
}
.portal-offer-card--meta small{
  color:#999;
  white-space:nowrap;
}
.portal-offer-card strong{
  color:#121212;
  display:block;
  font-size:22px;
  font-weight:800;
  letter-spacing:0;
  margin-bottom:16px;
}
.portal-offer-card p{
  color:#666;
  font-size:16px;
  margin-bottom:28px;
}
.portal-offer-card a{
  background:#121212;
  color:#fff;
}
.portal-offer-card a:hover{
  background:#333;
}
.portal-offer-card__quote{
  background:#121212;
  border-color:#121212;
  color:#fff;
}
.portal-offer-card__quote .portal-offer-card--meta span,
.portal-offer-card__quote .portal-offer-card--meta small,
.portal-offer-card__quote p{
  color:#d8d8d8;
}
.portal-offer-card__quote strong{
  color:#a2f6cf;
}
.portal-offer-card__quote a{
  background:#fff;
  color:#121212;
}
.portal-offer-card__quote a:hover{
  background:#e8e8e8;
}

.portal-custom{
  align-items:center;
  background:#f0f0f0;
  display:flex;
  gap:40px;
  justify-content:space-between;
}
.portal-custom > div{
  max-width:760px;
}

@media(max-width:1099px){
  .portal-hero{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .portal-hero--panel{
    max-width:520px;
  }
  .portal-offer-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media(max-width:799px){
  .portal-hero,
  .portal-billing,
  .portal-options,
  .portal-custom{
    padding-left:20px;
    padding-right:20px;
  }
  .portal-hero{
    display:flex;
    flex-direction:column;
    padding-bottom:80px;
    padding-top:72px;
  }
  .portal-hero--content,
  .portal-hero--panel,
  .portal-section-heading,
  .portal-custom > div{
    max-width:calc(100vw - 40px);
    width:100%;
  }
  .portal-hero h1{
    font-size:42px;
    line-height:1;
    max-width:calc(100vw - 40px);
  }
  .portal-hero p,
  .portal-action-card p,
  .portal-offer-card p,
  .portal-custom p{
    overflow-wrap:anywhere;
  }
  .portal-hero::after{
    left:20px;
    width:calc(100% - 40px);
  }
  .portal-hero--content > p:not(.portal-eyebrow),
  .portal-section-heading > p:not(.portal-eyebrow),
  .portal-custom p:not(.portal-eyebrow){
    font-size:16px;
  }
  .portal-hero--actions,
  .portal-custom{
    align-items:stretch;
    flex-direction:column;
  }
  .portal-btn,
  .portal-action-card a,
  .portal-offer-card a{
    width:100%;
  }
  .portal-action-grid,
  .portal-offer-grid{
    grid-template-columns:1fr;
  }
  .portal-action-card,
  .portal-offer-card{
    min-height:auto;
  }
  .portal-section-heading{
    text-align:left;
  }
}

/* ============================================================
   EDITORIAL TYPOGRAPHY + INTERACTION
   ============================================================ */

/* Title — regular cards only */
.blog-card:not(.blog-card--featured) h2{
  font-size:19px;
  font-weight:700;
  color:#1a1a1a;
  letter-spacing:-.2px;
  line-height:1.32;
  margin-bottom:8px;
  transform-origin:left top;
  transition:transform 500ms cubic-bezier(.22,1,.36,1);
}

/* Stretched link — makes entire card clickable */
.blog-card--link{
  color:inherit;
  text-decoration:none;
  transition:color 500ms cubic-bezier(.22,1,.36,1);
}
.blog-card--link::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:4;
}

/* Editorial arrow — hidden by default, slides in on hover */
.blog-card--arrow{
  display:inline-block;
  margin-left:4px;
  font-size:.75em;
  opacity:0;
  transform:translateX(-4px) translateY(1px);
  transition:
    opacity 500ms cubic-bezier(.22,1,.36,1),
    transform 500ms cubic-bezier(.22,1,.36,1);
  color:#68bde7;
  font-weight:400;
  vertical-align:baseline;
}

/* Hover: title shifts up, arrow slides in */
.blog-card:not(.blog-card--featured):hover h2,
.blog-card:not(.blog-card--featured):focus-within h2{
  transform:translateY(-1px);
}
.blog-card:hover .blog-card--link,
.blog-card:focus-within .blog-card--link{
  color:#1a1a1a;
}
.blog-card:hover .blog-card--arrow,
.blog-card:focus-within .blog-card--arrow{
  opacity:1;
  transform:translateX(0) translateY(1px);
}

/* Description — regular cards smooth max-height expand */
.blog-card:not(.blog-card--featured) p{
  font-size:14px;
  font-weight:400;
  line-height:1.6;
  color:#777;
  margin-bottom:0;
  max-height:calc(1.6em * 2.1);
  overflow:hidden;
  transition:
    max-height 500ms cubic-bezier(.22,1,.36,1),
    color 500ms cubic-bezier(.22,1,.36,1);
}
.blog-card:not(.blog-card--featured):hover p,
.blog-card:not(.blog-card--featured):focus-within p{
  max-height:calc(1.6em * 5);
  color:#555;
}

/* ========================================
   BLOG POST PAGE
   ======================================== */

/* Breadcrumbs */
.post-breadcrumbs{
  max-width:740px;
  margin:0 auto;
  padding:32px 20px 0;
  font-size:14px;
  font-weight:500;
  color:#999;
  font-family:'Greycliff CF',system-ui,sans-serif;
}
.post-breadcrumbs a{
  color:#999;
  text-decoration:none;
  transition:color .2s ease;
}
.post-breadcrumbs a:hover{
  color:#121212;
}
.post-breadcrumbs span:last-child{
  color:#555;
}

/* Post Header */
.post-header{
  max-width:740px;
  margin:0 auto;
  padding:32px 20px 48px;
}
.post-header--meta{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
  flex-wrap:wrap;
}
.post-header--meta time,
.post-reading-time{
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:14px;
  font-weight:500;
  color:#999;
}
.post-header h1{
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:42px;
  font-weight:800;
  color:#121212;
  line-height:1.15;
  letter-spacing:-.75px;
}
@media(max-width:799px){
  .post-header h1{font-size:28px;letter-spacing:-.25px}
}

/* Key Takeaways Box */
.post-takeaways{
  margin-top:32px;
  padding:24px 28px;
  background-color:#f0faf3;
  border-left:4px solid #6bd490;
  border-radius:0 16px 16px 0;
  font-family:'Greycliff CF',system-ui,sans-serif;
}
.post-takeaways strong{
  display:block;
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:#2d8a54;
  margin-bottom:12px;
}
.post-takeaways ul{
  list-style:none;
  padding:0;
  margin:0;
}
.post-takeaways li{
  font-size:15px;
  line-height:1.6;
  color:#333;
  padding:6px 0;
  padding-left:20px;
  position:relative;
}
.post-takeaways li::before{
  content:'✓';
  position:absolute;
  left:0;
  color:#6bd490;
  font-weight:700;
}

/* Post Content */
.post-content{
  max-width:740px;
  margin:0 auto;
  padding:0 20px 48px;
  font-family:'Greycliff CF',system-ui,sans-serif;
}
.post-content h2{
  font-size:28px;
  font-weight:700;
  color:#121212;
  line-height:1.25;
  letter-spacing:-.25px;
  margin-top:48px;
  margin-bottom:16px;
}
.post-content h3{
  font-size:20px;
  font-weight:700;
  color:#121212;
  margin-top:32px;
  margin-bottom:12px;
}
.post-content p{
  font-size:17px;
  font-weight:400;
  line-height:1.75;
  color:#444;
  margin-bottom:20px;
}
.post-content ul,
.post-content ol{
  font-size:17px;
  line-height:1.75;
  color:#444;
  padding-left:24px;
  margin-bottom:20px;
}
.post-content li{
  margin-bottom:8px;
}
.post-content a{
  color:#2a7ab5;
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color .2s ease;
}
.post-content a:hover{
  color:#121212;
}
.post-content strong{
  font-weight:700;
  color:#222;
}

/* Inline CTA */
.post-inline-cta{
  margin:48px 0;
  padding:32px;
  background:linear-gradient(135deg, #f8f9ff 0%, #eef4ff 100%);
  border-radius:16px;
  border:1px solid #d5e3f7;
  text-align:center;
}
.post-inline-cta p{
  font-size:16px;
  color:#555;
  margin-bottom:8px;
}
.post-inline-cta p:first-child{
  font-size:20px;
  color:#121212;
  margin-bottom:8px;
}

/* CTA Buttons */
.post-cta-btn{
  display:inline-block;
  padding:14px 32px;
  background-color:#121212;
  color:#fff;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  border-radius:12px;
  border:none;
  cursor:pointer;
  transition:background-color .2s ease, transform .2s ease;
}
.post-cta-btn:hover{
  background-color:#333;
  transform:translateY(-2px);
}
.post-cta-btn__primary{
  background-color:#68bde7;
  color:#fff;
}
.post-cta-btn__primary:hover{
  background-color:#4fa8d5;
}

/* FAQ Section */
.post-faq{
  margin-top:48px;
  padding-top:48px;
  border-top:1px solid #eee;
}
.post-faq h2{
  font-size:28px;
  font-weight:700;
  margin-bottom:24px;
}
.faq-item{
  margin-bottom:24px;
  padding:24px;
  background:#f9f9f9;
  border-radius:12px;
}
.faq-item h3{
  font-size:18px;
  font-weight:700;
  color:#121212;
  margin:0 0 8px;
}
.faq-item p{
  font-size:16px;
  line-height:1.65;
  color:#555;
  margin:0;
}

/* Author Bio */
.post-author{
  max-width:740px;
  margin:0 auto;
  padding:48px 20px;
  display:flex;
  align-items:center;
  gap:32px;
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
  font-family:'Greycliff CF',system-ui,sans-serif;
}
@media(max-width:799px){
  .post-author{flex-direction:column;text-align:center;gap:20px}
}
.post-author--info strong{
  display:block;
  font-size:18px;
  color:#121212;
}
.post-author--info span{
  display:block;
  font-size:14px;
  color:#999;
  margin-bottom:8px;
}
.post-author--info p{
  font-size:15px;
  line-height:1.6;
  color:#555;
  margin:0;
}

/* Founder Take */
.founder-take{
  margin:40px 0;
  padding:24px 28px;
  background-color:#faf8f5;
  border-left:4px solid #e8c86e;
  border-radius:0 12px 12px 0;
  font-family:'Greycliff CF',system-ui,sans-serif;
}
.founder-take strong{
  display:block;
  font-size:14px;
  font-weight:700;
  color:#b8941e;
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:8px;
}
.founder-take p{
  font-size:16px;
  line-height:1.65;
  color:#555;
  margin:0;
  font-style:italic;
}

/* Related Posts */
.post-related{
  max-width:740px;
  margin:0 auto;
  padding:48px 20px;
  font-family:'Greycliff CF',system-ui,sans-serif;
}
.post-related h2{
  font-size:24px;
  font-weight:700;
  color:#121212;
  margin-bottom:24px;
}
.post-related--grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:20px;
}
.post-related--card{
  display:block;
  padding:24px;
  background:#f9f9f9;
  border-radius:16px;
  text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease;
}
.post-related--card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.post-related--card h3{
  font-size:17px;
  font-weight:700;
  color:#121212;
  line-height:1.3;
  margin:12px 0 8px;
}
.post-related--card p{
  font-size:14px;
  color:#777;
  line-height:1.5;
  margin:0;
}

/* Email Capture */
.post-email-capture{
  max-width:740px;
  margin:0 auto;
  padding:64px 20px;
  text-align:center;
  font-family:'Greycliff CF',system-ui,sans-serif;
}
.post-email-capture h2{
  font-size:24px;
  font-weight:700;
  color:#121212;
  margin-bottom:8px;
}
.post-email-capture p{
  font-size:15px;
  color:#777;
  margin-bottom:24px;
}
.post-email-form{
  display:flex;
  gap:12px;
  max-width:460px;
  margin:0 auto;
}
@media(max-width:599px){
  .post-email-form{flex-direction:column}
}
.post-email-form input[type="email"]{
  flex:1;
  padding:14px 20px;
  border:1px solid #ddd;
  border-radius:12px;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:15px;
  outline:none;
  transition:border-color .2s ease;
}
.post-email-form input[type="email"]:focus{
  border-color:#68bde7;
}
.post-email-form button{
  padding:14px 28px;
  background-color:#121212;
  color:#fff;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:15px;
  font-weight:600;
  border:none;
  border-radius:12px;
  cursor:pointer;
  transition:background-color .2s ease;
}
.post-email-form button:hover{
  background-color:#333;
}

/* ========================================
   DYNAMIC ISLAND TOC
   ======================================== */

/* Backdrop overlay */
.toc-backdrop{
  position:fixed;
  inset:0;
  z-index:9998;
  background:rgba(0,0,0,0.2);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;
  pointer-events:none;
  transition:opacity .5s cubic-bezier(.22,1,.36,1);
}
.toc-backdrop--visible{
  opacity:1;
  pointer-events:auto;
}

/* Island container */
.toc-island{
  position:fixed;
  bottom:30px;
  left:50%;
  transform:translateX(-50%) translateY(50px);
  z-index:9999;
  opacity:0;
  transition:transform .5s cubic-bezier(.22,1,.36,1),
             opacity .5s cubic-bezier(.22,1,.36,1);
}
.toc-island--visible{
  transform:translateX(-50%) translateY(0);
  opacity:1;
}

/* Inner pill/expand container */
.toc-island__inner{
  position:relative;
  width:280px;
  height:52px;
  border-radius:26px;
  background:#121212;
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 20px 60px rgba(0,0,0,0.4),
             0 0 0 1px rgba(255,255,255,0.04) inset;
  overflow:hidden;
  cursor:pointer;
  transition:width .5s cubic-bezier(.22,1,.36,1),
             height .5s cubic-bezier(.22,1,.36,1),
             border-radius .5s cubic-bezier(.22,1,.36,1);
}

/* Expanded state */
.toc-island__inner.toc-expanded{
  width:340px;
  height:400px;
  border-radius:24px;
  cursor:default;
}
@media(max-width:599px){
  .toc-island__inner{
    width:260px;
  }
  .toc-island__inner.toc-expanded{
    width:min(320px, calc(100vw - 40px));
    height:380px;
  }
}

/* === PILL (collapsed view) === */
.toc-island__pill{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 16px;
  transition:opacity .4s cubic-bezier(.22,1,.36,1),
             transform .4s cubic-bezier(.22,1,.36,1),
             filter .4s cubic-bezier(.22,1,.36,1);
}
@media(min-width:600px){
  .toc-island__pill{
    padding:0 20px;
  }
}
.toc-expanded .toc-island__pill{
  opacity:0;
  transform:scale(0.95);
  filter:blur(4px);
  pointer-events:none;
}

/* Active section dot */
.toc-island__dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#fff;
  flex-shrink:0;
}

/* Title text */
.toc-island__title-wrap{
  flex:1;
  overflow:hidden;
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
}
.toc-island__title{
  display:block;
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:14px;
  font-weight:500;
  color:#fff;
  transition:opacity .2s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.toc-island__title--exit{
  opacity:0;
  transform:translateY(-15px);
}
.toc-island__title--enter{
  animation:tocTitleIn .35s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes tocTitleIn{
  from{ opacity:0; transform:translateY(15px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Progress circle */
.toc-island__progress{
  flex-shrink:0;
  transform:rotate(-90deg);
}

/* === MENU (expanded view) === */
.toc-island__menu{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  opacity:0;
  transform:scale(1.05);
  pointer-events:none;
  transition:opacity .4s cubic-bezier(.22,1,.36,1) 0s,
             transform .4s cubic-bezier(.22,1,.36,1) 0s;
}
.toc-expanded .toc-island__menu{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
  transition-delay:.1s;
}

/* Menu header */
.toc-island__menu-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 24px 12px;
  flex-shrink:0;
}
.toc-island__menu-label{
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  color:rgba(255,255,255,0.4);
}
.toc-island__close{
  background:none;
  border:none;
  cursor:pointer;
  color:rgba(255,255,255,0.4);
  font-size:16px;
  padding:4px;
  line-height:1;
  transition:color .2s ease;
  font-family:system-ui,sans-serif;
}
.toc-island__close:hover{
  color:#fff;
}

/* Heading list */
.toc-island__list{
  flex:1;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:0 12px 16px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
/* Custom scrollbar */
.toc-island__list::-webkit-scrollbar{
  width:4px;
}
.toc-island__list::-webkit-scrollbar-track{
  background:transparent;
}
.toc-island__list::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.15);
  border-radius:2px;
}

/* Individual heading item */
.toc-island__item{
  display:flex;
  align-items:center;
  width:100%;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:8px 12px;
  border-radius:8px;
  text-align:left;
  transition:background-color .3s ease,
             color .3s ease;
  font-family:'Greycliff CF',system-ui,sans-serif;
  font-size:14px;
  font-weight:400;
  color:rgba(255,255,255,0.4);
}
.toc-island__item:hover{
  background:rgba(255,255,255,0.05);
  color:rgba(255,255,255,0.85);
}
.toc-island__item--active{
  background:rgba(255,255,255,0.1);
  color:#fff;
  font-weight:500;
}

/* Item label */
.toc-island__item-label{
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:transform .3s ease;
}
.toc-island__item:hover .toc-island__item-label{
  transform:translateX(4px);
}

/* Active indicator dot */
.toc-island__item-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#fff;
  margin-left:12px;
  flex-shrink:0;
  transform:scale(0);
  opacity:0;
  transition:transform .3s ease, opacity .3s ease;
}
.toc-island__item--active .toc-island__item-dot{
  transform:scale(1);
  opacity:1;
}