@font-face{font-family:'Space Grotesk';src:url('fonts/SpaceGrotesk-Variable.ttf') format('truetype');font-style:normal;font-weight:300 700;font-display:swap}
@font-face{font-family:Inter;src:url('fonts/Inter-Variable.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
:root{--ground:#121212;--surface:#191919;--ink:#f7f7f5;--muted:#a5a5a3;--line:#454545;--focus:#c7a4ff;--edge:clamp(24px,5.55vw,88px);--body-font:'Space Grotesk',Arial,sans-serif;--display-font:Inter,Arial,sans-serif;color-scheme:dark;font-family:var(--body-font)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:var(--ground);color:var(--ink)}body{overflow:hidden;-webkit-font-smoothing:antialiased}button,a,input{touch-action:manipulation}button{font:inherit;cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus);outline-offset:5px}button:disabled{opacity:.4;cursor:default}::selection{background:#e0d0ff;color:#121212}[hidden]{display:none!important}
body:after{content:'';position:fixed;inset:0;pointer-events:none;z-index:100;background-image:url('assets/studio-grain.svg');opacity:.11;mix-blend-mode:screen}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;padding:0;margin:-1px;border:0}.skip-link{position:fixed;z-index:150;left:24px;top:16px;padding:15px 20px;background:white;color:#121212;transform:translateY(-160%)}.skip-link:focus{transform:none}
.site-header{position:fixed;left:var(--edge);right:var(--edge);top:20px;z-index:40;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.header-left{display:flex;gap:5px}.control-box{height:60px;border:1px solid var(--line);border-radius:5px;background:#141414e8;display:inline-flex;align-items:center;justify-content:center;pointer-events:auto;transition:background .22s,border-color .22s,transform .22s;color:#fff}.control-box:hover{background:#242424;border-color:#777}.control-box:active{transform:translateY(1px)}.brand{width:184px;gap:10px;font-size:18px;font-weight:650;letter-spacing:-.8px;line-height:1.03}.brand img{width:39px;height:37px;object-fit:contain;filter:invert(1);mix-blend-mode:screen}.brand-small{display:block;font-size:13px;letter-spacing:.6px;font-weight:450;margin-top:4px}.menu-toggle{gap:18px;width:120px;text-transform:uppercase;font-size:14px;font-weight:700}.menu-chevron{position:relative;width:15px;height:15px;border-bottom:1px solid #fff;border-right:1px solid #fff;transform:rotate(45deg) translate(-2px,-3px);transition:transform .35s}.menu-toggle[aria-expanded=true] .menu-chevron{transform:rotate(225deg) translate(-2px,-3px)}.talk-button{width:182px;text-transform:uppercase;font-size:14px;font-weight:700}
.gallery-shell{position:fixed;inset:0;transition:filter .5s,opacity .5s}.project-world{position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:pinch-zoom;outline-offset:-6px}#project-plane{position:absolute;inset:0}.project-world.is-dragging,.project-world.is-dragging .project-tile{cursor:grabbing}.project-tile{position:absolute;left:0;top:0;display:block;padding:0;border:0;background:none;text-align:left;color:#fff;cursor:pointer;will-change:transform;touch-action:pinch-zoom}.project-tile[aria-hidden=true]{pointer-events:auto}.project-cover{position:relative;display:block;width:100%;height:100%;aspect-ratio:1/1.5685;overflow:hidden;border-radius:4px;background:#1a1a1a;isolation:isolate;container-type:inline-size;transition:box-shadow .35s,filter .35s}.project-tile:focus-visible{outline:none}.project-tile:hover .project-cover,.project-tile:focus-visible .project-cover{box-shadow:0 0 26px #a16bff60}.project-tile:focus-visible .project-cover{outline:2px solid var(--focus);outline-offset:4px}.project-tile.is-moving .project-cover{box-shadow:none}.project-tile .project-meta{position:absolute;top:100%;left:0;right:-10px;padding-top:14px;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;pointer-events:none}.project-tile:hover .project-meta,.project-tile:focus-visible .project-meta{opacity:1;transform:none}.project-meta strong{display:block;font-family:var(--display-font);font-size:clamp(17px,1.5vw,23px);font-weight:900;letter-spacing:-.7px;text-transform:uppercase;line-height:1.05}.project-meta span{display:block;font-size:14px;color:var(--muted);line-height:1.25;margin-top:8px}
.cover-image img{width:100%;height:100%;object-fit:contain;display:block;user-select:none;pointer-events:none}.cover-rate,.cover-payment,.cover-renewal,.cover-home{background:#eef2f5}.cover-advantage{background:#1a1307}.cover-realty{background:#10170d}.cover-atlas .cover-visual{position:absolute;inset:0;background-image:url('assets/project-art-atlas.png');background-size:200% 200%;animation:art-drift 17s ease-in-out infinite alternate;transform-origin:50% 55%}.cover-pulse .cover-visual{background-position:0 0}.cover-buildbook .cover-visual{background-position:100% 0}.cover-outloud .cover-visual{background-position:0 100%}.cover-focus .cover-visual{background-position:100% 100%}.cover-atlas .cover-name{position:absolute;left:9%;right:7%;top:9%;font-size:clamp(21px,2vw,29px);font-weight:650;letter-spacing:-1px;line-height:1.05;z-index:2}.cover-pulse .cover-name,.cover-focus .cover-name{color:white}.cover-buildbook .cover-name{color:#151c2a}.cover-outloud .cover-name{color:#34261e}.cover-atlas .cover-line{position:absolute;left:9%;right:9%;bottom:8%;font-size:12px;line-height:1.25;color:#fff;z-index:2}.cover-buildbook .cover-line{color:#17202c}.cover-outloud .cover-line{color:#34261e}.cover-focus .cover-line{color:#dcefdc}
.cover-type{font-family:var(--display-font);padding:9%;display:flex;flex-direction:column;justify-content:space-between}.cover-type .type-name{font-family:var(--body-font);font-size:22px;font-weight:600;letter-spacing:-.7px;line-height:1.05;position:relative;z-index:1}.cover-type .type-footer{font-family:var(--body-font);font-size:12px;line-height:1.1;position:relative;z-index:1}.cover-modern{background:#dcf1f7;color:#103a81}.modern-symbol{position:absolute;left:18%;right:18%;top:36%;height:32%;transform:rotate(-18deg)}.modern-symbol i{position:absolute;inset:0;border-radius:14px;background:#184fba;transform:translateY(-18%)}.modern-symbol i:nth-child(2){background:#4a81dc;transform:translateY(0)}.modern-symbol i:nth-child(3){background:#a2c3ef;transform:translateY(18%)}.cover-attendie{background:#eddf42;color:#172016}.attendie-symbol{position:absolute;left:14%;top:30%;font-weight:850;font-size:clamp(110px,13vw,180px);line-height:1;letter-spacing:-15px;transform:rotate(-12deg);color:#18231a}.cover-iflip{background:#d84439;color:#fff7dc}.iflip-symbol{position:absolute;left:10%;right:10%;top:33%;font-weight:900;font-size:clamp(60px,6.6vw,100px);letter-spacing:-6px;line-height:.9}.iflip-symbol span{display:block;font-size:.5em;letter-spacing:-2px}
.gallery-footer{position:fixed;z-index:20;left:var(--edge);right:var(--edge);bottom:23px;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none;gap:24px}.studio-caption{font-size:14px;line-height:1.45;margin:0;text-shadow:0 1px 8px #000,0 1px 16px #000;background:#121212b8;padding:8px 10px;margin-left:-10px;border-radius:3px;pointer-events:none}.studio-caption span{color:#b5b5b4;font-size:12px}.drag-hint{font-size:13px;line-height:1.2;margin:0 0 10px;transition:opacity .4s;white-space:nowrap;text-shadow:0 1px 8px #000}.drag-hint span{font-size:22px;vertical-align:-2px;margin-right:6px}.gallery-tools{display:flex;gap:5px;pointer-events:auto}.gallery-tools .control-box{height:46px;background:#151515ef}.view-toggle{width:48px}.filter-toggle{width:106px;font-size:14px;gap:14px}.filter-toggle span{font-size:11px;color:#b9b9b8}.view-icon{width:17px;display:flex;flex-direction:column;gap:4px}.view-icon i{display:block;height:2px;background:#eee}.view-toggle[aria-pressed=true] .view-icon{height:18px;display:grid;grid-template-columns:1fr 1fr;gap:3px}.view-toggle[aria-pressed=true] .view-icon i{height:7px}.view-toggle[aria-pressed=true] .view-icon i:last-child{grid-column:1/3}
.panel-shade{position:fixed;inset:0;z-index:30;background:#0007;animation:shade-in .2s}.panel-open .gallery-shell{filter:blur(6px) brightness(.45);pointer-events:none}.panel-open .gallery-footer{opacity:.25;pointer-events:none}.main-menu{position:fixed;top:85px;left:calc(var(--edge) + 189px);width:350px;z-index:45;border:1px solid var(--line);border-radius:5px;background:#111f;overflow:hidden;animation:menu-in .25s ease-out}.main-menu>button:not(.menu-feature):not(.motion-toggle){border:0;border-bottom:1px solid #363636;background:none;width:100%;display:block;text-align:left;padding:16px;font-size:20px;text-transform:uppercase;letter-spacing:-.7px;color:#bdbdbb;transition:background .2s,color .2s}.main-menu>button:hover{background:#222!important;color:#fff!important}.menu-note{padding:20px 16px;display:flex;align-items:flex-end;justify-content:space-between;gap:18px}.menu-note p{font-size:16px;line-height:1.35;margin:0}.menu-note span{font-size:12px;color:var(--muted);white-space:nowrap}.menu-feature{border:0;margin:0 15px;width:calc(100% - 30px);height:140px;display:flex;align-items:flex-end;justify-content:space-between;padding:18px;background:#122843 url('assets/project-art-atlas.png') left top/200% 200%;font-size:20px;text-align:left}.menu-feature span{position:relative;text-shadow:0 1px 6px #000}.motion-toggle{width:100%;border:0;background:none;color:#a5a5a3;font-size:12px;padding:18px;text-align:left}
.filter-panel{position:fixed;z-index:45;right:var(--edge);bottom:80px;width:300px;padding:20px;background:#151515;border:1px solid var(--line);border-radius:5px;animation:menu-in .2s}.filter-panel>p{font-size:14px;color:var(--muted);margin:0 0 15px}.filter-options{display:grid;gap:3px}#filter-options button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 10px;border:0;background:none;font-size:19px;text-align:left}#filter-options button[aria-pressed=true]{background:#eee;color:#121212}#filter-options button span{font-size:13px;opacity:.65}#filter-options button:hover{background:#303030}#filter-options button[aria-pressed=true]:hover{background:white}
.project-list{position:absolute;inset:0;overflow-y:auto;padding:145px var(--edge) 150px;overscroll-behavior:contain}.list-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:35px;margin-bottom:60px}.list-intro h2{font-family:var(--display-font);font-size:clamp(42px,5.5vw,74px);line-height:.98;letter-spacing:-3px;font-weight:900;margin:0}.list-intro p{font-size:18px;line-height:1.5;color:#b9b9b7;margin:0}.list-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:55px 35px}.list-card{display:block;width:100%;border:0;background:none;padding:0;text-align:left}.list-card .project-cover{height:auto;aspect-ratio:1/1.3}.list-card .project-meta{padding-top:18px}.list-card:hover .project-cover{box-shadow:0 0 25px #a16bff35}.list-card .cover-name{font-size:27px}.list-mode .studio-caption{opacity:0}.list-mode .drag-hint{opacity:0!important}.list-mode .gallery-footer{right:var(--edge);left:auto}.empty-state{font-size:22px;padding:30px 0;color:var(--muted)}
.noscript-message{position:fixed;inset:0;z-index:120;padding:80px 30px;background:#121212}.noscript-message a{display:block;padding:20px 0;color:white}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}@keyframes shade-in{from{opacity:0}to{opacity:1}}@keyframes art-drift{from{transform:scale(1)}to{transform:scale(1.045)}}
@media(max-width:900px){.list-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}.list-intro{align-items:flex-start}.studio-caption{font-size:12px}.studio-caption span{display:none}.drag-hint{display:none}.main-menu{left:var(--edge);width:350px}}
@media(max-width:600px){:root{--edge:23px}.site-header{top:14px;right:23px}.control-box{height:52px}.brand{width:162px;font-size:16px;gap:8px}.brand img{width:33px;height:33px}.brand-small{font-size:11px;margin-top:3px}.menu-toggle{width:108px;font-size:13px;gap:15px}.talk-button{display:none}.header-left{gap:5px}.main-menu{top:72px;width:calc(100% - 46px);max-width:350px;max-height:calc(100dvh - 90px);overflow-y:auto}.main-menu>button:not(.menu-feature):not(.motion-toggle){font-size:19px;padding:14px 16px}.menu-feature{height:110px}.project-tile .project-meta{opacity:1;transform:none;padding-top:12px;right:0}.project-meta strong{font-size:17px;letter-spacing:-.65px;line-height:1.08}.project-meta span{font-size:11px;margin-top:6px}.cover-atlas .cover-name{font-size:23px;letter-spacing:-.9px}.cover-atlas .cover-line{font-size:10px}.cover-type .type-name{font-size:21px}.attendie-symbol{font-size:130px}.iflip-symbol{font-size:76px}.cover-type .type-footer{font-size:10px}.gallery-footer{bottom:16px;right:18px;left:18px}.studio-caption{font-size:11px;max-width:150px;margin-left:0;padding:6px 8px}.gallery-tools .control-box{height:42px}.view-toggle{width:42px}.filter-toggle{width:90px;font-size:13px;gap:10px}.filter-panel{right:18px;bottom:66px;width:280px;max-width:calc(100vw - 36px)}.project-list{padding:110px 23px 110px}.list-intro{display:block;margin-bottom:36px}.list-intro h2{font-size:43px;letter-spacing:-2.2px}.list-intro p{font-size:15px;margin-top:20px}.list-grid{grid-template-columns:1fr 1fr;gap:35px 16px}.list-card .project-cover{aspect-ratio:1/1.5685}.list-card .project-meta strong{font-size:16px}.list-card .cover-name{font-size:21px}.list-card .project-meta span{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}html[data-motion=reduce] *,html[data-motion=reduce] *:before,html[data-motion=reduce] *:after{animation:none!important;transition:none!important}

/* Scale poster lettering to its tile, including the narrow mobile list. */
.project-cover .iflip-symbol{font-size:36cqw;letter-spacing:-.06em}.project-cover .attendie-symbol{font-size:78cqw;letter-spacing:-.08em}.project-cover .cover-name{font-size:14cqw}.project-cover .type-name{font-size:13cqw}

.project-meta{display:block}

/* Animated light on the gallery's five fixed navigation controls. */
.site-header .control-box,
.gallery-tools .control-box {
  position: relative;
  border-color: #ff5959b3;
  background: #240b0bf2;
  box-shadow: 0 0 10px #ff24244d;
}
.site-header .control-box::before,
.gallery-tools .control-box::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid #ff8585;
  border-radius: inherit;
  background: #f5262638;
  box-shadow: 0 0 10px #ff4949c2, 0 0 25px #f51f1f80, inset 0 0 20px #ff242480, inset 0 0 40px #ef171726;
  pointer-events: none;
  opacity: .65;
  animation: control-glow 2800ms ease-in-out infinite;
}
:is(.site-header, .gallery-tools) .control-box:is(:hover, :focus-visible, [aria-expanded='true'], [aria-pressed='true'])::before {
  animation: none;
  opacity: 1;
}
.entry-staged :is(.site-header, .gallery-tools) .control-box::before,
.page-hidden :is(.site-header, .gallery-tools) .control-box::before {
  animation-play-state: paused;
}
@keyframes control-glow {
  0%, 100% { opacity: .4; }
  50% { opacity: 1; }
}

.site-header .control-box:focus-visible,
.gallery-tools .control-box:focus-visible { outline-color: #ff9696; }

/* Actual website captures; motion previews share the same portrait crop. */
.website-cover { background: #eee; }
.website-poster, .website-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  user-select: none;
  pointer-events: none;
}
.website-video { opacity: 0; transition: opacity 350ms ease; }
.website-video.is-playing { opacity: 1; }

.list-card .website-cover { aspect-ratio: 600 / 940; }

/* iOutloud's own wordmark and five-bar waveform, without a page recording. */
.outloud-signature {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10cqw;
  background: #f8f7f3;
  color: #304b37;
}
.outloud-signature .outloud-logo { display: block; width: 82%; height: auto; user-select: none; pointer-events: none; }
.outloud-wave { display: flex; align-items: center; justify-content: center; height: 32cqw; gap: 5cqw; }
.outloud-wave i {
  display: block;
  width: 5cqw;
  background: currentColor;
  border-radius: 99px;
  transform-origin: center;
  animation: outloud-equalizer 820ms ease-in-out infinite alternate;
  animation-play-state: paused;
}
.outloud-wave i:nth-child(1) { height: 40.6%; }
.outloud-wave i:nth-child(2) { height: 75%; animation-delay: -300ms; }
.outloud-wave i:nth-child(3) { height: 100%; animation-delay: -600ms; }
.outloud-wave i:nth-child(4) { height: 62.5%; animation-delay: -150ms; }
.outloud-wave i:nth-child(5) { height: 28.1%; animation-delay: -450ms; }
.outloud-signature.is-animating .outloud-wave i { animation-play-state: running; }
@keyframes outloud-equalizer { from { transform: scaleY(1); } to { transform: scaleY(.28); } }
.dialog-cover > .project-cover.outloud-signature { display: flex; }

/* Owner-supplied portrait artwork keeps its complete 240 × 380 composition. */
.list-card .cover-poster { aspect-ratio: 240 / 380; }
.cover-outloud.cover-poster { background: transparent; }
.cover-outloud.cover-poster img,
.dialog-original-art[src$="ioutloud-card.gif"] {
  -webkit-mask: url('assets/ioutloud-phone-mask.svg') center / contain no-repeat;
  mask: url('assets/ioutloud-phone-mask.svg') center / contain no-repeat;
}

/* Social disclosure aligned beneath the studio brand. */
.header-right{display:flex;align-items:center;gap:24px;pointer-events:auto}
.follow-control{position:relative;flex-shrink:0}
.follow-toggle{position:relative;display:flex;align-items:center;justify-content:center;gap:5px;border:0;border-radius:999px;padding:7px 11px;background:#163e35;color:#fff;font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap;transition:background 180ms}
.follow-toggle:hover,.follow-toggle[aria-expanded=true]{background:#205447}
.follow-toggle svg{width:12px;height:12px;stroke-width:1.7;transition:transform 180ms}
.follow-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.follow-toggle:focus-visible{outline:2px solid #b5d5c8;outline-offset:5px}
.follow-panel{position:absolute;top:calc(100% + 12px);right:0;z-index:45;width:180px;max-width:calc(100vw - 32px);padding:8px;border-radius:11px;background:#f7f5ef;color:#163e35;box-shadow:0 16px 40px -12px #0008;animation:follow-reveal 180ms ease-out both}
.social-list{list-style:none;margin:0;padding:0}
.social-link{display:flex;align-items:center;gap:10px;min-height:36px;padding:7px 8px;font-size:13px;font-weight:500;line-height:1.4;cursor:default}
.social-link img{width:16px;height:16px;object-fit:contain}
.social-pending{margin:5px 3px 1px;padding:8px 5px 3px;border-top:1px solid #d6ddd5;font-size:11px;line-height:1.5;color:#4b6056}
@keyframes follow-reveal{from{opacity:.5;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.site-header{gap:8px;flex-wrap:wrap}.header-right{gap:0}.site-header .brand{width:150px}.site-header .menu-toggle{width:72px;gap:9px;font-size:12px}.follow-toggle{font-size:11px;padding:7px 9px}.follow-panel{top:calc(100% + 16px)}}
@media(max-width:360px){.header-right{margin-left:auto}}

.brand-stack{position:relative;pointer-events:auto}
.brand-stack .follow-control{position:absolute;left:0;top:calc(100% + 5px);width:100%;pointer-events:auto}
.site-header #follow-toggle{width:100%;height:30px;border:1px solid var(--line);border-radius:5px;background:#141414e8;color:#fff;padding:0 10px;text-transform:uppercase;font-size:12px;font-weight:700;gap:9px}
.site-header #follow-toggle:hover,.site-header #follow-toggle[aria-expanded=true]{background:#242424;border-color:#777}
.brand-stack .follow-panel{left:0;right:auto;top:calc(100% + 9px);width:184px}
@media(max-width:600px){.site-header .brand{width:162px}.site-header .menu-toggle{width:104px;gap:15px;font-size:13px}.site-header #follow-toggle{height:26px;font-size:11px}.brand-stack .follow-panel{width:180px}}

/* Power comes from clear capabilities, a forceful type scale and paced motion. */
.project-cover.power-card{display:grid;grid-template-rows:auto minmax(0,1fr) 22% auto auto;row-gap:2.4%;padding:6.5%;background:#ef3826;color:#121212;border-radius:0;aspect-ratio:240/380;isolation:isolate}
.power-brand{display:flex;align-items:center;gap:3cqi;font-family:var(--display-font);font-size:4.1cqi;line-height:1;font-weight:800;letter-spacing:.015em;white-space:nowrap}
.power-brand img{display:block;width:10cqi;height:9cqi;object-fit:contain;flex-shrink:0;mix-blend-mode:multiply}
.power-words{display:block;width:100%;height:100%;min-height:0;overflow:visible;fill:#fff9ed;font-family:var(--display-font);font-size:52px;font-weight:900;letter-spacing:-.04em}
.power-words .power-grow{fill:#141414}
.power-capabilities{height:14cqi;background:#141414;color:#fff9ed;overflow:hidden;font-family:var(--display-font);font-size:5.1cqi;font-weight:800;letter-spacing:-.025em}
.power-track{animation:power-capabilities 12s cubic-bezier(.22,1,.36,1) infinite;animation-play-state:paused}
.power-track span{display:flex;align-items:center;height:14cqi;padding:0 3.5cqi;white-space:nowrap}
.power-card.is-animating .power-track{animation-play-state:running}
.power-footer{display:flex;align-items:center;justify-content:space-between;gap:3cqi;background:#fff9ed;color:#141414;padding:5.5cqi 4cqi}
.power-footer strong{font-family:var(--display-font);font-size:8cqi;font-weight:900;line-height:1.02;letter-spacing:-.04em}
.power-footer svg{width:15cqi;height:15cqi;flex-shrink:0}
.list-card .project-cover.power-card{aspect-ratio:240/380}
@keyframes power-capabilities{0%,17%{transform:translateY(0)}22%,39%{transform:translateY(-20%)}44%,61%{transform:translateY(-40%)}66%,83%{transform:translateY(-60%)}88%,100%{transform:translateY(-80%)}}

.power-graphic{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}
.power-graphic img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}