:root{
  --base:#1B1B1B;
  --base-deep:#101010;
  --text:#F3F3F0;
  --muted:#A9A9A4;
  --line:rgba(255,255,255,.12);
  --max:1120px;
  --header-h:78px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--base)}
body{margin:0;background:var(--base);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}img,video{display:block;max-width:100%}button{font:inherit}::selection{background:#fff;color:#111}
.container{width:min(var(--max),calc(100% - 56px));margin-inline:auto}
.skip-link{position:fixed;left:16px;top:-80px;z-index:999;padding:10px 14px;background:#fff;color:#111;border-radius:8px}.skip-link:focus{top:16px}

/* Header */
.site-header{position:fixed;inset:0 0 auto 0;height:var(--header-h);z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 max(28px,calc((100vw - var(--max))/2));background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,0));transition:background .3s ease,backdrop-filter .3s ease,border-color .3s ease}
.site-header.scrolled{background:rgba(27,27,27,.70);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06)}
.brand{width:188px;color:#fff;line-height:0}.brand img{width:100%;height:auto;filter:brightness(0) invert(1)}
.site-nav{display:flex;align-items:center;gap:30px;font-size:13px;color:rgba(255,255,255,.82)}.site-nav a{transition:opacity .2s ease}.site-nav a:hover{opacity:.62}
.nav-cta{border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:11px 17px;color:#fff!important}
.menu-toggle{display:none;background:none;border:0;color:white;width:42px;height:42px;position:relative;cursor:pointer}.menu-toggle span{position:absolute;left:9px;right:9px;height:1px;background:white;transition:.25s ease}.menu-toggle span:first-child{top:16px}.menu-toggle span:last-child{top:25px}.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}

/* Reusable */
.eyebrow{margin:0 0 18px;text-transform:uppercase;letter-spacing:.19em;font-size:11px;font-weight:700;color:rgba(255,255,255,.72)}
.button{display:inline-flex;justify-content:center;align-items:center;padding:13px 20px;border-radius:999px;font-size:13px;font-weight:700;transition:transform .2s ease,background .2s ease,border-color .2s ease}.button:hover{transform:translateY(-2px)}
.button-light{background:#F2F2EE;color:#151515;border:1px solid #F2F2EE}.button-ghost{background:rgba(17,17,17,.22);color:#fff;border:1px solid rgba(255,255,255,.42);backdrop-filter:blur(10px)}

/* Hero stays behind the terrarium entrance. Video fades into a minimal teal haze. */
.hero{height:100vh;min-height:620px;position:sticky;top:0;z-index:0;overflow:hidden;background:#101817}
.hero-sticky{position:relative;height:100%;min-height:620px;overflow:hidden;background:#101817}
.hero-teal-blur{position:absolute;inset:-18%;z-index:0;opacity:0;transform:scale(1.08);background:radial-gradient(circle at 30% 42%,rgba(18,110,105,.48),transparent 29%),radial-gradient(circle at 72% 58%,rgba(31,146,137,.34),transparent 33%),radial-gradient(circle at 52% 18%,rgba(30,83,81,.22),transparent 26%),#101817;filter:blur(54px) saturate(112%);will-change:opacity,transform}
.hero-video{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.015);will-change:filter,transform,opacity}
.hero-dim{position:absolute;z-index:2;inset:0;background:rgba(0,0,0,.50)}
.hero-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:100px 28px 80px;z-index:3;will-change:filter,opacity,transform}
.hero-lockup{display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero-animated-logo{display:block;width:clamp(132px,11vw,190px);height:auto;margin:0 0 24px;pointer-events:none;user-select:none}
.hero-content h1{margin:0;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(52px,6.8vw,102px);line-height:.92;letter-spacing:-.055em;text-wrap:balance}
.hero-actions{display:flex;gap:12px;justify-content:center;margin-top:32px}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:4;color:rgba(255,255,255,.62);text-transform:uppercase;font-size:9px;letter-spacing:.22em;text-align:center}.scroll-cue i{display:block;width:1px;height:32px;background:rgba(255,255,255,.42);margin:9px auto 0}

/* Terrarium shell: only the supplied transparent top and bottom assets. */
.terrarium-world{position:relative;z-index:4;background:transparent}
.terrarium-backdrop,.terrarium-foreground{position:sticky;top:0;height:100vh;min-height:620px;overflow:visible;pointer-events:none}
.terrarium-backdrop{z-index:1;background:transparent}
.terrarium-foreground{z-index:30;margin-top:-100vh;background:transparent}
.bubble-top{position:absolute;left:50%;top:0;width:118vw;max-width:none;height:auto;transform:translateX(-50%) translateY(86vh);opacity:0;filter:none;mix-blend-mode:hard-light;will-change:transform,opacity}
.bubble-bottom{position:absolute;left:50%;bottom:0;width:120vw;max-width:none;height:auto;transform:translateX(-50%) translateY(108%);opacity:1;filter:none;mix-blend-mode:normal;will-change:transform}

.terrarium-panels{position:relative;z-index:10;margin-top:-100vh}
.entry-spacer{height:100vh}

/* Each major section gets one viewport to arrive, then roughly half a viewport of centered hold. */
.focus-panel{height:150vh;position:relative;padding:0}
.panel-hold{position:sticky;top:0;height:100vh;min-height:620px;display:flex;align-items:center;padding:calc(var(--header-h) + 28px) 0 46px}
.panel-hold>.container{width:min(1060px,calc(100% - 64px));margin-inline:auto}
@media(min-width:641px){.focus-panel .panel-hold>.container{transform:translateY(-10vh)}}
.focus-panel h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(40px,4.35vw,62px);line-height:.96;letter-spacing:-.048em;margin:0}
/* True page-break dividers. They live between sticky sections in normal document flow,
   so they never drift independently while a content panel is being held. */
.section-break{position:relative;z-index:12;height:14vh;min-height:72px;max-height:130px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.section-break i{display:block;position:relative;top:-4vh;width:min(1060px,calc(100% - 64px));height:1px;background:rgba(255,255,255,.38);transform:scaleY(.32);transform-origin:center;will-change:transform}


/* About */
.about-layout{display:grid;grid-template-columns:minmax(280px,.82fr) minmax(390px,1.18fr);gap:clamp(44px,6vw,86px);align-items:center}
.about-art-wrap{display:flex;justify-content:center;align-items:center}.floating-terrarium{width:min(360px,34vw);filter:drop-shadow(0 18px 22px rgba(0,0,0,.18));animation:floatTerrarium 4.8s ease-in-out infinite}@keyframes floatTerrarium{0%,100%{transform:translateY(-5px)}50%{transform:translateY(7px)}}
.about-copy>p:last-child{max-width:610px;margin:27px 0 0;color:rgba(255,255,255,.72);font-size:16.5px;line-height:1.62}

/* Projects */
.centered-heading{text-align:center;max-width:700px;margin:0 auto 40px}.centered-heading h2{font-size:clamp(40px,4.15vw,58px)}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.service-card{background:rgba(16,16,16,.58);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(9px);overflow:hidden;border-radius:26px;clip-path:inset(0 round 26px);isolation:isolate}
.service-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;background:#121212;border-radius:0}
.service-copy{padding:20px 20px 24px}.service-copy .index{font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.42)}.service-copy h3{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:29px;letter-spacing:-.04em;margin:24px 0 9px}.service-copy p{margin:0;color:rgba(255,255,255,.65);line-height:1.5;font-size:14px}

/* Portfolio: five portrait 2:3 tiles + More. */
.portfolio-container{width:min(980px,calc(100% - 92px))!important}
.portfolio-heading{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:end;margin-bottom:42px}.portfolio-heading h2{max-width:780px}.portfolio-note{margin:0 0 7px;color:rgba(255,255,255,.56);line-height:1.55}
.portfolio-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(92px,.36fr);gap:20px;align-items:stretch}
.portfolio-card,.portfolio-more{min-width:0}.portfolio-placeholder{position:relative;aspect-ratio:2/3;border:1px solid rgba(255,255,255,.10);border-radius:18px;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.05),transparent 28%),linear-gradient(145deg,#2B2B2B,#141414);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.27);font-size:10px;text-transform:uppercase;letter-spacing:.16em;overflow:hidden}.portfolio-card small{display:block;margin-top:12px;text-transform:uppercase;letter-spacing:.15em;color:rgba(255,255,255,.46);font-size:9px}.portfolio-card h3{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(20px,1.7vw,27px);letter-spacing:-.035em;margin:6px 0 0}
.portfolio-more{min-height:100%;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.035);display:flex;flex-direction:column;justify-content:space-between;padding:18px;color:rgba(255,255,255,.78);transition:background .2s ease,transform .2s ease}.portfolio-more:hover{background:rgba(255,255,255,.07);transform:translateY(-2px)}.portfolio-more span{font-family:Georgia,"Times New Roman",serif;font-size:25px}.portfolio-more b{font-size:25px;font-weight:400;align-self:flex-end}

/* Stats + fixed testimonial controls */
.proof-wrap{width:min(100%,940px)!important}
.metrics{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:50px}.metric{padding:36px 20px 40px;text-align:center}.metric:first-child{border-right:1px solid var(--line)}.metric-number{font-size:clamp(68px,7.4vw,104px);font-weight:800;letter-spacing:-.075em;line-height:.8;color:#fff}.metric p{margin:21px 0 0;color:rgba(255,255,255,.58);font-size:14px;text-transform:uppercase;letter-spacing:.14em}
.testimonial-shell{position:relative;height:310px;padding:0 92px;display:flex;align-items:center}.testimonial-content{text-align:center;max-width:780px;margin:auto;width:100%}.testimonial-content blockquote{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(24px,2.85vw,41px);line-height:1.23;letter-spacing:-.03em;margin:12px 0 24px;min-height:4.0em;display:flex;align-items:center;justify-content:center}.testimonial-byline{margin:0;color:rgba(255,255,255,.48);font-size:13px}.testimonial-arrow{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.18);color:white;cursor:pointer;font-size:22px;transition:background .2s ease,transform .2s ease}.testimonial-arrow.previous{left:0}.testimonial-arrow.next{right:0}.testimonial-arrow:hover{background:rgba(255,255,255,.09);transform:translateY(-50%) scale(1.04)}
.testimonial-dots{display:flex;gap:8px;justify-content:center;margin-top:26px}.testimonial-dots span{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.25)}.testimonial-dots span.active{background:#fff}

/* Final terrarium transition. The actual lower arch reveals before Start a Project. */
.exit-spacer{height:90vh}

/* Ocean overlaps the exit viewport, so the bottom arch is the actual border into Start a Project. */
.ocean-section{position:relative;z-index:2;min-height:170vh;margin-top:-118vh;background:transparent}
.ocean-section::before{content:"";position:absolute;inset:-18vh 0 auto 0;height:42vh;pointer-events:none;background:linear-gradient(180deg,rgba(3,7,13,0) 0%,rgba(3,7,13,.18) 38%,#03070D 100%);z-index:0}
.ocean-sticky{position:sticky;top:0;height:100vh;min-height:620px;overflow:hidden;display:flex;align-items:center;background:linear-gradient(180deg,#03070D 0%,#051421 42%,#031C31 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 11%,#000 27%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 11%,#000 27%,#000 100%)}
.ocean-animation{position:absolute;inset:-5%;overflow:hidden;transform:scale(1.035);filter:blur(22px);will-change:filter,transform;background:radial-gradient(circle at 50% 78%,rgba(17,78,122,.50),transparent 48%),linear-gradient(180deg,#03070D 0%,#051424 45%,#04213B 100%)}
.ocean-animation::before,.ocean-animation::after{content:"";position:absolute;width:62vw;height:22vw;border-radius:50%;filter:blur(74px);opacity:.16;mix-blend-mode:screen;pointer-events:none}.ocean-animation::before{left:-16vw;top:18vh;background:linear-gradient(90deg,transparent,#3F86B6,transparent);transform:rotate(-18deg);animation:sweepLightA 12s ease-in-out infinite alternate}.ocean-animation::after{right:-18vw;bottom:10vh;background:linear-gradient(90deg,transparent,#2F6EA0,transparent);transform:rotate(14deg);animation:sweepLightB 15s ease-in-out infinite alternate-reverse}
.ocean-darkness{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.24) 42%,rgba(0,0,0,.20) 100%);pointer-events:none}
.ocean-glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.48}.glow-a{width:45vw;height:45vw;background:#0A4E7B;left:-10vw;bottom:-20vw;animation:driftGlow 10s ease-in-out infinite alternate}.glow-b{width:38vw;height:38vw;background:#0C315E;right:-8vw;top:22vh;animation:driftGlow 13s ease-in-out infinite alternate-reverse}
.wave{position:absolute;left:-20%;width:140%;height:30vh;border-radius:50%;border-top:1px solid rgba(122,185,229,.15);filter:blur(.3px)}.wave-one{bottom:-3vh;animation:waveMove 8s ease-in-out infinite}.wave-two{bottom:8vh;opacity:.55;animation:waveMove 11s ease-in-out infinite reverse}.wave-three{bottom:18vh;opacity:.3;animation:waveMove 14s ease-in-out infinite}
@keyframes driftGlow{to{transform:translate3d(7vw,-4vh,0) scale(1.07)}}
@keyframes waveMove{0%,100%{transform:translateX(-2%) translateY(0)}50%{transform:translateX(2%) translateY(-12px)}}
@keyframes sweepLightA{to{transform:translate3d(28vw,8vh,0) rotate(-10deg) scale(1.15);opacity:.25}}
@keyframes sweepLightB{to{transform:translate3d(-26vw,-6vh,0) rotate(8deg) scale(1.08);opacity:.22}}
.ocean-content{position:relative;z-index:3;text-align:center;opacity:0;transform:scale(.985);filter:blur(24px);will-change:opacity,transform,filter}.ocean-content h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(74px,10vw,150px);font-weight:400;line-height:.84;letter-spacing:-.07em;margin:8px 0 24px}.ocean-content>p:not(.eyebrow){color:rgba(255,255,255,.65);font-size:18px;margin:0 0 32px}

/* Footer */
.site-footer{position:relative;z-index:5;background:#101010;border-top:1px solid rgba(255,255,255,.07);padding:34px 0;color:rgba(255,255,255,.52);font-size:12px}.footer-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center}.footer-grid>div:last-child{text-align:right}.footer-links{display:flex;gap:26px}.footer-links a:hover{color:white}

@media(max-width:1100px){
  .portfolio-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}.portfolio-more{grid-column:1/-1;min-height:86px;flex-direction:row;align-items:center}.portfolio-more b{align-self:auto}
}
@media(max-width:960px){
  :root{--header-h:70px}.container{width:min(100% - 36px,var(--max))}.brand{width:158px}.menu-toggle{display:block;z-index:102}.site-nav{position:fixed;top:0;right:0;width:min(340px,86vw);height:100vh;padding:110px 34px 40px;background:rgba(17,17,17,.96);backdrop-filter:blur(18px);display:flex;flex-direction:column;align-items:flex-start;gap:26px;transform:translateX(105%);transition:transform .3s ease;z-index:101;font-size:16px}.site-nav.open{transform:none}.nav-cta{margin-top:10px}
  .hero-animated-logo{width:clamp(118px,18vw,158px);margin-bottom:20px}.hero-content h1{font-size:clamp(48px,11vw,76px)}
  .bubble-top{width:138vw;top:0}.bubble-bottom{width:150vw}
  .about-layout{grid-template-columns:1fr;gap:36px;text-align:center}.floating-terrarium{width:min(380px,62vw)}.about-copy>p:last-child{margin-inline:auto}
  .service-grid{grid-template-columns:1fr;max-width:720px;margin-inline:auto;gap:24px}.service-card{display:grid;grid-template-columns:minmax(220px,.85fr) 1fr}.service-thumb{height:100%;aspect-ratio:auto}.service-copy h3{margin-top:24px}
  .portfolio-heading{grid-template-columns:1fr;gap:18px}.portfolio-note{max-width:620px}.portfolio-grid{grid-template-columns:repeat(2,1fr);gap:22px}.portfolio-more{grid-column:1/-1}
  .testimonial-shell{padding-inline:72px}.testimonial-arrow{width:46px;height:46px}
  .footer-grid{grid-template-columns:1fr;text-align:center}.footer-grid>div:last-child{text-align:center}.footer-links{justify-content:center}
}
@media(max-width:640px){
  .section-break i{top:-2vh}
  .section-break{height:10vh;min-height:54px;max-height:82px}.section-break i{width:calc(100% - 36px);transform:scaleY(.28)}
  #about::after,#services::after,#work::after{top:auto;bottom:0;width:calc(100% - 36px);transform:translate(-50%,50%)}
  .site-header{padding-inline:18px}.brand{width:140px}.hero{min-height:560px}.hero-sticky{min-height:560px}.hero-content{padding-inline:18px}.hero-animated-logo{width:clamp(96px,28vw,126px);margin-bottom:16px}.hero-content h1{font-size:clamp(43px,13.5vw,62px)}.hero-actions{flex-direction:column;width:min(280px,100%)}.hero-actions .button{width:100%}
  .terrarium-backdrop,.terrarium-foreground{min-height:560px}.bubble-top{width:154vw;top:0}.bubble-bottom{width:178vw}
  .focus-panel{height:auto;min-height:115vh}.panel-hold{position:relative;top:auto;height:auto;min-height:100svh;padding:110px 0}.focus-panel h2{font-size:clamp(42px,13vw,58px)}.about-copy>p:last-child{font-size:16px}
  .service-card{display:block}.service-thumb{aspect-ratio:16/9;height:auto}.service-copy{padding:22px}.service-copy h3{font-size:31px;margin-top:24px}
  .portfolio-grid{grid-template-columns:repeat(2,1fr);gap:18px}.portfolio-more{grid-column:1/-1;min-height:92px}.portfolio-card h3{font-size:23px}.portfolio-placeholder{border-radius:14px}
  .metrics{grid-template-columns:1fr;margin-bottom:42px}.metric:first-child{border-right:0;border-bottom:1px solid var(--line)}.metric-number{font-size:80px}.metric{padding:28px 16px}
  .testimonial-shell{height:390px;padding:0 50px}.testimonial-content blockquote{font-size:24px;min-height:6.1em}.testimonial-arrow{width:40px;height:40px}.testimonial-arrow.previous{left:0}.testimonial-arrow.next{right:0}
  .ocean-sticky{min-height:560px}.ocean-content h2{font-size:clamp(62px,18vw,90px)}
  .ocean-section{margin-top:-132vh;min-height:175vh}
  .ocean-sticky{-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.52) 9%,#000 22%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.52) 9%,#000 22%,#000 100%)}
}
@media(max-width:440px){.portfolio-grid{grid-template-columns:1fr}.portfolio-more{grid-column:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.floating-terrarium{transform:none!important}}


/* =========================================================
   HOME PORTFOLIO LOCKED MEDIA — V1.6
   All five portfolio frames stay 2:3.
   Replace ONLY the img src value in index.html.
   ========================================================= */
.portfolio-placeholder .portfolio-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}