/* Revised visual system: pure-color cover +整理-only case studies */
.portal-revised{background:#d9ff4a;color:#10120f}.portal-solid{position:absolute;inset:0;background:linear-gradient(135deg,#d9ff4a 0%,#c8ef3d 58%,#f2ffb1 100%)}.portal-revised .portal-grid{opacity:.12;background-image:linear-gradient(rgba(0,0,0,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.18) 1px,transparent 1px);mask-image:linear-gradient(180deg,transparent 0%,#000 62%)}.portal-revised .portal-nav,.portal-revised .portal-foot{color:#161910}.portal-revised .portal-index{color:#334b00}.portal-revised .portal-copy{top:24%;transform:none}.portal-revised .eyebrow{color:#52631c}.portal-revised h1{font-size:clamp(62px,9vw,140px)}.portal-revised .portal-intro{color:#27321a}.portal-revised .enter-button{border-color:#2c3d0c}.portal-revised .enter-button:hover{background:#111;color:#d9ff4a;border-color:#111}.portal-revised .portal-note{color:#52631c}.portal-flow{position:absolute;left:5vw;right:5vw;bottom:15.5%;z-index:2;overflow:hidden;mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%)}.flow-track{display:flex;width:max-content;gap:16px;animation:flow 30s linear infinite}.flow-track img{width:clamp(170px,17vw,280px);height:clamp(72px,8vw,126px);object-fit:cover;display:block;filter:saturate(.9);border:1px solid rgba(0,0,0,.2)}@keyframes flow{to{transform:translateX(-50%)}}
.case-studies{padding-bottom:130px}.case-study{border-top:1px solid var(--line);padding:42px 0 100px;display:grid;grid-template-columns:27% 1fr;gap:6vw}.case-heading>span{font:11px 'DM Mono',monospace;letter-spacing:.1em;color:var(--accent)}.case-heading h3{font-size:clamp(30px,4vw,55px);line-height:.95;letter-spacing:-.07em;margin:35px 0 22px}.case-heading h3 em{font-family:var(--serif);font-weight:400}.case-heading p{font-size:14px;line-height:1.85;color:var(--muted);max-width:270px}.case-gallery{display:grid;gap:14px}.gallery-three{grid-template-columns:1.2fr .8fr}.gallery-three img{width:100%;height:100%;min-height:260px;object-fit:cover;display:block;background:var(--panel)}.gallery-three img:first-child{grid-row:span 2}.gallery-single{grid-template-columns:1fr}.gallery-single img{width:100%;max-height:560px;object-fit:cover;display:block}.case-study:nth-of-type(2n) .gallery-three{grid-template-columns:.8fr 1.2fr}.case-study:nth-of-type(2n) .gallery-three img:last-child{grid-row:span 2}.case-study:nth-of-type(3n) .case-gallery img{filter:saturate(.86)}
.portrait-wrap img{filter:none}.facts b{font-size:42px}
@media(max-width:760px){.portal-revised .portal-copy{top:15%}.portal-revised h1{font-size:73px}.portal-flow{left:0;right:0;bottom:17%;mask-image:linear-gradient(90deg,transparent 0%,#000 4%,#000 96%,transparent 100%)}.flow-track{gap:10px}.flow-track img{width:180px;height:78px}.case-study{display:block;padding:32px 0 70px}.case-heading h3{font-size:39px;margin:24px 0 18px}.case-heading p{max-width:100%;margin-bottom:28px}.case-gallery,.gallery-three,.case-study:nth-of-type(2n) .gallery-three{grid-template-columns:1fr 1fr;gap:8px}.gallery-three img,.case-study:nth-of-type(2n) .gallery-three img{min-height:150px}.gallery-three img:first-child,.case-study:nth-of-type(2n) .gallery-three img:last-child{grid-row:span 2}.gallery-single{grid-template-columns:1fr}.portal-revised .portal-note{display:none}}

/* Motion language inspired by the supplied Framer reference */
html{scroll-behavior:smooth}.motion-init{overflow-x:hidden}.page-transition{position:fixed;inset:0;z-index:999;pointer-events:none;display:grid;grid-template-columns:repeat(3,1fr)}.page-transition span{background:var(--accent);transform:scaleY(0);transform-origin:bottom;transition:transform .54s cubic-bezier(.76,0,.24,1)}.page-transition span:nth-child(2){transition-delay:.045s}.page-transition span:nth-child(3){transition-delay:.09s}.is-leaving .page-transition span{transform:scaleY(1)}.landing .page-transition span{background:#0b0c0d}.motion-init .portal-nav,.motion-init .portal-copy>* ,.motion-init .portal-flow,.motion-init .portal-foot,.motion-init .portal-note{opacity:0;transform:translateY(22px);filter:blur(8px)}.motion-init.is-ready .portal-nav,.motion-init.is-ready .portal-copy>* ,.motion-init.is-ready .portal-flow,.motion-init.is-ready .portal-foot,.motion-init.is-ready .portal-note{opacity:1;transform:translateY(0);filter:blur(0);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1),filter .85s cubic-bezier(.16,1,.3,1)}.motion-init.is-ready .portal-copy .eyebrow{transition-delay:.12s}.motion-init.is-ready .portal-copy h1{transition-delay:.19s}.motion-init.is-ready .portal-copy .portal-intro{transition-delay:.29s}.motion-init.is-ready .portal-copy .enter-button{transition-delay:.37s}.motion-init.is-ready .portal-flow{transition-delay:.44s}.motion-init.is-ready .portal-foot,.motion-init.is-ready .portal-note{transition-delay:.52s}.portal-revised .portal-solid{transform:scale(1.04);transition:transform 1.6s cubic-bezier(.16,1,.3,1)}.is-ready .portal-revised .portal-solid{transform:scale(1)}.portal-revised .portal-copy{transform:translate3d(calc(var(--pointer-x,0) * -10px),calc(var(--pointer-y,0) * -8px),0)}.portal-revised .portal-grid{transform:translate3d(calc(var(--pointer-x,0) * 8px),calc(var(--pointer-y,0) * 8px),0);transition:transform .25s ease-out}.flow-track{animation-duration:42s;will-change:transform}.portal-flow:hover .flow-track{animation-play-state:paused}.flow-track img{transition:width .5s cubic-bezier(.16,1,.3,1),filter .45s ease,transform .5s cubic-bezier(.16,1,.3,1);transform-origin:center}.flow-track img:hover{width:clamp(230px,24vw,390px);filter:saturate(1.06);transform:translateY(-8px)}.enter-button{position:relative;overflow:hidden}.enter-button:before{content:'';position:absolute;inset:0;background:#111;transform:translateX(-102%);transition:transform .5s cubic-bezier(.16,1,.3,1);z-index:-1}.enter-button:hover:before{transform:translateX(0)}.site-header{transition:height .45s cubic-bezier(.16,1,.3,1),background .3s ease,transform .45s cubic-bezier(.16,1,.3,1)}.site-header.is-scrolled{height:66px;background:rgba(11,12,13,.94)}.hero-heading{transform:translateY(var(--hero-shift,0));will-change:transform}.hero-orbit{transform:translate3d(calc(var(--pointer-x,0) * 18px),calc(var(--pointer-y,0) * 18px),0);transition:transform .3s ease-out}.motion-init .hero-meta,.motion-init .hero-heading>* ,.motion-init .hero-bottom,.motion-init .hero-orbit{opacity:0;transform:translateY(34px);filter:blur(10px)}.motion-init.is-ready .hero-meta,.motion-init.is-ready .hero-heading>* ,.motion-init.is-ready .hero-bottom,.motion-init.is-ready .hero-orbit{opacity:1;transform:translateY(0);filter:blur(0);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),filter .9s cubic-bezier(.16,1,.3,1)}.motion-init.is-ready .hero-heading .eyebrow{transition-delay:.1s}.motion-init.is-ready .hero-heading h1{transition-delay:.18s}.motion-init.is-ready .hero-heading .hero-summary{transition-delay:.3s}.motion-init.is-ready .hero-orbit{transition-delay:.24s}.motion-init.is-ready .hero-bottom{transition-delay:.42s}.motion-reveal{opacity:0;transform:translateY(64px);filter:blur(12px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),filter .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--reveal-order,0) * 45ms)}.motion-reveal.is-visible{opacity:1;transform:translateY(0);filter:blur(0)}.case-heading{position:sticky;top:110px;align-self:start}.case-gallery{transform:translateX(var(--case-shift,0));transition:transform .18s linear}.case-gallery img{clip-path:inset(8% 0 8% 0 round 1px);transform:translateY(var(--image-offset,0px)) scale(1.025);transition:clip-path 1s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),filter .5s ease;will-change:transform}.case-study.is-visible .case-gallery img{clip-path:inset(0 0 0 0);transform:translateY(var(--image-offset,0px)) scale(1)}.case-gallery img:hover{transform:translateY(calc(var(--image-offset,0px) - 7px)) scale(1.025);filter:saturate(1.08) brightness(1.04)}.strength{transition:background .45s ease,transform .45s cubic-bezier(.16,1,.3,1);transform-origin:bottom}.strength:hover{background:rgba(255,255,255,.22);transform:translateY(-8px)}.motion-cursor{position:fixed;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--accent);mix-blend-mode:difference;z-index:1000;pointer-events:none;transform:translate3d(calc(var(--cursor-x,-50px) - 50%),calc(var(--cursor-y,-50px) - 50%),0);transition:width .25s ease,height .25s ease,opacity .25s ease}.motion-cursor.is-active{width:44px;height:44px}.contact-inner h2 em{display:inline-block;transition:transform .55s cubic-bezier(.16,1,.3,1)}.contact-inner:hover h2 em{transform:translateX(2vw)}
@media(max-width:760px){.case-heading{position:static}.case-gallery{transform:none}.motion-cursor{display:none}.flow-track img:hover{width:180px;transform:none}.motion-init .hero-heading>*{transform:translateY(22px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.motion-reveal,.motion-init .portal-nav,.motion-init .portal-copy>* ,.motion-init .portal-flow,.motion-init .portal-foot,.motion-init .portal-note,.motion-init .hero-meta,.motion-init .hero-heading>* ,.motion-init .hero-bottom,.motion-init .hero-orbit{opacity:1;transform:none;filter:none}.case-gallery{transform:none}.page-transition{display:none}}

/* Complete-image layout, dedicated motion lane, and soft audio controls */
.portal-revised{
  min-height:100svh;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto 66px;
  padding-top:72px;
}
.portal-revised .portal-copy{
  position:relative;
  grid-row:1;
  align-self:center;
  left:auto;
  top:auto;
  margin:0 5vw 2vh 11vw;
  transform:translate3d(calc(var(--pointer-x,0) * -10px),calc(var(--pointer-y,0) * -8px),0);
}
.portal-flow{
  position:relative;
  grid-row:2;
  left:auto;
  right:auto;
  bottom:auto;
  width:100%;
  min-height:clamp(142px,21vh,220px);
  display:flex;
  align-items:center;
  z-index:1;
  padding:14px 0;
  border-top:1px solid rgba(0,0,0,.16);
  border-bottom:1px solid rgba(0,0,0,.16);
  background:rgba(255,255,255,.08);
  mask-image:linear-gradient(90deg,transparent 0%,#000 5%,#000 95%,transparent 100%);
}
.flow-track{gap:18px;align-items:center;animation-duration:46s}
.flow-track img{
  width:auto;
  height:clamp(112px,17vh,184px);
  max-width:none;
  flex:0 0 auto;
  object-fit:contain;
  background:#111;
  padding:7px;
  border:1px solid rgba(0,0,0,.28);
  transition:filter .4s ease,transform .45s cubic-bezier(.16,1,.3,1);
}
.flow-track img:hover{width:auto;filter:saturate(1.04);transform:translateY(-5px)}
.portal-nav-actions,.header-actions{display:inline-flex;align-items:center;gap:22px}
.sound-toggle{
  appearance:none;
  border:0;
  border-bottom:1px solid currentColor;
  padding:3px 0;
  background:transparent;
  color:inherit;
  font:10px 'DM Mono',monospace;
  letter-spacing:.1em;
  cursor:pointer;
  opacity:.72;
  transition:opacity .25s ease,color .25s ease;
}
.sound-toggle:hover,.sound-toggle[aria-pressed="true"]{opacity:1;color:var(--accent)}
.landing .sound-toggle[aria-pressed="true"]{color:#334b00}
.gallery-three,.case-study:nth-of-type(2n) .gallery-three{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
}
.gallery-three img,.case-study:nth-of-type(2n) .gallery-three img,
.gallery-single img{
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  grid-row:auto;
  object-fit:contain;
  clip-path:none!important;
  transform:none!important;
  background:var(--panel);
}
.gallery-three img:first-child,.case-study:nth-of-type(2n) .gallery-three img:first-child{
  grid-column:1 / -1;
  grid-row:auto;
}
.case-study:nth-of-type(2n) .gallery-three img:last-child{grid-row:auto}
.case-gallery img:hover{filter:saturate(1.04) brightness(1.025);transform:translateY(-5px)!important}
.portrait-wrap img{height:auto;object-fit:contain}

@media(max-width:760px){
  .portal-revised{grid-template-rows:minmax(0,1fr) auto 52px;padding-top:56px}
  .portal-revised .portal-copy{top:auto;left:auto;margin:0 22px 10px;align-self:center}
  .portal-revised h1{font-size:clamp(57px,18vw,72px);margin-bottom:22px}
  .portal-revised .portal-intro{font-size:13px;line-height:1.65;margin-bottom:22px}
  .portal-flow{left:auto;right:auto;bottom:auto;min-height:120px;padding:9px 0}
  .flow-track{gap:10px}
  .flow-track img{width:auto;height:102px;max-width:none;padding:5px}
  .flow-track img:hover{width:auto;transform:none}
  .portal-nav-actions{gap:12px}
  .header-actions{gap:12px}
  .header-actions .header-link{display:none}
  .header-actions .sound-toggle{display:inline-block}
  .gallery-three,.case-study:nth-of-type(2n) .gallery-three{grid-template-columns:1fr}
  .gallery-three img:first-child,.case-study:nth-of-type(2n) .gallery-three img:first-child{grid-column:auto}
}

/* Interactive 3D cover ring */
.portal-ring-page{display:block;min-height:100svh;padding:0;overflow:hidden;background:#d9ff4a}
.portal-ring-page .portal-copy{position:absolute;z-index:6;left:5vw;top:19%;width:min(36vw,510px);margin:0;transform:none}
.portal-ring-page h1{font-size:clamp(58px,7.5vw,118px);line-height:.78;margin-bottom:28px}
.portal-ring-page .portal-intro{max-width:370px}
.portal-ring-page .portal-note{z-index:7}
.ring-stage{position:absolute;z-index:4;left:34%;right:1%;top:9%;bottom:7%;perspective:1250px;perspective-origin:50% 50%;touch-action:none;cursor:grab;user-select:none}
.ring-stage.is-dragging{cursor:grabbing}
.ring-glow{position:absolute;left:50%;top:50%;width:58%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,255,255,.5),rgba(255,255,255,0) 67%);filter:blur(24px);opacity:.5;pointer-events:none}
.ring-shell{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.ring-carousel{position:absolute;inset:0;transform-style:preserve-3d}
.ring-item{position:absolute;left:0;top:0;width:clamp(112px,11vw,180px);height:auto;aspect-ratio:var(--card-ratio);transform:translate(-50%,-50%) rotateY(var(--angle)) translateZ(var(--ring-radius));transform-style:preserve-3d}
.ring-card{position:relative;width:100%;height:100%;padding:0;border:0;background:transparent;color:#10120f;cursor:zoom-in;transition:transform .45s cubic-bezier(.16,1,.3,1),filter .35s ease;transform-style:preserve-3d;filter:drop-shadow(0 20px 26px rgba(8,13,0,.24))}
.ring-card img{display:block;width:100%;height:100%;object-fit:contain;background:transparent}
.ring-card>span{position:absolute;left:7px;right:7px;bottom:7px;min-height:25px;display:flex;align-items:center;gap:9px;padding:5px 7px;background:rgba(217,255,74,.9);color:#10120f;font:9px 'DM Mono',monospace;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(7px)}
.ring-card>span b{color:#334b00;font-weight:600}
.ring-item:hover{z-index:20}
.ring-item:hover .ring-card,.ring-card:focus-visible{transform:translateZ(58px) scale(1.34);filter:saturate(1.08) drop-shadow(0 34px 42px rgba(4,8,0,.4))}
.ring-hint{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(560px,86%);display:flex;justify-content:space-between;margin:0;padding-top:9px;border-top:1px solid rgba(0,0,0,.22);font:9px 'DM Mono',monospace;letter-spacing:.08em;color:#34410d}
.motion-init .ring-stage{opacity:0;transform:translateY(22px) scale(.96);filter:blur(10px)}
.motion-init.is-ready .ring-stage{opacity:1;transform:none;filter:none;transition:opacity 1s .34s cubic-bezier(.16,1,.3,1),transform 1s .34s cubic-bezier(.16,1,.3,1),filter 1s .34s cubic-bezier(.16,1,.3,1)}

/* Full project archive: Primefold-inspired layered editorial cards */
.project-list{margin-top:68px}
.project-case{grid-template-columns:minmax(220px,25%) minmax(0,1fr);gap:clamp(34px,6vw,92px);padding:64px 0 148px}
.project-case .case-heading small{display:block;margin-top:30px;font:9px 'DM Mono',monospace;letter-spacing:.1em;color:#777}
.project-visuals{min-width:0}
.work-shot{margin:0 0 18px;background:#111;border:1px solid rgba(255,255,255,.1);break-inside:avoid;box-shadow:0 16px 45px rgba(0,0,0,.12);transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s ease}
.work-shot:hover{transform:translateY(-5px);box-shadow:0 24px 68px rgba(0,0,0,.22)}
.work-shot figcaption{min-height:48px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.1);background:#111;color:#f2f2ee}
.work-shot figcaption span,.work-shot figcaption small{font:9px 'DM Mono',monospace;letter-spacing:.08em;color:#8f948c}
.work-shot figcaption b{font-size:12px;font-weight:500;letter-spacing:.02em}
.image-open{position:relative;display:block;width:100%;padding:0;border:0;background:#0b0c0d;cursor:zoom-in;text-align:left}
.image-open img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;background:#0b0c0d;transform:none!important;clip-path:none!important}
.view-mark{position:absolute;right:10px;bottom:10px;padding:7px 9px;background:rgba(11,12,13,.76);border:1px solid rgba(255,255,255,.2);color:#fff;font:8px 'DM Mono',monospace;letter-spacing:.08em;opacity:0;transform:translateY(5px);transition:opacity .25s ease,transform .25s ease;backdrop-filter:blur(8px)}
.image-open:hover .view-mark,.image-open:focus-visible .view-mark{opacity:1;transform:none}
.project-lead{margin-bottom:24px}
.project-lead figcaption{background:var(--accent);color:#0b0c0d;border-color:transparent}
.project-lead figcaption span,.project-lead figcaption small{color:#263500}
.project-masonry{columns:2;column-gap:18px}
.project-masonry .work-shot:nth-child(4n+2){margin-top:34px}
.project-case:nth-child(even) .project-lead figcaption{background:#e9e8e0}
.project-case:nth-child(3n) .work-shot{border-radius:0 18px 0 0;overflow:hidden}

/* Original-image viewer */
.lightbox-open{overflow:hidden}
.image-lightbox{position:fixed;inset:0;z-index:1500;display:grid;place-items:center;padding:58px 5vw 28px;background:rgba(5,6,6,.92);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transition:opacity .36s ease,visibility .36s ease}
.image-lightbox.is-open{opacity:1;visibility:visible}
.lightbox-close{position:absolute;right:24px;top:20px;border:0;border-bottom:1px solid #fff;background:transparent;color:#fff;padding:5px 0;font:10px 'DM Mono',monospace;letter-spacing:.1em;cursor:pointer}
.lightbox-frame{display:grid;grid-template-rows:minmax(0,1fr) auto;width:100%;height:100%;place-items:center}
.lightbox-frame img{display:block;max-width:100%;max-height:calc(100vh - 125px);width:auto;height:auto;object-fit:contain;box-shadow:0 28px 100px rgba(0,0,0,.45)}
.lightbox-frame>div{width:min(100%,1100px);display:flex;justify-content:space-between;gap:20px;padding-top:15px;color:#fff}
.lightbox-frame span{font:10px 'DM Mono',monospace;letter-spacing:.09em;color:#a9aea4}
.lightbox-frame b{font-size:13px;font-weight:500}

/* Audible-by-design control state */
.sound-toggle{min-width:64px;text-align:center}
.sound-toggle.needs-unlock{animation:soundPulse 1.8s ease-in-out infinite}
@keyframes soundPulse{50%{opacity:1;text-shadow:0 0 14px currentColor}}
.contact-phone{display:block;width:max-content;margin-top:10px;color:var(--text);font:12px 'DM Mono',monospace;letter-spacing:.08em;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:4px;transition:color .25s ease,border-color .25s ease}
.contact-phone:hover{color:var(--accent);border-color:var(--accent)}
.contact-methods{display:flex;flex-direction:column;align-items:flex-start;width:max-content;max-width:100%;margin:0 auto}
.contact-phone-large{margin:18px 0 0;color:#fff;font-size:14px;border-color:rgba(255,255,255,.35)}

@media(max-width:900px){
  .portal-ring-page .portal-copy{left:4vw;width:42vw}
  .ring-stage{left:35%;right:-8%}
  .project-case{grid-template-columns:1fr;padding-bottom:110px}
  .project-case .case-heading{position:relative;top:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px 30px;margin-bottom:8px}
  .project-case .case-heading>span,.project-case .case-heading h3{grid-column:1}
  .project-case .case-heading p,.project-case .case-heading small{grid-column:2;grid-row:1 / span 2;margin:0;align-self:end}
}

@media(max-width:760px){
  .portal-ring-page{min-height:100svh;display:grid;grid-template-rows:minmax(315px,45svh) minmax(300px,1fr) 50px;padding-top:54px}
  .portal-ring-page .portal-copy{position:relative;grid-row:1;left:auto;top:auto;width:auto;margin:28px 22px 0;align-self:start;z-index:6}
  .portal-ring-page h1{font-size:clamp(50px,15vw,68px);margin-bottom:18px}
  .portal-ring-page .portal-intro{font-size:12px;margin-bottom:17px}
  .portal-ring-page .enter-button{padding:11px 14px}
  .ring-stage{position:relative;grid-row:2;left:auto;right:auto;top:auto;bottom:auto;min-height:300px;perspective:900px}
  .ring-item{width:104px;height:auto;aspect-ratio:var(--card-ratio)}
  .ring-card{padding:0}.ring-card img{height:100%}.ring-card>span{left:4px;right:4px;bottom:4px;min-height:22px;font-size:7px;padding:4px 5px}
  .ring-item:hover .ring-card,.ring-card:focus-visible{transform:translateZ(32px) scale(1.12)}
  .ring-hint{bottom:6px;font-size:7px}
  .portal-ring-page .portal-foot{grid-row:3;position:relative;inset:auto}
  .project-list{margin-top:45px}
  .project-case{display:block;padding:42px 0 88px}
  .project-case .case-heading{display:block;margin-bottom:28px}
  .project-case .case-heading h3{font-size:39px}
  .project-case .case-heading p{margin-bottom:18px}
  .project-case .case-heading small{margin-top:0}
  .project-masonry{columns:1}
  .project-masonry .work-shot:nth-child(4n+2){margin-top:0}
  .work-shot{margin-bottom:13px}
  .work-shot figcaption{grid-template-columns:auto 1fr;min-height:44px}
  .work-shot figcaption small{display:none}
  .view-mark{opacity:1;transform:none}
  .image-lightbox{padding:52px 12px 18px}
  .lightbox-frame img{max-height:calc(100vh - 112px)}
}

@media(prefers-reduced-motion:reduce){.sound-toggle.needs-unlock{animation:none}.ring-shell{transform:rotateX(-12deg) rotateY(-18deg) rotateZ(-5deg)!important}}

/* iOS / Safari viewport, safe-area and touch compatibility */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:#0b0c0d}
body{min-height:100vh;min-height:100dvh;overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}
.portal-ring-page{min-height:100vh;min-height:100svh;min-height:100dvh}
.portal-nav{top:max(34px,env(safe-area-inset-top))}
.portal-foot{bottom:max(28px,env(safe-area-inset-bottom))}
.ring-stage,.ring-card{-webkit-user-select:none;user-select:none}
.site-header,.ring-card>span,.image-lightbox,.view-mark{-webkit-backdrop-filter:blur(12px)}
.image-lightbox{height:100vh;height:100dvh;padding-bottom:max(28px,env(safe-area-inset-bottom))}
.lightbox-close{top:max(20px,env(safe-area-inset-top));right:max(24px,env(safe-area-inset-right))}
.lightbox-frame img{max-height:calc(100dvh - 125px)}
@media(max-width:760px){
  .portal-ring-page{min-height:100vh;min-height:100svh;min-height:100dvh;padding-top:max(54px,env(safe-area-inset-top))}
  .portal-nav{left:max(22px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right));top:max(18px,env(safe-area-inset-top))}
  .portal-foot{padding-bottom:env(safe-area-inset-bottom)}
  .image-lightbox{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-bottom:max(18px,env(safe-area-inset-bottom))}
  .lightbox-frame img{max-height:calc(100dvh - 112px)}
}

/* Refined editorial system: restrained surfaces, quieter hierarchy, richer transitions */
html{background:#efeee8}
@view-transition{navigation:auto}
::view-transition-old(root){animation:pageOld .7s cubic-bezier(.76,0,.24,1) both}
::view-transition-new(root){animation:pageNew .9s .08s cubic-bezier(.16,1,.3,1) both}
@keyframes pageOld{to{opacity:.2;transform:scale(.985);filter:blur(8px)}}
@keyframes pageNew{from{opacity:0;clip-path:inset(100% 0 0)}to{opacity:1;clip-path:inset(0)}}

.page-transition{
  display:block;
  background:#11120f;
  color:#f2f1ea;
  transform:translateY(101%);
  transition:transform .82s cubic-bezier(.76,0,.24,1);
  will-change:transform;
}
.is-entering .page-transition{transform:translateY(0)}
.is-entering.is-ready .page-transition{transform:translateY(-101%)}
.is-leaving .page-transition{transform:translateY(0)!important}
.transition-surface{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-between;padding:clamp(24px,4vw,64px);overflow:hidden}
.transition-surface:before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.18);transform:scaleX(0);transform-origin:left}
.is-entering .transition-surface:before,.is-leaving .transition-surface:before{animation:transitionRule .72s .12s cubic-bezier(.16,1,.3,1) forwards}
@keyframes transitionRule{to{transform:scaleX(1)}}
.page-transition .transition-surface span{background:none;transform:none;transition:none;color:#969991;font:10px 'DM Mono',monospace;letter-spacing:.14em}
.transition-surface b{font-size:clamp(54px,13vw,190px);font-weight:550;line-height:.72;letter-spacing:-.09em;transform:translateY(115%);transition:transform .72s .08s cubic-bezier(.16,1,.3,1)}
.is-entering .transition-surface b,.is-leaving .transition-surface b{transform:translateY(0)}
.transition-surface i{position:absolute;right:clamp(24px,4vw,64px);top:clamp(24px,4vw,64px);width:9px;height:9px;border-radius:50%;background:#9bb168;box-shadow:0 0 0 9px rgba(155,177,104,.12)}

.landing{--accent:#66794b;--text:#11120f;--muted:#62645e;--line:rgba(17,18,15,.18)}
.portal-ring-page{background:#ebeae3;color:#11120f}
.portal-ring-page .portal-solid{background:radial-gradient(circle at 76% 44%,rgba(255,255,255,.72),transparent 32%),linear-gradient(135deg,#efeee8 0%,#e5e4dc 100%)}
.portal-ring-page .portal-grid{opacity:.09;background-size:96px 96px;mask-image:linear-gradient(90deg,transparent,#000 45%,#000)}
.portal-ring-page .eyebrow,.portal-ring-page .portal-intro,.portal-ring-page .portal-foot,.portal-ring-page .portal-note{color:#555851}
.portal-index{color:#52633b}
.portal-ring-page h1{font-weight:520;letter-spacing:-.075em}
.portal-ring-page h1 em{color:#566740}
.enter-button{border-color:rgba(17,18,15,.42);background:transparent;color:#11120f;border-radius:999px;padding-left:26px;padding-right:18px}
.enter-button:before{background:#11120f}
.enter-button:hover{color:#f2f1ea;border-color:#11120f;background:transparent}
.ring-glow{background:radial-gradient(circle,rgba(255,255,255,.82),rgba(255,255,255,0) 68%);opacity:.7}
.ring-card{filter:drop-shadow(0 18px 24px rgba(30,31,26,.16))}
.ring-card>span{background:rgba(243,242,235,.9);color:#171814;border:1px solid rgba(17,18,15,.12)}
.ring-card>span b{color:#66794b}
.ring-hint{color:#555c48;border-color:rgba(17,18,15,.18)}
.ring-item:hover .ring-card,.ring-card:focus-visible{filter:saturate(1.03) drop-shadow(0 32px 42px rgba(30,31,26,.24))}

.portfolio-page{
  --bg:#efeee8;
  --panel:#e5e4dc;
  --text:#141512;
  --muted:#686a64;
  --line:rgba(20,21,18,.16);
  --accent:#66794b;
  background:var(--bg);
  color:var(--text);
}
.portfolio-page .site-header{height:78px;background:rgba(239,238,232,.84);border-color:var(--line);color:var(--text);backdrop-filter:blur(18px) saturate(1.2)}
.portfolio-page .site-header.is-scrolled{height:62px;background:rgba(239,238,232,.94)}
.portfolio-page .brand span,.portfolio-page .header-link,.portfolio-page .text-link,.portfolio-page .accent{color:var(--accent)}
.portfolio-page .site-nav{color:#555852}
.portfolio-page .hero-section{min-height:calc(100vh - 78px);border-bottom:1px solid var(--line)}
.portfolio-page .hero-section h1{font-weight:520;letter-spacing:-.08em}
.portfolio-page .hero-summary{color:#555852}
.portfolio-page .hero-orbit{opacity:.52;border-color:rgba(20,21,18,.25);color:#65685f;animation-duration:38s}
.portfolio-page .hero-orbit:before{border-color:rgba(20,21,18,.12)}
.portfolio-page .hero-orbit:after{border-color:#7b8e58;box-shadow:0 0 70px rgba(102,121,75,.16)}
.portfolio-page .about-section,.portfolio-page .works-section{background:var(--bg)}
.portfolio-page .portrait-wrap img{filter:saturate(.82) contrast(1.02)}
.portfolio-page .portrait-tag{background:rgba(239,238,232,.82);color:#171814;border:1px solid rgba(20,21,18,.16);backdrop-filter:blur(10px)}
.portfolio-page .facts b{color:var(--accent)}
.portfolio-page .project-case{border-top:1px solid var(--line)}
.portfolio-page .case-heading>span{color:#6b6e66}
.portfolio-page .case-heading small{color:#7b7d76}
.work-shot{background:transparent;border-color:rgba(20,21,18,.15);box-shadow:none;border-radius:2px;overflow:hidden}
.work-shot:hover{transform:translateY(-3px);box-shadow:0 20px 50px rgba(37,38,32,.1)}
.work-shot figcaption{background:#e9e8e1;color:#171814;border-color:rgba(20,21,18,.13)}
.work-shot figcaption span,.work-shot figcaption small{color:#73766d}
.image-open{background:#e7e6df}
.image-open img{background:transparent}
.project-lead figcaption,.project-case:nth-child(even) .project-lead figcaption{background:#151613;color:#f2f1ea}
.project-lead figcaption span,.project-lead figcaption small,.project-case:nth-child(even) .project-lead figcaption span,.project-case:nth-child(even) .project-lead figcaption small{color:#a9ada2}
.project-case:nth-child(3n) .work-shot{border-radius:2px}
.view-mark{background:rgba(20,21,18,.78);border-color:rgba(255,255,255,.18)}

.project-films{margin-top:22px}
.project-films:empty{display:none}
.work-video{margin-top:28px;background:#11120f;border-color:#11120f}
.work-video figcaption{background:#11120f;color:#f2f1ea;border-color:rgba(255,255,255,.14)}
.work-video figcaption span,.work-video figcaption small{color:#aeb2a8}
.video-frame{position:relative;background:#11120f;overflow:hidden}
.video-frame video{display:block;width:100%;height:auto;max-height:82vh;object-fit:contain;background:#11120f}
.video-badge{position:absolute;right:14px;top:14px;padding:8px 10px;border:1px solid rgba(255,255,255,.35);background:rgba(17,18,15,.6);color:#fff;font:9px 'DM Mono',monospace;letter-spacing:.1em;pointer-events:none;backdrop-filter:blur(8px)}

.portfolio-page .process-section{background:#151613;color:#f1f0e9}
.portfolio-page .process-section .section-kicker{border-color:rgba(255,255,255,.18);color:#c9cbc2}
.portfolio-page .process-section .section-kicker span:last-child,.portfolio-page .process-heading p,.portfolio-page .strength p{color:#a9ada2}
.portfolio-page .strength-grid,.portfolio-page .strength{border-color:rgba(255,255,255,.16)}
.portfolio-page .strength span{color:#9caf72}
.portfolio-page .strength:hover{background:rgba(255,255,255,.045);transform:translateY(-4px)}
.portfolio-page .contact-section{background:#efeee8}
.portfolio-page .contact-button{color:#52633b;border-color:#52633b}
.portfolio-page .contact-phone-large{color:#171814;border-color:rgba(20,21,18,.3)}
.portfolio-page .motion-cursor{background:#6d8050}
.motion-reveal{transform:translateY(42px);filter:blur(7px);transition-duration:.82s}

@media(max-width:760px){
  .transition-surface{align-items:center;padding:max(22px,env(safe-area-inset-left))}
  .transition-surface b{font-size:18vw}
  .page-transition .transition-surface span{position:absolute;left:22px;bottom:max(22px,env(safe-area-inset-bottom))}
  .portfolio-page .site-header{height:66px}
  .portfolio-page .hero-section{min-height:calc(100svh - 66px)}
  .portal-ring-page .portal-grid{background-size:64px 64px}
  .project-films{margin-top:14px}
  .work-video{margin-top:18px}
  .video-frame video{max-height:72vh}
}

@media(prefers-reduced-motion:reduce){
  .page-transition{display:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}