/* ─── RESET ─── */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:#0e0e0c;font-family:'Inter',sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
canvas{position:fixed;top:0;left:0;z-index:0;width:100%;height:100%;}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 25%,rgba(0,0,0,0.18) 45%,rgba(0,0,0,0.55) 65%,rgba(0,0,0,0.88) 100%);}

/* scroll-wrap z:2 — glass panels scroll over fixed nav button naturally */
.scroll-wrap{position:relative;z-index:2;pointer-events:none;}
.scroll-wrap a,.scroll-wrap button,.scroll-wrap input,.scroll-wrap textarea,.scroll-wrap select{pointer-events:auto;}
.eng-card,.hiw-step{pointer-events:auto;}

.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:rgba(255,255,242,0.95);color:#0e0e0c;padding:8px 16px;border-radius:6px;font-size:13px;font-weight:500;z-index:9999;text-decoration:none;transition:top 0.2s;}
.skip-link:focus{top:12px;}

/* ─── NAV ─── */
/* hamburger z-index 500 — above all glass panels (z:2) and contact modal backdrop (z:200); pointer-events:auto is explicit because .scroll-wrap parent sets pointer-events:none */
.nav-menu-btn{position:fixed;top:clamp(16px,2vh,28px);right:clamp(16px,2vw,28px);z-index:500;width:40px;height:40px;background:rgba(14,14,12,0.85);border:1px solid rgba(255,255,242,0.10);border-radius:10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:background 0.3s,border-color 0.3s,opacity 0.2s;pointer-events:auto;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
/* Hide hamburger when contact modal is open — prevents it from overlapping the modal close X */
body.contact-open .nav-menu-btn{opacity:0;pointer-events:none;}
.nav-menu-btn:hover{background:rgba(255,255,242,0.08);border-color:rgba(255,255,242,0.12);}
.nav-menu-btn:focus-visible{outline:1px solid rgba(255,255,242,0.20);outline-offset:2px;}
.nav-bar{width:16px;height:1.5px;background:rgba(255,255,242,0.50);border-radius:1px;transition:transform 0.3s,opacity 0.3s;}
.nav-menu-btn.open .nav-bar:nth-child(1){transform:rotate(45deg) translate(4.5px,4.5px);}
.nav-menu-btn.open .nav-bar:nth-child(2){opacity:0;}
.nav-menu-btn.open .nav-bar:nth-child(3){transform:rotate(-45deg) translate(4.5px,-4.5px);}
.nav-panel{position:fixed;top:0;right:0;z-index:499;width:min(280px,75vw);height:100vh;background:rgba(10,10,8,0.97);border-left:1px solid rgba(255,255,242,0.06);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);transform:translateX(100%);transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);display:flex;flex-direction:column;padding:clamp(80px,10vh,120px) clamp(28px,4vw,40px) clamp(28px,4vw,40px);pointer-events:none;}
.nav-panel.open{transform:translateX(0);pointer-events:auto;}
.nav-item{font-family:'Outfit',sans-serif;font-weight:300;font-size:clamp(18px,2.5vw,24px);letter-spacing:0.08em;color:rgba(255,255,242,0.50);text-decoration:none;padding:clamp(14px,2vh,20px) 0;border-bottom:1px solid rgba(255,255,242,0.04);opacity:0;transform:translateX(20px);transition:color 0.25s,opacity 0.4s cubic-bezier(0.16,1,0.3,1),transform 0.4s cubic-bezier(0.16,1,0.3,1);}
.nav-panel.open .nav-item{opacity:1;transform:translateX(0);}
.nav-panel.open .nav-item:nth-child(1){transition-delay:.10s;}
.nav-panel.open .nav-item:nth-child(2){transition-delay:.15s;}
.nav-panel.open .nav-item:nth-child(3){transition-delay:.20s;}
.nav-panel.open .nav-item:nth-child(4){transition-delay:.25s;}
.nav-item:hover{color:rgba(255,255,242,0.85);}
.nav-item:last-child{border-bottom:none;}

/* ─── HERO ─── */
.hero{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;}
.wordmark{font-family:'Outfit',sans-serif;font-weight:200;font-size:clamp(48px,8vw,112px);letter-spacing:0.28em;margin-right:-0.28em;text-transform:uppercase;color:rgba(255,255,242,0.0);animation:wordmarkIn 2.0s cubic-bezier(0.16,1,0.3,1) 0.4s forwards;filter:blur(16px);clip-path:inset(0 100% 0 0);}
@keyframes wordmarkIn{0%{color:rgba(255,255,242,0.0);filter:blur(16px);transform:translateY(24px) scale(0.97);clip-path:inset(0 100% 0 0)}30%{clip-path:inset(0 0% 0 0)}55%{filter:blur(0px)}100%{color:rgba(255,255,242,0.88);filter:blur(0px);transform:translateY(0) scale(1);clip-path:inset(0 0% 0 0)}}
.hero-sep{height:1px;background:rgba(255,255,242,0.0);margin-top:clamp(8px,1vh,14px);width:clamp(200px,28vw,480px);animation:lineShrink 1.6s cubic-bezier(0.16,1,0.3,1) 1.0s forwards;}
@keyframes lineShrink{0%{width:clamp(200px,28vw,480px);background:rgba(255,255,242,0.0)}20%{background:rgba(255,255,242,0.22)}100%{width:clamp(100px,12vw,200px);background:rgba(255,255,242,0.12)}}
.tagline{font-family:'Inter',sans-serif;font-weight:300;font-size:clamp(11px,1.4vw,16px);letter-spacing:0.32em;text-transform:uppercase;color:rgba(255,255,242,0.0);margin-top:clamp(12px,2vh,28px);clip-path:inset(0 100% 0 0);animation:taglineIn 1.4s cubic-bezier(0.16,1,0.3,1) 2.1s forwards;}
@keyframes taglineIn{0%{color:rgba(255,255,242,0.0);transform:translateY(10px);clip-path:inset(0 100% 0 0)}45%{clip-path:inset(0 0% 0 0)}100%{color:rgba(255,255,242,0.70);transform:translateY(0);clip-path:inset(0 0% 0 0)}}
.scroll-hint{position:absolute;bottom:clamp(24px,4vh,48px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:hintIn 1.6s ease-in-out 3.8s forwards;pointer-events:auto;cursor:pointer;}
@keyframes hintIn{to{opacity:1}}
.scroll-hint span{font-family:'Inter',sans-serif;font-weight:400;font-size:11px;letter-spacing:0.25em;text-transform:uppercase;color:rgba(255,255,242,0.30);}
.scroll-chevron{width:14px;height:14px;border-right:1px solid rgba(255,255,242,0.30);border-bottom:1px solid rgba(255,255,242,0.30);transform:rotate(45deg);animation:chevronBob 2.4s ease-in-out infinite;}
@keyframes chevronBob{0%,100%{transform:rotate(45deg) translateY(0)}50%{transform:rotate(45deg) translateY(4px)}}

/* ─── SECTIONS ─── */
section{display:flex;align-items:center;justify-content:center;padding:clamp(48px,8vh,100px) clamp(20px,4vw,56px);}

/* ─── GLASS PANEL ─── */
.glass-panel{position:relative;background:rgba(10,10,8,0.78);border:1px solid rgba(255,255,242,0.0);border-radius:16px;backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);padding:clamp(28px,4vw,52px);width:100%;opacity:0;transform:translateY(64px) scale(0.97);transition:opacity 1.2s cubic-bezier(0.16,1,0.3,1),transform 1.2s cubic-bezier(0.16,1,0.3,1),border-color 1.5s ease 0.5s;overflow:hidden;}
.glass-panel.visible{opacity:1;transform:translateY(0) scale(1);border-color:rgba(255,255,242,0.08);}
.panel-glow{position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,242,0.07),transparent);opacity:0;transition:opacity 1.0s ease 0.8s,width 2.0s cubic-bezier(0.16,1,0.3,1) 0.8s;z-index:1;pointer-events:none;}
.glass-panel.visible .panel-glow{opacity:1;width:80%;}

/* ─── CHARACTER REVEAL ─── */
/* Fix 4: prevent mid-word breaks — wrap on word boundaries, not mid-char */
.cr-char{display:inline-block;opacity:0;transform:translateY(6px);transition:opacity 0.35s cubic-bezier(0.16,1,0.3,1),transform 0.35s cubic-bezier(0.16,1,0.3,1);}
.cr-char.space{display:inline-block;width:0.28em;}
/* Word-wrap container: any element that gets charSplit applied must allow
   wrapping at word boundaries. The parent of .cr-char spans is the text's
   original element (p.af-bio, .eng-desc, etc.). We ensure the immediate
   parent allows breaking at word (space) boundaries without splitting chars. */
.af-bio,.af-studio-text,.eng-desc,.hiw-step-desc,.hiw-term-body,.gs-sub{
  word-break: normal;
  overflow-wrap: break-word;
}
.cr-char.vis{opacity:1;transform:translateY(0);}

/* ─── SHARED TYPE ─── */
.big-title{font-family:'Outfit',sans-serif;font-weight:200;font-size:clamp(28px,4vw,48px);letter-spacing:0.08em;color:rgba(255,255,242,0.85);}
.title-line{width:0;height:2px;background:rgba(255,255,242,0.15);margin-top:10px;transition:width 1.0s cubic-bezier(0.16,1,0.3,1);}
.title-line.shown{width:60px;}
@keyframes aboutTitleReveal{0%{color:rgba(255,255,242,0.0);transform:translateY(10px);clip-path:inset(0 100% 0 0);opacity:0}30%{opacity:1}45%{clip-path:inset(0 0% 0 0)}100%{color:rgba(255,255,242,0.85);transform:translateY(0);clip-path:inset(0 0% 0 0);opacity:1}}
.title-wipe{clip-path:inset(0 100% 0 0);color:rgba(255,255,242,0.0);opacity:0;}
.title-wipe.shown{animation:aboutTitleReveal 1.4s cubic-bezier(0.16,1,0.3,1) forwards;}
@keyframes slamIn{0%{opacity:0;transform:scale(0.2);filter:blur(8px)}50%{opacity:1;transform:scale(1.08);filter:blur(0)}75%{transform:scale(0.97)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes tileScaleIn{0%{opacity:0;transform:scale(0.3);filter:blur(8px)}50%{opacity:1;transform:scale(1.06);filter:blur(0)}75%{transform:scale(0.97)}100%{opacity:1;transform:scale(1);filter:blur(0)}}

/* ─── ATTR ROWS (animated dividers) ─── */
.attr{opacity:0;transform:translateX(-12px);filter:blur(2px);transition:opacity 0.25s,transform 0.25s,filter 0.25s;}
.attr.shown{opacity:1;transform:translateX(0);filter:blur(0);}
.attr-row{display:flex;align-items:center;gap:8px;margin-bottom:3px;}
.attr-divider{height:1px;overflow:hidden;flex:1;min-width:16px;}
.attr-divider-inner{width:30%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,242,0.22),rgba(255,255,242,0.06),transparent);animation:dividerBounce 8s ease-in-out infinite;}
@keyframes dividerBounce{0%{transform:translateX(-20%)}50%{transform:translateX(250%)}100%{transform:translateX(-20%)}}
.attr-label{font-family:'Outfit',sans-serif;font-weight:400;font-size:10px;letter-spacing:0.28em;text-transform:uppercase;color:rgba(255,255,242,0.38);white-space:nowrap;}
.attr-value{font-family:'Inter',sans-serif;font-weight:500;font-size:clamp(12px,1.3vw,14px);color:rgba(255,255,242,0.68);opacity:0;transform:scale(0.2);filter:blur(8px);}
.attr-value.slammed{animation:slamIn 0.4s cubic-bezier(0.22,1,0.36,1) forwards;}

/* ─── SKELETON ─── */
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(220%)}}
.sk{border-radius:6px;background:rgba(255,255,242,0.05);overflow:hidden;position:relative;flex-shrink:0;}
.sk::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,242,0.13),transparent);animation:shimmer 1.4s ease-in-out infinite;}

/* ══════════════════════════════════════════
   ABOUT + FOUNDER
══════════════════════════════════════════ */
.af-layout{display:grid;grid-template-columns:clamp(180px,20vw,260px) 1fr;gap:clamp(28px,4vw,56px);}

/* Photo */
.af-photo-wrap{position:relative;width:100%;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:#111110;}
.af-photo-wrap img{width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;}
@keyframes photoReveal{0%{opacity:0;transform:scale(0.95);filter:blur(12px)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
.af-photo-wrap img.revealed{animation:photoReveal 1.2s cubic-bezier(0.16,1,0.3,1) forwards;}

/* Skill bars */
.af-skills{display:flex;flex-direction:column;gap:clamp(10px,1.4vh,16px);margin-top:clamp(16px,2vh,22px);}
.skill-row{display:flex;flex-direction:column;gap:6px;}
.skill-label{font-family:'Outfit',sans-serif;font-size:9px;letter-spacing:0.24em;text-transform:uppercase;color:rgba(255,255,242,0.35);}
.skill-track{height:1px;background:rgba(255,255,242,0.07);border-radius:1px;overflow:hidden;position:relative;}
.skill-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,rgba(255,255,242,0.12),rgba(255,255,242,0.50));border-radius:1px;width:0;transition:width 1.6s cubic-bezier(0.16,1,0.3,1);}
.skill-row.filled .skill-fill{width:var(--skill-pct);}

/* Meta attrs */
.af-meta{display:flex;flex-direction:column;gap:clamp(10px,1.3vh,15px);margin-top:clamp(14px,1.8vh,20px);}

/* Right col — Fix 1: min-width:0 prevents flex child from overflowing glass-panel's overflow:hidden */
.af-right{display:flex;flex-direction:column;gap:clamp(18px,2.5vh,26px);min-width:0;overflow-wrap:break-word;}
.af-name-block{padding-bottom:clamp(14px,2vh,20px);border-bottom:1px solid rgba(255,255,242,0.05);}
.af-name{font-family:'Outfit',sans-serif;font-weight:200;font-size:clamp(28px,4vw,48px);letter-spacing:0.08em;color:rgba(255,255,242,0.85);clip-path:inset(0 100% 0 0);opacity:0;}
.af-name.shown{animation:aboutTitleReveal 1.4s cubic-bezier(0.16,1,0.3,1) forwards;}
.af-name-line{width:0;height:2px;background:rgba(255,255,242,0.15);margin-top:10px;transition:width 1.0s cubic-bezier(0.16,1,0.3,1);}
.af-name-line.shown{width:60px;}
.af-role{font-family:'Outfit',sans-serif;font-weight:300;font-size:11px;letter-spacing:0.28em;text-transform:uppercase;color:rgba(255,255,242,0.32);margin-top:8px;}

/* Bio — Fix 1: min-width:0 + overflow-wrap so panel doesn't bleed past glass boundary */
.af-bio-panel{background:rgba(255,255,242,0.015);border:1px solid rgba(255,255,242,0.04);border-radius:10px;padding:clamp(18px,2.5vw,28px);transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1),background 0.3s,border-color 0.3s,box-shadow 0.3s;opacity:0;transform:translateY(16px);min-width:0;overflow-wrap:break-word;}
.af-bio-panel.entry-in{opacity:1;transform:translateY(0);}
.af-bio-panel:hover{background:rgba(255,255,242,0.025);border-color:rgba(255,255,242,0.08);box-shadow:0 8px 32px rgba(0,0,0,0.25);transform:translateY(-2px);}
.af-bio{font-family:'Inter',sans-serif;font-weight:300;font-size:clamp(13px,1.35vw,15px);line-height:1.9;color:rgba(255,255,242,0.62);}
.af-bio strong{color:rgba(255,255,242,0.78);font-weight:500;}

/* Studio card */
.af-studio-wrap{display:flex;flex-direction:column;gap:0;}
.af-studio-card{background:rgba(255,255,242,0.015);border:1px solid rgba(255,255,242,0.04);border-radius:10px;padding:clamp(18px,2.5vw,28px);transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1),background 0.3s,border-color 0.3s,box-shadow 0.3s;opacity:0;transform:translateY(16px);}
.af-studio-card.entry-in{opacity:1;transform:translateY(0);}
.af-studio-card:hover{background:rgba(255,255,242,0.025);border-color:rgba(255,255,242,0.08);box-shadow:0 8px 32px rgba(0,0,0,0.25);transform:translateY(-2px);}
.af-panel-label{font-family:'Outfit',sans-serif;font-size:10px;letter-spacing:0.26em;text-transform:uppercase;color:rgba(255,255,242,0.28);margin-bottom:12px;}
.af-studio-label{font-family:'Outfit',sans-serif;font-size:10px;letter-spacing:0.26em;text-transform:uppercase;color:rgba(255,255,242,0.28);margin-bottom:8px;}
.af-studio-text{font-family:'Inter',sans-serif;font-weight:300;font-size:clamp(12px,1.2vw,13px);line-height:1.8;color:rgba(255,255,242,0.52);}

/* ══════════════════════════════════════════
   CAPABILITIES — MARQUEE
══════════════════════════════════════════ */
.cap-title-el{font-family:'Outfit',sans-serif;font-weight:200;font-size:clamp(28px,4vw,48px);letter-spacing:0.08em;color:rgba(255,255,242,0.0);clip-path:inset(0 100% 0 0);opacity:0;}
.glass-panel.visible .cap-title-el{animation:aboutTitleReveal 1.4s cubic-bezier(0.16,1,0.3,1) 0.3s forwards;}
.cap-title-line{width:0;height:2px;background:rgba(255,255,242,0.15);margin-top:10px;margin-bottom:clamp(24px,3.5vh,40px);transition:width 1.0s cubic-bezier(0.16,1,0.3,1) 0.9s;}
.glass-panel.visible .cap-title-line{width:60px;}

/* Marquee shimmer — overlays track before cap panel reveals */
.marquee-outer{overflow:hidden;margin-bottom:clamp(28px,4vh,44px);mask-image:linear-gradient(90deg,transparent 0%,black 6%,black 94%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,black 6%,black 94%,transparent 100%);position:relative;}
.marquee-sk{position:absolute;inset:0;z-index:2;background:transparent;pointer-events:none;overflow:hidden;opacity:1;transition:opacity 0.6s ease;}
.marquee-sk::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,242,0.13),transparent);animation:shimmer 1.4s ease-in-out infinite;}
.marquee-sk.resolved{opacity:0;pointer-events:none;}
.marquee-track{display:flex;gap:clamp(36px,5vw,64px);width:max-content;animation:marqueeScroll 46s linear infinite;}
.marquee-track:hover{animation-play-state:paused;}
@keyframes marqueeScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.marquee-item{font-family:'Outfit',sans-serif;font-weight:300;font-size:clamp(13px,1.5vw,17px);letter-spacing:0.10em;color:rgba(255,255,242,0.38);white-space:nowrap;display:flex;align-items:center;gap:clamp(36px,5vw,64px);}
.marquee-item::after{content:'·';color:rgba(255,255,242,0.14);font-size:22px;line-height:1;}

.cap-divider{height:1px;background:rgba(255,255,242,0.06);margin-bottom:clamp(24px,3vh,36px);}
.cap-eng-label{font-family:'Outfit',sans-serif;font-size:10px;letter-spacing:0.28em;text-transform:uppercase;color:rgba(255,255,242,0.28);margin-bottom:clamp(16px,2vh,22px);}

/* ─── CARD GLOW — reusable hover utility ─── */
/* Apply to any tile-in card; add class="card-glow" alongside existing classes */
.card-glow.tile-in:hover{background:rgba(255,255,242,0.04);border-color:rgba(255,255,242,0.22);box-shadow:0 0 0 1px rgba(255,255,242,0.06),0 8px 32px rgba(0,0,0,0.35),0 0 24px rgba(255,255,242,0.03);transform:translateY(-3px) scale(1.005);}

/* Engagement cards */
.eng-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.5vw,20px);}
.eng-card{position:relative;background:rgba(255,255,242,0.015);border:1px solid rgba(255,255,242,0.06);border-radius:12px;padding:clamp(20px,2.5vw,32px);display:flex;flex-direction:column;gap:0;opacity:0;transform:scale(0.3);filter:blur(8px);transition:background 0.25s cubic-bezier(0.16,1,0.3,1),border-color 0.25s ease-out,box-shadow 0.25s ease-out,transform 0.35s cubic-bezier(0.16,1,0.3,1);}
.eng-card.tile-in{animation:tileScaleIn 0.5s cubic-bezier(0.22,1,0.36,1) forwards;}
.eng-card-sk{display:flex;flex-direction:column;gap:0;}
.eng-card-real{display:flex;flex-direction:column;gap:0;flex:1;}
/* Tag pill — top-right corner, positioned absolute within the card */
.eng-tag{position:absolute;top:clamp(14px,1.8vw,20px);right:clamp(14px,1.8vw,20px);font-family:'Outfit',sans-serif;font-weight:300;font-size:9px;letter-spacing:0.22em;text-transform:uppercase;color:rgba(255,255,242,0.38);background:rgba(255,255,242,0.05);border:1px solid rgba(255,255,242,0.08);border-radius:20px;padding:4px 10px;line-height:1;}
.eng-type{font-family:'Outfit',sans-serif;font-weight:400;font-size:clamp(14px,1.6vw,18px);letter-spacing:0.06em;color:rgba(255,255,242,0.82);margin-bottom:14px;padding-right:clamp(60px,8vw,90px);}
.eng-price{font-family:'Inter',sans-serif;font-weight:400;font-size:clamp(14px,1.6vw,18px);color:rgba(255,255,242,0.68);letter-spacing:0.01em;margin-bottom:14px;}
.eng-desc{font-family:'Inter',sans-serif;font-weight:300;font-size:clamp(12px,1.2vw,13px);line-height:1.75;color:rgba(255,255,242,0.48);flex:1;}

/* ── Fix 5: HIW step skeleton card — matches hiw-step padding/border style ── */
.hiw-step-sk-card{background:rgba(255,255,242,0.015);border:1px solid rgba(255,255,242,0.05);border-radius:12px;padding:clamp(20px,2.5vw,32px);display:flex;flex-direction:column;gap:0;}

/* ══════════════════════════════════════════
   HOW IT WORKS (3 steps)
══════════════════════════════════════════ */
/* Section title wires via .title-wipe.shown — same pattern as cap-title-el */
#hiw-title.shown{animation:aboutTitleReveal 1.4s cubic-bezier(0.16,1,0.3,1) forwards;}

.hiw-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.5vw,20px);margin-bottom:clamp(20px,2.5vh,28px);}
/* .hiw-step base — uses .card-glow for hover; transition kept for non-glow props */
.hiw-step{background:rgba(255,255,242,0.015);border:1px solid rgba(255,255,242,0.05);border-radius:12px;padding:clamp(20px,2.5vw,32px);opacity:0;transform:scale(0.3);filter:blur(8px);transition:background 0.25s cubic-bezier(0.16,1,0.3,1),border-color 0.25s ease-out,box-shadow 0.25s ease-out,transform 0.35s cubic-bezier(0.16,1,0.3,1);min-width:0;}
.hiw-step.tile-in{animation:tileScaleIn 0.5s cubic-bezier(0.22,1,0.36,1) forwards;}
.hiw-step-num{font-family:'Outfit',sans-serif;font-weight:200;font-size:clamp(28px,3.5vw,42px);color:rgba(255,255,242,0.08);line-height:1;margin-bottom:14px;letter-spacing:-0.02em;}
.hiw-step-title{font-family:'Outfit',sans-serif;font-weight:400;font-size:clamp(14px,1.5vw,17px);letter-spacing:0.05em;color:rgba(255,255,242,0.78);margin-bottom:8px;}
.hiw-step-desc{font-family:'Inter',sans-serif;font-weight:300;font-size:clamp(11px,1.1vw,13px);line-height:1.75;color:rgba(255,255,242,0.48);overflow-wrap:break-word;word-wrap:break-word;}

/* Engagement terms grid */
.hiw-terms{background:rgba(255,255,242,0.015);border:1px solid rgba(255,255,242,0.04);border-radius:10px;padding:clamp(18px,2vw,26px);}
.hiw-terms-label{font-family:'Outfit',sans-serif;font-size:10px;letter-spacing:0.26em;text-transform:uppercase;color:rgba(255,255,242,0.28);margin-bottom:16px;}
.hiw-terms-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(20px,3vw,40px);}
/* label col: 140px min + 28px right padding creates a clean gutter before description */
.hiw-term-row{display:grid;grid-template-columns:140px 1fr;align-items:baseline;padding:10px 0;border-bottom:1px solid rgba(255,255,242,0.04);}
.hiw-term-row:last-child{border-bottom:none;}
.hiw-term-label{font-family:'Outfit',sans-serif;font-size:10px;letter-spacing:0.20em;text-transform:uppercase;color:rgba(255,255,242,0.28);padding-top:1px;padding-right:32px;white-space:nowrap;}
.hiw-term-body{font-family:'Inter',sans-serif;font-weight:300;font-size:clamp(11px,1.1vw,13px);line-height:1.65;color:rgba(255,255,242,0.52);}

/* ══════════════════════════════════════════
   GET STARTED
══════════════════════════════════════════ */
#get-started{flex-direction:column;}
.gs-glass{position:relative;background:rgba(10,10,8,0.78);border:1px solid rgba(255,255,242,0.0);border-radius:16px;backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);padding:clamp(48px,6vw,80px);width:100%;opacity:0;transform:translateY(64px) scale(0.97);transition:opacity 1.2s cubic-bezier(0.16,1,0.3,1),transform 1.2s cubic-bezier(0.16,1,0.3,1),border-color 1.5s ease 0.5s;overflow:hidden;text-align:center;}
.gs-glass.visible{opacity:1;transform:translateY(0) scale(1);border-color:rgba(255,255,242,0.08);}
.gs-glow{position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,242,0.07),transparent);opacity:0;transition:opacity 1.0s ease 0.8s,width 2.0s ease 0.8s;pointer-events:none;}
.gs-glass.visible .gs-glow{opacity:1;width:80%;}
.gs-eyebrow{font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:0.30em;text-transform:uppercase;color:rgba(255,255,242,0.25);margin-bottom:16px;}
.gs-heading{font-family:'Outfit',sans-serif;font-weight:200;font-size:clamp(28px,4.5vw,52px);letter-spacing:0.06em;color:rgba(255,255,242,0.82);margin-bottom:16px;clip-path:inset(0 100% 0 0);opacity:0;}
.gs-glass.visible .gs-heading{animation:aboutTitleReveal 1.4s cubic-bezier(0.16,1,0.3,1) 0.3s forwards;}
.gs-sub{font-family:'Inter',sans-serif;font-weight:300;font-size:clamp(13px,1.4vw,15px);line-height:1.8;color:rgba(255,255,242,0.40);max-width:480px;margin:0 auto 36px;}
.gs-btn{display:inline-block;font-family:'Outfit',sans-serif;font-weight:300;font-size:13px;letter-spacing:0.22em;text-transform:uppercase;color:rgba(255,255,242,0.75);background:rgba(255,255,242,0.04);border:1px solid rgba(255,255,242,0.14);border-radius:8px;padding:16px 48px;cursor:pointer;transition:background 0.35s,border-color 0.35s,color 0.35s,box-shadow 0.35s,transform 0.25s cubic-bezier(0.16,1,0.3,1);pointer-events:auto;}
.gs-btn:hover{background:rgba(255,255,242,0.08);border-color:rgba(255,255,242,0.32);color:rgba(255,255,242,0.95);box-shadow:0 0 40px rgba(255,255,242,0.05);transform:translateY(-2px) scale(1.02);}
.gs-btn:active{transform:scale(0.97);}

/* ══════════════════════════════════════════
   CONTACT MODAL
══════════════════════════════════════════ */
.contact-backdrop{position:fixed;inset:0;z-index:200;background:rgba(4,4,2,0.0);backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.4s,background 0.4s,backdrop-filter 0.5s,-webkit-backdrop-filter 0.5s;}
.contact-backdrop.open{opacity:1;pointer-events:auto;background:rgba(4,4,2,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
.contact-panel{width:min(480px,94vw);background:rgba(10,10,8,0.96);border:1px solid rgba(255,255,242,0.10);border-radius:16px;padding:clamp(28px,4vw,44px);transform:scale(0.88);opacity:0;transition:transform 0.5s cubic-bezier(0.16,1,0.3,1),opacity 0.4s;position:relative;overflow:hidden;max-height:90vh;overflow-y:auto;}
.contact-panel::-webkit-scrollbar{display:none;}
.contact-backdrop.open .contact-panel{transform:scale(1);opacity:1;}
.contact-glow{position:absolute;top:0;left:50%;transform:translateX(-50%);width:40%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,242,0.08),transparent);z-index:1;opacity:0;transition:opacity 0.8s ease 0.4s,width 1.5s ease 0.4s;}
.contact-backdrop.open .contact-glow{opacity:1;width:70%;}
/* Bug3-fix: pointer-events:none in default (closed) state — the invisible close button was intercepting touches on the hamburger on iOS Safari because opacity:0 elements still receive touch events. The .contact-backdrop.open rule restores pointer-events:auto for when the modal is actually open. */
.contact-close{position:absolute;top:20px;right:20px;width:32px;height:32px;border:none;background:rgba(255,255,242,0.06);border-radius:50%;color:rgba(255,255,242,0.50);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;transition:opacity 0.4s 0.5s,transform 0.4s 0.5s,background 0.2s;opacity:0;transform:translateY(8px);pointer-events:none;}
.contact-backdrop.open .contact-close{opacity:1;transform:translateY(0);pointer-events:auto;}
.contact-close:hover{background:rgba(255,255,242,0.12);color:rgba(255,255,242,0.85);}
.contact-title{font-family:'Outfit',sans-serif;font-weight:200;font-size:clamp(20px,3vw,26px);letter-spacing:0.08em;color:rgba(255,255,242,0.85);margin-bottom:5px;}
.contact-subtitle{font-family:'Inter',sans-serif;font-weight:300;font-size:12px;color:rgba(255,255,242,0.38);margin-bottom:clamp(20px,3vh,30px);}
.contact-field{position:relative;margin-bottom:clamp(14px,2vh,20px);}
.contact-field input,.contact-field textarea{width:100%;background:rgba(255,255,242,0.03);border:1px solid rgba(255,255,242,0.06);border-radius:8px;padding:14px 16px;font-family:'Inter',sans-serif;font-weight:300;font-size:14px;color:rgba(255,255,242,0.80);outline:none;transition:border-color 0.3s,background 0.3s;}
.contact-field input:focus,.contact-field textarea:focus{border-color:rgba(255,255,242,0.18);background:rgba(255,255,242,0.05);}
.contact-field input::placeholder,.contact-field textarea::placeholder{color:rgba(255,255,242,0.18);}
.contact-field textarea{resize:none;height:110px;line-height:1.6;}
.contact-field label{position:absolute;top:-8px;left:12px;font-family:'Outfit',sans-serif;font-size:10px;letter-spacing:0.20em;text-transform:uppercase;color:rgba(255,255,242,0.22);background:rgba(10,10,8,0.96);padding:2px 8px;border-radius:4px;}
.contact-honey{position:absolute;left:-9999px;opacity:0;height:0;width:0;}
.contact-prefill-wrap{position:relative;margin-bottom:clamp(14px,2vh,20px);}
/* Fix 4+6: static prefill div → real <select>; user can still change after Get Started pre-fills it */
.contact-topic-select{width:100%;background:rgba(255,255,242,0.03);border:1px solid rgba(255,255,242,0.06);border-radius:8px;padding:14px 16px;font-family:'Inter',sans-serif;font-weight:300;font-size:13px;color:rgba(255,255,242,0.62);cursor:pointer;appearance:none;-webkit-appearance:none;outline:none;transition:border-color 0.3s,background 0.3s;}
.contact-topic-select:focus{border-color:rgba(255,255,242,0.18);background:rgba(255,255,242,0.05);}
.contact-topic-select option{background:#0e0e0c;color:rgba(255,255,242,0.80);}
.contact-prefill-label{position:absolute;top:-8px;left:12px;font-family:'Outfit',sans-serif;font-size:10px;letter-spacing:0.20em;text-transform:uppercase;color:rgba(255,255,242,0.18);background:rgba(10,10,8,0.96);padding:2px 8px;border-radius:4px;}
/* chevron indicator for the select */
.contact-prefill-wrap::after{content:'';position:absolute;right:16px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-right:1px solid rgba(255,255,242,0.28);border-bottom:1px solid rgba(255,255,242,0.28);transform:translateY(-65%) rotate(45deg);pointer-events:none;}
.contact-submit{width:100%;padding:14px;border:1px solid rgba(255,255,242,0.14);border-radius:8px;background:rgba(255,255,242,0.04);color:rgba(255,255,242,0.78);font-family:'Outfit',sans-serif;font-weight:300;font-size:13px;letter-spacing:0.18em;text-transform:uppercase;cursor:pointer;transition:background 0.3s,border-color 0.3s,color 0.3s,transform 0.2s;margin-top:6px;}
.contact-submit:hover{background:rgba(255,255,242,0.08);border-color:rgba(255,255,242,0.30);color:rgba(255,255,242,0.95);transform:translateY(-1px);}
.contact-submit:active{transform:scale(0.98);}
.contact-submit.sending{pointer-events:none;opacity:0.4;}
.contact-success{padding:clamp(40px,6vw,64px) 0;text-align:center;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;}
.contact-success-text{font-family:'Outfit',sans-serif;font-weight:200;font-size:clamp(24px,3.5vw,32px);letter-spacing:0.08em;color:rgba(255,255,242,0.88);}
.contact-success-sub{font-family:'Inter',sans-serif;font-weight:300;font-size:13px;color:rgba(255,255,242,0.42);letter-spacing:0.04em;}
.field-error{display:block;margin-top:4px;font-size:11px;color:rgba(255,120,100,0.85);opacity:0;max-height:0;overflow:hidden;transition:max-height 0.2s,opacity 0.2s;}
.contact-field.has-error .field-error{max-height:40px;opacity:1;}
.contact-field.has-error input,.contact-field.has-error textarea{border-color:rgba(255,100,100,0.40);}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.footer-section{padding:clamp(40px,6vh,72px) clamp(20px,4vw,56px);}
/* Fix 8: tighter bottom padding so copyright doesn't float away from the bottom edge */
.footer-glass{position:relative;width:100%;background:rgba(10,10,8,0.78);border:1px solid rgba(255,255,242,0.0);border-radius:16px;backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);padding:clamp(24px,3.5vw,44px) clamp(24px,3.5vw,44px) clamp(16px,2vw,24px);opacity:0;transform:translateY(64px) scale(0.97);transition:opacity 1.2s cubic-bezier(0.16,1,0.3,1),transform 1.2s cubic-bezier(0.16,1,0.3,1),border-color 1.5s ease 0.5s;overflow:hidden;}
.footer-glass.visible{opacity:1;transform:translateY(0) scale(1);border-color:rgba(255,255,242,0.08);}
.footer-glow{position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,242,0.06),transparent);opacity:0;transition:opacity 1.0s ease 0.8s,width 2.0s ease 0.8s;pointer-events:none;}
.footer-glass.visible .footer-glow{opacity:1;width:80%;}
.footer-top{display:grid;grid-template-columns:1fr auto;align-items:start;gap:clamp(20px,3vw,40px);margin-bottom:clamp(20px,3vh,32px);}
.footer-wordmark{font-family:'Outfit',sans-serif;font-weight:200;font-size:clamp(20px,2.8vw,30px);letter-spacing:0.28em;text-transform:uppercase;color:rgba(255,255,242,0.40);}
.footer-tagline{font-family:'Inter',sans-serif;font-weight:300;font-size:11px;letter-spacing:0.14em;color:rgba(255,255,242,0.20);margin-top:6px;}
.footer-right{display:flex;flex-direction:column;align-items:flex-end;gap:14px;}
.footer-socials{display:flex;gap:14px;align-items:center;}
.social-icon{width:18px;height:18px;fill:rgba(255,255,242,0.32);transition:fill 0.3s,transform 0.3s cubic-bezier(0.16,1,0.3,1);display:block;}
.social-icon:hover{transform:translateY(-2px) scale(1.22);}
.social-icon.si-x:hover{fill:rgba(255,255,255,0.85);}
.social-icon.si-ig:hover{fill:url(#ig-grad);}
.social-icon.si-li{fill:none;color:rgba(255,255,242,0.32);transition:color 0.3s,transform 0.3s cubic-bezier(0.16,1,0.3,1);}
.social-icon.si-li:hover{color:rgba(255,255,255,0.85);}
.footer-links{display:flex;flex-direction:column;gap:6px;align-items:flex-end;}
.footer-links a{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:0.10em;color:rgba(255,255,242,0.32);text-decoration:none;transition:color 0.25s;}
.footer-links a:hover{color:rgba(255,255,242,0.60);}
/* Fix 8: reduce bottom padding so gap below copyright is symmetric with gap above divider */
.footer-bottom{padding-top:12px;padding-bottom:4px;border-top:1px solid rgba(255,255,242,0.06);text-align:center;}
.footer-legal{font-family:'Inter',sans-serif;font-size:10px;font-weight:300;color:rgba(255,255,242,0.25);letter-spacing:0.08em;}


/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:700px){
  section{padding:clamp(36px,6vh,64px) clamp(16px,5vw,24px);}
  .af-layout{grid-template-columns:1fr;}
  .af-photo-wrap{max-width:220px;margin:0 auto;}
  .eng-grid{grid-template-columns:1fr;}
  .hiw-steps{grid-template-columns:1fr;}
  .hiw-terms-grid{grid-template-columns:1fr;}
  /* Bug1-fix: at narrow widths, stack label ABOVE body in each term row instead of side-by-side.
     The label col with white-space:nowrap + letter-spacing was overflowing the available width on real iOS (Outfit rendering is wider than headless Chrome), pushing the body to <100px which overlapped adjacent rows.
     flex-direction:column gives each row full container width for both elements. */
  .hiw-term-row{display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
  .hiw-term-label{white-space:normal;padding-right:0;}
  /* Bug2-fix: keep footer two-column at all viewport widths per Gage's requirement.
     Remove the grid-template-columns:1fr override so left (wordmark) and right (socials+links) stay side-by-side.
     footer-right shrinks with min-width:0 and right-aligned links. */
  .footer-top{grid-template-columns:1fr auto;align-items:start;}
  .footer-right{align-items:flex-end;}
  .footer-links{align-items:flex-end;}
  .gs-btn{width:100%;}
}
@media(max-width:400px){
  .hiw-steps{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}
  canvas{display:none;} .vignette{background:none;}
  .wordmark{color:rgba(255,255,242,0.88) !important;filter:none !important;clip-path:none !important;opacity:1 !important;}
  .tagline{color:rgba(255,255,242,0.70) !important;clip-path:none !important;opacity:1 !important;}
  .scroll-hint{opacity:1 !important;}
  .glass-panel,.gs-glass,.footer-glass{opacity:1 !important;transform:none !important;border-color:rgba(255,255,242,0.08) !important;}
  .af-name,.cap-title-el,.gs-heading{clip-path:none !important;opacity:1 !important;color:rgba(255,255,242,0.85) !important;}
  .af-name-line,.cap-title-line,.title-line{width:60px !important;}
  .attr,.attr-value{opacity:1 !important;transform:none !important;filter:none !important;}
  .eng-card,.hiw-step{opacity:1 !important;transform:none !important;filter:none !important;}
  #hiw-title{clip-path:none !important;opacity:1 !important;color:rgba(255,255,242,0.85) !important;}
  #hiw-line{width:60px !important;}
  .eng-card-sk{display:none !important;}
  .eng-card-real{display:flex !important;}
  .eng-tag{opacity:1 !important;}
  .af-photo-wrap img{opacity:1 !important;}
  .skill-fill{width:var(--skill-pct) !important;}
  .cr-char{opacity:1 !important;transform:none !important;}
  .af-bio-panel,.af-studio-card{opacity:1 !important;transform:none !important;}
  .gs-eyebrow,.gs-btn{opacity:1 !important;transform:none !important;}
  .hiw-term-row{opacity:1 !important;transform:none !important;}
}