@font-face {
  font-family:Roboto;
  src:url('/assets/Roboto-Regular.woff2') format('woff2');
  font-weight:400;
  font-display:swap
}

@font-face {
  font-family:Roboto;
  src:url('/assets/Roboto-Medium.woff2') format('woff2');
  font-weight:500;
  font-display:swap
}

@font-face {
  font-family:Roboto;
  src:url('/assets/Roboto-Bold.woff2') format('woff2');
  font-weight:700;
  font-display:swap
}

@font-face {
  font-family:Roboto;
  src:url('/assets/Roboto-Black.woff2') format('woff2');
  font-weight:900;
  font-display:swap
}

@font-face {
  font-family:Bebas;
  src:url('/assets/BebasNeue-Regular.woff2') format('woff2');
  font-display:swap
}

:root {
  --ink:#040b12;
  --paper:#f2f1ed;
  --cyan:#0c93d1;
  --accent:#00a5df;
  --gutter:4.30556vw;
  --body:clamp(14px,1.04167vw,20px);
  --label:clamp(12px,1.04167vw,20px);
  --h2:clamp(30px,2.66667vw,54px);
  --rule:rgba(242,241,237,.4)
}

* {
  box-sizing:border-box
}

html {
  scroll-padding-top:24px
}

body {
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font:500 var(--body)/1.25 Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit
}

img {
  display:block;
  max-width:100%
}

h1,h2,h3,p {
  margin:0
}

h2,h3 {
  font-weight:900
}

h2 {
  font-size:var(--h2);
  line-height:1.1
}

h3 {
  font-size:clamp(21px,1.66667vw,34px);
  line-height:1.18
}

.wrap {
  padding-inline:var(--gutter)
}

.cyan {
  color:var(--accent)
}

.white {
  color:var(--paper)
}

.eyebrow {
  font-size:var(--label);
  letter-spacing:.105em;
  line-height:1.35
}

.eyebrow span {
  color:var(--paper)
}

.button {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:2.5vw;
  border:1px solid var(--accent);
  height:4.58333vw;
  width:15.41667vw;
  font-size:var(--body);
  transition:background-color .25s,color .25s
}

.button span {
  font-family:Arial,sans-serif;
  font-size:26px;
  line-height:1;
  transition:transform .3s
}

.button:hover span {
  transform:translateX(5px)
}

.button:hover {
  background:var(--cyan);
  color:var(--ink)
}

.button.solid {
  background:var(--cyan);
  border-color:var(--cyan)
}

.button.solid:hover {
  background:var(--paper);
  border-color:var(--paper)
}

a:focus-visible,button:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:6px
}

.skip-link {
  position:fixed;
  top:10px;
  left:10px;
  z-index:100;
  background:var(--paper);
  color:var(--ink);
  padding:16px;
  transform:translateY(-150%)
}

.skip-link:focus {
  transform:none
}

.masthead {
  height:9.09722vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--ink);
  position:relative;
  z-index:3
}

.brand {
  width:15.83333vw;
  display:block;
  flex-shrink:0
}

.brand img {
  width:100%;
  height:auto
}

.masthead nav {
  display:flex;
  gap:2.9vw;
  margin-left:2vw
}

.masthead nav a {
  position:relative;
  padding-block:12px
}

.masthead nav a:after {
  content:'';
  position:absolute;
  left:0;
  bottom:5px;
  width:100%;
  height:1px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s
}

.masthead nav a:hover:after,.masthead nav a[aria-current]:after {
  transform:scaleX(1)
}

.masthead nav a[aria-current] {
  color:var(--accent)
}

.masthead .request {
  height:3.68056vw;
  width:16.04167vw;
  color:var(--accent);
  gap:1.8vw
}

.masthead .request:hover {
  color:var(--ink)
}

.menu-toggle {
  display:none
}

.hero {
  height:53.40278vw;
  position:relative;
  overflow:hidden
}

.hero-art {
  position:absolute;
  width:100vw;
  left:11.30315vw;
  top:0;
  height:53.47222vw;
  pointer-events:none
}

.hero-art img {
  width:100%;
  height:100%;
  max-width:none
}

.hero-copy {
  position:relative;
  padding-top:7.84722vw;
  z-index:1;
  pointer-events:none
}

.hero-copy a {
  pointer-events:auto
}

.hero h1 {
  font:400 11.08056vw/.947 Bebas,Impact,sans-serif;
  margin-top:1.35vw;
  letter-spacing:0
}

.line {
  display:block;
  overflow:hidden
}

.line>span {
  display:inline-block
}

.hero .intro {
  font-size:1.66667vw;
  line-height:1.2;
  margin-top:1.15vw;
  margin-left:.2vw
}

.hero-actions {
  display:flex;
  gap:2.36111vw;
  margin-top:3.75vw
}

.rail {
  position:absolute;
  right:2.7vw;
  top:10.5vw;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:.78vw;
  line-height:1.3;
  padding-bottom:8.5vw
}

.rail:after {
  content:'';
  height:8.5vw;
  width:1px;
  position:absolute;
  bottom:0;
  left:50%;
  background:currentColor
}

.rail span {
  color:var(--accent)
}

.hero-index {
  position:absolute;
  right:6.7vw;
  bottom:5vw;
  display:flex;
  align-items:center;
  gap:1.6vw
}

.hero-index span {
  color:var(--accent)
}

.hero-index i {
  width:9vw;
  height:1px;
  background:var(--paper)
}

.discover {
  position:absolute;
  bottom:1.6vw;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  padding:10px;
  line-height:1
}

.discover span {
  display:block;
  font-family:Arial;
  font-size:25px;
  line-height:7px;
  margin-top:7px
}

/* The source artboard is 2880px wide; dimensions below map it to 1440px. */
.light {
  background:var(--paper);
  color:var(--ink)
}

.light .masthead {
  background:var(--paper)
}

.section-label {
  font-size:var(--label);
  letter-spacing:.105em;
  line-height:1.3
}

.section-label>span {
  color:var(--accent);
  margin-right:1.2vw
}

.section-label b {
  font-weight:500;
  color:var(--accent)
}

.section-intro {
  font-size:clamp(20px,1.66667vw,34px);
  line-height:1.2;
  margin-top:1vw
}

.section-label+h2 {
  margin-top:1.6vw
}

.text-link {
  color:var(--accent);
  font-size:var(--label);
  letter-spacing:.105em;
  display:inline-flex;
  align-items:center;
  gap:.4em;
  min-height:44px;
  line-height:1.35
}

.text-link>span {
  display:inline-block;
  font:26px/1 Arial,sans-serif;
  transition:transform .28s
}

.text-link:hover>span {
  transform:translateX(5px)
}

.text-link:hover {
  text-decoration:underline;
  text-underline-offset:5px
}

.about {
  height:auto
}

.about .masthead {
  height:9.4vw
}

.about-grid {
  display:grid;
  grid-template-columns:45.25% 51.25%;
  gap:3.5%
}

.about-title {
  font:400 11.08056vw/.95 Bebas,Impact,sans-serif!important;
  letter-spacing:0;
  margin-top:1.25vw!important;
  white-space:nowrap
}

.about-title span {
  color:var(--cyan)
}

.about-copy-placeholder {
  height:21.97531vw;
  background:var(--ink);
  margin-top:1.1vw
}

.about-image-placeholder {
  height:34.79167vw;
  background:var(--ink);
  border-radius:1.5vw;
  margin-top:1.65vw
}

.about-bottom {
  display:flex;
  justify-content:space-between;
  margin-top:4.1vw
}

.services {
  height:auto;
  padding-top:2.91667vw;
  position:relative
}

.services h2 {
  margin-top:1.5vw
}

.services .section-intro {
  margin-top:1.15vw
}

.service-list {
  margin-top:1.2vw
}

.service-row {
  display:grid;
  grid-template-columns:10.6% 29.05% 1fr;
  align-items:center;
  min-height:16.8vw;
  border-bottom:1px solid var(--rule);
  margin-inline:.7vw 2.4vw;
  padding-bottom:1.2vw
}

.service-row:first-child {
  min-height:12.6vw;
  align-items:start
}

.service-row:last-child {
  border:0;
  min-height:18vw;
  padding-top:2.6vw;
  padding-bottom:0
}

.service-number {
  font:900 4.26667vw/1 Roboto,sans-serif;
  color:transparent;
  -webkit-text-stroke:1px var(--paper);
  padding-left:1.4vw;
  align-self:center
}

.service-description {
  border-left:1px solid var(--accent);
  padding-left:1.8vw;
  min-height:11.3vw;
  width:31vw
}

.service-description h3 {
  margin-top:.55vw
}

.service-description>p:not(.eyebrow) {
  font-weight:400;
  margin-top:.4vw;
  line-height:1.2
}

.service-description .text-link {
  min-height:30px;
  margin-top:.3vw
}

.dash-list {
  list-style:none;
  padding:0;
  margin:0;
  font-weight:400;
  line-height:1.4
}

.dash-list li {
  position:relative;
  padding-left:1.5em;
  margin-bottom:.26em
}

.dash-list li:before {
  content:'';
  position:absolute;
  width:.9em;
  height:2px;
  left:0;
  top:.65em;
  background:var(--accent)
}

.service-row>.dash-list {
  align-self:center;
  margin-top:-.3vw
}

.services .rail {
  top:10.1vw;
  right:2.8vw
}

.pricing {
  height:auto;
  padding-top:1.9vw
}

.pricing h2 {
  margin-top:.6vw
}

.pricing .section-intro {
  line-height:1.35;
  margin-top:.75vw
}

.pricing-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:5.6vw;
  min-height:30.2vw
}

.price-plan {
  border-right:1px solid rgba(4,11,18,.25);
  padding:.6vw 4.3vw 1vw 7.45vw
}

.price-plan:nth-child(2) {
  padding-left:6.4vw;
  padding-right:5.7vw
}

.price-plan:last-child {
  border:0;
  padding-left:3.5vw;
  padding-right:4.5vw
}

.price {
  font:900 4.26667vw/1 Roboto,Arial,sans-serif;
  margin-top:2.1vw;
  white-space:nowrap
}

.price>span {
  font-size:2.2vw;
  color:var(--cyan)
}

.price.custom {
  font-size:2.66667vw;
  height:4.26667vw;
  display:flex;
  align-items:flex-end
}

.vat {
  letter-spacing:.105em;
  margin-top:.5vw
}

.plan-summary {
  margin-top:1.25vw;
  min-height:4.1vw;
  line-height:1.25;
  position:relative;
  white-space:nowrap
}

.plan-summary:after {
  content:'';
  position:absolute;
  left:-.8vw;
  right:-.6vw;
  bottom:0;
  height:1px;
  background:rgba(4,11,18,.5)
}

.price-plan .dash-list {
  margin-top:1.7vw;
  letter-spacing:.105em;
  font-weight:500;
  white-space:nowrap;
  margin-left:.5vw
}

.price-plan .dash-list li {
  margin-bottom:.8vw
}

.price-plan .text-link {
  white-space:nowrap;
  margin-left:.5vw;
  min-height:32px;
  margin-top:.2vw
}

.custom-work {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-inline:2.5vw .8vw;
  gap:20px
}

.custom-work p {
  font-size:var(--body)
}

.work {
  padding-top:5.7vw
}

.work h2 {
  margin-top:.65vw
}

.work-kicker {
  margin-top:.7vw
}

.checkerboard {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:2.55vw;
  aspect-ratio:2/1
}

.checkerboard i {
  background:var(--cyan)
}

.checkerboard i:nth-child(2),.checkerboard i:nth-child(4),.checkerboard i:nth-child(5),.checkerboard i:nth-child(7) {
  background:var(--paper)
}

.project {
  height:26.1vw;
  margin-top:3.2vw;
  display:grid;
  grid-template-columns:38.7% 31.6% 1fr;
  border-left:1px solid var(--accent);
  border-bottom:1px solid var(--accent);
  position:relative
}

.project-caption {
  padding-left:1.1vw
}

.project-caption h3 {
  font-size:var(--h2);
  margin-top:.7vw;
  position:relative
}

.project-caption h3:after {
  content:'';
  display:block;
  width:9vw;
  height:1px;
  background:var(--accent);
  margin-top:.15vw
}

.project-caption>p:last-child {
  font-size:clamp(19px,1.66667vw,34px);
  margin-top:1vw
}

.project-layout {
  height:23.4vw;
  display:grid;
  grid-template-columns:72.5% 27.5%;
  gap:2.45vw;
  padding-right:2.45vw;
  padding-top:.5vw
}

.project-primary,.project-thumbs i {
  background:var(--cyan)
}

.project-thumbs {
  display:grid;
  gap:1.4vw;
  grid-template-rows:repeat(3,1fr)
}

.project:after {
  content:'';
  height:22vw;
  width:1px;
  background:rgba(0,165,223,.2);
  position:absolute;
  left:70.3%;
  top:2.3vw
}

.project .rail {
  right:-1.6vw;
  top:5.5vw
}

.contact {
  padding-top:2.45vw
}

.contact h2 {
  margin-top:1.1vw
}

.contact .section-intro {
  margin-top:1.15vw
}

.contact-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:7.2vw;
  margin-top:4.1vw
}

.contact-card {
  border:1px solid var(--paper);
  border-radius:1.8vw;
  min-height:22.65vw;
  display:grid;
  grid-template-columns:6.8vw 1fr;
  gap:2.1vw;
  padding:3.3vw 5.2vw 2.8vw 3.3vw
}

.contact-icon {
  width:6.8vw;
  height:6.8vw;
  border-radius:1vw;
  background:#071521;
  color:var(--accent);
  padding:.9vw
}

.contact-icon svg {
  width:100%;
  height:100%
}

.card-index {
  display:flex;
  align-items:center;
  gap:.5vw;
  color:var(--accent);
  letter-spacing:.1em
}

.card-index i {
  height:1px;
  flex:1;
  background:var(--paper)
}

.contact-card h3 {
  margin-top:1.1vw
}

.contact-card p {
  margin-top:.7vw;
  line-height:1.25
}

.contact-card .text-link {
  margin-top:1.25vw;
  min-height:44px
}

.email-address {
  display:block;
  border-top:1px solid var(--paper);
  padding-top:1.2vw;
  margin-top:1.7vw;
  font-style:italic;
  white-space:nowrap
}

.email-address span {
  color:var(--accent);
  margin-right:.5vw
}

.order-card {
  border-color:var(--accent)
}

.order-card .contact-icon {
  background:var(--cyan);
  color:var(--ink)
}

.contact-note {
  margin:3.1vw 1.15vw 0;
  border-top:2px solid var(--paper);
  display:flex;
  align-items:center;
  gap:1vw;
  padding-block:1.9vw 2.2vw
}

.contact-note>span {
  border:1px solid var(--accent);
  border-radius:5px;
  width:2.6vw;
  height:2.6vw;
  display:grid;
  place-items:center;
  color:var(--accent);
  font-size:26px
}

.footer {
  padding-bottom:2vw
}

.footer-main {
  margin-inline:1.15vw;
  border-top:2px solid var(--accent);
  display:grid;
  grid-template-columns:1fr 11.6vw 16.5vw;
  gap:2.2vw;
  padding-top:1vw;
  min-height:10.85vw
}

.footer-brand {
  margin-left:-1.15vw
}

.footer-brand .brand {
  width:13.5vw
}

.footer-brand p {
  border-top:1px solid var(--paper);
  width:13.5vw;
  margin-top:1.2vw;
  padding-top:.5vw
}

.footer nav a {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--rule);
  letter-spacing:.1em;
  min-height:1.95vw
}

.footer nav a:last-child {
  border:0
}

.footer nav a span {
  color:var(--accent);
  font:24px Arial
}

.footer-social>div,.footer-social>a {
  display:flex;
  gap:.8vw;
  align-items:center;
  border-bottom:1px solid var(--rule);
  padding-bottom:.6vw;
  margin-bottom:.6vw
}

.footer-social>a {
  border:0
}

.footer-social p {
  line-height:1.55
}

.social-icon {
  color:var(--accent);
  font:28px Arial
}

.footer-bottom {
  margin-inline:1.15vw;
  border-top:1px solid var(--paper);
  display:flex;
  justify-content:space-between;
  padding-top:1.3vw;
  font-size:clamp(9px,.65278vw,13px)
}

/* Native dialog supplies focus containment, inert background, and Escape behavior. */
#mobile-menu {
  position:fixed;
  inset:0;
  max-width:none;
  max-height:none;
  width:100%;
  height:100dvh;
  margin:0;
  padding:24px;
  background:var(--ink);
  color:var(--paper);
  border:0
}

#mobile-menu::backdrop {
  background:var(--ink)
}

.menu-top {
  display:flex;
  justify-content:space-between;
  align-items:center
}

.menu-top img {
  width:180px;
  height:auto
}

.menu-close,.menu-toggle {
  border:0;
  background:none;
  color:var(--accent);
  padding:12px 0 12px 12px;
  align-items:center;
  gap:12px;
  min-height:44px
}

.menu-close span {
  font:30px Arial
}

#mobile-menu nav {
  display:flex;
  flex-direction:column;
  padding:40px 0
}

#mobile-menu nav a {
  font-size:clamp(30px,8vw,60px);
  font-weight:900;
  border-bottom:1px solid var(--rule);
  padding:15px 0
}

#mobile-menu nav a span {
  font-size:13px;
  color:var(--accent);
  margin-right:16px
}

body.menu-open {
  overflow:hidden
}

@media(min-width:1800px) {
  :root {
    --body:1.04167vw;
    --label:1.04167vw;
    --h2:2.66667vw
  }

  .section-intro,.project-caption>p:last-child {
    font-size:1.66667vw
  }

  h3 {
    font-size:1.66667vw
  }

}

@media(max-width:1100px) and (min-width:721px) {
  .masthead nav {
    gap:2vw;
    margin-left:0
  }

  .masthead .request {
    font-size:12px;
    width:18vw
  }

  .hero .intro {
    font-size:18px
  }

  .hero-copy .eyebrow {
    font-size:11px
  }

  .hero-actions {
    margin-top:2.7vw
  }

  .about-bottom {
    font-size:12px
  }

  .services {
    height:auto;
    min-height:auto;
    padding-bottom:3vw
  }

  .service-row {
    grid-template-columns:11% 37% 1fr;
    min-height:19vw
  }

  .service-description {
    width:35vw
  }

  .service-description>p br {
    display:none
  }

  .service-row:last-child {
    min-height:20vw
  }

  .pricing {
    height:auto;
    padding-bottom:15px
  }

  .pricing-grid {
    margin-top:4vw
  }

  .price-plan {
    padding-left:3vw;
    padding-right:3vw
  }

  .price-plan:nth-child(2) {
    padding-left:3vw;
    padding-right:3vw
  }

  .price-plan:last-child {
    padding-left:3vw;
    padding-right:0
  }

  .plan-summary {
    white-space:normal;
    min-height:65px
  }

  .price-plan .dash-list {
    white-space:normal;
    letter-spacing:.04em
  }

  .price-plan .text-link {
    white-space:normal;
    letter-spacing:.04em
  }

  .custom-work {
    margin-top:14px;
    margin-inline:0
  }

  .custom-work p {
    max-width:65%;
    font-size:12px
  }

  .custom-work .text-link {
    font-size:12px
  }

  .contact-card {
    gap:2vw;
    padding:3vw 2.5vw
  }

  .contact-card h3 {
    font-size:20px
  }

  .contact-card p br {
    display:none
  }

  .contact-grid {
    gap:5vw
  }

  .email-address {
    font-size:12px
  }

  .footer-main {
    grid-template-columns:1fr 14vw 24vw
  }

  .footer-brand p {
    width:20vw
  }

  .footer nav a {
    min-height:30px
  }

  .footer-social {
    font-size:12px
  }

}

@media(max-width:720px) {
  :root {
    --gutter:6vw;
    --body:15px;
    --label:12px;
    --h2:30px
  }

  html {
    scroll-padding-top:18px
  }

  .masthead {
    height:96px
  }

  .brand {
    width:190px
  }

  .masthead nav,.masthead .request {
    display:none
  }

  .menu-toggle {
    display:flex
  }

  .hero {
    height:760px;
    min-height:calc(100svh - 96px);
    max-height:920px
  }

  .hero-art {
    left:-50%;
    top:228px;
    width:165%;
    height:auto;
    aspect-ratio:2880/1540
  }

  .hero-art img {
    height:auto
  }

  .hero-copy {
    padding-top:28px
  }

  .hero-copy .eyebrow {
    font-size:10px;
    letter-spacing:.06em;
    max-width:310px;
    line-height:1.6
  }

  .hero h1 {
    font-size:19.8vw;
    line-height:.95;
    margin-top:15px
  }

  .hero .intro {
    font-size:16px;
    line-height:1.3;
    margin-top:14px;
    max-width:335px;
    margin-left:0
  }

  .hero .intro br {
    display:none
  }

  .hero-actions {
    margin-top:30px;
    gap:12px
  }

  .button {
    height:49px;
    width:151px;
    font-size:12px;
    gap:18px
  }

  .button span {
    font-size:23px
  }

  .hero .rail {
    display:none
  }

  .hero-index {
    bottom:65px;
    right:6vw;
    gap:14px;
    font-size:12px
  }

  .hero-index i {
    width:65px
  }

  .discover {
    bottom:14px;
    font-size:12px
  }

  .about {
    height:auto;
    padding-top:36px;
    padding-bottom:30px
  }

  .secondary-header {
    display:none
  }

  .about-grid {
    grid-template-columns:1fr;
    gap:24px
  }

  .section-label {
    font-size:11px;
    letter-spacing:.1em
  }

  .section-label>span {
    margin-right:10px
  }

  .about-title {
    font-size:22vw!important;
    margin-top:18px!important
  }

  .about-copy-placeholder {
    height:35vw;
    margin-top:18px
  }

  .about-image-placeholder {
    height:65vw;
    margin-top:0;
    border-radius:17px
  }

  .about-bottom {
    margin-top:30px;
    gap:20px;
    font-size:10px;
    align-items:flex-end
  }

  .about-bottom>p:first-child {
    max-width:220px;
    line-height:1.5
  }

  .about-bottom>p:last-child {
    white-space:nowrap
  }

  .services {
    height:auto;
    padding-top:40px;
    padding-bottom:40px
  }

  .section-label+h2,.services h2 {
    margin-top:20px
  }

  .section-intro {
    font-size:19px;
    margin-top:14px!important;
    line-height:1.3
  }

  .section-intro br {
    display:none
  }

  .services .rail {
    display:none
  }

  .service-list {
    margin-top:28px
  }

  .service-row,.service-row:first-child,.service-row:last-child {
    grid-template-columns:50px 1fr;
    min-height:0;
    padding:26px 0;
    margin:0;
    gap:18px;
    align-items:start
  }

  .service-row:first-child {
    padding-top:0
  }

  .service-number {
    font-size:36px;
    padding-left:0;
    align-self:start;
    margin-top:25px
  }

  .service-description {
    width:auto;
    min-height:0;
    padding-left:16px
  }

  .service-description .eyebrow {
    font-size:11px;
    letter-spacing:.07em
  }

  .service-description h3 {
    font-size:22px;
    margin-top:10px
  }

  .service-description>p:not(.eyebrow) {
    font-size:14px;
    margin-top:9px;
    line-height:1.35
  }

  .service-description>p br {
    display:none
  }

  .service-description .text-link {
    margin-top:8px;
    min-height:44px;
    font-size:11px
  }

  .service-row>.dash-list {
    grid-column:2;
    margin-top:0;
    padding-left:16px;
    font-size:14px
  }

  .dash-list li {
    margin-bottom:7px
  }

  .pricing {
    height:auto;
    padding-block:36px 28px
  }

  .pricing h2 {
    margin-top:18px
  }

  .pricing-grid {
    grid-template-columns:1fr;
    margin-top:30px;
    min-height:0
  }

  .price-plan,.price-plan:nth-child(2),.price-plan:last-child {
    padding:25px 16px 27px;
    border:0;
    border-bottom:1px solid rgba(4,11,18,.25)
  }

  .price-plan:last-child {
    border:0
  }

  .price {
    font-size:62px;
    margin-top:22px
  }

  .price>span {
    font-size:30px
  }

  .price.custom {
    font-size:38px;
    height:auto;
    display:block
  }

  .vat {
    margin-top:4px
  }

  .price.custom+.vat {
    display:none
  }

  .plan-summary {
    margin-top:20px;
    min-height:55px;
    white-space:normal;
    font-size:15px
  }

  .plan-summary:after {
    left:0;
    right:0
  }

  .price-plan .dash-list {
    margin-top:22px;
    margin-left:0;
    letter-spacing:.05em;
    white-space:normal
  }

  .price-plan .dash-list li {
    margin-bottom:13px
  }

  .price-plan .text-link {
    margin-left:0;
    min-height:44px;
    margin-top:0;
    font-size:12px
  }

  .custom-work {
    display:block;
    margin:10px 16px 0
  }

  .custom-work p {
    font-size:12px;
    line-height:1.5
  }

  .custom-work .text-link {
    margin-top:15px;
    font-size:12px
  }

  .work {
    padding-top:40px
  }

  .work h2 {
    margin-top:18px
  }

  .work-kicker {
    margin-top:12px
  }

  .checkerboard {
    margin-top:24px
  }

  .project {
    height:auto;
    min-height:400px;
    margin-top:26px;
    grid-template-columns:1fr;
    gap:25px;
    padding-bottom:25px
  }

  .project-caption {
    padding-left:14px
  }

  .project-caption h3 {
    margin-top:10px;
    font-size:29px
  }

  .project-caption h3:after {
    width:100px;
    margin-top:5px
  }

  .project-caption>p:last-child {
    font-size:16px;
    margin-top:12px
  }

  .project-layout {
    margin-left:14px;
    height:250px;
    width:75%;
    padding:0;
    gap:18px;
    grid-template-columns:1fr 65px
  }

  .project-thumbs {
    gap:12px
  }

  .project:after,.project .rail {
    display:none
  }

  .contact {
    padding-top:35px
  }

  .contact h2 {
    margin-top:18px
  }

  .contact-grid {
    grid-template-columns:1fr;
    gap:22px;
    margin-top:30px
  }

  .contact-card {
    padding:25px 22px;
    grid-template-columns:56px 1fr;
    gap:17px;
    border-radius:20px;
    min-height:278px
  }

  .contact-icon {
    width:56px;
    height:56px;
    border-radius:9px;
    padding:6px
  }

  .card-index {
    gap:8px;
    font-size:12px
  }

  .contact-card h3 {
    font-size:20px;
    margin-top:13px
  }

  .contact-card p {
    font-size:13px;
    line-height:1.4;
    margin-top:10px
  }

  .contact-card p br {
    display:none
  }

  .contact-card .text-link {
    margin-top:14px;
    font-size:11px;
    letter-spacing:.09em
  }

  .email-address {
    margin-top:14px;
    padding-top:15px;
    font-size:12px
  }

  .email-address span {
    margin-right:4px
  }

  .contact-note {
    margin:28px 0 0;
    padding-block:24px;
    gap:14px
  }

  .contact-note>span {
    width:30px;
    height:34px;
    flex-shrink:0;
    font-size:23px
  }

  .contact-note p {
    font-size:12px;
    line-height:1.45
  }

  .contact-note br {
    display:none
  }

  .footer {
    padding-bottom:24px
  }

  .footer-main {
    margin:0;
    grid-template-columns:1fr 1fr;
    gap:24px;
    padding-top:22px
  }

  .footer-brand {
    margin-left:0;
    grid-column:1/-1
  }

  .footer-brand .brand {
    width:190px
  }

  .footer-brand p {
    width:190px;
    margin-top:15px;
    padding-top:10px;
    font-size:13px
  }

  .footer nav a {
    min-height:38px;
    font-size:12px
  }

  .footer-social {
    font-size:11px
  }

  .footer-social>div,.footer-social>a {
    gap:6px;
    flex-wrap:wrap;
    padding-bottom:10px;
    margin-bottom:10px
  }

  .footer-social p {
    line-height:1.6
  }

  .footer-social>div>span:last-child,.footer-social>a>span:last-child {
    display:none
  }

  .social-icon {
    font-size:23px
  }

  .footer-bottom {
    margin:22px 0 0;
    padding-top:18px;
    font-size:9px;
    gap:14px;
    flex-wrap:wrap
  }

  .footer-bottom p:last-child {
    width:100%;
    font-size:8px
  }

  .text-link>span {
    font-size:22px
  }

}

@media(max-width:370px) {
  .brand {
    width:170px
  }

  .hero {
    height:700px
  }

  .hero-actions {
    gap:9px
  }

  .button {
    width:140px
  }

  .contact-card {
    padding:22px 16px;
    gap:12px;
    grid-template-columns:44px 1fr
  }

  .contact-icon {
    width:44px;
    height:44px
  }

  .contact-card h3 {
    font-size:18px
  }

  .email-address {
    font-size:11px
  }

}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    transition:none!important
  }

  .line {
    overflow:visible
  }

}

/* Reference alignment corrections after desktop comparison. */
@media(min-width:721px) {
  .hero h1 {
    margin-top:1vw
  }

  .hero .intro {
    margin-top:.25vw
  }

}

.hero h1 .white {
  font-family:Roboto,Arial,sans-serif;
  font-weight:900;
  font-size:.77em;
  line-height:0
}

.eyebrow .cyan {
  color:var(--accent)
}

@font-face {
  font-family:RobotoSymbols;
  src:url('/assets/Roboto-Symbols.woff2') format('woff2');
  font-weight:900;
  font-display:swap
}

.price>span {
  font-family:RobotoSymbols,Arial,sans-serif
}

.about-title>span {
  font-family:Roboto,Arial,sans-serif;
  font-size:.77em;
  line-height:0
}

@media(min-width:1101px) {
  .pricing-grid {
    grid-template-columns:34.55% 34.1% 31.35%
  }

}

.menu-toggle span {
  font-family:Arial,sans-serif;
  font-size:23px
}

#mobile-menu nav a span {
  font-weight:500
}

@media(max-width:720px) {
  .hero-art {
    top:350px
  }

}

@media(min-width:721px) and (max-width:1100px) {
  .service-description {
    width:auto;
    padding-right:16px
  }

  .service-row>.dash-list {
    padding-left:14px
  }

}

.hero h1 .white,.about-title>span {
  display:inline-block;
  width:.14em;
  height:.14em;
  background:currentColor;
  font-size:inherit;
  line-height:0;
  overflow:hidden;
  color:var(--paper);
  vertical-align:baseline
}

.about-title>span {
  color:var(--cyan)
}


/* Sticky navigation shares the palette of the section beneath it. */
:root { --header-height: 9.09722vw; }
html { scroll-padding-top: var(--header-height); }
body > .masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-height);
  background: rgb(4 11 18 / 65%);
  color: var(--paper);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgb(242 241 237 / 22%);
}
body > .masthead[data-theme="light"] {
  background: rgb(242 241 237 / 65%);
  color: var(--ink);
  border-bottom-color: rgb(4 11 18 / 22%);
}
@media (min-width: 721px) {
  .about { height:auto; padding-top: 2.8vw; }
}
@media (max-width: 720px) {
  :root { --header-height: 96px; }
  html { scroll-padding-top: var(--header-height); }
}
/* Each main section occupies at least the usable viewport below navigation. */
main > section {
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
  height: auto;
  max-height: none;
}
main > .hero {
  padding-bottom: 100px;
}
.hero-art {
  height: 100%;
}
.hero-art img {
  height: 100%;
  object-fit: cover;
}
main > .about,
main > .services,
main > .pricing,
main > .contact {
  padding-bottom: max(32px, 2.2vw);
}
@media (max-width: 720px) {
  main > .hero {
    min-height: max(calc(100svh - var(--header-height)), calc(420px + 88.23vw));
  }
  .hero-art {
    height: auto;
  }
  .hero-art img {
    height: auto;
  }
}
/* The original checkerboard is the selectable work index. */
.work-tile {
  position: relative;
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--cyan);
  color: var(--ink);
  cursor: pointer;
  overflow: hidden;
}
.work-tile:nth-child(2), .work-tile:nth-child(4),
.work-tile:nth-child(5), .work-tile:nth-child(7) { background: var(--paper); }
.work-tile img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.work-tile-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  font-size: var(--label);
  letter-spacing: .06em;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(100%);
  transition: transform .25s ease;
}
.work-tile:hover .work-tile-label,
.work-tile:focus-visible .work-tile-label,
.work-tile[aria-pressed="true"] .work-tile-label { transform: translateY(0); }
.work-tile:focus-visible { outline-offset: -5px; outline: 3px solid var(--ink); z-index: 1; }
.project-primary { overflow: hidden; }
.project-primary img { width: 100%; height: 100%; object-fit: contain; }
.project-thumbnail { border: 0; padding: 0; min-width: 0; min-height: 44px; background: var(--cyan); cursor: pointer; overflow: hidden; }
.project-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.project-thumbnail[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--paper); }
.project-thumbnail:focus-visible { outline-offset: 4px; }
.gallery-status { max-width: 32ch; font-size: 13px!important; line-height: 1.5; margin-top: 20px!important; opacity: .75; }
.project-caption > p:nth-of-type(2) { font-size: clamp(19px,1.66667vw,34px); margin-top: 1vw; }
@media (hover: none) { .work-tile-label { transform: none; font-size: 10px; padding: 8px 5px; } }
@media (max-width:720px) { .project-caption > p:nth-of-type(2) { font-size:16px; margin-top:12px; } .gallery-status { margin-top:12px!important; } }
@media (prefers-reduced-motion:reduce) { .work-tile-label { transition:none; } }
/* Quiet discovery cue, bright on interaction. */
.discover {
  color: #858b91;
  transition: color .25s ease;
}
.discover > span { color: inherit; }
.discover:hover,
.discover:focus-visible,
.discover:active { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .discover { transition: none; }
}
/* Cyan text selection follows each section's light/dark treatment. */
body { --selection-text: #fff; }
.light, .masthead[data-theme="light"] { --selection-text: var(--ink); }
::selection {
  background: var(--cyan);
  color: var(--selection-text, #fff);
  text-shadow: none;
}

/* Frame detail crops and draw the selected state above the image. */
.project-thumbnail { position: relative; }
.project-thumbnail img { display: block; }
.project-thumbnail[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 3px solid var(--paper);
  pointer-events: none;
}

/* Logo drawing → measured hero wireframe → finished composition. */
.site-loader { display: none; }
.intro-pending { overflow: hidden; }
.intro-pending .site-loader {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #040b12;
}
.loader-logo { position: relative; z-index: 1; width: min(62vw, 448px); height: auto; overflow: visible; }
.loader-wire { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.loader-wire rect, .loader-wire path { fill: none; stroke: var(--cyan); stroke-width: 1; vector-effect: non-scaling-stroke; }
.site-loader button { position: absolute; bottom: 28px; right: var(--gutter, 28px); min-height: 44px; padding: 12px; background: none; border: 0; color: var(--paper); font: inherit; font-size: 11px; letter-spacing: .12em; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .intro-pending { overflow: auto; }
  .intro-pending .site-loader { display: none; }
}


/* Let each artwork define its frame; detail views remain square. */
.project { height: auto; min-height: 0; padding-bottom: 2.4vw; align-items: start; }
.project-layout { height: auto; min-width: 0; align-items: start; grid-template-columns: minmax(0, 1fr) minmax(44px, 27.5%); }
.project-primary { min-width: 0; background: transparent; align-self: start; }
.project-primary img { display: block; width: 100%; height: auto; object-fit: contain; filter: none; }
.project-thumbs { grid-template-rows: none; grid-auto-rows: auto; align-content: start; }
.project-thumbnail { position: relative; aspect-ratio: 1; width: 100%; min-height: 0; background: transparent; }
.project-thumbnail img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; filter: none; }
.work-tile img { filter: none; }
.project:after { display: none; }
.project-primary:empty { aspect-ratio: 1; }
@media (max-width:720px) {
  .project { padding-bottom: 25px; }
  .project-layout { width: calc(100% - 28px); height: auto; grid-template-columns: minmax(0, 1fr) minmax(55px, 22%); }
}

/* Reveal project details only after selection; retain context above the panel. */
.project[hidden] { display: none; }
.project { scroll-margin-top: clamp(24px, 4vw, 64px); }
.work-tile img { filter: grayscale(1); transition: filter .55s ease; }
.work-tile:is(:hover, :focus-visible) img { filter: grayscale(0); }
@media (prefers-reduced-motion: reduce) {
  .work-tile img { transition: none; }
}

.project-thumbnail { cursor: default; }
.project-primary[role="button"] { cursor: zoom-in; }
.project-primary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
.project-metadata { display: grid; gap: 20px; margin: 32px 0 0; color: #939ca3; font-size: clamp(13px, 1.05vw, 17px); }
.work-preview-open { overflow: hidden; }
.work-preview { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 70px 32px 32px; border: 0; background: rgb(4 11 18 / 97%); color: var(--paper); }
.work-preview[open] { display: flex; align-items: center; justify-content: center; }
.work-preview::backdrop { background: #040b12; }
.work-preview > img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.work-preview-close { position: absolute; top: 16px; right: 24px; min-height: 44px; padding: 12px; border: 0; background: none; color: inherit; font: inherit; letter-spacing: .1em; cursor: pointer; }
@media(max-width:720px) { .work-preview { padding: 72px 12px 20px; } }

/* Project information sits to the right of the artwork. */
.project { grid-template-columns: 35% minmax(0, 42%) minmax(0, 1fr); gap: 2%; }
.project > .rail { display: none; }
.project > .project-metadata { margin: .5vw 0 0; }
.project-metadata dt { color: #939ca3; font-weight: 400; }
.project-metadata dd { margin: 6px 0 0; color: #b6bdc2; overflow-wrap: anywhere; }
.work-preview[open] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 20%); gap: 32px; }
.work-preview > img { justify-self: center; min-width: 0; max-height: calc(100dvh - 102px); }
.work-preview > .project-metadata { align-self: center; margin: 0; }
@media(max-width:720px) {
  .project { grid-template-columns: 1fr; gap: 25px; }
  .project > .project-metadata { margin: 0 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .work-preview[open] { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 20px; }
  .work-preview > img { max-height: 100%; }
  .work-preview > .project-metadata { grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: 12px; gap: 12px; }
}

/* Disable native image dragging and supported mobile save-image callouts. */
img, picture, .work-tile, .project-primary, .project-thumbnail {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}