/* DomeSpace: a connected studio, with light and movement held inside the dark. */
:root{--gold:#ffcc00;--muted:#b5b4ad;--line:#30312c;--brand-panel:#10110e;--brand-border:#383a30;--brand-ease:cubic-bezier(.16,1,.3,1)}
body{background:#000;color:#f7f5f0}
.wrap{width:min(100% - 40px,1320px)}
.site-header{min-height:86px;border-bottom:1px solid #ffffff0d;gap:18px}
.brand{font-size:1.25rem;letter-spacing:-.055em}
.brand img{width:44px;height:44px}
.header-contact{padding:10px 20px;border-radius:999px;background:#f7f5f0;color:#11120d;font-size:.8125rem;white-space:nowrap;transition:background-color 180ms var(--brand-ease),transform 180ms var(--brand-ease)}
.header-contact:hover{color:#11120d;background:var(--gold);transform:translateY(-2px)}
.header-contact[aria-current='page']{color:#11120d}
.button{border-radius:8px;padding:15px 22px;min-height:54px;justify-content:center;transition:transform 180ms var(--brand-ease),background-color 180ms var(--brand-ease),color 180ms var(--brand-ease)}
.button:active{transform:scale(.97)}
.hero.hero-premium{padding-block:40px 24px;gap:20px;position:relative;isolation:isolate;align-items:center;overflow:clip}
.hero-premium .hero-copy{position:relative;z-index:2;min-width:0}
.hero-premium .hero-intro{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:#d9c65e;display:flex;align-items:center;gap:12px;margin-bottom:24px}
.hero-premium .hero-intro::before{content:'';width:5px;height:5px;background:var(--gold);border-radius:50%;flex:none}
.hero-premium h1{font-size:clamp(2.75rem,6.2vw,5.75rem);line-height:1.04;letter-spacing:-.063em;max-width:14ch}
.hero-premium .hero-line-gold{color:var(--gold)}
.hero-premium .hero-description{max-width:49ch;font-size:1rem;line-height:1.8;margin-top:24px;color:#b9b8b1}
.hero-premium .hero-promise{font-size:.75rem;line-height:1.7;letter-spacing:.02em;color:#a7a793;margin-top:26px}
.hero-premium .hero-actions{margin-top:30px;gap:18px 26px;flex-direction:row;flex-wrap:wrap;align-items:center}
.hero-premium .hero-actions .text-link{font-size:.875rem;min-height:44px;display:inline-flex;align-items:center;border-bottom:1px solid #64644f}
.hero-art{position:relative;min-width:0;margin:0 -20px;isolation:isolate;overflow:hidden;--pointer-x:0px;--pointer-y:0px}
.hero-art-image{width:100%;height:390px;object-fit:cover;object-position:center;transform:translate3d(var(--pointer-x),var(--pointer-y),0) scale(1.025);transition:transform 900ms var(--brand-ease);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 86%,transparent)}
.hero-art::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#000 0%,transparent 22%,transparent 90%,#000);z-index:1}
.hero-orbit{position:absolute;pointer-events:none;left:12%;right:12%;top:12%;bottom:12%;border:1px solid #ffcc0036;border-radius:50%;transform:rotate(-24deg) scaleY(.63);z-index:2}
.hero-orbit::after{content:'';position:absolute;width:7px;height:7px;left:50%;top:-4px;background:#ffe277;border-radius:50%;box-shadow:0 0 16px #ffcc00a8}
.hero-orbit--two{inset:4% 9%;transform:rotate(35deg) scaleY(.7);border-color:#ffcc0017}
.hero-orbit--two::after{width:4px;height:4px;top:-2px;box-shadow:0 0 12px #ffcc00}
.hero-art-caption{position:absolute;left:28px;right:28px;bottom:28px;z-index:3;display:flex;justify-content:space-between;gap:20px;color:#c0bba3;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase}
.hero-baseline{display:grid;gap:20px;padding-top:28px;border-top:1px solid var(--line);grid-column:1/-1}
.hero-baseline>div,.hero-baseline>article{min-width:0}
.hero-baseline span,.hero-baseline .baseline-number{font-size:.6875rem;color:var(--gold);display:block;margin-bottom:12px}
.hero-baseline h2,.hero-baseline h3{font-size:1rem;line-height:1.3;letter-spacing:-.02em;margin-bottom:8px}
.hero-baseline p{font-size:.8125rem;line-height:1.75;color:var(--muted);max-width:40ch}
.build-section{padding-block:76px}
.build-section>.section-heading,.build-section>.build-heading{display:grid;gap:22px;margin-bottom:36px;max-width:880px}
.build-section h2,.connection-section h2,.delivery-section h2{font-size:clamp(2.1rem,4.3vw,4.25rem);line-height:1.09;letter-spacing:-.055em;max-width:21ch}
.build-section>.section-heading>p:last-child,.build-section>.build-heading>p:last-child{max-width:56ch;color:var(--muted);line-height:1.75}
.capabilities-grid{display:grid;gap:14px}
.capability-card{position:relative;min-width:0;border:1px solid #383a30;border-radius:14px;background:linear-gradient(135deg,#171810,#0b0c09 80%);padding:26px;overflow:hidden;transition:background-color 220ms var(--brand-ease),border-color 220ms var(--brand-ease),transform 220ms var(--brand-ease)}
.capability-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 90% 0,#ffcc0014,transparent 65%);opacity:0;transition:opacity 250ms var(--brand-ease);pointer-events:none}
.capability-card:hover{border-color:#a18a27;transform:translateY(-3px)}
.capability-card:hover::before{opacity:1}
.capability-number,.capability-card .topic-number{display:block;font-size:.6875rem;color:#b5ad83;margin-bottom:24px;padding:0}
.capability-card h3{font-size:clamp(1.25rem,2vw,1.75rem);line-height:1.25;letter-spacing:-.035em;max-width:28ch}
.capability-card p{font-size:.9375rem;line-height:1.8;color:var(--muted);max-width:55ch;margin-top:14px}
.capability-tags,.capability-card .tags{display:flex;flex-wrap:wrap;gap:6px 8px;padding:0;list-style:none;margin:22px 0 0;font-size:.6875rem;color:#d3cdaa}
.capability-tags li,.capability-tags span,.capability-card .tags span{border:1px solid #3d3e32;border-radius:999px;padding:5px 10px;line-height:1.5}
.capability-card .section-more{position:relative;font-size:.75rem;color:#f4d861;margin-top:20px}
.capability-more{display:inline-flex;min-height:36px;align-items:center;position:relative;font-size:.75rem;color:#f4d861;margin-top:20px;border-bottom:1px solid #797042;transition:color 200ms var(--brand-ease)}
.capability-card:hover .capability-more{color:#ffeaa3}
.connection-section{padding-block:56px 76px;border-top:1px solid var(--line)}
.connection-layout{display:grid;gap:32px;align-items:center}
.connection-layout>.section-heading,.connection-copy{min-width:0}
.connection-layout h2{max-width:15ch}
.connection-layout p:not(.section-index){color:var(--muted);line-height:1.8;margin-top:24px;max-width:46ch}
.connection-section .dome-explorer{min-width:0;margin:0 -10px}
.connection-section .expertise-list{margin-top:40px}
.connection-section .expertise summary{min-height:92px;padding-block:22px}
.connection-section .expertise h3{font-size:clamp(1.5rem,2.4vw,2.25rem)}
.connection-section .expertise-content{padding-bottom:24px}
.connection-section .expertise-content>p{font-size:1.125rem}
.delivery-section{padding-block:72px;background:#11120d;border-block:1px solid #2e3025}
.delivery-section>.wrap>.section-heading{max-width:820px}
.delivery-section .section-heading>p:last-child{margin-top:24px;max-width:51ch;color:var(--muted);line-height:1.8}
.delivery-steps{display:grid;gap:28px;margin:42px 0 0;padding:0;list-style:none}
.delivery-steps li{position:relative;border-top:1px solid #545641;padding-top:24px;min-width:0}
.delivery-steps .step-number,.delivery-steps li>span:first-child{font-size:.75rem;color:var(--gold);display:block;margin-bottom:24px}
.delivery-steps h3{font-size:1.375rem;line-height:1.2;letter-spacing:-.035em;margin-bottom:14px}
.delivery-steps p{font-size:.875rem;line-height:1.8;color:var(--muted);max-width:30ch}
.references{padding-block:36px 44px;background:#eae4e6;--reference-gap:40px}
.references-heading{margin-bottom:22px}
.references h2{font-size:clamp(1.375rem,2.4vw,2.25rem);letter-spacing:-.04em}
.references .reference-logos img{mix-blend-mode:multiply}
.human-story{padding-top:76px}
.home-page .agency{padding-block:72px}
.home-page .agency-statement{font-size:clamp(2.1rem,5vw,4.5rem);line-height:1.12}
.page-hero,.product-overview-hero{position:relative;padding-block:32px 64px}
.page-hero::after,.product-overview-hero::after{content:'';position:absolute;width:40%;height:240px;right:0;top:40px;pointer-events:none;background:radial-gradient(ellipse at center,#ffcc000c,transparent 72%);z-index:-1}
.page-title{font-size:clamp(2.75rem,6vw,5.6rem);line-height:1.08}
.page-hero .breadcrumbs{margin-bottom:42px}
.page-lead{font-size:clamp(1rem,1.6vw,1.25rem);line-height:1.8}
.page-section{padding-block:68px}
.page-section h2,.page-faq h2{font-size:clamp(2rem,3.8vw,3.5rem);line-height:1.12}
.page-section-head{gap:20px;margin-bottom:40px}
.inner-page .section-light:not(.references){background:#10110e;color:#f7f5f0;color-scheme:dark}
.inner-page .section-light:not(.references) p,.inner-page .section-light:not(.references) .inline-services,.inner-page .section-light:not(.references) dd{color:#b5b4ad}
.inner-page .section-light:not(.references) h2,.inner-page .section-light:not(.references) h3,.inner-page .section-light:not(.references) dt{color:#f7f5f0}
.inner-page .section-light .section-index{color:#d7c65f}
.inner-page .section-light .product-section-heading>p:last-child:not(.section-index),.inner-page .section-light .page-section-head>p:last-child{color:#b5b4ad}
.inner-page .section-light .product-family a span,.inner-page .section-light.product-family a span{color:#b5b4ad}
.inner-page .section-light .content-list li,.inner-page .section-light .process-step,.inner-page .section-light .topic-row,.inner-page .section-light .product-choice dl>div,.inner-page .section-light .product-family a{border-color:#3a3c31}
.inner-page .section-light :focus-visible{outline-color:var(--gold)}
.inner-page .section-light .section-more:hover,.inner-page .section-light .product-choice dd a{color:var(--gold)}
.inner-page .related-expertises a{border-color:#595c46}
.page-faq{padding-block:68px}
.faq-item summary{font-size:1rem;min-height:76px;padding-block:22px}
.page-cta{padding-block:72px}
.page-cta .button{margin-top:8px}
.site-footer{padding-top:34px;border-top:1px solid var(--line)}
.site-footer .brand{font-size:1.4rem}
.footer-legal{color:#a6a79b}
.mobile-menu[open] nav{background:#11120d;border:1px solid #3c3e31;border-radius:12px}
@media(min-width:600px){
  .wrap{width:min(100% - 64px,1320px)}
  .hero-art-image{height:490px}
  .hero-baseline{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  .capabilities-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .capability-card{padding:30px}
  .delivery-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
}
@media(min-width:1000px){
  .site-header{min-height:88px}
  .hero.hero-premium{grid-template-columns:1.04fr 1fr;gap:0;padding-block:22px 24px;min-height:650px}
  .hero-premium .hero-copy{padding-block:34px 46px}
  .hero-premium h1{font-size:clamp(4rem,5.7vw,5.6rem)}
  .hero-premium .hero-description{font-size:1.0625rem;max-width:43ch}
  .hero-art{position:absolute;inset:-8px -72px -8px -72px;width:auto;margin:0;z-index:0}
  .hero-art picture{display:block;width:100%;height:100%}
  .hero-art-image{height:100%;width:100%;object-position:center;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .hero-art::after{background:linear-gradient(90deg,#000 0%,#000000c4 32%,transparent 55%,transparent 90%,#000)}
  .hero-orbit{left:52%;right:9%;top:18%;bottom:18%}
  .hero-orbit--two{inset:9% 8% 11% 52%}
  .hero-art-caption{left:auto;right:100px;bottom:30px;font-size:.625rem}
  .hero-baseline{padding-block:32px 18px}
  .hero-baseline h3{font-size:1.0625rem}
  .build-section{padding-block:92px}
  .build-section>.section-heading,.build-section>.build-heading{grid-template-columns:1.1fr 1fr;gap:24px 80px;align-items:end;max-width:none;margin-bottom:46px}
  .build-section>.section-heading .section-index,.build-section>.build-heading .section-index{grid-column:1/-1}
  .capability-card{padding:32px 36px}
  .capability-number{margin-bottom:26px}
  .connection-section{padding-block:80px 88px}
  .connection-layout{grid-template-columns:.85fr 1.15fr;gap:64px}
  .connection-section .expertise-list{margin-top:60px}
  .delivery-section{padding-block:88px}
  .delivery-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;margin-top:52px}
  .human-story{padding-top:88px}
  .home-page .agency{padding-block:80px}
  .page-hero{padding-block:34px 74px}
  .page-hero-grid{gap:64px}
  .page-section,.page-faq{padding-block:76px}
  .page-cta{padding-block:80px}
}
@media(min-width:1050px){.desktop-nav{gap:23px;font-size:.75rem}.header-contact{display:inline-flex}.brand{font-size:1.25rem}.brand img{width:44px;height:44px}}
@media(min-width:1200px){.desktop-nav{gap:28px}}
@media(max-width:599px){
  .hero-premium .hero-actions .button{min-width:0;font-size:.8125rem;padding-inline:18px}
  .hero-premium .hero-actions .text-link{font-size:.8125rem}
  .hero-art{margin-top:-12px}
  .hero-art-image{object-position:85% center}
  .hero-art-caption{font-size:.5625rem;gap:12px;bottom:20px;left:26px;right:26px}
  .hero-baseline{grid-template-columns:1fr;gap:18px;padding-top:22px}
  .hero-baseline>div,.hero-baseline>article{display:grid;grid-template-columns:24px 1fr;gap:3px 12px}
  .hero-baseline h3{margin:0}
  .hero-baseline span,.hero-baseline .baseline-number{grid-row:1/3;margin:0;padding-top:2px}
  .hero-baseline p{grid-column:2;font-size:.75rem}
}
@media(min-width:900px) and (max-width:999px){.hero.hero-premium{grid-template-columns:1fr}.hero-premium .hero-copy{max-width:650px}.hero-art{margin:-30px -32px 0}.hero-art-image{height:500px;object-position:82% center}.hero-premium h1{font-size:4.5rem;max-width:15ch}}
@media(prefers-reduced-motion:no-preference){
  .hero-art.is-art-playing .hero-orbit--one{animation:brand-orbit-one 26s linear infinite}
  .hero-art.is-art-playing .hero-orbit--two{animation:brand-orbit-two 38s linear infinite reverse}
  .hero-art.is-art-playing .hero-art-image{animation:brand-art-drift 9s ease-in-out infinite alternate}
  .hero-art:not(.is-art-playing) *,.hero-art:not(.is-art-playing) *::after{animation-play-state:paused!important}
  @keyframes brand-orbit-one{to{transform:rotate(336deg) scaleY(.63)}}
  @keyframes brand-orbit-two{to{transform:rotate(395deg) scaleY(.7)}}
  @keyframes brand-art-drift{from{transform:translate3d(var(--pointer-x),var(--pointer-y),0) scale(1.025)}to{transform:translate3d(var(--pointer-x),calc(var(--pointer-y) - 9px),0) scale(1.04)}}
}
@media(prefers-reduced-motion:reduce){
  .hero-art-image{transform:none;transition:none}
  .hero-orbit,.hero-orbit--two{animation:none}
  .capability-card,.capability-card::before,.header-contact{transition:none}
  .capability-card:hover,.header-contact:hover{transform:none}
}

/* The service catalogue is a clear list of things a client can commission. */
.capabilities-grid{display:block;border-top:1px solid #444735}
.capability-card{display:grid;grid-template-columns:22px minmax(0,1fr);gap:9px 16px;border:0;border-bottom:1px solid #383b2f;border-radius:0;padding:26px 0;background:transparent;overflow:hidden}
.capability-card::before{background:linear-gradient(90deg,transparent,#ffcc000a 50%,transparent)}
.capability-card:hover{transform:none;background:#14160d}
.capability-number{grid-column:1;grid-row:1/5;margin:0;padding-top:4px}
.capability-card h3{grid-column:2;max-width:none;font-size:1.25rem}
.capability-card p{grid-column:2;margin:0;font-size:.875rem;line-height:1.75;max-width:62ch}
.capability-tags{grid-column:2;margin:8px 0 0;gap:6px 15px;color:#abae94;font-size:.625rem}
.capability-tags li{padding:0;border:0;border-radius:0}
.capability-more{grid-column:2;width:fit-content;margin:4px 0 0;min-height:32px}
@media(min-width:600px){
  .capability-card{grid-template-columns:36px minmax(0,1fr);padding:28px 12px;gap:10px 22px}
  .capability-card h3{font-size:1.5rem}
}
@media(min-width:1000px){
  .capability-card{grid-template-columns:44px minmax(0,1fr) 228px;gap:9px 32px;padding:31px 24px 31px 8px;min-height:150px}
  .capability-number{grid-row:1/3;font-size:.75rem;padding-top:6px}
  .capability-card h3{font-size:1.75rem}
  .capability-card p{grid-column:2;grid-row:2;max-width:66ch}
  .capability-tags{grid-column:3;grid-row:1;align-self:end;gap:6px 12px;font-size:.625rem}
  .capability-more{grid-column:3;grid-row:2;align-self:start}
}
