@font-face {
  font-family: Archivo;
  src: url("archivo.woff") format("woff");
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 125%;
  font-display: swap;
}

:root {
  --paper: #f8f6f0;
  --ink: #0c1524;
  --dark: #0b1322;
  --gold: #ffbb39;
  --line: #dedad0;
  --muted: #505763;
  --shell: 1280px;
}
body { font-family: Archivo, Arial, sans-serif; font-weight: 450; }
h1, h2, h3, h4 { font-weight: 800; word-spacing: .055em; }
.button { min-height: 48px; border-radius: 7px; font-weight: 750; font-size: 14px; }
.text-link { font-weight: 750; }
.kicker { letter-spacing: .095em; }
.site-header { color: #faf7ee; background: var(--dark); border-color: #ffffff20; }
.header-inner { height: 77px; }
.site-header .brand { width: 142px; }
.site-nav > a:not(.button) { color: #e0e0e5; font-size: 14px; font-weight: 650; }
.site-nav > a:not(.button):hover { color: var(--gold); }
.site-header .header-contact { min-height: 42px; }
.site-header :focus-visible, .studio-hero :focus-visible, .service-page-top :focus-visible { outline-color: var(--gold); }

.studio-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f8f6f0;
  background: radial-gradient(ellipse at 79% 48%, #263349 0%, #142035 34%, var(--dark) 66%);
}
.studio-hero-grid {
  min-height: 574px;
  display: grid;
  grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  padding-block: 46px 36px;
}
.studio-hero-copy { position: relative; z-index: 1; }
.studio-hero .kicker { color: #eee9dd; margin-bottom: 23px; }
.studio-hero h1 {
  font-size: clamp(45px, 6.1vw, 92px);
  letter-spacing: -.072em;
  line-height: .98;
  font-weight: 825;
}
.studio-hero h1 span, .studio-hero h1 em { display: block; }
.studio-hero h1 em { color: var(--gold); }
.studio-hero-copy > p:not(.kicker) {
  max-width: 433px;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.55;
  color: #cdd1da;
  margin-top: 23px;
}
.studio-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 23px; margin-top: 29px; }
.studio-hero-actions .button { min-height: 51px; }
.studio-hero-actions .text-link { color: #f8f6f0; }
.studio-hero-foot {
  min-height: 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #ffffff25;
  color: #c0c6d2;
  font-size: 10px;
}
.studio-hero-foot a { display: flex; align-items: center; gap: 5px; }
.studio-hero-foot b { color: var(--gold); margin-inline: 4px; }
.studio-hero-foot svg { width: 14px; height: 14px; }
.hero-visual {
  position: relative;
  isolation: isolate;
  height: clamp(340px, 38vw, 540px);
  border: 1px solid #ffffff29;
  border-radius: 15px;
  background: radial-gradient(ellipse at 52% 52%, #263a514c, #0b132233 70%);
  overflow: hidden;
}
.visual-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#cdd8eb16 1px, transparent 1px),linear-gradient(90deg,#cdd8eb16 1px,transparent 1px);
  background-size: 31px 31px;
  mask-image: radial-gradient(ellipse at center,#000,transparent 83%);
}
.visual-orbit {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 51%;
  width: 77%;
  height: 68%;
  transform: translate(-50%, -50%) rotate(-27deg);
  border: 1px solid #f5bb5475;
  border-radius: 50%;
  box-shadow: 0 0 52px #ffc45d15, inset 0 0 40px #ffc45d13;
}
.visual-orbit-small { width: 65%; height: 57%; border-style: dashed; opacity: .6; }
.hero-device {
  position: absolute;
  inset: 5% 7% auto 7%;
  width: 86%;
  height: 86%;
  object-fit: contain;
  filter: drop-shadow(5px 16px 17px #050a137f);
  animation: device-arrive .8s ease-out both;
}
@keyframes device-arrive { from { opacity: .45; transform: translateY(13px) scale(.98); } to { opacity: 1; transform: none; } }
.visual-label,.visual-index,.visual-note,.visual-caption { position: absolute; z-index: 1; font-size: clamp(8px, .9vw, 11px); }
.visual-label { left: 5%; top: 5%; color: #ede9df; display: inline-flex; gap: 6px; align-items: center; }
.visual-label i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.visual-index { right: 5%; top: 5%; color: #c2cbda; }
.visual-note { right: 6%; bottom: 16%; background: var(--gold); color: var(--ink); padding: 8px 9px; border-radius: 4px; transform: rotate(-6deg); box-shadow: 3px 4px #050a13; }
.visual-note svg { width: 13px; height: 13px; }
.visual-caption { left: 5%; bottom: 5%; color: #c2cbda; }

.clients-band { border-bottom: 1px solid var(--line); background: #f3efe6; padding-block: 25px 21px; }
.clients-band h2 { text-align: center; color: #5b554b; margin-bottom: 9px; }
.client-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); align-items: center; gap: 18px; }
.client-grid img { width: 100%; max-width: 150px; height: auto; margin: auto; }
.studio-heading h2, .agency-story h2, .faq-section h2 {
  font-size: clamp(45px, 6.5vw, 92px);
  letter-spacing: -.076em;
  line-height: .94;
}
.studio-heading h2 em, .agency-story h2 em, .faq-section h2 em { color: #625e55; }
.studio-heading { margin-bottom: 33px; }
.studio-heading > p { font-size: 17px; line-height: 1.5; }
.solution-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 13px; }
.solution {
  grid-column: span 4;
  min-width: 0;
  border: 1px solid #d8d3c6;
  border-radius: 13px;
  overflow: hidden;
  background: #eee9df;
  color: var(--ink);
  transition: box-shadow .25s, border-color .25s;
}
.solution:hover { border-color: #8b877d; box-shadow: 0 9px 20px #10182714; }
.solution-web { grid-column: span 7; background: #172338; color: #fffaf0; border-color: #28364b; }
.solution-shop { grid-column: span 5; background: #ffcb60; border-color: #e8ab32; }
.solution-brand { background: #eee8dc; }
.solution-marketing { background: #e4eaf0; }
.solution-video { background: #172338; color: #fffaf0; border-color: #28364b; }
.solution-link { position: relative; display: block; min-height: 285px; height: 100%; padding: 21px 22px; isolation: isolate; overflow: hidden; }
.solution-web .solution-link,.solution-shop .solution-link { min-height: 306px; }
.solution-meta { display: flex; justify-content: space-between; align-items: center; gap: 5px; }
.solution-meta .mono { display: inline-flex; gap: 8px; align-items: center; opacity: .85; }
.solution-meta .mono svg { width: 18px; height: 18px; }
.solution-meta .circle-arrow { width: 35px; height: 35px; border-color: currentColor; }
.solution-link h3 { font-size: clamp(23px, 3.1vw, 44px); line-height: 1; letter-spacing: -.055em; margin-block: 14px 8px; position: relative; z-index: 1; }
.solution-link p { font-size: 14px; max-width: 260px; position: relative; z-index: 1; }
.solution-image,.solution-video-still {
  position: absolute;
  bottom: -13%;
  right: -1%;
  width: 52%;
  height: 65%;
  object-fit: contain;
  object-position: bottom right;
  transition: transform .35s ease;
  pointer-events: none;
}
.solution-link:hover .solution-image,.solution-link:hover .solution-video-still { transform: translate(-5px,-6px) rotate(-2deg); }
.solution-web .solution-image { right: -3%; bottom: -14%; width: 63%; height: 94%; }
.solution-shop .solution-image { right: -5%; bottom: -12%; width: 59%; height: 81%; }
.solution-brand .solution-image { width: 57%; right: -3%; bottom: -22%; height: 72%; }
.solution-marketing .solution-image { width: 70%; bottom: -18%; right: -8%; }
.solution-video-still { border-radius: 8px; transform: rotate(-7deg); bottom: -16%; right: -8%; width: 75%; height: auto; }
.solution-video-still img { width: 100%; height: auto; }

.work-section { background: #101a2b; color: var(--paper); }
.work-section .kicker,.work-section .studio-heading h2 em { color: var(--gold); }
.work-section .studio-heading > p { color: #d5d8df; }
.work-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 23px 16px; }
.work-link { display: block; }
.work-image { position: relative; overflow: hidden; background: #d7d3cb; border-radius: 11px; aspect-ratio: 4 / 5; }
.work-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .44s cubic-bezier(.2,.65,.2,1); }
.work-link:hover .work-image img { transform: scale(1.045); }
.work-placeholder { width: 100%; height: 100%; background: var(--gold); color: var(--ink); display: grid; place-items: center; }
.work-placeholder svg { width: 50px; height: 50px; }
.work-caption { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-block: 13px 15px; border-bottom: 1px solid var(--line); }
.work-caption p { font-size: 10px; color: var(--muted); }
.work-caption h3 { font-size: clamp(21px, 2.8vw, 33px); letter-spacing: -.051em; margin-top: 5px; }
.work-caption .circle-arrow { width: 36px; height: 36px; }
.work-section .work-caption { border-color: #ffffff37; }
.work-section .work-caption p { color: #cbd1dc; }
.work-section .work-all { margin-top: 23px; }
.work-section .work-all:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.work-section :focus-visible { outline-color: var(--gold); }
.gallery-filters { margin-bottom: 20px; }
.case-figure { margin: 0; max-width: 720px; }
.case-figure img { border-radius: 12px; width: 100%; height: auto; }

.agency-section { background: #ede9df; }
.agency-story { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1fr); gap: 30px; align-items: center; }
.agency-story-copy > p:not(.kicker) { max-width: 390px; color: var(--muted); margin-top: 22px; font-size: 17px; }
.agency-story .text-link { margin-top: 19px; }
.agency-art {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 1.34;
  border-radius: 12px;
  background: repeating-linear-gradient(135deg,#ffffff21 0 1px,transparent 1px 22px),var(--gold);
}
.agency-art img { position: absolute; object-fit: contain; filter: drop-shadow(4px 8px 7px #38260040); }
.agency-shirt { width: 72%; height: 93%; top: 4%; left: 18%; transform: rotate(-5deg); }
.agency-notebook { width: 33%; height: 54%; left: 1%; bottom: 0; transform: rotate(-11deg); }
.agency-bottle { width: 81%; height: 104%; right: -3%; bottom: 0; transform: rotate(6deg); }
.agency-art-label,.agency-art-index { position: absolute; z-index: 2; font-size: clamp(8px,.95vw,11px); }
.agency-art-label { top: 5%; left: 5%; }
.agency-art-index { bottom: 5%; right: 5%; }
.studio-process { margin-top: 32px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; }
.studio-process > div { border-top: 1px solid #aaa49a; padding-top: 14px; }
.studio-process h3 { margin-block: 7px; font-size: 26px; letter-spacing: -.04em; }
.studio-process p { font-size: 15px; color: var(--muted); max-width: 305px; }

.faq-section { background: #f0ece3; border-top: 1px solid var(--line); }
.faq-grid { display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1fr); align-items: start; gap: 25px; }
.faq-section h2 { font-size: clamp(38px, 5.4vw, 74px); }
.faq-list { border-top: 1px solid #c9c3b7; }
.faq-list details { border-bottom: 1px solid #c9c3b7; }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-block: 14px; font-weight: 750; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary svg { width: 18px; height: 18px; transition: transform .2s; }
.faq-list details[open] summary svg { transform: rotate(45deg); }
.faq-list details p { padding-bottom: 14px; color: var(--muted); max-width: 490px; }
.contact-section { background: var(--dark); }
.contact-form { background: #142033; }
.contact-form input,.contact-form select,.contact-form textarea { background: #0e1829; }
.contact-section h2 { letter-spacing: -.073em; }
.site-footer { background: #08101e; }
.detail-heading h1 { font-size: clamp(42px, 6.8vw, 98px); letter-spacing: -.072em; }
.detail-body .button + .button { margin-left: 6px; }

.service-page-top { background: radial-gradient(ellipse at 80% 50%,#243752,var(--dark) 66%); color: var(--paper); }
.service-page-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.88fr); gap: 25px; align-items: center; min-height: 450px; padding-block: 45px 56px; }
.service-back { margin-bottom: 31px; color: #e4e6ec; }
.service-page-top .kicker { color: var(--gold); }
.service-page-top h1 { font-size: clamp(48px, 6.45vw, 98px); letter-spacing: -.076em; line-height: .93; }
.service-page-top h1 + p { font-size: 18px; color: #d2d7e0; margin-block: 20px; max-width: 500px; }
.service-page-media { display: grid; place-items: center; min-width: 0; }
.service-page-device { width: 90%; max-height: 390px; object-fit: contain; filter: drop-shadow(5px 16px 17px #050a136d); }
.service-page-video { width: 100%; aspect-ratio: 16/9; border-radius: 9px; background: var(--ink); }
.service-page-media > p { color: #cdd4df; margin-top: 10px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 20px 0 0; padding: 0; list-style: none; }
.tag-list li { border: 1px solid #ffffff41; border-radius: 20px; padding: 4px 8px; font-size: 12px; color: #f0ede6; }
.deliverable-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.deliverable { padding: 20px; border: 1px solid var(--line); border-radius: 9px; background: #f2eee4; }
.deliverable .mono { color: var(--muted); }
.deliverable h3 { font-size: 25px; letter-spacing: -.046em; margin-block: 9px; }
.deliverable p { color: var(--muted); font-size: 15px; }
.deliverable-image { width: 100%; height: 175px; margin-top: 15px; object-fit: contain; }
.service-page-cta { margin-top: 27px; display: flex; justify-content: space-between; align-items: center; gap: 11px; flex-wrap: wrap; padding: 17px 19px; border-radius: 9px; background: var(--gold); }
.service-page-cta p { font-size: 22px; font-weight: 800; letter-spacing: -.04em; }
.reveal-pending { opacity: .16; transform: translateY(12px); transition: opacity .48s ease-out,transform .48s ease-out; }
.reveal-visible,.reveal-pending:focus-within { opacity: 1; transform: none; }

@media (max-width: 1020px) {
  .studio-hero-grid { min-height: 470px; }
  .studio-hero h1 { font-size: clamp(40px,6.05vw,71px); }
  .solution-web .solution-image { right: -10%; }
  .solution-shop .solution-image { right: -11%; }
  .client-grid { gap: 11px; }
}
@media (max-width: 900px) {
  .solution-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .solution { grid-column: auto; }
  .solution:last-child { grid-column: 1/-1; }
  .solution-video-still { max-width: 390px; right: 0; }
  .solution-link,.solution-web .solution-link,.solution-shop .solution-link { min-height: 265px; }
  .work-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .deliverable { padding: 15px; }
}
@media (max-width: 740px) {
  .studio-hero-grid { grid-template-columns: 1fr; min-height: 0; padding-block: 34px 23px; gap: 25px; }
  .studio-hero h1 { font-size: clamp(42px, 9.3vw, 70px); }
  .hero-visual { height: auto; aspect-ratio: 1.28; max-height: 425px; }
  .studio-hero .kicker { margin-bottom: 17px; }
  .studio-hero-copy > p:not(.kicker) { margin-top: 15px; }
  .studio-hero-actions { margin-top: 20px; }
  .studio-hero-foot { min-height: 42px; }
  .client-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px 12px; }
  .clients-band { padding-block: 18px 16px; }
  .agency-story,.faq-grid,.service-page-grid { grid-template-columns: 1fr; }
  .agency-story { gap: 22px; }
  .agency-story h2 br:nth-of-type(2) { display: none; }
  .service-page-grid { min-height: 0; padding-block: 32px 34px; }
  .service-page-device { max-height: 285px; }
  .service-page-top h1 { font-size: clamp(46px, 9.2vw, 76px); }
  .service-back { margin-bottom: 22px; }
  .deliverable-grid { grid-template-columns: 1fr; }
  .deliverable-image { height: 145px; }
}
@media (max-width: 680px) {
  .header-inner { height: 63px; }
  .site-header .brand { width: 119px; }
  .site-header .nav-toggle { color: var(--paper); border-color: #ffffff45; }
  .site-header .site-nav { background: var(--dark); border-color: #ffffff34; }
  .studio-heading { margin-bottom: 22px; }
  .studio-heading > p { font-size: 15px; }
}
@media (max-width: 600px) {
  .solution-grid,.work-grid { grid-template-columns: 1fr; gap: 14px; }
  .solution-link,.solution-web .solution-link,.solution-shop .solution-link { min-height: 223px; }
  .solution-link { padding: 15px 17px; }
  .solution-link h3 { margin-block: 9px 5px; }
  .solution-image { max-width: 250px; }
  .solution-web .solution-image,.solution-shop .solution-image { height: 78%; width: 60%; right: -7%; bottom: -19%; }
  .solution-brand .solution-image { bottom: -28%; }
  .solution-marketing .solution-image { bottom: -23%; }
  .solution-video-still { width: 59%; right: -6%; bottom: -21%; }
  .studio-process { gap: 12px; grid-template-columns: 1fr; margin-top: 23px; }
  .studio-process > div { padding-top: 9px; }
  .studio-process h3 { font-size: 22px; }
  .studio-hero-foot { font-size: 8px; }
  .studio-hero-foot b { margin-inline: 1px; }
  .studio-hero-foot svg { width: 10px; height: 10px; }
}
@media (max-width: 350px) {
  .studio-hero h1 { font-size: 35px; }
  .hero-visual { aspect-ratio: 1.17; }
  .visual-note { font-size: 8px; }
  .solution-link p { max-width: 207px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-pending { opacity: 1; transform: none; }
}