:root {
  --ink:#14243a;
  --muted:#586372;
  --blue:#2356bf;
  --line:#d1d2cf;
  --paper:#eae7df;
  --pad:clamp(1.25rem,4.5vw,5rem);
  --max:1440px;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-padding-top:100px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
img {
  display:block;
  max-width:100%;
  height:auto
}
h1,h2,h3,p {
  margin:0
}
button,a {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:6px
}
::selection {
  background:#dce7ff
}
section[id] {
  scroll-margin-top:100px
}
.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  z-index:200;
  padding:1rem;
  background:var(--ink);
  color:#fff;
  transform:translateY(-160%)
}
.skip-link:focus {
  transform:none
}
.scroll-progress {
  position:fixed;
  inset:0 0 auto;
  z-index:150;
  height:3px;
  pointer-events:none
}
.scroll-progress span {
  display:block;
  height:100%;
  background:var(--blue);
  transform:scaleX(0);
  transform-origin:left
}
.site-header {
  position:sticky;
  top:0;
  z-index:100;
  max-width:var(--max);
  height:94px;
  margin:auto;
  padding:0 var(--pad);
  display:flex;
  align-items:center;
  gap:2rem;
  background:rgba(234,231,223,.96);
  border-bottom:1px solid var(--line)
}
.site-header.scrolled {
  box-shadow:0 8px 24px #14243a08
}
.brand {
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-right:auto
}
.brand img:first-child {
  width:27px;
  height:40px
}
.brand img:last-child {
  width:116px;
  height:36px
}
.desktop-nav {
  display:flex;
  gap:1.8rem;
  font-size:.875rem
}
.desktop-nav a {
  padding:.7rem 0;
  position:relative
}
.desktop-nav a:after {
  position:absolute;
  content:"";
  height:2px;
  background:var(--blue);
  left:0;
  right:100%;
  bottom:0;
  transition:right .2s
}
.desktop-nav a:hover:after,.desktop-nav a.is-current:after {
  right:0
}
.contact-button,.button-primary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:2rem;
  background:var(--blue);
  color:white;
  min-height:48px;
  padding:.95rem 1.3rem;
  border-radius:6px;
  font-size:.875rem;
  font-weight:600;
  transition:background .2s,transform .2s
}
.contact-button:hover,.button-primary:hover {
  background:#1649c7;
  transform:translateY(-2px)
}
.contact-button {
  gap:.75rem
}
.menu-button {
  display:none
}
.mobile-menu {
  display:none
}
.hero,.projects,.services,.collaboration,.studio {
  max-width:var(--max);
  margin:auto;
  padding:0 var(--pad)
}
.hero {
  padding-top:2rem
}
.hero-kicker {
  display:flex;
  align-items:center;
  gap:.55rem;
  font-size:.8125rem
}
.status-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--blue)
}
.hero-location {
  margin-left:auto;
  color:var(--muted)
}
.hero-layout {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:clamp(2rem,4vw,4.5rem);
  align-items:center;
  padding:3.6rem 0 3.3rem
}
.hero h1 {
  font-size:clamp(3.1rem,5.4vw,5.6rem);
  line-height:1.03;
  font-weight:500;
  letter-spacing:-.066em
}
.hero h1>span {
  color:var(--blue)
}
.hero-copy>p {
  max-width:450px;
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--muted);
  margin-top:1.7rem
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:1.5rem;
  margin-top:2rem;
  flex-wrap:wrap
}
.text-link {
  font-size:.875rem;
  display:inline-flex;
  gap:.75rem;
  align-items:center;
  min-height:44px;
  border-bottom:1px solid var(--line)
}
.text-link:hover {
  color:var(--blue);
  border-color:var(--blue)
}
.hero-feature {
  position:relative;
  display:block;
  background:#d7e1ed;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 20px 60px #14243a12;
  transition:box-shadow .35s
}
.hero-feature:hover {
  box-shadow:0 24px 70px #14243a20
}
.feature-top {
  position:absolute;
  z-index:2;
  top:20px;
  left:20px;
  right:20px;
  display:flex;
  justify-content:space-between;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.05em
}
.feature-art {
  height:340px;
  position:relative;
  overflow:hidden
}
.feature-world {
  width:100%;
  height:100%;
  object-fit:cover
}
.feature-phone {
  position:absolute;
  width:29%;
  max-height:85%;
  object-fit:cover;
  object-position:top;
  bottom:-12%;
  right:10%;
  border:4px solid #172640;
  border-radius:20px;
  transform:rotate(-8deg);
  box-shadow:0 16px 32px #14243a40
}
.feature-caption {
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.2rem 1.4rem;
  background:#d7e1ed
}
.feature-caption strong {
  font-size:2rem;
  letter-spacing:-.05em;
  font-weight:500
}
.feature-caption>span {
  font-size:.8125rem;
  line-height:1.5
}
.hero-bottom {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 0;
  font-size:.8125rem;
  gap:1rem
}
.hero-bottom>span {
  color:var(--muted)
}
.hero-bottom p {
  display:flex;
  gap:1rem
}
.hero-bottom p span {
  color:#96a2b3
}
.projects,.services {
  padding-top:6.5rem;
  padding-bottom:6.5rem
}
.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:2.8rem
}
.section-index,.collaboration-intro>span,.studio-copy>span {
  display:block;
  font-size:.8125rem;
  margin-bottom:1.3rem;
  color:var(--muted)
}
h2 {
  font-size:clamp(2.5rem,4.3vw,4.5rem);
  font-weight:500;
  line-height:1.07;
  letter-spacing:-.055em
}
.section-heading>p {
  color:var(--muted);
  font-size:1rem;
  line-height:1.6;
  padding-bottom:.2rem
}
/* A quiet project index with one full, proportional preview. */
[hidden] { display:none !important; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.project-showcase { position:relative; }
.project-showcase.is-interactive { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
.project-hint { color:var(--muted); font-size:.8125rem; margin-bottom:1.25rem; }
.project-choices { border-top:1px solid var(--line); }
.project-choices + .project-choices { border-top:0; }
.project-choice { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:.45rem; width:100%; min-height:98px; padding:1.1rem 0 1.1rem 1.4rem; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--muted); font:inherit; text-align:left; cursor:pointer; transition:color .18s,background .18s; }
.project-choice strong { font-size:clamp(1.75rem,3vw,2.7rem); font-weight:500; line-height:1.1; letter-spacing:-.045em; }
.project-choice span { font-size:.75rem; }
.project-choice:hover { color:var(--ink); background:#14243a04; }
.project-choice[aria-pressed="true"] { color:var(--ink); }
.project-choice[aria-pressed="true"]::before { content:""; position:absolute; left:0; top:1.35rem; bottom:1.35rem; width:3px; background:var(--blue); border-radius:2px; }
.projects-toggle { display:inline-block; margin-top:1.5rem; padding:.6rem 0; min-height:44px; border:0; background:transparent; color:var(--ink); font:inherit; font-size:.875rem; text-decoration:underline; text-decoration-color:#87909a; text-underline-offset:5px; cursor:pointer; }
.projects-toggle:hover { color:var(--blue); }
.project-previews { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; }
.is-interactive .project-previews { display:block; }
.project-preview { min-width:0; margin:0; }
.project-image { height:580px; padding:28px; display:flex; justify-content:center; align-items:center; background:#e0ddd5; border-radius:4px; }
.project-image img { width:auto; height:auto; max-height:100%; max-width:100%; object-fit:contain; border-radius:8px; }
.project-preview--web .project-image img { width:100%; border-radius:0; }
.project-preview figcaption { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding-top:1rem; }
.project-preview figcaption strong { font-size:1rem; font-weight:500; }
.project-preview figcaption span { color:var(--muted); font-size:.75rem; text-align:right; }
.public-experience {
  display:grid;
  grid-template-columns:1fr 2fr;
  align-items:center;
  gap:2rem;
  padding:2rem 0 0;
  margin-top:2.5rem;
  border-top:1px solid var(--line);
}
.public-experience>span { color:var(--muted); font-size:.8125rem; }
.public-experience p { font-size:1.125rem; line-height:1.6; max-width:680px; }
.public-experience strong { font-weight:500; }
.services {
  border-top:1px solid var(--line)
}
.services-intro {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  align-items:end;
  gap:3rem;
  margin-bottom:3rem
}
.services-intro>p {
  max-width:400px;
  color:var(--muted);
  line-height:1.7
}
.service-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem
}
.service-card {
  min-width:0;
  background:#e2e3dd;
  border-radius:8px;
  overflow:hidden
}
.service-media {
  height:200px;
  background:#d3dce0;
  overflow:hidden;
  padding:1.4rem 1.4rem 0
}
.service-media>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
  border-radius:6px 6px 0 0;
  box-shadow:0 8px 24px #14243a18
}
.service-media--phones {
  display:flex;
  justify-content:center;
  gap:1rem;
  background:#d8dbea
}
.service-media--phones>img {
  width:36%;
  height:240px;
  object-fit:cover;
  border-radius:14px
}
.service-media--phones>img:last-child {
  margin-top:1rem
}
.service-copy {
  padding:1.5rem
}
.service-copy>span {
  font-size:.75rem;
  color:var(--blue)
}
.service-copy h3 {
  font-size:1.4rem;
  font-weight:500;
  letter-spacing:-.025em;
  margin:1rem 0
}
.service-copy p {
  font-size:.9375rem;
  color:var(--muted);
  line-height:1.65
}
.collaboration {
  background:#142b4b;
  color:#fff;
  padding-top:5rem;
  padding-bottom:5rem
}
.collaboration-intro {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:0 3rem
}
.collaboration-intro>span {
  color:#b3c5dd;
  grid-column:1/-1
}
.collaboration-intro>p {
  max-width:400px;
  align-self:end;
  color:#c3d0e0;
  line-height:1.7
}
.collaboration-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2.5rem;
  margin-top:3.5rem
}
.collaboration-grid article {
  border-top:1px solid #ffffff33;
  padding-top:1.4rem
}
.collaboration-grid article>span {
  color:#a6c8ff;
  font-size:.875rem
}
.collaboration-grid h3 {
  margin:2rem 0 .8rem;
  font-size:1.5rem;
  font-weight:500
}
.collaboration-grid p {
  color:#c3d0e0;
  font-size:1rem;
  line-height:1.65
}
.studio {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:4rem;
  align-items:center;
  padding-top:7rem;
  padding-bottom:7rem
}
.studio-copy h2 {
  max-width:650px
}
.studio-copy p {
  color:var(--muted);
  line-height:1.7;
  margin-top:1.5rem;
  max-width:500px
}
.studio-copy>a {
  display:inline-flex;
  gap:2rem;
  align-items:center;
  border-bottom:1px solid var(--ink);
  padding:.8rem 0;
  margin-top:1.5rem;
  font-size:.9375rem
}
.studio-mark {
  background:#d7dfeb;
  border-radius:50%;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  max-width:320px;
  width:100%;
  justify-self:center
}
.studio-mark img {
  width:33%;
  filter:brightness(0) saturate(100%) invert(33%) sepia(87%) saturate(2678%) hue-rotate(217deg) brightness(94%) contrast(96%)
}
.underline-word {
  color:var(--blue)
}
.contact {
  background:var(--blue);
  color:white;
  padding:4.5rem var(--pad) 0
}
.contact>p,.contact>h2,.contact>a,.contact>footer {
  max-width:calc(var(--max) - 2 * var(--pad));
  margin-left:auto;
  margin-right:auto
}
.contact>p {
  font-size:1rem;
  color:#e2ebff
}
.contact h2 {
  font-size:clamp(4rem,10vw,10rem);
  letter-spacing:-.07em;
  line-height:.95;
  margin-top:2rem
}
.contact h2 br {
  display:none
}
.contact h2 span {
  color:#c5d7ff
}
.contact>a {
  display:flex;
  width:fit-content;
  gap:3rem;
  align-items:center;
  margin:2rem 0 4rem;
  border-bottom:1px solid #ffffff80;
  padding-bottom:.7rem;
  font-size:clamp(1.25rem,2.4vw,2rem)
}
.contact footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  border-top:1px solid #ffffff45;
  padding:1.7rem 0;
  font-size:.8125rem
}
.contact footer>div {
  display:flex;
  align-items:center;
  gap:.6rem
}
.contact footer img {
  width:20px;
  height:30px
}
.contact footer strong {
  font-weight:500
}
.contact footer p {
  color:#e2ebff
}
.contact a:focus-visible {
  outline-color:white
}
@media(min-width:1600px) {
  .contact>a {
    margin-left:calc((100% - var(--max) + 2 * var(--pad))/2)
  }
}
@media(max-width:1000px) {
  .desktop-nav {
    gap:1rem
  }
  .site-header {
    gap:1.3rem
  }
  .hero-layout {
    grid-template-columns:1.15fr 1fr;
    gap:2rem
  }
  .hero h1 {
    font-size:clamp(2.8rem,5.8vw,4rem)
  }
  .feature-art {
    height:300px
  }
  .hero-actions {
    gap:.7rem
  }
  .hero-location {
    display:none
  }
  .service-copy {
    padding:1.2rem
  }
  .service-copy h3 {
    font-size:1.2rem
  }
  .studio {
    gap:2rem
  }
  .contact footer {
    flex-wrap:wrap
  }
}
@media(max-width:760px) {
  .site-header {
    height:76px
  }
  .desktop-nav {
    display:none
  }
  .menu-button {
    display:flex;
    width:44px;
    height:44px;
    padding:12px 9px;
    border:1px solid var(--line);
    border-radius:6px;
    background:var(--paper);
    flex-direction:column;
    justify-content:space-between;
    cursor:pointer
  }
  .menu-button span {
    height:2px;
    background:var(--ink);
    width:100%;
    transition:transform .2s,opacity .2s
  }
  .menu-button[aria-expanded=true] span:first-child {
    transform:translateY(9px) rotate(45deg)
  }
  .menu-button[aria-expanded=true] span:nth-child(2) {
    opacity:0
  }
  .menu-button[aria-expanded=true] span:last-child {
    transform:translateY(-9px) rotate(-45deg)
  }
  .mobile-menu {
    display:block;
    position:fixed;
    inset:76px 0 0;
    z-index:90;
    padding:2rem var(--pad);
    background:var(--paper);
    visibility:hidden;
    opacity:0;
    overflow:auto;
    transition:opacity .2s,visibility .2s
  }
  .mobile-menu.is-open {
    visibility:visible;
    opacity:1
  }
  .mobile-menu nav {
    display:flex;
    flex-direction:column
  }
  .mobile-menu a {
    display:flex;
    gap:1rem;
    padding:1.2rem 0;
    border-bottom:1px solid var(--line);
    font-size:1.75rem;
    letter-spacing:-.04em
  }
  .mobile-menu a span {
    font-size:.8125rem;
    color:var(--muted);
    align-self:center
  }
  .mobile-menu>p {
    margin-top:2rem;
    color:var(--muted);
    font-size:.875rem
  }
  .menu-open {
    overflow:hidden
  }
  .hero {
    padding-top:1.5rem
  }
  .hero-kicker {
    font-size:.75rem
  }
  .hero-layout {
    grid-template-columns:1fr;
    padding:2.5rem 0;
    gap:2.5rem
  }
  .hero h1 {
    font-size:clamp(2.8rem,8.8vw,4.8rem)
  }
  .hero-copy>p {
    font-size:1rem;
    max-width:470px
  }
  .hero-feature {
    transform:none
  }
  .feature-art {
    height:320px
  }
  .feature-phone {
    width:25%;
    right:15%
  }
  .hero-bottom {
    align-items:start
  }
  .hero-bottom>span {
    max-width:140px;
    line-height:1.5
  }
  .hero-bottom p {
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:.4rem .5rem;
    max-width:190px;
    line-height:1.5
  }
  .hero-bottom>a {
    display:none
  }
  .projects,.services {
    padding-top:4rem;
    padding-bottom:4rem
  }
  .section-heading,.services-intro,.collaboration-intro {
    display:block
  }
  .section-heading>p,.services-intro>p,.collaboration-intro>p {
    margin-top:1.2rem
  }
  .section-heading {
    margin-bottom:2rem
  }
  .service-grid {
    grid-template-columns:1fr
  }
  .service-card {
    display:grid;
    grid-template-columns:1fr 1.2fr
  }
  .service-media {
    height:100%;
    min-height:245px;
    padding:1.5rem 1rem 0
  }
  .service-copy {
    padding:1.5rem
  }
  .service-copy h3 {
    font-size:1.4rem
  }
  .service-media--phones>img {
    width:48%;
    height:260px
  }
  .collaboration {
    padding-top:3.5rem;
    padding-bottom:3.5rem
  }
  .collaboration-grid {
    gap:1.2rem;
    margin-top:2.5rem
  }
  .collaboration-grid h3 {
    font-size:1.25rem
  }
  .collaboration-grid p {
    font-size:.9375rem
  }
  .studio {
    padding-top:4rem;
    padding-bottom:4rem;
    grid-template-columns:1fr
  }
  .studio-mark {
    display:none
  }
  .contact {
    padding-top:3rem
  }
  .contact h2 br {
    display:block
  }
  .contact footer {
    display:grid;
    grid-template-columns:1fr auto;
    gap:1rem
  }
  .contact footer p {
    grid-column:1/-1
  }
  .contact footer>a {
    grid-column:2;
    grid-row:1
  }
  .contact>a {
    gap:1rem
  }
}
@media(max-width:480px) {
  .brand img:last-child {
    width:95px
  }
  .brand img:first-child {
    width:23px
  }
  .site-header {
    gap:.65rem
  }
  .contact-button {
    padding:.7rem .85rem;
    min-height:44px;
    font-size:.8125rem
  }
  .hero-actions {
    gap:1rem
  }
  .hero-actions .button-primary {
    width:100%;
    justify-content:space-between
  }
  .feature-art {
    height:265px
  }
  .feature-phone {
    width:31%
  }
  .service-card {
    display:block
  }
  .service-media {
    height:190px;
    min-height:0
  }
  .service-media--phones>img {
    width:31%
  }
  .collaboration-grid {
    grid-template-columns:1fr
  }
  .collaboration-grid h3 {
    margin-top:1rem
  }
  .feature-caption {
    padding:1rem
  }
  .feature-caption>span {
    font-size:.75rem
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
/* Intrinsic image dimensions reserve space without changing the device aspect ratio. */

/* The original floating navigation contracts as the page scrolls. */
.site-header {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 64px), 1320px); height: 70px; padding: 0 .6rem 0 0;
  border: 1px solid transparent; background: transparent; border-radius: 999px;
  transition: top .35s, width .35s, padding .35s, background .25s, box-shadow .25s;
}
.site-header.scrolled {
  top: 12px; width: min(calc(100% - 40px), 1140px); padding-left: 1.25rem;
  border-color: #14243a1c; background: rgba(234,231,223,.92);
  box-shadow: 0 12px 36px #14243a14; backdrop-filter: blur(18px);
}
.contact-button { border-radius: 999px; }
.hero { padding-top: 130px; }
@media (max-width: 1000px) {
  .site-header { width: calc(100% - 40px); }
}
@media (max-width: 760px) {
  .site-header, .site-header.scrolled { top: 8px; width: calc(100% - 20px); height: 62px; padding: 0 .5rem 0 1rem; border-color: #14243a1c; background: rgba(234,231,223,.95); backdrop-filter: blur(18px); }
  .menu-button { border-radius: 50%; }
  .mobile-menu { inset: 0; padding-top: 95px; }
  .hero { padding-top: 100px; }
}
.contact-tools { max-width: calc(var(--max) - 2 * var(--pad)); margin: -2rem auto 2rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.copy-email { font: inherit; color: inherit; font-size: .875rem; border: 1px solid #ffffff80; border-radius: 6px; background: transparent; min-height: 44px; padding: .65rem 1rem; cursor: pointer; }
.copy-email:hover { background: #ffffff18; }
.copy-status { font-size: .8125rem; line-height: 1.5; color: #e2ebff; }

@media (max-width:760px) {
  .project-showcase.is-interactive { grid-template-columns:1fr; gap:2rem; }
  .project-hint { margin-bottom:1rem; }
  .project-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .project-choice { min-height:72px; padding:.9rem .35rem; align-items:center; justify-content:center; text-align:center; }
  .project-choice strong { font-size:clamp(1.125rem,4.8vw,1.65rem); }
  .project-choice span { display:none; }
  .project-choice[aria-pressed="true"]::before { top:auto; bottom:0; left:0; right:0; width:auto; height:3px; }
  .projects-toggle { margin-top:.65rem; }
  .project-image { height:480px; padding:24px; }
  .project-previews { grid-template-columns:1fr; }
  .public-experience { grid-template-columns:1fr; gap:.65rem; }
}

.desktop-nav .nav-umbria, .mobile-menu .nav-umbria { display: inline-flex; align-items: center; gap: .5rem; }
.nav-umbria img { width: 25px; height: 25px; border-radius: 6px; flex-shrink: 0; }
.mobile-menu .nav-umbria img { width: 34px; height: 34px; border-radius: 8px; }
.umbria-site-link { margin-right: 1rem; }