:root {
  --bg:#202122;
  --panel:#282b2e;
  --paper:#f2f1ed;
  --muted:#a7adb5;
  --blue:#2478d8;
  --line:#34383e;
  --ink:#14171a;
  --scroll-thumb:#626d78;
  --scroll-track:#252729;
  --scroll-hover:#2478d8;
  --scroll-active:#f2f1ed;
  --max:1392px;
  --gutter:clamp(24px,5.2vw,100px)
}
* {
  box-sizing:border-box;
  scrollbar-width:thin;
  scrollbar-color:var(--scroll-thumb) var(--scroll-track)
}
*::-webkit-scrollbar {
  width:9px;
  height:9px
}
*::-webkit-scrollbar-track {
  background:var(--scroll-track)
}
*::-webkit-scrollbar-thumb {
  background:var(--scroll-thumb)
}
*::-webkit-scrollbar-thumb:hover {
  background:var(--scroll-hover)
}
*::-webkit-scrollbar-thumb:active {
  background:var(--scroll-active)
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:28px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--paper);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none;
  cursor:pointer
}
button,input,textarea,select {
  font:inherit
}
button {
  cursor:pointer
}
a,button {
  touch-action:manipulation
}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:6px
}
button:disabled {
  cursor:wait;
  opacity:.6
}
img {
  display:block;
  max-width:100%;
  height:auto
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2 {
  font-weight:400;
  line-height:1;
  letter-spacing:-.055em
}
h2 {
  font-size:clamp(42px,5.2vw,78px);
  margin-bottom:34px
}
h3 {
  font-size:28px;
  line-height:1.15;
  font-weight:400;
  letter-spacing:-.035em
}
em {
  font-style:normal;
  color:var(--muted)
}
p {
  color:var(--muted)
}
::selection {
  background:var(--blue);
  color:var(--bg)
}
.wrap {
  width:min(calc(100% - var(--gutter)*2),var(--max));
  margin-inline:auto
}
.eyebrow {
  font-family:Consolas,'Courier New',monospace;
  font-size:12px;
  letter-spacing:.16em;
  line-height:1.8;
  font-weight:400;
  text-transform:uppercase;
  color:inherit
}
.skip {
  position:fixed;
  left:20px;
  top:-100px;
  background:var(--paper);
  color:var(--bg);
  z-index:100;
  padding:12px 20px
}
.skip:focus {
  top:12px
}
.header {
  height:126px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:20
}
.brand {
  width:102px;
  overflow:hidden;
  display:block
}
.brand img {
  width:102px;
  height:92px;
  object-fit:contain;
  transform:scale(1.55)
}
#navigation {
  display:flex;
  align-items:center;
  gap:clamp(24px,3vw,48px);
  font-size:14px
}
#navigation a {
  padding-block:10px;
  border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s
}
#navigation a:hover,#navigation a[aria-current] {
  color:var(--blue)
}
#navigation .nav-cta {
  border-bottom:1px solid var(--muted);
  margin-left:20px
}
#navigation .nav-cta span {
  margin-left:20px
}
.menu-toggle {
  display:none
}
.hero {
  position:relative
}
.hero-meta {
  display:flex;
  justify-content:space-between;
  padding:23px 0
}
.hero-meta span:last-child {
  color:var(--muted)
}
.hero-layout {
  position:relative;
  min-height:640px;
  padding-block:38px 72px;
  isolation:isolate
}
.hero-kicker {
  display:none
}
.hero-copy {
  position:relative;
  z-index:3;
  max-width:540px;
  pointer-events:none
}
.hero-copy a {
  pointer-events:auto
}
.hero h1 {
  font-size:clamp(78px,8.1vw,124px);
  line-height:.94;
  letter-spacing:-.065em;
  margin:0 0 28px
}
.hero h1 span {
  color:var(--paper)
}
.hero-description {
  font-size:17px;
  line-height:1.55;
  max-width:360px;
  margin-bottom:32px
}
.hero-actions {
  display:flex;
  gap:27px;
  align-items:center;
  flex-wrap:wrap
}
.button {
  display:inline-flex;
  justify-content:space-between;
  align-items:center;
  gap:36px;
  min-height:53px;
  padding:16px 23px;
  border:1px solid #92979d;
  background:transparent;
  color:inherit;
  font-family:Consolas,'Courier New',monospace;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:background .25s,color .25s,border-color .25s
}
.button:hover {
  background:var(--paper);
  color:var(--bg);
  border-color:var(--paper)
}
.button.primary {
  background:var(--blue);
  color:var(--bg);
  border-color:var(--blue)
}
.button.primary:hover {
  background:var(--paper)
}
.subtle-link {
  font-size:13px;
  border-bottom:1px solid transparent;
  padding-block:8px
}
.subtle-link:hover {
  border-color:var(--blue);
  color:var(--blue)
}
.hero-bottom {
  display:flex;
  justify-content:space-between;
  padding:22px 0;
  border-top:1px solid var(--line);
  color:var(--muted)
}
.hero-bottom a:hover {
  color:var(--blue)
}
.hero-index {
  position:absolute;
  right:0;
  bottom:100px;
  display:grid;
  gap:12px;
  border-left:1px solid #666b71;
  padding-left:23px;
  z-index:3;
  font-size:11px
}
.geometry {
  position:absolute;
  right:-2%;
  top:0;
  width:64%;
  height:100%;
  min-height:390px;
  perspective:900px;
  pointer-events:none;
  transform:translate3d(var(--gx,0px),var(--gy,0px),0);
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
  overflow:hidden
}
.geo-plane {
  position:absolute;
  background:repeating-linear-gradient(0deg,transparent 0,transparent 9px,rgba(178,192,204,.48) 9px,rgba(178,192,204,.48) 10px);
  width:70%;
  height:90%;
  top:4%;
  transform:rotate(-1deg);
  filter:drop-shadow(0 0 1px #000)
}
.geo-left {
  left:0;
  clip-path:polygon(57% 0,100% 0,42% 100%,0 100%);
  background:repeating-linear-gradient(0deg,transparent 0,transparent 9px,rgba(160,175,189,.56) 9px,rgba(160,175,189,.56) 10px)
}
.geo-right {
  right:-9%;
  clip-path:polygon(0 0,42% 0,100% 100%,58% 100%);
  background:repeating-linear-gradient(0deg,transparent 0,transparent 9px,rgba(160,175,189,.45) 9px,rgba(160,175,189,.45) 10px)
}
.geo-plane:after {
  content:'';
  position:absolute;
  inset:0;
  background: none;
  mix-blend-mode:screen
}
.geo-left:after {
  background:none;
}
.geometry:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,var(--bg),transparent 22%,transparent 80%,var(--bg));
  pointer-events:none
}
.geo-axis {
  position:absolute;
  top:64%;
  left:20%;
  width:45%;
  height:1px;
  background:var(--blue);
  box-shadow:0 0 32px 4px #2478d820;
  transform:rotate(-59deg);
  opacity:.55
}
.geo-coordinate {
  position:absolute;
  left:35%;
  bottom:12%;
  font:10px Consolas,monospace;
  letter-spacing:.18em;
  color:#677782;
  z-index:2
}
.section {
  padding-block:110px
}
.light-section {
  background:var(--paper);
  color:var(--ink);
  padding-block:66px 78px
}
.light-section p {
  color:#555a60
}
.section-top {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:28px;
  margin-bottom:27px
}
.section-top p {
  margin-bottom:0
}
.section-top>.eyebrow {
  color:inherit
}
.section-note {
  font-size:14px;
  max-width:240px;
  line-height:1.45
}
.heading-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-bottom:32px
}
.heading-row h2 {
  margin-bottom:0
}
.light-section .heading-row h2 {
  font-size:clamp(38px,4.4vw,68px)
}
.text-link {
  display:inline-block;
  font:12px Consolas,'Courier New',monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding-block:8px;
  border-bottom:1px solid currentColor;
  white-space:nowrap;
  transition:color .2s
}
.text-link:hover {
  color:var(--blue)
}
.project-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px
}
.project-card {
  min-width:0;
  display:block
}
.project-image {
  aspect-ratio:1.42;
  overflow:hidden;
  background:#d6d8d9;
  position:relative
}
.project-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
  transition:transform .7s,object-position 2s
}
.project-card:hover .project-image img {
  transform:scale(1.035);
  object-position:bottom
}
.project-image .view-project {
  position:absolute;
  right:14px;
  bottom:14px;
  background:var(--bg);
  color:var(--paper);
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  transition:background .2s
}
.project-card:hover .view-project {
  background:var(--blue);
  color:var(--bg)
}
.project-caption {
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:17px
}
.project-caption h3 {
  font-size:16px;
  letter-spacing:.02em;
  margin-bottom:5px
}
.project-caption p {
  font:11px Consolas,monospace;
  letter-spacing:.11em;
  text-transform:uppercase;
  margin-bottom:0
}
.project-caption>span {
  font:11px Consolas,monospace;
  padding-top:4px
}
.portfolio-note {
  font-size:12px!important;
  margin:25px 0 0
}
.service-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:38px;
  margin-top:60px
}
.service {
  padding:26px 0 28px;
  position:relative;
  border-top:1px solid var(--line);
  transition:border-color .2s
}
.service:hover {
  border-color:var(--blue)
}
.service-icon {
  display:block;
  color:var(--blue);
  font-size:38px;
  height:67px
}
.service h3 {
  font-size:30px
}
.service p {
  font-size:15px;
  max-width:320px;
  min-height:74px
}
.service-list {
  font-size:12px;
  color:var(--muted)
}
.service-arrow {
  position:absolute;
  right:0;
  top:36px;
  font-size:22px
}
.service:hover .service-arrow {
  color:var(--blue)
}
.process {
  height:440vh;
  border-block:1px solid var(--line)
}
.process-sticky {
  position:sticky;
  top:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding-block:46px
}
.process-layout {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  align-items:center;
  gap:60px
}
.process-count {
  color:var(--blue);
  margin-bottom:18px
}
.process-title {
  font-size:clamp(60px,7vw,108px);
  margin-bottom:25px
}
.process-copy {
  font-size:18px;
  max-width:390px;
  min-height:100px
}
.process-hint {
  font:12px Consolas,monospace;
  color:var(--muted)
}
.process-media {
  position:relative;
  aspect-ratio:1.25;
  overflow:hidden
}
.process-media video {
  width:100%;
  height:100%;
  object-fit:contain;
  position:relative;
  z-index:2;
  opacity:0;
  transition:opacity .5s
}
.process-media.video-ready video {
  opacity:1
}
.process-media.video-ready .geometry {
  opacity:0
}
.process-media .geometry {
  width:100%;
  right:0;
  min-height:0
}
.process-stages {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
  padding:0;
  margin:20px 0 8px;
  list-style:none;
  counter-reset:stages
}
.process-stages li {
  counter-increment:stages;
  color:#9299a1;
  border-top:1px solid var(--line);
  padding-top:18px;
  font-size:14px
}
.process-stages li:before {
  content:'0' counter(stages);
  font:11px Consolas,monospace;
  display:block;
  margin-bottom:6px
}
.process-stages li.active {
  color:var(--blue);
  border-color:var(--blue)
}
.process-progress {
  height:2px;
  background:var(--line)
}
.process-progress span {
  display:block;
  width:0;
  height:100%;
  background:var(--blue)
}
.split {
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:70px;
  align-items:start
}
.split>p {
  max-width:410px;
  justify-self:end;
  padding-top:12px
}
.automation-demo {
  border:1px solid var(--line);
  padding:30px 36px;
  margin-top:35px;
  background:var(--panel)
}
.demo-top {
  display:flex;
  justify-content:space-between;
  gap:20px;
  font:11px Consolas,monospace;
  letter-spacing:.14em;
  color:var(--muted)
}
.demo-label {
  color:var(--blue)
}
.workflow {
  display:flex;
  align-items:center;
  gap:26px;
  margin:40px 0 28px
}
.workflow>div {
  border:1px solid var(--line);
  padding:22px;
  flex:1;
  transition:border-color .3s,background .3s;
  min-width:0
}
.workflow>div.active {
  border-color:var(--blue);
  background:#2478d80a
}
.workflow span {
  color:var(--blue);
  display:block;
  font:11px Consolas,monospace;
  margin-bottom:15px
}
.workflow strong {
  display:block;
  font-size:19px;
  font-weight:400
}
.workflow small {
  color:var(--muted);
  font-size:12px
}
.workflow i {
  font-style:normal;
  color:#68747f
}
.demo-message {
  color:var(--muted);
  min-height:50px;
  font-size:15px;
  max-width:800px
}
.demo-disclaimer {
  font-size:12px;
  margin:17px 0 0
}
.about-strip {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:50px;
  border-block:1px solid var(--line);
  padding-block:65px
}
.about-strip h2 {
  font-size:clamp(40px,4vw,60px)
}
.about-strip p {
  max-width:530px
}
.final-cta {
  padding-block:110px 58px
}
.final-cta>.eyebrow {
  color:var(--muted)
}
.cta-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px
}
.cta-row h2 {
  font-size:clamp(54px,7vw,104px);
  margin-block:26px 34px
}
.cta-row h2 em {
  color:var(--blue)
}
.round-link {
  border:1px solid #61666d;
  border-radius:50%;
  width:115px;
  height:115px;
  display:grid;
  place-items:center;
  font-size:55px;
  transition:background .25s,color .25s,transform .25s;
  flex-shrink:0
}
.round-link:hover {
  background:var(--blue);
  color:var(--bg);
  border-color:var(--blue);
  transform:rotate(45deg)
}
.cta-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px
}
.cta-bottom p {
  font-size:14px;
  margin:0
}
.footer {
  border-top:1px solid var(--line);
  padding-block:29px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  font-size:11px;
  color:var(--muted)
}
.footer>a {
  font-size:19px;
  letter-spacing:.05em;
  font-weight:bold;
  color:var(--paper)
}
.footer>a span {
  font-size:9px;
  display:block;
  font-weight:400;
  letter-spacing:.4em;
  color:var(--blue)
}
.footer p {
  margin:0
}
.footer>div {
  display:grid;
  gap:4px;
  text-align:right
}
.page-intro {
  padding-block:65px 70px
}
.page-intro>.eyebrow {
  color:var(--blue);
  margin-bottom:34px
}
.page-intro h1 {
  font-size:clamp(57px,6.6vw,102px);
  margin-bottom:36px
}
.intro-copy {
  font-size:19px;
  margin-bottom:0;
  max-width:550px
}
.intro-bottom {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px
}
.intro-bottom p {
  margin:0
}
.filters {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:34px
}
.filters button {
  background:transparent;
  color:var(--ink);
  border:1px solid transparent;
  padding:10px 17px;
  font-size:13px
}
.filters button:hover {
  border-color:#777
}
.filters button[aria-pressed=true] {
  background:var(--ink);
  color:var(--paper)
}
.services-overview {
  padding-bottom:65px
}
.services-overview .service-grid {
  margin-top:0
}
.large-copy {
  font-size:24px;
  line-height:1.45;
  color:inherit
}
.detail-list {
  list-style:none;
  padding:0;
  margin:28px 0 32px
}
.detail-list li {
  padding:13px 0;
  border-bottom:1px solid #8b8e934d;
  font-size:14px
}
.faq details {
  border-bottom:1px solid var(--line);
  padding:20px 0
}
.faq summary {
  cursor:pointer;
  font-size:21px
}
.faq details p {
  max-width:800px;
  margin-top:18px
}
.capability-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  margin-top:50px
}
.capability-grid article {
  border-top:1px solid #8b8e9360;
  padding-top:25px
}
.capability-grid article>.eyebrow {
  font-size:11px
}
.capability-grid h3 {
  font-size:27px;
  margin:15px 0
}
.capability-grid p {
  font-size:16px
}
.ai-demo-section {
  padding-top:0
}
.about-feature {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:70px;
  padding-block:35px 100px;
  position:relative
}
.about-feature .geometry {
  position:relative;
  width:100%;
  height:480px;
  right:0;
  min-height:0
}
.about-feature>div:last-child {
  padding-top:20px
}
.contact-layout {
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:90px;
  padding-bottom:110px
}
.contact-layout h2 {
  font-size:42px
}
.contact-layout aside>p {
  max-width:320px
}
.contact-note {
  border-top:1px solid var(--line);
  padding-top:26px;
  margin-top:35px;
  max-width:330px;
  font-size:14px
}
.contact-note .eyebrow {
  font-size:11px;
  margin-top:25px
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}
.field label {
  display:block;
  font-size:14px;
  margin-bottom:9px
}
.field label span {
  color:var(--muted);
  font-size:12px
}
.field input,.field select,.field textarea {
  width:100%;
  background:var(--panel);
  color:var(--paper);
  border:1px solid #434a52;
  border-radius:0;
  padding:13px;
  min-height:50px;
  transition:border-color .2s
}
.field input:hover,.field select:hover,.field textarea:hover {
  border-color:#8a959e
}
.field input[aria-invalid=true],.field textarea[aria-invalid=true] {
  border-color:#ff998f
}
.field textarea {
  resize:none;
  min-height:150px;
  max-height:600px;
  overflow:auto
}
.field.full {
  grid-column:1/-1
}
.field-error {
  color:#ffaaa0;
  display:block;
  min-height:18px;
  font-size:12px;
  margin-top:6px
}
.field input::placeholder,.field textarea::placeholder {
  color:#8f98a1
}
.consent {
  display:flex;
  gap:11px;
  align-items:flex-start;
  font-size:13px;
  color:var(--muted);
  margin-top:20px;
  cursor:pointer
}
.consent input {
  width:18px;
  height:18px;
  accent-color:var(--blue);
  flex-shrink:0
}
.submit-row {
  display:flex;
  gap:24px;
  align-items:center;
  margin-top:20px
}
.submit-row p {
  font-size:12px;
  line-height:1.5;
  margin:0
}
.submit-row .button {
  min-width:245px
}
.form-status {
  min-height:65px;
  margin-top:18px;
  font-size:14px;
  padding:14px 0
}
.form-status.error {
  color:#ffaaa0
}
.form-status.success {
  color:var(--blue)
}
.honeypot {
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  overflow:hidden
}
.case-hero {
  padding-block:65px 50px
}
.case-hero h1 {
  font-size:clamp(58px,7vw,108px);
  margin:35px 0 20px
}
.case-hero .large-copy {
  max-width:700px;
  color:var(--muted)
}
.case-meta {
  display:flex;
  justify-content:space-between;
  gap:40px;
  border-top:1px solid var(--line);
  padding-top:22px;
  margin-top:40px
}
.case-meta p {
  font-size:14px;
  margin-bottom:0
}
.case-meta .eyebrow {
  display:block;
  color:var(--paper);
  margin-bottom:8px
}
.case-preview {
  width:100%;
  aspect-ratio:1.8;
  object-fit:cover;
  object-position:top;
  background:var(--panel)
}
.case-text {
  display:grid;
  grid-template-columns:1fr 1.7fr;
  gap:70px;
  padding-block:75px;
  border-bottom:1px solid var(--line)
}
.case-text h2 {
  font-size:42px
}
.case-text h3 {
  font-size:25px
}
.case-text p {
  max-width:700px
}
.case-gallery {
  padding-block:55px;
  display:grid;
  gap:30px
}
.case-gallery img {
  width:100%;
  max-height:650px;
  object-fit:cover
}
.next-project {
  padding-block:60px;
  border-top:1px solid var(--line);
  display:block
}
.next-project h2 {
  font-size:clamp(38px,5vw,74px);
  margin-bottom:12px
}
.next-project:hover h2 {
  color:var(--blue)
}
.mobile-stage-list {
  display:none
}
.reveal {
  opacity:0;
  transform:translateY(18px);
  transition:opacity .65s,transform .65s
}
.reveal.visible {
  opacity:1;
  transform:none
}
@media(min-width:1700px) {
  .hero-layout {
    min-height:710px
  }
  .hero h1 {
    font-size:140px
  }
}
@media(max-width:1100px) {
  #navigation {
    gap:23px
  }
  #navigation .nav-cta {
    margin-left:0
  }
  .hero-layout {
    min-height:590px
  }
  .hero h1 {
    font-size:95px
  }
  .hero-description {
    max-width:310px
  }
  .hero-actions {
    gap:16px
  }
  .geometry {
    width:66%;
    right:-5%
  }
  .hero-index {
    font-size:10px
  }
  .service-grid {
    gap:25px
  }
  .service h3 {
    font-size:25px
  }
  .service-list {
    font-size:11px
  }
  .contact-layout {
    gap:40px
  }
  .process-layout {
    gap:25px
  }
  .workflow {
    gap:16px
  }
  .workflow>div {
    padding:18px
  }
  .workflow strong {
    font-size:16px
  }
  .split {
    gap:40px
  }
  .submit-row {
    flex-wrap:wrap
  }
}
@media(max-width:800px) {
  .header {
    height:100px
  }
  .brand {
    width:85px
  }
  .brand img {
    width:85px;
    height:76px
  }
  .menu-toggle {
    display:flex;
    align-items:center;
    gap:20px;
    background:none;
    border:1px solid var(--line);
    padding:10px 14px;
    color:var(--paper);
    font-size:14px
  }
  .menu-toggle span {
    font-size:20px;
    line-height:1
  }
  #navigation {
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:99px;
    background:#202122f7;
    padding:24px;
    border:1px solid var(--line);
    backdrop-filter:blur(18px);
    flex-direction:column;
    align-items:stretch;
    gap:8px
  }
  #navigation.open {
    display:flex
  }
  #navigation a {
    padding:14px
  }
  .hero-meta span:last-child {
    display:none
  }
  .hero-layout {
    min-height:650px;
    padding-top:28px
  }
  .hero h1 {
    font-size:clamp(76px,13vw,105px)
  }
  .hero-copy {
    max-width:430px
  }
  .hero-description {
    max-width:320px;
    font-size:16px
  }
  .hero .geometry {
    width:70%;
    top:200px;
    height:450px;
    right:-4%;
    opacity:.55;
    z-index:-1
  }
  .hero-index {
    right:0;
    bottom:40px;
    font-size:9px;
    padding-left:15px;
    gap:5px
  }
  .hero-bottom {
    font-size:10px
  }
  .section {
    padding-block:70px
  }
  .section-top>.eyebrow:last-child:not(:first-child) {
    display:none
  }
  .project-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .project-card:last-child {
    grid-column:1/-1;
    max-width:calc(50% - 12px)
  }
  .service-grid {
    grid-template-columns:1fr;
    margin-top:40px;
    gap:10px
  }
  .service {
    padding:22px 0 30px
  }
  .service-icon {
    height:53px
  }
  .service p {
    max-width:550px;
    min-height:0
  }
  .service-list {
    font-size:12px
  }
  .service-arrow {
    top:25px
  }
  .service h3 {
    font-size:32px;
    margin-bottom:15px
  }
  .split {
    grid-template-columns:1fr;
    gap:20px
  }
  .split>p {
    justify-self:start;
    max-width:600px;
    padding:0
  }
  .process {
    height:auto
  }
  .process-sticky {
    position:relative;
    min-height:0;
    padding-block:45px
  }
  .process-layout {
    grid-template-columns:1fr;
    gap:0
  }
  .process-title {
    font-size:65px
  }
  .process-copy {
    min-height:0
  }
  .process-hint {
    display:none
  }
  .process-media {
    aspect-ratio:1.6;
    max-height:360px
  }
  .process-stages {
    gap:10px
  }
  .process-stages li {
    font-size:12px
  }
  .mobile-stage-list {
    display:grid;
    gap:24px;
    margin-top:35px
  }
  .mobile-stage-list h3 {
    font-size:24px;
    margin-bottom:8px
  }
  .mobile-stage-list p {
    font-size:15px
  }
  .workflow {
    gap:12px
  }
  .workflow>div {
    padding:15px 12px
  }
  .workflow strong {
    font-size:15px
  }
  .workflow small {
    font-size:11px
  }
  .workflow i {
    display:none
  }
  .automation-demo {
    padding:24px
  }
  .about-strip {
    grid-template-columns:1fr;
    gap:20px;
    padding-block:45px
  }
  .final-cta {
    padding-block:70px 40px
  }
  .round-link {
    width:80px;
    height:80px;
    font-size:40px
  }
  .footer {
    flex-wrap:wrap
  }
  .footer>p {
    display:none
  }
  .page-intro {
    padding-block:50px
  }
  .page-intro h1 {
    font-size:clamp(49px,8vw,75px)
  }
  .capability-grid {
    grid-template-columns:repeat(2,1fr);
    gap:25px
  }
  .about-feature {
    grid-template-columns:1fr;
    padding-bottom:55px;
    gap:20px
  }
  .about-feature .geometry {
    height:300px
  }
  .contact-layout {
    grid-template-columns:1fr;
    gap:35px;
    padding-bottom:60px
  }
  .contact-layout aside {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
  }
  .contact-layout aside>h2 {
    grid-column:1/-1;
    margin-bottom:0
  }
  .contact-note {
    margin-top:0;
    padding-top:0;
    border:0
  }
  .contact-note .eyebrow:first-child {
    margin-top:0
  }
  .case-text {
    gap:25px;
    grid-template-columns:1fr
  }
  .case-meta {
    flex-wrap:wrap;
    gap:25px
  }
  .case-preview {
    aspect-ratio:1.4
  }
}
@media(max-width:520px) {
  :root {
    --gutter:24px
  }
  .hero-meta {
    font-size:9px;
    letter-spacing:.12em
  }
  .hero-layout {
    min-height:680px
  }
  .hero h1 {
    font-size:clamp(66px,17vw,90px)
  }
  .hero .geometry {
    top:340px;
    width:105%;
    height:340px;
    opacity:.7;
    right:-8%;
    min-height:0
  }
  .hero-description {
    max-width:310px;
    font-size:16px
  }
  .hero-actions {
    gap:22px
  }
  .hero-actions .button {
    padding-inline:18px;
    gap:30px
  }
  .hero-index {
    bottom:35px;
    max-width:130px
  }
  .hero-bottom {
    font-size:8px;
    letter-spacing:.08em;
    gap:15px
  }
  .light-section {
    padding-block:45px
  }
  .section-top {
    gap:20px
  }
  .section-note {
    font-size:12px;
    max-width:145px
  }
  .section-top .eyebrow {
    font-size:10px
  }
  .heading-row {
    align-items:start;
    flex-direction:column;
    gap:18px
  }
  .heading-row h2 {
    font-size:39px!important
  }
  .project-grid {
    grid-template-columns:1fr;
    gap:34px
  }
  .project-card:last-child {
    grid-column:auto;
    max-width:none
  }
  .project-caption h3 {
    font-size:17px
  }
  .portfolio-note {
    font-size:11px!important
  }
  .workflow {
    flex-direction:column;
    align-items:stretch;
    margin-top:25px
  }
  .workflow>div {
    display:grid;
    grid-template-columns:30px 1fr;
    gap:3px 8px;
    padding:16px
  }
  .workflow>div span {
    grid-row:1/3;
    margin:5px 0
  }
  .workflow strong {
    font-size:17px
  }
  .workflow small {
    font-size:12px
  }
  .demo-top {
    font-size:9px;
    letter-spacing:.08em
  }
  .demo-message {
    min-height:95px
  }
  .automation-demo {
    padding:22px
  }
  .automation-demo .button {
    width:100%
  }
  .process-media {
    aspect-ratio:1.2
  }
  .process-stages {
    gap:7px
  }
  .process-stages li {
    font-size:10px
  }
  .cta-row {
    gap:15px
  }
  .cta-row h2 {
    font-size:47px
  }
  .round-link {
    width:58px;
    height:58px;
    font-size:30px
  }
  .cta-bottom {
    align-items:start;
    flex-direction:column;
    gap:15px
  }
  .footer {
    font-size:10px
  }
  .footer>div {
    max-width:210px
  }
  .page-intro h1 {
    font-size:49px
  }
  .intro-bottom {
    align-items:start;
    flex-direction:column
  }
  .intro-copy {
    font-size:17px
  }
  .capability-grid {
    grid-template-columns:1fr
  }
  .contact-layout aside {
    display:block
  }
  .contact-note {
    margin-top:30px
  }
  .contact-layout aside>h2 {
    margin-bottom:20px
  }
  .form-grid {
    grid-template-columns:1fr;
    gap:16px
  }
  .field.full {
    grid-column:auto
  }
  .submit-row .button {
    width:100%
  }
  .contact-layout h2 {
    font-size:38px
  }
  .case-hero h1 {
    font-size:55px
  }
  .case-meta {
    display:grid;
    grid-template-columns:1fr 1fr
  }
  .case-meta p {
    font-size:12px
  }
  .case-text {
    padding-block:45px
  }
  .case-text h2 {
    font-size:34px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .reveal {
    opacity:1;
    transform:none
  }
  .geometry {
    transform:none
  }
  .process {
    height:auto
  }
  .process-sticky {
    position:relative;
    min-height:0
  }
  .process-hint {
    display:none
  }
  .mobile-stage-list {
    display:grid;
    gap:24px;
    margin-top:35px
  }
  .project-card:hover .project-image img {
    transform:none;
    object-position:top
  }
}
@media(forced-colors:active) {
  * {
    scrollbar-color:auto
  }
  .button,.service,.workflow>div {
    border-color:ButtonText
  }
  .geometry {
    display:none
  }
}
@media(max-width:800px),(prefers-reduced-motion:reduce) {
  .process-media video {
    opacity:1
  }
  .process-media .geometry {
    display:none
  }
}
.fallback-work {
  display:block;
  padding-block:50px
}
.fallback-work article {
  padding-block:20px;
  border-top:1px solid var(--line)
}
@media(max-width:800px) {
  html:not(.js) .header {
    height:auto;
    min-height:100px;
    flex-wrap:wrap
  }
  html:not(.js) .menu-toggle {
    display:none
  }
  html:not(.js) #navigation {
    display:flex;
    position:static;
    border:0;
    padding:10px 0 20px;
    flex-direction:row;
    flex-wrap:wrap;
    font-size:12px;
    gap:8px
  }
  html:not(.js) #navigation a {
    padding:10px
  }
  html:not(.js) .hero-meta {
    padding-top:25px
  }
}
@media(max-width:520px) {
  .hero .geometry {
    width:100%;
    right:0
  }
}
.resize-none {
  resize:none
}
.light-section .text-link:hover {
  color:#2478d8
}
.light-section .button:hover {
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink)
}
/* Reference-led refinement: charcoal atmosphere, hairline geometry, editorial scale. */
:root {
  --bg:#101112;
  --panel:#1a1c1e;
  --line:#4b4d50;
  --paper:#e9e9e7;
  --muted:#b0b0b1;
  --gutter:clamp(24px,6.4vw,110px)
}
body {
  font-weight:400;
  background:var(--bg);
}
.header {
  height:112px;
  border-color:#67696b
}
.brand {
  width:97px
}
.brand img {
  width:97px;
  height:85px;
  transform:scale(1.45)
}
#navigation {
  font-weight:400;
  font-size:14px;
  gap:36px
}
.hero {
  isolation:isolate
}
.hero:before {
  content:'';
  position:absolute;
  z-index:-2;
  top:-112px;
  bottom:0;
  left:calc(-1 * var(--gutter));
  right:calc(-1 * var(--gutter));
  background: none;
  pointer-events:none
}
.hero-meta {
  padding:18px 0;
  font-size:10px;
  letter-spacing:.2em;
  color:#d1d1d3
}
.hero-layout {
  min-height:535px;
  padding:30px 0 35px
}
.hero-copy {
  max-width:430px
}
.hero h1 {
  font-size:clamp(72px,7vw,110px);
  line-height:.99;
  letter-spacing:-.055em;
  margin-bottom:28px;
  font-weight:400
}
.hero-description {
  font-size:17px;
  line-height:1.45;
  max-width:305px;
  margin-bottom:32px;
  color:#b9b9bb
}
.hero-actions {
  gap:24px
}
.hero-actions .button {
  min-height:48px;
  padding:14px 20px;
  gap:35px;
  font-size:11px
}
.hero-actions .subtle-link {
  font-size:12px
}
.hero-index {
  right:2%;
  bottom:90px;
  font-size:10px;
  letter-spacing:.14em;
  gap:13px;
  padding-left:24px;
  color:#c0c0c4
}
.hero-interaction {
  margin:0 0 20px;
  font-size:10px;
  letter-spacing:.12em;
  color:#c1c1c4
}
.hero-interaction span {
  color:#69696e
}
.hero-bottom {
  padding:19px 0 22px;
  font-size:10px;
  letter-spacing:.16em;
  border-color:#707174
}
.hero .geometry {
  right:-7%;
  top:15px;
  width:73%;
  height:100%;
  min-height:0
}
.geo-plane {
  width:100%;
  height:96%;
  top:0;
  transform:none;
  background:repeating-linear-gradient(0deg,transparent 0,transparent 8px,rgba(174,176,181,.42) 8px,rgba(174,176,181,.42) 9px)
}
.geo-left {
  left:0;
  clip-path:polygon(45% 0,63% 0,70% 20%,25% 100%,0 100%);
  background:repeating-linear-gradient(0deg,transparent 0,transparent 8px,rgba(174,176,181,.5) 8px,rgba(174,176,181,.5) 9px)
}
.geo-right {
  right:0;
  clip-path:polygon(68% 0,92% 0,100% 16%,100% 100%,96% 100%);
  background:repeating-linear-gradient(0deg,transparent 0,transparent 8px,rgba(174,176,181,.48) 8px,rgba(174,176,181,.48) 9px)
}
.geo-plane:after {
  background:none;
}
.geo-left:after {
  background:none;
}
.geo-axis {
  left:22%;
  top:72%;
  width:30%;
  opacity:.7;
  background:#2478d8;
  box-shadow:0 0 9px 1px #2478d870;
  transform:rotate(-58deg)
}
.geo-coordinate {
  display:none
}
.geometry:after {
  background:linear-gradient(0deg,#161718,transparent 10%,transparent 88%,#111213)
}
.hero.ripple .geo-plane {
  animation:line-ripple .85s ease-out
}
@keyframes line-ripple {
  0% {
    filter:brightness(1)
  }
  35% {
    filter:brightness(2.2)
  }
  100% {
    filter:brightness(1)
  }
}
.light-section {
  background-color:#eeeFec;
  background-image:linear-gradient(#20212205 1px,transparent 1px),linear-gradient(90deg,#20212205 1px,transparent 1px);
  background-size:48px 48px;
  padding-block:48px 62px
}
.light-section .heading-row h2 {
  font-size:clamp(40px,4.4vw,65px);
  letter-spacing:-.06em
}
.light-section .section-top {
  margin-bottom:13px
}
.light-section .heading-row {
  margin-bottom:22px
}
.portfolio-toolbar {
  display:flex;
  justify-content:space-between
}
.portfolio-toolbar .filters {
  margin-bottom:25px;
  gap:8px
}
.filters button {
  font-size:12px;
  padding:8px 16px;
  border-radius:0
}
.project-grid {
  gap:20px
}
.project-image {
  aspect-ratio:1.5
}
.project-caption h3 {
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.06em
}
.project-caption p {
  font-size:10px;
  letter-spacing:.12em
}
.portfolio-note {
  color:#6a6d70!important
}
.final-cta h2 {
  font-weight:400
}
.process-media {
  aspect-ratio:1.5
}
.process-media video {
  mix-blend-mode:screen
}
.process-media .geometry {
  width:100%;
  right:0
}
.service-icon {
  font-weight:400
}
@media(min-width:1700px) {
  .hero-layout {
    min-height:610px
  }
  .hero h1 {
    font-size:124px
  }
}
@media(max-width:1100px) {
  #navigation {
    gap:23px
  }
  .hero h1 {
    font-size:82px
  }
  .hero-layout {
    min-height:505px
  }
  .hero .geometry {
    width:76%;
    right:-6%
  }
  .hero-index {
    right:0;
    font-size:9px
  }
  .hero-description {
    font-size:16px;
    max-width:280px
  }
}
@media(max-width:800px) {
  .header {
    height:100px
  }
  .brand {
    width:85px
  }
  .brand img {
    width:85px;
    height:76px
  }
  .hero:before {
    top:-100px
  }
  .hero-meta {
    font-size:10px;
    letter-spacing:.15em
  }
  .hero-layout {
    min-height:620px;
    padding-top:25px
  }
  .hero h1 {
    font-size:clamp(68px,11vw,85px)
  }
  .hero-description {
    max-width:290px
  }
  .hero .geometry {
    top:245px;
    right:-1%;
    width:90%;
    height:375px;
    opacity:.8
  }
  .hero-index {
    bottom:45px;
    right:0;
    font-size:10px;
    max-width:150px
  }
  .hero-interaction {
    font-size:10px
  }
  .hero-bottom {
    font-size:10px
  }
  .hero-actions {
    gap:20px
  }
  .hero .geo-axis {
    left:24%;
    top:72%;
    width:27%
  }
  .light-section {
    padding-block:40px
  }
  .portfolio-toolbar .filters {
    margin-bottom:24px
  }
}
@media(max-width:520px) {
  .hero-meta {
    font-size:9px;
    letter-spacing:.15em
  }
  .hero-layout {
    min-height:620px
  }
  .hero h1 {
    font-size:clamp(64px,15.9vw,79px);
    line-height:1.01;
    letter-spacing:-.05em;
    margin-bottom:23px
  }
  .hero-description {
    font-size:16px;
    max-width:280px;
    line-height:1.5;
    margin-bottom:29px
  }
  .hero-actions .button {
    font-size:10px;
    padding:13px 16px;
    gap:22px;
    min-height:46px
  }
  .hero-actions .subtle-link {
    font-size:11px
  }
  .hero .geometry {
    top:325px;
    width:100%;
    right:0;
    height:295px;
    opacity:.8
  }
  .hero-index {
    bottom:35px;
    right:0;
    font-size:9px;
    letter-spacing:.1em;
    gap:10px;
    padding-left:15px;
    max-width:135px
  }
  .hero-interaction {
    font-size:9px;
    margin-bottom:17px
  }
  .hero-bottom {
    font-size:8px;
    letter-spacing:.1em;
    gap:12px;
    padding-bottom:21px
  }
  .heading-row {
    gap:17px
  }
  .light-section .heading-row h2 {
    font-size:38px!important
  }
  .section-note {
    max-width:140px;
    font-size:12px
  }
  .filters button {
    font-size:12px;
    padding:8px 12px
  }
  .project-image {
    aspect-ratio:1.5
  }
  .project-caption h3 {
    font-size:15px
  }
  .project-caption p {
    font-size:11px
  }
  .process-media {
    aspect-ratio:1.4
  }
  .hero-index span {
    white-space:nowrap
  }
}
/* Supplied elastic AVARA line mark, retaining its original interaction model. */
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0
}
.brand img {
  transition:transform .4s ease
}
.brand:hover img {
  transform:translate(var(--brand-x,0px),var(--brand-y,0px)) scale(1.45)
}
.interactive-field {
  position:absolute;
  right:-7%;
  top:0;
  bottom:20px;
  width:74%;
  margin:0;
  z-index:0
}
.field-surface {
  display:block;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:transparent;
  position:relative;
  overflow:hidden;
  cursor:crosshair;
  touch-action:pan-y
}
.field-surface canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block
}
.field-surface:focus-visible {
  outline-offset:-8px
}
.field-fallback {
  position:absolute;
  left:6.5%;
  top:50%;
  width:115.55%;
  max-width:none;
  height:auto;
  transform:translateY(-50%);
  opacity:.25;
  mask-image:linear-gradient(to right,#000 0%,#000 45%,transparent 95%)
}
.field-ready .field-fallback {
  display:none
}
.field-footer {
  position:absolute;
  bottom:0;
  left:15%;
  right:10%;
  font:10px Consolas,monospace;
  letter-spacing:.1em;
  color:#929299;
  pointer-events:none
}
.field-footer #field-title {
  display:none
}
.field-footer[hidden] {
  display:none
}
.hero-index {
  pointer-events:none;
  z-index:2
}
.hero-copy {
  pointer-events:none
}
.hero-copy a {
  pointer-events:auto
}
.hero-layout {
  padding-bottom:55px
}
.hero-interaction {
  display:none
}
/* A single full-viewport cinematic stage. Captions sit above the video. */
.process {
  background:#090a0c
}
.process-sticky.wrap {
  width:100%;
  max-width:none;
  height:100svh;
  min-height:0;
  padding:0;
  display:flex;
  flex-direction:column;
  overflow:hidden
}
.process-sticky>.section-top {
  flex:none;
  min-height:60px;
  padding:20px var(--gutter) 0;
  margin-bottom:0
}
.process-layout {
  display:flex;
  flex:1;
  min-height:0;
  flex-direction:column;
  gap:0;
  align-items:stretch
}
.process-layout>div:first-child {
  display:grid;
  grid-template-columns:75px minmax(220px,.8fr) minmax(320px,1.2fr);
  align-items:center;
  gap:25px;
  padding:14px var(--gutter) 24px;
  flex:none
}
.process-count {
  margin:0
}
.process-title {
  font-size:clamp(40px,4.1vw,62px);
  margin:0;
  letter-spacing:-.05em
}
.process-copy {
  font-size:15px;
  line-height:1.5;
  min-height:0;
  margin:0;
  max-width:650px
}
.process-hint {
  display:none
}
.process-media {
  width:100%;
  flex:1;
  min-height:0;
  aspect-ratio:auto;
  max-height:none
}
.process-media video {
  position:absolute;
  inset:0;
  object-fit:cover;
  width:100%;
  height:100%;
  mix-blend-mode:normal
}
.process-media:after {
  content:'';
  position:absolute;
  inset:0;
  z-index:3;
  background:linear-gradient(0deg,rgba(8,9,11,.95),transparent 28%,transparent 85%,rgba(8,9,11,.32));
  pointer-events:none
}
.process-media .geometry {
  width:80%;
  left:10%;
  height:100%
}
.process-stages {
  position:absolute;
  bottom:38px;
  left:var(--gutter);
  right:var(--gutter);
  z-index:4;
  margin:0;
  gap:30px
}
.process-stages li {
  color:#b3b6bd;
  border-color:#7e808655;
  background:#090a0c0a
}
.process-progress {
  position:absolute;
  bottom:20px;
  left:var(--gutter);
  right:var(--gutter);
  z-index:4;
  background:#777b8440
}
.process-progress span {
  background:#b7b8d7
}
.process-stages li.active {
  color:#eeeef4;
  border-color:#d8d9e0
}
.process-count {
  color:#a4b3d7
}
@media(max-width:1100px) {
  .interactive-field {
    width:76%;
    right:-5%
  }
  .process-layout>div:first-child {
    grid-template-columns:60px .75fr 1.25fr;
    gap:20px
  }
  .process-copy {
    font-size:14px
  }
}
@media(max-width:800px) {
  .interactive-field {
    top:220px;
    bottom:0;
    right:0;
    width:100%;
    height:400px
  }
  .field-footer {
    left:0;
    bottom:10px
  }
  .hero-index {
    bottom:55px
  }
  .hero-layout {
    min-height:620px
  }
  .process-sticky.wrap {
    height:auto;
    min-height:100svh;
    overflow:visible;
    position:relative
  }
  .process-sticky>.section-top {
    padding-top:30px;
    min-height:70px
  }
  .process-layout>div:first-child {
    grid-template-columns:1fr;
    gap:15px;
    padding:15px var(--gutter) 25px
  }
  .process-title {
    font-size:50px
  }
  .process-copy {
    max-width:600px;
    font-size:16px
  }
  .process-media {
    flex:auto;
    height:65svh;
    min-height:380px
  }
  .process-stages {
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    padding:0 var(--gutter);
    margin:0;
    transform:translateY(-92px);
    gap:14px;
    height:0
  }
  .process-progress {
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    margin:0 var(--gutter);
    transform:translateY(-25px)
  }
  .mobile-stage-list {
    padding:0 var(--gutter) 45px;
    margin-top:25px
  }
  .process-media .geometry {
    display:none
  }
}
@media(max-width:520px) {
  .hero-layout {
    min-height:630px
  }
  .interactive-field {
    top:310px;
    width:calc(100% + 20px);
    right:-10px;
    height:320px
  }
  .field-footer {
    left:10px;
    bottom:8px;
    font-size:9px
  }
  .hero-index {
    bottom:45px
  }
  .process-stages {
    gap:8px
  }
  .process-stages li {
    font-size:10px
  }
  .process-media {
    height:58svh;
    min-height:340px
  }
  .process-layout>div:first-child {
    padding-top:8px
  }
  .process-copy {
    font-size:15px
  }
  .process-title {
    font-size:48px
  }
}
@media(prefers-reduced-motion:reduce) {
  .process-sticky.wrap {
    position:relative;
    height:auto;
    min-height:100svh;
    overflow:visible
  }
  .process-media {
    flex:auto;
    height:70svh;
    min-height:400px
  }
  .process-stages {
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    margin:0 var(--gutter);
    transform:translateY(-95px);
    height:0
  }
  .process-progress {
    display:none
  }
  .mobile-stage-list {
    padding:25px var(--gutter) 50px
  }
  .brand:hover img {
    transform:scale(1.45)
  }
}
/* Cinema captions overlay the image, in front of the full-screen video. */
.process-sticky.wrap {
  isolation:isolate
}
.process-sticky>.section-top {
  position:absolute;
  inset:0 0 auto;
  z-index:5;
  min-height:0;
  padding:32px var(--gutter) 0;
  color:#d3d4db
}
.process-layout {
  position:relative;
  width:100%;
  height:100%;
  flex:1
}
.process-layout>div:first-child {
  position:absolute;
  left:var(--gutter);
  right:var(--gutter);
  top:18%;
  z-index:5;
  display:block;
  padding:0;
  max-width:530px;
  pointer-events:none
}
.process-count {
  font-size:12px;
  margin-bottom:20px;
  color:#d9dceb
}
.process-title {
  font-size:clamp(62px,6.5vw,100px);
  margin-bottom:22px;
  color:#f2f1ed
}
.process-copy {
  font-size:17px;
  line-height:1.55;
  color:#d0d0d7;
  max-width:430px
}
.process-media {
  position:absolute;
  inset:0;
  min-height:0;
  height:100%;
  width:100%;
  z-index:0
}
.process-media video {
  object-fit:cover
}
.process-media:after {
  background:linear-gradient(90deg,rgba(5,6,9,.8),rgba(5,6,9,.42) 30%,transparent 62%),linear-gradient(0deg,rgba(5,6,9,.94),transparent 32%,transparent 75%,rgba(5,6,9,.45));
  z-index:3
}
.process-stages {
  z-index:6
}
.process-progress {
  z-index:6
}
@media(max-width:800px) {
  .process-sticky.wrap {
    height:auto;
    min-height:100svh;
    padding-top:100svh
  }
  .process-layout {
    position:absolute;
    inset:0;
    height:100svh;
    flex:none
  }
  .process-sticky>.section-top {
    padding-top:26px
  }
  .process-layout>div:first-child {
    top:15%;
    max-width:460px
  }
  .process-title {
    font-size:64px
  }
  .process-copy {
    font-size:16px;
    max-width:340px
  }
  .process-media {
    position:absolute;
    inset:0;
    height:100%;
    min-height:0
  }
  .process-media video {
    object-position:65% center
  }
  .process-media:after {
    background:linear-gradient(0deg,rgba(5,6,9,.95),transparent 42%),linear-gradient(90deg,rgba(5,6,9,.74),rgba(5,6,9,.15)),linear-gradient(0deg,transparent 40%,rgba(5,6,9,.62))
  }
  .process-stages {
    position:absolute;
    top:calc(100svh - 115px);
    bottom:auto;
    left:var(--gutter);
    right:var(--gutter);
    height:auto;
    transform:none;
    padding:0;
    margin:0
  }
  .process-progress {
    position:absolute;
    top:calc(100svh - 30px);
    bottom:auto;
    left:var(--gutter);
    right:var(--gutter);
    transform:none;
    margin:0
  }
  .mobile-stage-list {
    position:relative;
    margin-top:0;
    padding-top:40px;
    background:var(--bg)
  }
}
@media(max-width:520px) {
  .process-title {
    font-size:58px
  }
  .process-copy {
    font-size:15px;
    max-width:290px
  }
  .process-layout>div:first-child {
    top:16%
  }
}
@media(prefers-reduced-motion:reduce) {
  .process-sticky.wrap {
    height:auto;
    min-height:100svh;
    padding-top:100svh
  }
  .process-layout {
    position:absolute;
    inset:0;
    height:100svh;
    flex:none
  }
  .process-media {
    position:absolute;
    inset:0;
    min-height:0;
    height:100%
  }
  .process-stages {
    position:absolute;
    top:calc(100svh - 115px);
    left:var(--gutter);
    right:var(--gutter);
    bottom:auto;
    height:auto;
    transform:none;
    margin:0
  }
  .mobile-stage-list {
    padding-top:40px;
    background:var(--bg)
  }
}
.field-surface:after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background: none;
  mix-blend-mode:screen
}
.field-surface:active {
  filter:brightness(1.12)
}


/* Avara Digital: charcoal construction grid and the blue brand spectrum. */
:root {
  --bg: #202122;
  --panel: #282b2e;
  --blue: #2478d8;
  --brand-deep: var(--blue);
  --brand-mid: var(--blue);
  --brand-light: var(--blue);


  --construction-grid: linear-gradient(#ffffff06 1px, transparent 1px), linear-gradient(90deg, #ffffff06 1px, transparent 1px);
  --scroll-track: #252729;
}
body {
  background-color: var(--bg);
  background-image: var(--construction-grid);
  background-size: 48px 48px;
}
.hero {
  width: 100%;
  margin: 0;
  overflow: clip;
  background: transparent;
}
.hero:before {
  inset: 0;
  width: auto;
  background: none;
  filter: blur(90px);
  transform: none;
}
.hero-layout {
  min-height: max(665px, calc(100svh - 195px));
  padding-top: clamp(52px, 7vh, 85px);
  padding-bottom: 72px;
}
.hero-copy {
  max-width: 590px;
}
.hero h1 {
  font-size: clamp(76px, 6.8vw, 116px);
  line-height: 1.02;
  letter-spacing: -.055em;
}
.hero h1 .accent-text,
.final-cta h2 em,
.service-icon {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--blue);
}
.hero h1 .accent-text {
  display: inline-block;
  padding-right: .06em;
}
.hero-description {
  max-width: 335px;
  margin-top: 30px;
}
.interactive-field {
  top: 24px;
  bottom: 38px;
}
.field-surface:after {
  background: none;
  filter: none;
}
.field-surface:active {
  filter: brightness(1.04);
}
.hero-index {
  bottom: 130px;
}
.header #navigation .nav-cta {
  border-image: none;
  border-color: var(--blue);
}
.button.primary {
  background: var(--blue);
  border: 1px solid transparent;
  color: #050505;
}
.button.primary:hover {
  background: var(--blue);
  filter: brightness(1.1);
}
.round-link:hover {
  background: var(--blue);
  border-color: var(--brand-mid);
  color: #fff;
}
.automation-demo {
  background: var(--panel);
}
.field input,
.field select,
.field textarea {
  background: var(--panel);
}
.process {
  background-color: var(--bg);
  background-image: var(--construction-grid);
  background-size: 48px 48px;
}
.process-media {
  background-color: var(--bg);
}
.process-media video {
  mix-blend-mode: screen;
}
.process-media:after {
  background: linear-gradient(90deg, rgba(32,33,34,.86), rgba(32,33,34,.36) 32%, transparent 64%),
              linear-gradient(0deg, rgba(32,33,34,.95), transparent 32%, transparent 78%, rgba(32,33,34,.5));
}
.process-progress span {
  background: var(--blue);
}
.process-stages li.active {
  color: #e7fcff;
  border-image: none;
  border-color: var(--blue);
}
.mobile-stage-list {
  background-color: var(--bg);
  background-image: var(--construction-grid);
  background-size: 48px 48px;
}
.geometry:after {
  background: linear-gradient(0deg, var(--bg), transparent 13%, transparent 87%, var(--bg));
}
.geo-left:after {
  background: none;
}
.geo-right:after {
  background: none;
}
.geo-axis {
  background: var(--brand-mid);
  box-shadow: 0 0 12px 1px #2478d830;
}
@media (min-width: 1700px) {
  .hero-layout { min-height: max(760px, calc(100svh - 195px)); }
  .hero h1 { font-size: 116px; }
}
@media (max-width: 1100px) and (min-width: 801px) {
  .hero h1 { font-size: 76px; }
  .hero-copy { max-width: 500px; }
}
@media (max-width: 800px) {
  #navigation { background: #202122f5; }
  .hero-layout { min-height: 775px; padding-top: 45px; }
  .hero h1 { font-size: clamp(65px, 10vw, 82px); }
  .interactive-field { top: 345px; bottom: 20px; height: 420px; }
  .hero-index { bottom: 80px; }
  .process-media:after {
    background: linear-gradient(0deg, rgba(32,33,34,.95), transparent 42%),
                linear-gradient(90deg, rgba(32,33,34,.8), rgba(32,33,34,.16)),
                linear-gradient(0deg, transparent 40%, rgba(32,33,34,.65));
  }
}
@media (max-width: 520px) {
  .hero-layout { min-height: 760px; padding-top: 40px; }
  .hero h1 { font-size: clamp(46px, 14.1vw, 70px); }
  .hero-description { max-width: 310px; margin-top: 26px; }
  .interactive-field { top: 385px; height: 365px; }
  .hero-index { bottom: 65px; }
}
@media (forced-colors: active) {
  .hero h1 .accent-text,
  .final-cta h2 em,
  .service-icon { background: none; -webkit-text-fill-color: CanvasText; color: CanvasText; }
}

/* Open, continuous canvas: scene annotations and connected capabilities. */
:root {
  --gutter: clamp(24px, 4vw, 80px);
}
.wrap {
  width: calc(100% - var(--gutter) * 2);
  max-width: none;
}
.brand {
  position: relative;
  width: 112px;
  height: 82px;
  overflow: hidden;
  flex-shrink: 0;
}
.brand img {
  position: absolute;
  width: 132px;
  height: 132px;
  max-width: none;
  left: -10px;
  top: -27px;
  object-fit: contain;
  transform: none;
}
.brand:hover img {
  transform: translate(var(--brand-x, 0px), var(--brand-y, 0px));
}
.hero-layout {
  min-height: max(720px, calc(100svh - 195px));
}
.process {
  border: 0;
}
.process-sticky.wrap {
  width: 100%;
  max-width: none;
  background: transparent;
}
.process-sticky > .section-top {
  display: none;
}
.process .process-media {
  background-color: var(--bg);
  background-image: var(--construction-grid);
  background-size: 48px 48px;
}
.process-media video {
  filter: none;
  mix-blend-mode: normal;
  mask-image: none;
}
.process-media:after {
  background: linear-gradient(180deg, var(--bg), transparent 8%), linear-gradient(90deg, rgba(32,33,34,.82), rgba(32,33,34,.5) 20%, transparent 47%), linear-gradient(0deg, var(--bg), transparent 22%);
}
.process .process-layout > .process-callout {
  left: var(--annotation-x, 10%);
  top: var(--annotation-y, 38%);
  right: auto;
  width: clamp(220px, 23vw, 325px);
  max-width: none;
  z-index: 6;
  padding: 0;
  text-shadow: 0 2px 24px rgba(32,33,34,.9);
}
.process-count {
  margin-bottom: 12px;
  font-size: 11px;
  letter-spacing: .18em;
  color: #2478d8;
}
.process-title {
  font-size: clamp(34px, 3vw, 47px);
  line-height: 1.04;
  margin-bottom: 15px;
  letter-spacing: -.04em;
}
.process-copy {
  font-size: 15px;
  max-width: 310px;
  color: #c4c8ce;
  line-height: 1.6;
}
.annotation-leader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100svh;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}
.annotation-path {
  stroke: #2478d8;
  stroke-width: 1;
  fill: none;
  opacity: .55;
}
.annotation-anchor {
  fill: #202122;
  stroke: #2478d8;
  stroke-width: 1;
}
.annotation-halo {
  fill: none;
  stroke: #2478d8;
  stroke-width: 1;
  opacity: .28;
}
.process-stages {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 4vw, 70px);
  bottom: 48px;
}
.process-stages li {
  padding: 8px 0;
  border: 0;
  background: none;
  font-family: Consolas, 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #8e959c;
}
.process-stages li:before {
  display: none;
}
.process-stages li.active {
  color: #2478d8;
}
.process-progress {
  opacity: .38;
  height: 1px;
  bottom: 33px;
}
.automation-section {
  padding-top: 42px;
}
.systems-experience {
  position: relative;
  width: 100%;
  margin-top: 26px;
}
.systems-art {
  width: 100%;
  aspect-ratio: 2.05;
  margin: 0 auto 25px;
}
.systems-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.system-selectors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.system-selector {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 8px 12px;
  padding: 25px 0 20px;
  border: 0;
  border-top: 1px solid #ffffff28;
  background: none;
  color: var(--paper);
  text-align: left;
  transition: border-color .25s, color .25s;
}
.system-selector > span:not(.system-number) {
  font-size: clamp(20px, 2vw, 30px);
  letter-spacing: -.035em;
  line-height: 1.2;
}
.system-number {
  grid-row: 1 / 3;
  font: 11px Consolas, 'Courier New', monospace;
  color: var(--muted);
  padding-top: 6px;
}
.system-selector small {
  grid-column: 2;
  font-size: 13px;
  color: var(--muted);
}
.system-selector:hover,
.system-selector[aria-pressed=true] {
  border-color: var(--brand-mid);
}
.system-selector[aria-pressed=true] > span:not(.system-number) {
  color: #2478d8;
}
.systems-message {
  max-width: 630px;
  min-height: 54px;
  margin: 16px 0 0 42px;
  font-size: 15px;
  color: #c0c8cf;
}
.automation-demo {
  margin-top: 42px;
  padding: 35px 0 0;
  background: none;
  border: 0;
  border-top: 1px solid #ffffff20;
}
.workflow {
  gap: 38px;
}
.workflow > div {
  padding: 20px 0;
  border: 0;
  border-top: 1px solid #ffffff20;
  background: transparent;
}
.workflow > div.active {
  background: transparent;
  border-top-color: var(--brand-mid);
}
.workflow > i {
  color: #2478d8;
}
.about-strip {
  border-color: #ffffff20;
}
@media (min-width: 1700px) {
  .hero-layout { min-height: max(790px, calc(100svh - 195px)); }
  .interactive-field { width: 72%; }
}
@media (max-width: 1100px) {
  .system-selectors { gap: 24px; }
  .system-selector { grid-template-columns: 24px 1fr; gap: 8px; }
  .system-selector > span:not(.system-number) { font-size: 23px; }
  .systems-message { margin-left: 32px; }
}
@media (max-width: 800px) {
  .brand { width: 94px; height: 72px; }
  .brand img { width: 111px; height: 111px; left: -9px; top: -22px; }
  .hero-layout { min-height: 795px; }
  .process .process-layout > .process-callout {
    left: var(--gutter);
    top: 15%;
    width: min(340px, calc(100% - var(--gutter) * 2));
  }
  .process-title { font-size: 42px; }
  .process-copy { font-size: 15px; }
  .annotation-leader { display: none; }
  .process-stages { top: calc(100svh - 90px); gap: 20px; }
  .process-progress { top: calc(100svh - 37px); }
  .systems-art { aspect-ratio: 1.7; }
  .system-selectors { gap: 20px; }
  .system-selector { display: block; }
  .system-selector > span,
  .system-selector small { display: block; }
  .system-selector .system-number { padding: 0 0 14px; }
  .system-selector > span:not(.system-number) { font-size: 21px; margin-bottom: 9px; }
  .system-selector small { font-size: 12px; }
  .systems-message { margin-left: 0; }
  .workflow { gap: 22px; }
}
@media (max-width: 520px) {
  .hero-layout { min-height: 775px; }
  .process-stages { gap: 14px; }
  .process-stages li { font-size: 9px; letter-spacing: .06em; }
  .process-title { font-size: 39px; }
  .systems-art { width: calc(100% + 24px); margin-left: -12px; aspect-ratio: 1.5; }
  .system-selectors { grid-template-columns: 1fr; gap: 0; }
  .system-selector { display: grid; grid-template-columns: 24px 1fr; padding: 20px 0; gap: 4px 12px; }
  .system-selector .system-number { grid-row: 1 / 3; padding-top: 4px; }
  .system-selector > span:not(.system-number) { margin: 0; }
  .system-selector small { grid-column: 2; }
  .systems-message { min-height: 78px; }
  .workflow > div { padding: 20px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .brand:hover img { transform: none; }
}

/* Balance the two hero elements around the same vertical centre. */
@media (min-width: 801px) {
  .hero-layout { display: flex; align-items: center; padding-block: 72px; }
  .interactive-field { top: -28px; bottom: 90px; }
}
.systems-art { aspect-ratio: 1440 / 660; }
@media (max-width: 800px) {
  .systems-art { aspect-ratio: 1.7; }
  .systems-art img { object-fit: contain; object-position: center; }
}
@media (max-width: 520px) {
  .systems-art { width: calc(100% + 24px); aspect-ratio: 1.5; }
}

.process-copy { color: #ececeb; }
.process-count { color: var(--paper); }
.process-stages li { color: #c1c4c6; }

/* Alternating editorial surfaces. */
.about-band { background:#eeefec; color:var(--ink); }
.about-band .about-strip { border-color:#20212222; }
.about-band .about-strip p { color:#51575b; }
.about-band .about-strip .eyebrow { color:#555c61; }
.about-band .text-link { color:var(--ink); }
.services-overview.web-only .service-grid { grid-template-columns:1fr; }

/* Light paper gets a dot matrix; charcoal retains its construction lines. */
:root { --paper-texture:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='1' cy='1' r='.7' fill='%23202122' fill-opacity='.11'/%3E%3C/svg%3E"); }
.light-section,.about-band { background-color:#eeefec; background-image:var(--paper-texture); background-size:24px 24px; }
.footer .footer-brand { display:block; position:relative; width:145px; height:90px; overflow:hidden; flex-shrink:0; }
.footer .footer-brand img { position:absolute; width:160px; height:160px; max-width:none; left:-12px; top:-34px; object-fit:contain; }

/* Pricing stays editorial: open columns and a clear, comparable scope. */
.pricing-section { padding-block:90px 70px; border-bottom:1px solid var(--line); scroll-margin-top:30px; }
.pricing-intro { display:flex; justify-content:space-between; gap:40px; align-items:flex-end; margin-bottom:32px; }
.pricing-intro h2 { font-size:clamp(42px,4.6vw,74px); line-height:1.04; margin:0; letter-spacing:-.05em; }
.pricing-intro>p { max-width:340px; margin:0 0 5px; font-size:16px; color:var(--muted); }
.pricing-draft { border-left:2px solid var(--blue); padding:10px 16px; color:#b4bdc4; font-size:12px; margin:0 0 38px; }
.pricing-draft>span { color:var(--paper); font:10px Consolas,monospace; letter-spacing:.12em; margin-right:16px; }
.pricing-packages { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.pricing-package { border-top:2px solid #8e979f; padding-top:24px; display:flex; flex-direction:column; min-width:0; }
.pricing-package:nth-child(2) { border-top-color:var(--blue); }
.pricing-package>.eyebrow { font-size:10px; color:#b1b7bc; }
.pricing-package h3 { font-size:40px; font-weight:400; letter-spacing:-.045em; line-height:1.1; margin:10px 0 16px; }
.package-description { color:#b9c0c5; font-size:15px; max-width:340px; min-height:72px; margin:0; }
.package-price { font-size:clamp(34px,3.1vw,52px); line-height:1.1; letter-spacing:-.055em; color:var(--paper); margin:24px 0; }
.package-price small { display:block; font:10px Consolas,monospace; color:#aab4bd; letter-spacing:.12em; margin-bottom:8px; }
.package-price>span { display:block; color:#aab4bd; font-size:11px; letter-spacing:0; margin-top:10px; }
.pricing-package ul { list-style:none; padding:0; margin:0 0 30px; flex:1; }
.pricing-package li { font-size:13px; padding:11px 0 11px 17px; border-bottom:1px solid #ffffff12; color:#c5cbd0; position:relative; }
.pricing-package li:before { content:'+'; position:absolute; left:0; color:#d5dce1; }
.pricing-package .button { justify-content:space-between; width:100%; margin-top:auto; font-size:12px; }
.pricing-extras { display:grid; grid-template-columns:1fr 2fr; gap:40px; border-top:1px solid var(--line); padding-top:42px; margin-top:60px; }
.extras-intro h3 { font-size:44px; font-weight:400; letter-spacing:-.05em; margin:8px 0 18px; }
.extras-intro>p:not(.eyebrow) { font-size:15px; color:#b4bdc4; margin-bottom:24px; }
.extras-list { margin:0; display:grid; grid-template-columns:1fr 1fr; gap:0 35px; }
.extras-list>div { display:flex; justify-content:space-between; gap:18px; padding:22px 0; border-bottom:1px solid #ffffff20; }
.extras-list dt { font-size:15px; }.extras-list dd { font-size:24px; letter-spacing:-.04em; margin:0; text-align:right; white-space:nowrap; }
.extras-list small { display:block; color:#aab4bd; font-size:11px; line-height:1.5; margin-top:8px; letter-spacing:0; white-space:normal; }
.extras-list dt small { max-width:160px; }
.pricing-footnote { color:#aab4bd; font-size:12px; max-width:750px; line-height:1.6; margin:28px 0 0; }
@media(max-width:1000px) { .pricing-packages { gap:24px; }.pricing-extras { grid-template-columns:.8fr 2fr; gap:26px; }.extras-list { gap:0 20px; }.extras-list>div { flex-direction:column; }.extras-list dd { text-align:left; }.extras-list dt small { max-width:none; }.package-description { min-height:94px; } }
@media(max-width:700px) {
 .pricing-section { padding-block:55px; }.pricing-intro { flex-direction:column; align-items:flex-start; gap:24px; }.pricing-intro h2 { font-size:42px; }
 .pricing-draft>span { display:block; margin:0 0 8px; }.pricing-packages { grid-template-columns:1fr; gap:38px; }.pricing-package { padding-top:20px; }
 .package-description { min-height:0; }.package-price { font-size:46px; }.pricing-package ul { margin-bottom:20px; }.pricing-extras { grid-template-columns:1fr; gap:20px; margin-top:45px; }
 .extras-list { grid-template-columns:1fr; }.extras-list>div { flex-direction:row; }.extras-list dd { text-align:right; font-size:22px; }.extras-list dt small { max-width:175px; }
}

/* Project schedule: overlapping workstreams and actual review points. */
.project-timeline { background-color:#eeefec; background-image:var(--paper-texture); background-size:24px 24px; color:var(--ink); padding-block:70px; }
.project-timeline .section-top { color:#50575b; }
.timeline-intro { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end; margin-bottom:44px; }
.timeline-intro h2 { font-size:clamp(44px,4.5vw,72px); letter-spacing:-.05em; line-height:1.04; margin:0; }
.timeline-intro>div { max-width:390px; justify-self:end; }
.timeline-intro p { color:#50575b; font-size:16px; margin:0 0 22px; }
.timeline-sample { font:10px/1.6 Consolas,monospace; letter-spacing:.1em; color:#515c66; }
.timeline-chart { border-top:1px solid #20212245; }
.timeline-axis { display:grid; grid-template-columns:28% 72%; padding:18px 0; font:9px Consolas,monospace; letter-spacing:.1em; color:#58636c; }
.timeline-axis>div { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); }
.timeline-axis>div>span { padding-left:12px; }
.timeline-rows { list-style:none; margin:0; padding:0; }
.timeline-rows>li:nth-child(1) { --start:1; --span:1; }
.timeline-rows>li:nth-child(2) { --start:2; --span:2; }
.timeline-rows>li:nth-child(3) { --start:3; --span:3; }
.timeline-rows>li:nth-child(4) { --start:6; --span:1; }
.timeline-rows>li { display:grid; grid-template-columns:28% 72%; border-top:1px solid #20212218; min-height:105px; }
.timeline-label { padding:20px 24px 20px 0; }
.timeline-label h3 { font-size:20px; letter-spacing:-.025em; font-weight:400; margin:0 0 5px; }
.timeline-label p { color:#596168; font-size:12px; margin:0 0 8px; }
.timeline-label>span { font:9px Consolas,monospace; color:#58636c; }
.timeline-track { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); align-items:center; background-image:linear-gradient(90deg,#2021220b 1px,transparent 1px); background-size:calc(100% / 6) 100%; padding-block:18px; }
.timeline-bar { grid-column:var(--start) / span var(--span); min-height:46px; margin-right:13px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; background:#e0e3df; border:1px solid #7d898f66; color:#303b43; font:10px Consolas,monospace; position:relative; }
.timeline-bar i,.timeline-key i { display:inline-block; width:7px; height:7px; background:#eeefec; border:1px solid var(--blue); transform:rotate(45deg); flex-shrink:0; }
.timeline-rows>li:nth-child(2) .timeline-bar { border-top:2px solid var(--blue); }
.timeline-rows>li:nth-child(3) .timeline-bar { background:#d4d9d6; }
.timeline-rows>li:last-child .timeline-bar { background:#282b2e; color:#eeefec; border-color:#282b2e; }
.timeline-rows>li:last-child .timeline-bar i { background:var(--blue); }
.timeline-key { display:flex; justify-content:space-between; gap:35px; border-top:1px solid #20212230; padding-top:17px; }
.timeline-key>span { display:flex; align-items:center; gap:10px; font:10px/1.5 Consolas,monospace; color:#515c66; }
.timeline-key>p { margin:0; max-width:430px; font-size:11px; color:#596168; line-height:1.6; }
.timeline-partnership { display:flex; gap:35px; justify-content:space-between; align-items:end; margin-top:40px; padding-top:25px; border-top:1px solid #20212220; }
.timeline-partnership p { font-size:13px; margin:0; color:#50575b; }
.timeline-partnership p>span { display:block; font:9px Consolas,monospace; letter-spacing:.15em; margin-bottom:10px; color:#343c42; }
.timeline-partnership .text-link { color:var(--ink); font-size:11px; white-space:nowrap; }
@media(max-width:1000px) { .timeline-axis,.timeline-rows>li { grid-template-columns:32% 68%; }.timeline-bar { padding:10px 8px; font-size:9px; margin-right:8px; }.timeline-partnership { flex-wrap:wrap; } }
@media(max-width:700px) {
 .project-timeline { padding-block:50px; }.project-timeline .section-top>span { display:none; }.timeline-intro { grid-template-columns:1fr; gap:22px; margin-bottom:30px; }.timeline-intro>div { justify-self:start; }.timeline-intro h2 { font-size:46px; }
 .timeline-axis { display:none; }.timeline-track { display:none; }.timeline-rows>li { display:block; min-height:0; }.timeline-label { padding:22px 0; }.timeline-label h3 { font-size:24px; }.timeline-label p { font-size:14px; }.timeline-label>span { font-size:10px; display:flex; align-items:center; gap:9px; }.timeline-label>span:before { content:''; width:6px; height:6px; border:1px solid var(--blue); transform:rotate(45deg); }
 .timeline-key { display:block; }.timeline-key>span { display:none; }.timeline-key>p { max-width:none; font-size:12px; }.timeline-partnership { flex-direction:column; align-items:flex-start; gap:24px; margin-top:28px; }.timeline-partnership p { font-size:14px; }
}

.timeline-axis>.timeline-flow-label { display:flex; justify-content:space-between; gap:15px; }
.timeline-axis>.timeline-flow-label>span:last-child { padding-right:13px; }

/* Shared legal links, readable policy pages and the branded 404. */
.footer { flex-wrap:wrap; }
.footer .footer-legal { flex-basis:100%; display:flex; justify-content:flex-end; gap:24px; border-top:1px solid var(--line); padding-top:18px; font:10px/1.6 Consolas,monospace; }
.footer-legal a:hover { color:var(--paper); text-decoration:underline; text-underline-offset:4px; }
.legal-intro .large-copy { max-width:660px; }
.legal-date { font:11px/1.7 Consolas,monospace; color:var(--muted); margin-top:24px; }
.legal-draft { border-left:2px solid var(--blue); padding-left:14px; max-width:620px; color:#c5c9cb; font-size:13px; line-height:1.7; }
.legal-surface { padding-block:65px 85px; }
.legal-layout { display:grid; grid-template-columns:220px minmax(0,740px); gap:clamp(35px,6vw,100px); justify-content:space-between; }
.legal-layout aside { position:sticky; top:110px; align-self:start; }
.legal-layout aside nav { display:grid; gap:13px; margin-top:24px; }
.legal-layout aside nav a { font-size:12px; line-height:1.6; color:#50575b; }
.legal-layout aside nav a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
.legal-copy section { scroll-margin-top:100px; padding-bottom:32px; margin-bottom:32px; border-bottom:1px solid #20212225; }
.legal-copy section:last-child { border:0; margin-bottom:0; padding-bottom:0; }
.legal-copy h2 { font-size:clamp(24px,2.4vw,32px); line-height:1.2; font-weight:400; letter-spacing:-.025em; margin:0 0 20px; }
.legal-copy p { color:#41494f; font-size:16px; line-height:1.85; margin:0 0 18px; overflow-wrap:anywhere; }
.legal-copy p:last-child { margin-bottom:0; }
.legal-copy a { text-decoration:underline; text-underline-offset:3px; }
.not-found { padding-block:90px; }
.not-found .large-copy { max-width:580px; }
.not-found-actions { display:flex; align-items:center; gap:30px; flex-wrap:wrap; margin-top:35px; }
.not-found-help { padding-block:55px; }
.not-found-help h2 { font-size:clamp(28px,3vw,42px); line-height:1.2; letter-spacing:-.035em; margin:0 0 30px; }
.not-found-help .wrap>div { display:flex; flex-wrap:wrap; gap:30px; }
@media(max-width:760px) {
 .footer .footer-legal { justify-content:flex-start; gap:22px; }
 .legal-surface { padding-block:40px 55px; }
 .legal-layout { grid-template-columns:minmax(0,1fr); gap:40px; }
 .legal-layout aside { position:static; border-bottom:1px solid #20212225; padding-bottom:28px; }
 .legal-layout aside nav { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 20px; }
 .legal-copy p { font-size:15px; }
 .not-found { padding-block:55px 65px; }
 .not-found-help .wrap>div { flex-direction:column; align-items:flex-start; gap:22px; }
}

/* Brand story and a single, legible project invitation. */
.about-band .about-expanded { display:block; padding-block:72px; }
.about-expanded>.eyebrow { margin-bottom:34px; }
.about-story { display:grid; grid-template-columns:1fr 1fr; gap:70px; }
.about-story h2 { font-size:clamp(40px,4.5vw,70px); line-height:1.05; margin:0; letter-spacing:-.05em; }
.about-band .about-location { margin-top:28px; font:10px/1.8 Consolas,monospace; letter-spacing:.15em; color:#555c61; }
.about-band .about-lead { font-size:23px; line-height:1.4; color:var(--ink); letter-spacing:-.02em; margin:0 0 22px; }
.about-copy>p:not(.about-lead) { font-size:15px; line-height:1.7; max-width:none; margin-bottom:20px; }
.about-copy>.text-link { display:inline-flex; align-items:center; gap:10px; margin-top:5px; }
.about-principles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; border-top:1px solid #20212225; margin-top:45px; padding-top:30px; }
.about-principles h3 { font-size:21px; font-weight:400; letter-spacing:-.025em; margin:0 0 12px; }
.about-principles p { font-size:14px; line-height:1.6; margin:0; }
.icon-arrow { display:inline-block; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:square; stroke-linejoin:miter; vertical-align:-3px; flex-shrink:0; }
.text-link .icon-arrow { margin-left:5px; }
.button .icon-arrow { width:19px; height:19px; }
.nav-cta .icon-arrow { width:16px; height:16px; vertical-align:-3px; }
.view-project .icon-arrow { width:22px; height:22px; }
.next-project h2 .icon-arrow { width:.55em; height:.55em; vertical-align:0; }
.final-cta .cta-row { justify-content:flex-start; }
.final-cta .project-cta { display:inline-flex; align-items:center; gap:24px; min-height:52px; padding:16px 24px; font-size:13px; border-color:#91989e; white-space:nowrap; }
.final-cta .project-cta:hover { border-color:var(--blue); }
@media(max-width:800px) { .about-story { grid-template-columns:1fr; gap:30px; }.about-band .about-expanded { padding-block:48px; }.about-band .about-lead { font-size:21px; }.about-principles { grid-template-columns:1fr; gap:24px; margin-top:34px; }.about-principles article { max-width:500px; }.about-story h2 { font-size:46px; }.about-band .about-location { margin-top:20px; }.final-cta .cta-bottom { align-items:flex-start; }.final-cta .project-cta { width:100%; justify-content:space-between; } }

/* Dedicated page treatments use the same paper, rules and shared typography. */
.founder-section { padding-block:65px; scroll-margin-top:30px; }
.founder-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,7vw,110px); align-items:center; }
.founder-photo { margin:0; max-width:400px; width:100%; justify-self:center; }
.founder-photo img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border:1px solid #20212225; }
.founder-photo figcaption { display:flex; justify-content:space-between; gap:15px; border-top:1px solid #20212235; padding-top:14px; margin-top:17px; color:#50575b; font:9px/1.5 Consolas,monospace; letter-spacing:.08em; }
.founder-copy { max-width:650px; }
.founder-copy h2 { font-size:clamp(44px,4.5vw,70px); line-height:1.05; letter-spacing:-.05em; margin:18px 0 25px; }
.founder-copy .large-copy { font-size:22px; line-height:1.45; color:var(--ink); }
.founder-copy>p:not(.eyebrow):not(.large-copy) { font-size:15px; line-height:1.7; color:#51575b; }
.founder-copy>.button { margin-top:15px; border-color:#61686d; color:var(--ink); }
.studio-values { color:var(--paper); }
.studio-values .capability-grid p { color:var(--muted); }
body[data-page=pricing] .pricing-section { padding-top:15px; }
.pricing-faq { padding-block:65px; }.pricing-faq .faq h2 { font-size:clamp(40px,4vw,60px); }
.pricing-faq details { border-color:#20212230; }.pricing-faq details p { color:#51575b; }
@media(max-width:800px) { .founder-layout { grid-template-columns:1fr; gap:35px; }.founder-section { padding-block:40px; }.founder-photo { justify-self:start; }.founder-copy .large-copy { font-size:21px; }.founder-copy h2 { font-size:48px; }.founder-copy>.button { gap:18px; }.pricing-faq { padding-block:45px; } }

.website-capabilities .capability-grid p:not(.eyebrow) { color:var(--muted); }

/* Avara's business story follows the working principles on the About page. */
.studio-story { padding-block:70px; }
.studio-story-top { display:flex; justify-content:space-between; align-items:center; gap:24px; border-bottom:1px solid #20212230; padding-bottom:20px; margin-bottom:45px; }
.studio-story-top .eyebrow { margin:0; }
.studio-story-top>span { font:9px/1.6 Consolas,monospace; letter-spacing:.12em; color:#51575b; }
.studio-story-layout { display:grid; grid-template-columns:1fr 1fr; gap:clamp(35px,7vw,110px); }
.studio-story h2 { margin:0; font-size:clamp(44px,5.2vw,80px); line-height:1.05; letter-spacing:-.05em; }
.studio-story h2 em { color:var(--blue); font-style:normal; }
.studio-story-copy { max-width:650px; }
.studio-story-copy .large-copy { margin-top:0; font-size:23px; line-height:1.45; color:var(--ink); letter-spacing:-.02em; }
.studio-story-copy>p:not(.large-copy) { font-size:15px; line-height:1.7; color:#51575b; }
.studio-story-copy .text-link { display:inline-flex; align-items:center; gap:10px; margin-top:15px; color:var(--ink); }
.studio-story-foot { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; border-top:1px solid #20212230; margin-top:50px; padding-top:22px; font:10px/1.6 Consolas,monospace; letter-spacing:.1em; color:#51575b; }
@media(max-width:800px) { .studio-story { padding-block:45px; }.studio-story-top { display:block; margin-bottom:30px; }.studio-story-top>span { display:block; margin-top:12px; }.studio-story-layout { grid-template-columns:1fr; gap:28px; }.studio-story-copy .large-copy { font-size:21px; }.studio-story-foot { grid-template-columns:1fr; gap:12px; margin-top:35px; } }

/* Service detail and a light FAQ break before the project invitation. */
.services-lead { max-width:690px; font-size:18px; line-height:1.6; color:var(--muted); margin:26px 0 0; }
.service-inclusions { list-style:none; padding:0; margin:25px 0 0; }
.service-inclusions li { padding:11px 0; border-top:1px solid var(--line); font-size:13px; line-height:1.5; color:var(--paper); }
.website-options { display:grid; grid-template-columns:1fr 1fr; gap:70px; border-top:1px solid var(--line); margin-top:70px; padding-top:45px; }
.website-options h3 { font-size:clamp(32px,3.4vw,48px); line-height:1.1; letter-spacing:-.035em; font-weight:400; margin:22px 0; }
.website-option-list article+article { border-top:1px solid var(--line); margin-top:23px; padding-top:23px; }
.website-option-list h4 { font-size:22px; font-weight:400; margin:0 0 10px; letter-spacing:-.02em; }
.website-option-list p { color:var(--muted); font-size:15px; line-height:1.7; margin:0; max-width:620px; }
.services-faq { padding-block:70px; }
.services-faq-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(40px,7vw,110px); }
.services-faq h2 { font-size:clamp(44px,5vw,72px); letter-spacing:-.05em; line-height:1.05; margin:22px 0; }
.services-faq-layout>div:first-child>p:not(.eyebrow) { max-width:350px; font-size:16px; line-height:1.7; }
.services-faq .text-link { display:inline-flex; gap:10px; align-items:center; color:var(--ink); margin-top:15px; }
.services-faq .faq details { border-color:#20212230; padding:22px 0; }
.services-faq .faq details:first-child { border-top:1px solid #20212230; }
.services-faq .faq summary { font-size:20px; line-height:1.4; padding-right:12px; }
.services-faq .faq details p { font-size:15px; line-height:1.75; margin-bottom:0; color:#51575b; }
.services-faq .faq a { text-decoration:underline; text-underline-offset:3px; }
@media(max-width:800px) { .website-options,.services-faq-layout { grid-template-columns:1fr; gap:30px; }.website-options { margin-top:45px; padding-top:30px; }.services-faq { padding-block:45px; }.services-faq-layout>div:first-child>p:not(.eyebrow) { max-width:550px; }.services-faq .faq summary { font-size:18px; }.services-lead { font-size:16px; } }

/* Dedicated pricing page: paper packages and questions, charcoal extras. */
.pricing-surface { padding-block:0; }
body[data-page=pricing] .pricing-surface .pricing-section { padding-top:65px; border-bottom:0; }
.pricing-surface .pricing-intro>p,.pricing-surface .pricing-draft,.pricing-surface .package-description,.pricing-surface .package-price small,.pricing-surface .package-price>span,.pricing-surface .pricing-footnote,.pricing-surface .extras-intro>p:not(.eyebrow),.pricing-surface .extras-list small { color:#51575b; }
.pricing-surface .pricing-draft>span,.pricing-surface .package-price,.pricing-surface .pricing-package li,.pricing-surface .pricing-package li:before,.pricing-surface .pricing-package>.eyebrow { color:var(--ink); }
.pricing-surface .pricing-package li,.pricing-surface .extras-list>div,.pricing-surface .pricing-extras { border-color:#20212230; }
.pricing-surface .pricing-package .button { color:var(--ink); border-color:#61686d; }
.pricing-surface .pricing-package .button:hover { border-color:var(--blue); }
.pricing-surface .extras-intro .text-link { color:var(--ink); }
body[data-page=pricing] .pricing-faq { color:var(--ink); }
body[data-page=pricing] .pricing-faq details { border-color:#20212230; }
body[data-page=pricing] .pricing-faq details p,body[data-page=pricing] .pricing-faq-intro { color:#51575b; }
.pricing-faq-intro { max-width:580px; font-size:16px; line-height:1.7; margin-bottom:35px; }
@media(max-width:700px) { body[data-page=pricing] .pricing-surface .pricing-section { padding-top:45px; } }

.pricing-extras-surface { background-color:#202122; background-image:var(--construction-grid); background-size:48px 48px; color:var(--paper); padding-block:65px; }
.pricing-surface .pricing-extras-surface .pricing-extras { margin-top:0; padding-top:0; border-top:0; }
.pricing-surface .pricing-extras-surface .extras-intro>p:not(.eyebrow),.pricing-surface .pricing-extras-surface .extras-list small,.pricing-surface .pricing-extras-surface .pricing-footnote { color:var(--muted); }
.pricing-surface .pricing-extras-surface .eyebrow,.pricing-surface .pricing-extras-surface .text-link { color:var(--paper); }
.pricing-surface .pricing-extras-surface .extras-list>div { border-color:var(--line); }
@media(max-width:700px) { .pricing-extras-surface { padding-block:45px; } }

/* Contact keeps a charcoal introduction, then a paper enquiry surface. */
.contact-surface { padding-block:65px 30px; }
.contact-surface .contact-layout { padding-bottom:0; }
.contact-surface .contact-note { border-color:#20212230; }
.contact-surface .field label span,.contact-surface .consent { color:#51575b; }
.contact-surface .field input,.contact-surface .field select,.contact-surface .field textarea { background:#f8f9f6; color:var(--ink); border-color:#8a9195; color-scheme:light; }
.contact-surface .field input:hover,.contact-surface .field select:hover,.contact-surface .field textarea:hover { border-color:#51575b; }
.contact-surface .field input::placeholder,.contact-surface .field textarea::placeholder { color:#626a70; }
.contact-surface .field-error,.contact-surface .form-status.error { color:#a52b26; }
.contact-surface .field input[aria-invalid=true],.contact-surface .field textarea[aria-invalid=true] { border-color:#a52b26; }
.contact-surface .form-status.success { color:#185ba6; }
.contact-surface .consent input { color-scheme:light; }
@media(max-width:700px) { .contact-surface { padding-top:45px; } }

/* A bespoke enquiry sheet: a brand margin and three ruled chapters. */
.contact-surface { padding-block:75px 50px; }
.contact-surface .contact-layout { grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr); gap:clamp(50px,8vw,125px); }
.contact-surface .enquiry-intro { display:block; }
.enquiry-intro>.eyebrow { margin:0 0 25px; }
.contact-surface .enquiry-intro h2 { font-size:clamp(38px,4vw,60px); font-weight:400; line-height:1.06; letter-spacing:-.05em; margin:0 0 25px; }
.enquiry-intro h2 em { font-style:normal; color:var(--blue); }
.contact-surface .enquiry-intro>p:not(.eyebrow) { font-size:16px; line-height:1.7; max-width:370px; }
.enquiry-mark { max-width:320px; margin:40px 0; }
.enquiry-mark svg { display:block; width:100%; height:auto; }
.enquiry-mark-grid { stroke:#2021220c; stroke-width:.7; }
.enquiry-mark-shape { stroke:#2478d8; stroke-width:1.2; fill:#2478d808; }
.enquiry-mark-guide { stroke:#20212230; stroke-width:.7; stroke-dasharray:3 5; }
.enquiry-mark-cross { stroke:#2478d8; stroke-width:1; }
.enquiry-mark>span { display:block; font:9px/1.6 Consolas,monospace; letter-spacing:.16em; color:#51575b; margin-top:10px; }
.contact-surface .contact-note { border-top:1px solid #20212230; margin-top:0; padding-top:20px; max-width:370px; }
.contact-surface .contact-note .eyebrow { margin:0 0 15px; }
.contact-surface .contact-note>p:not(.eyebrow) { font-size:14px; line-height:1.7; }
.enquiry-location { display:block; font:9px/1.8 Consolas,monospace; letter-spacing:.12em; color:#51575b; margin-top:26px; }
.enquiry-group { border:0; min-width:0; margin:0 0 35px; padding:0; }
.enquiry-group legend { float:left; width:100%; border-top:1px solid #20212265; padding:18px 0 25px; margin:0; font-size:23px; line-height:1.3; letter-spacing:-.025em; }
.enquiry-group legend>span { display:inline-block; color:var(--blue); font:11px/1.5 Consolas,monospace; letter-spacing:.08em; vertical-align:3px; margin-right:18px; }
.enquiry-group .form-grid { clear:both; gap:22px 30px; }
.contact-surface .field label { font:10px/1.6 Consolas,monospace; letter-spacing:.04em; margin-bottom:4px; }
.contact-surface .field label span { font:10px/1.6 Consolas,monospace; letter-spacing:0; }
.contact-surface .field input,.contact-surface .field select,.contact-surface .field textarea { background:transparent; border:0; border-bottom:1px solid #788187; padding:12px 0; border-radius:0; font-size:16px; min-height:48px; }
.contact-surface .field input:hover,.contact-surface .field select:hover,.contact-surface .field textarea:hover { border-color:#202122; }
.contact-surface .field input:focus-visible,.contact-surface .field select:focus-visible,.contact-surface .field textarea:focus-visible { outline:2px solid var(--blue); outline-offset:5px; border-color:var(--blue); }
.contact-surface .field textarea { min-height:140px; line-height:1.65; }
.contact-surface .field input::placeholder,.contact-surface .field textarea::placeholder { color:#636b70; font-size:15px; }
.contact-surface .enquiry-brief { margin-bottom:12px; }
.contact-surface .consent { font-size:12px; line-height:1.6; max-width:520px; }
.contact-surface .submit-row { border-top:1px solid #20212230; padding-top:24px; margin-top:20px; justify-content:space-between; align-items:flex-start; }
.contact-surface .submit-row .button { min-height:54px; }
.contact-surface .submit-row p { max-width:180px; padding-top:6px; }
@media(max-width:1000px) { .contact-surface .contact-layout { grid-template-columns:1fr; gap:45px; }.contact-surface .enquiry-intro { display:grid; grid-template-columns:1fr 1fr; gap:0 45px; }.enquiry-intro>.eyebrow,.contact-surface .enquiry-intro h2 { grid-column:1; }.contact-surface .enquiry-intro>p:not(.eyebrow) { grid-column:1; }.contact-surface .contact-note { grid-column:2; grid-row:2/4; align-self:start; }.enquiry-mark { display:none; } }
@media(max-width:600px) { .contact-surface { padding-block:45px 25px; }.contact-surface .enquiry-intro { display:block; }.contact-surface .enquiry-intro h2 { font-size:42px; }.contact-surface .contact-note { margin-top:25px; }.enquiry-location { margin-top:18px; }.enquiry-group legend { font-size:21px; padding-bottom:22px; }.enquiry-group .form-grid { gap:14px; }.contact-surface .submit-row { flex-direction:column; gap:15px; }.contact-surface .submit-row p { max-width:none; }.contact-surface .submit-row .button { width:100%; justify-content:space-between; } }

/* Clearly bounded writing areas and consistent, authored dropdown menus. */
.contact-surface .field label { font:12px/1.6 Arial,Helvetica,sans-serif; letter-spacing:0; margin-bottom:9px; }
.contact-surface .field label span { font:11px/1.6 Arial,Helvetica,sans-serif; }
.contact-surface .field input,.contact-surface .field select,.contact-surface .field textarea,.enquiry-select-trigger { background:#fafbf8; border:1px solid #969fa4; border-left:2px solid #7d888f; padding:13px 15px; min-height:50px; }
.contact-surface .field input:focus-visible,.contact-surface .field select:focus-visible,.contact-surface .field textarea:focus-visible,.enquiry-select-trigger:focus-visible { outline:2px solid var(--blue); outline-offset:3px; border-color:var(--blue); }
.contact-surface .field textarea { min-height:155px; }
.enquiry-select { position:relative; min-width:0; }
.enquiry-select-trigger { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; color:var(--ink); font-size:16px; text-align:left; border-radius:0; cursor:pointer; }
.enquiry-select-trigger:hover { border-color:#202122; }
.enquiry-select-trigger svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; flex-shrink:0; }
.enquiry-select.open { z-index:10; }
.enquiry-select.open .enquiry-select-trigger { border-color:var(--blue); }
.enquiry-select.open .enquiry-select-trigger svg { transform:rotate(180deg); }
.enquiry-select-menu { position:absolute; top:calc(100% + 6px); left:0; width:100%; z-index:20; background:#fafbf8; border:1px solid #7d888f; box-shadow:0 8px 22px #20212216; padding:5px; max-height:270px; overflow-y:auto; }
.enquiry-select-menu[hidden] { display:none; }
.enquiry-select.opens-up .enquiry-select-menu { top:auto; bottom:calc(100% + 6px); }
.enquiry-select-option { padding:12px; min-height:44px; font-size:14px; line-height:1.4; cursor:pointer; border-left:2px solid transparent; }
.enquiry-select-option[aria-selected=true] { border-left-color:var(--blue); font-weight:600; }
.enquiry-select-option.active,.enquiry-select-option:hover { background:#e7edf2; color:#202122; }

/* A purposeful project map replaces the decorative logo sketch. */
.enquiry-prompts { max-width:370px; margin:38px 0; }
.enquiry-prompts>.eyebrow { font-size:10px; color:#51575b; margin:0 0 22px; }
.enquiry-prompts ul { list-style:none; margin:0 0 0 5px; padding:0 0 0 28px; border-left:1px solid #7d888f66; }
.enquiry-prompts li { position:relative; padding:0 0 21px; }
.enquiry-prompts li:last-child { padding-bottom:0; }
.enquiry-prompts li:before { content:''; position:absolute; left:-33px; top:5px; width:8px; height:8px; border:1px solid var(--blue); background:#eeefec; }
.enquiry-prompts li:last-child:before { background:var(--blue); }
.enquiry-prompts li>span { display:block; font:10px/1.6 Consolas,monospace; letter-spacing:.04em; color:#51575b; }
.enquiry-prompts li>p { margin:5px 0 0; font-size:18px; line-height:1.4; color:var(--ink); letter-spacing:-.02em; }
@media(min-width:601px) and (max-width:1000px) { .enquiry-prompts { display:none; } }
@media(max-width:600px) { .enquiry-prompts { margin-block:28px; }.enquiry-prompts li>p { font-size:17px; } }

/* Direct contact is a distinct editorial block at the foot of the left column. */
.contact-direct { margin-top:35px; padding:25px 0 0; border-top:2px solid var(--blue); max-width:420px; }
.contact-direct>.eyebrow { margin:0 0 24px; font-size:10px; }
.contact-email,.contact-place { display:flex; align-items:flex-start; gap:15px; }
.contact-direct svg { width:20px; height:20px; stroke:currentColor; stroke-width:1.5; fill:none; flex-shrink:0; margin-top:3px; }
.contact-email>span,.contact-place>span { min-width:0; flex:1; }
.contact-direct small { display:block; color:#51575b; font:9px/1.6 Consolas,monospace; letter-spacing:.1em; margin-bottom:9px; }
.contact-email strong { display:block; font-size:clamp(19px,1.65vw,26px); font-weight:400; line-height:1.3; letter-spacing:-.035em; overflow-wrap:anywhere; }
.contact-email { padding-bottom:24px; color:var(--ink); }
.contact-email>.icon-arrow { width:18px; height:18px; color:var(--blue); margin-top:27px; }
.contact-email:hover strong { color:var(--blue); }
.contact-place { border-top:1px solid #20212230; padding-top:22px; }
.contact-place strong { display:block; font-size:16px; font-weight:400; }
.contact-place>span>span { display:block; font-size:12px; line-height:1.6; color:#51575b; margin-top:7px; }
@media(min-width:601px) and (max-width:1000px) { .contact-direct { grid-column:2; margin-top:25px; }.contact-email strong { font-size:23px; } }
@media(max-width:600px) { .contact-direct { margin-top:28px; }.contact-email strong { font-size:24px; } }

/* User-requested social layout preview; icons intentionally have no links yet. */
.contact-socials { border-top:1px solid #20212230; padding-top:22px; margin-top:24px; }
.contact-socials-label { display:flex; justify-content:space-between; gap:15px; font:9px/1.6 Consolas,monospace; letter-spacing:.1em; color:#51575b; }
.contact-socials-label small { font:inherit; letter-spacing:.04em; }
.contact-social-icons { display:flex; gap:12px; margin-top:15px; }
.contact-social-icon { display:flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid #20212245; color:#202122; }
.contact-social-icon svg { width:19px; height:19px; margin:0; stroke-width:1.6; }

/* Direct contact shares the quiet, ruled language of the project form. */
.contact-direct { margin-top:28px; padding-top:24px; border-top:1px solid #20212230; max-width:370px; }
.contact-direct>.eyebrow { margin-bottom:22px; color:#51575b; }
.contact-email,.contact-place { display:grid; grid-template-columns:22px minmax(0,1fr); column-gap:14px; padding:0; border:0; }
.contact-direct svg { width:20px; height:20px; stroke-width:1.5; margin-top:21px; color:#4f5a62; }
.contact-direct small { font-size:9px; margin-bottom:5px; }
.contact-email strong { font-size:16px; line-height:1.5; letter-spacing:-.02em; overflow-wrap:anywhere; }
.contact-email>.icon-arrow { display:none; }
.contact-email:hover>svg,.contact-email:hover strong { color:var(--blue); }
.contact-place { margin-top:22px; }
.contact-place strong { font-size:16px; line-height:1.5; }
.contact-place>span>span { margin-top:3px; }
.contact-socials { display:grid; grid-template-columns:22px minmax(0,1fr); gap:0 14px; border:0; padding:0; margin-top:25px; }
.contact-socials:before { content:''; width:6px; height:6px; border:1px solid var(--blue); justify-self:center; margin-top:4px; }
.contact-socials-label { grid-column:2; display:block; font-size:9px; }
.contact-socials-label small { display:inline; font-size:8px; margin-left:10px; color:#626b70; }
.contact-social-icons { grid-column:2; gap:12px; margin:9px 0 0 -8px; }
.contact-social-icon { border:0; width:36px; height:36px; color:#4f5a62; }
.contact-social-icon svg { width:20px; height:20px; stroke-width:1.5; margin:0; color:inherit; }
.contact-social-icon:hover { color:var(--blue); }
@media(min-width:601px) and (max-width:1000px) { .contact-direct { margin-top:25px; }.contact-email strong { font-size:16px; } }
@media(max-width:600px) { .contact-email strong { font-size:16px; }.contact-direct { margin-top:25px; } }

/* Final contact polish: legible social marks and quieter field surfaces. */
.contact-social-icons { gap:14px; margin-left:-8px; }
.contact-social-icon { width:44px; height:44px; }
.contact-social-icon svg { width:26px; height:26px; stroke-width:1.6; }
.contact-surface .field input,.contact-surface .field select,.contact-surface .field textarea,.enquiry-select-trigger { background:#e3e6e2; border-color:#899399; }
.enquiry-select-menu { background:#eeefec; }
.enquiry-select-option.active,.enquiry-select-option:hover { background:#dce3e7; }

/* The enquiry shares the paper surface: no separate panel or dark card. */
.contact-socials { display:block; border-top:1px solid #20212230; padding-top:22px; margin-top:25px; }
.contact-socials:before { content:none; }
.contact-socials-label { margin:0 0 12px; font:400 10px/1.6 Consolas,monospace; letter-spacing:.1em; color:#51575b; }
.contact-social-icons { margin:0 0 0 -8px; }
.contact-surface #project-form { min-width:0; padding:0; background:none; color:var(--ink); border:0; }
.enquiry-sheet-heading { padding:0 0 25px; }
.contact-surface .enquiry-sheet-heading h2 { font:400 10px/1.6 Consolas,monospace; color:#51575b; letter-spacing:.1em; margin:0; }
.contact-surface .enquiry-group legend { font-size:23px; border-color:#20212245; }
.contact-surface .enquiry-group legend>span { color:var(--blue); }
.contact-surface .field label { color:#202122; font:12px/1.6 Arial,Helvetica,sans-serif; letter-spacing:0; }
.contact-surface .field label span { color:#51575b; font:11px/1.6 Arial,Helvetica,sans-serif; }
.contact-surface .field input,.contact-surface .field select,.contact-surface .field textarea,.contact-surface .enquiry-select-trigger { background:#e8eae6; color:var(--ink); border:1px solid #a0a9ad; border-left:1px solid #a0a9ad; border-bottom:2px solid #77838b; color-scheme:light; }
.contact-surface .field input:hover,.contact-surface .field select:hover,.contact-surface .field textarea:hover,.contact-surface .enquiry-select-trigger:hover { border-color:#616e77; }
.contact-surface .field input:focus-visible,.contact-surface .field select:focus-visible,.contact-surface .field textarea:focus-visible,.contact-surface .enquiry-select-trigger:focus-visible { outline-color:var(--blue); border-color:var(--blue); }
.contact-surface .field input::placeholder,.contact-surface .field textarea::placeholder { color:#5e6971; }
.contact-surface .enquiry-select-menu { background:#eeefec; border-color:#899399; box-shadow:0 8px 22px #20212216; color:var(--ink); }
.contact-surface .enquiry-select-option.active,.contact-surface .enquiry-select-option:hover { background:#dce3e7; color:var(--ink); }
.contact-surface .enquiry-select-option[aria-selected=true] { border-left-color:var(--blue); }
.contact-surface .consent { color:#51575b; }
.contact-surface .consent input { color-scheme:light; }
.contact-surface .submit-row { border-color:#20212230; }
.contact-surface .submit-row .button { width:auto; min-width:270px; justify-content:space-between; gap:25px; }
.contact-surface .field-error,.contact-surface .form-status.error { color:#a52b26; }
.contact-surface .field input[aria-invalid=true],.contact-surface .field textarea[aria-invalid=true] { border-color:#a52b26; }
.contact-surface .form-status.success { color:#185ba6; }
@media(max-width:600px) { .contact-surface .enquiry-group legend { font-size:21px; }.contact-surface .submit-row .button { width:100%; min-width:0; }.enquiry-sheet-heading { padding-bottom:22px; } }

/* Enquiry controls follow the site's straight edges and fine editorial rules. */
.contact-surface .enquiry-entry,.contact-surface .enquiry-select { position:relative; background:#20212203; border:1px solid #77838b; }
.contact-surface .enquiry-entry:before,.contact-surface .enquiry-entry:after,.contact-surface .enquiry-select:before,.contact-surface .enquiry-select:after { content:none; }
.contact-surface .enquiry-entry:hover,.contact-surface .enquiry-select:hover { border-color:#202122; }
.contact-surface .enquiry-entry:focus-within,.contact-surface .enquiry-select:focus-within { outline:2px solid var(--blue); outline-offset:3px; border-color:var(--blue); background:#2478d805; }
.contact-surface .enquiry-entry input,.contact-surface .enquiry-entry textarea,.contact-surface .enquiry-select-trigger { background:transparent; border:0; color:var(--ink); padding:16px 18px; min-height:56px; outline:none; }
.contact-surface .enquiry-entry input:focus-visible,.contact-surface .enquiry-entry textarea:focus-visible,.contact-surface .enquiry-select-trigger:focus-visible { outline:none; border:0; }
.contact-surface .enquiry-entry textarea { min-height:175px; line-height:1.7; padding-top:18px; }
.contact-surface .enquiry-entry:has([aria-invalid=true]) { border-color:#a52b26; outline:1px solid #a52b26; outline-offset:0; }
.contact-surface .field label { font:11px/1.6 Consolas,monospace; letter-spacing:.025em; margin-bottom:11px; }
.contact-surface .field label span { font:10px/1.6 Consolas,monospace; }
.contact-surface .enquiry-select-trigger { gap:18px; }
.contact-surface .enquiry-select-trigger svg { width:18px; height:18px; padding:0; border:0; box-sizing:border-box; margin:0; stroke-width:1.5; }
.contact-surface .enquiry-select.open { outline:2px solid var(--blue); outline-offset:3px; border-color:var(--blue); }
.contact-surface .enquiry-select-menu { top:calc(100% + 8px); background:#eeefec; border:1px solid #77838b; padding:0 14px; box-shadow:none; }
.contact-surface .enquiry-select.opens-up .enquiry-select-menu { top:auto; bottom:calc(100% + 8px); }
.contact-surface .enquiry-select-option { position:relative; border-left:0; padding:14px 20px 14px 8px; font-size:14px; font-weight:400; min-height:48px; }
.contact-surface .enquiry-select-option+.enquiry-select-option { border-top:1px solid #20212225; }
.contact-surface .enquiry-select-option[aria-selected=true] { font-weight:400; }
.contact-surface .enquiry-select-option[aria-selected=true]:before { content:''; position:absolute; right:5px; top:20px; width:9px; height:5px; border-left:1.5px solid var(--blue); border-bottom:1.5px solid var(--blue); transform:rotate(-45deg); }
.contact-surface .enquiry-select-option.active,.contact-surface .enquiry-select-option:hover { background:#20212208; }
@media(max-width:600px) { .contact-surface .enquiry-entry input,.contact-surface .enquiry-entry textarea,.contact-surface .enquiry-select-trigger { padding-inline:15px; } }

/* Portfolio categories and six-item pagination use shared editorial controls. */
#work-projects { scroll-margin-top:30px; }
.work-results-bar { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-top:35px; padding-top:22px; border-top:1px solid #20212230; }
.work-results { margin:0; font:10px/1.6 Consolas,monospace; color:#51575b; }
.work-pagination { display:flex; flex-wrap:wrap; gap:8px; }
.work-pagination[hidden] { display:none; }
.work-pagination button { min-width:44px; min-height:44px; padding:10px 14px; border:1px solid #20212245; background:transparent; color:var(--ink); font-size:12px; }
.work-pagination button[aria-current=page] { background:var(--ink); color:var(--paper); }
.work-pagination button:hover:not(:disabled) { border-color:var(--blue); }
.work-pagination button:disabled { opacity:.4; cursor:default; }
.work-empty { grid-column:1/-1; padding-block:35px; max-width:500px; }
@media(max-width:600px) { .work-results-bar { align-items:flex-start; flex-direction:column; gap:18px; }.work-pagination button { padding-inline:12px; } }

/* Case studies alternate full-width charcoal and paper bands. */
.case-overview { padding-block:40px 65px; }
.case-overview .case-meta { margin-top:0; padding-top:0; border-top:0; align-items:flex-start; }
.case-overview .case-meta p,.case-overview .case-meta .eyebrow { color:var(--ink); }
.case-overview .case-meta .eyebrow { font-size:10px; color:#51575b; }
.case-overview .case-meta .button { color:var(--ink); border-color:#61686d; }
.case-overview .case-meta .button:hover { border-color:var(--blue); }
.case-overview .case-preview { margin-top:40px; }
.case-thinking { background-color:var(--bg); background-image:var(--construction-grid); background-size:48px 48px; color:var(--paper); }
.case-thinking .case-text { border-bottom:0; }
.case-ending { padding-block:0; }
.case-ending .next-project { border-color:#20212230; color:var(--ink); }
.case-ending .next-project p { color:#51575b; }
.case-video { display:block; width:100%; height:auto; margin-bottom:35px; }
.case-client-link { display:inline-flex; align-items:center; gap:12px; margin-block:15px 35px; }
@media(max-width:600px) { .case-overview { padding-block:30px 40px; }.case-overview .case-meta .button { grid-column:1/-1; width:fit-content; }.case-overview .case-preview { margin-top:30px; }.case-ending .case-gallery { padding-block:35px; } }

/* Deliberate project facts: readable values, ruled columns and a clear demo action. */
.case-overview-heading { display:flex; justify-content:space-between; gap:24px; border-bottom:1px solid #20212235; padding-bottom:20px; margin-bottom:30px; }
.case-overview-heading h2,.case-overview-heading>span { margin:0; font:11px/1.6 Consolas,monospace; letter-spacing:.1em; color:#51575b; }
.case-overview .case-meta { display:grid; grid-template-columns:2fr 1fr; gap:40px; }
.case-facts { display:grid; grid-template-columns:1.1fr 1fr; gap:35px; margin:0; }
.case-facts>div+div { border-left:1px solid #20212230; padding-left:35px; }
.case-facts dt { font:11px/1.6 Consolas,monospace; text-transform:uppercase; letter-spacing:.1em; color:#51575b; margin-bottom:13px; }
.case-facts dd { margin:0; font-size:19px; line-height:1.5; letter-spacing:-.015em; color:var(--ink); }
.case-facts ul { list-style:none; margin:0; padding:0; }
.case-facts li+li { margin-top:5px; }
.case-facts .case-format-label { margin-top:24px; }
.case-demo { border-left:1px solid #20212230; padding-left:35px; }
.case-overview .case-demo>p { font-size:20px; line-height:1.3; color:var(--ink); letter-spacing:-.02em; margin:0 0 20px; }
.case-demo .button { display:inline-flex; gap:18px; align-items:center; font-size:12px; min-height:50px; }
.case-demo small { display:block; font-size:12px; line-height:1.6; color:#51575b; margin-top:12px; }
.case-highlights { padding-bottom:65px; }
.case-highlights>.eyebrow { border-top:1px solid var(--line); padding-top:26px; margin-bottom:28px; }
.case-highlights>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.case-highlights h3 { font-size:23px; line-height:1.2; margin-bottom:14px; }
.case-highlights article p { font-size:15px; line-height:1.7; margin:0; }
@media(max-width:1000px) { .case-overview .case-meta { grid-template-columns:1fr; gap:30px; }.case-demo { border-left:0; border-top:1px solid #20212230; padding:25px 0 0; }.case-highlights>div { gap:25px; } }
@media(max-width:600px) { .case-facts { grid-template-columns:1fr; gap:25px; }.case-facts>div+div { border-left:0; border-top:1px solid #20212230; padding:23px 0 0; }.case-facts dd { font-size:18px; }.case-overview-heading>span { font-size:9px; }.case-overview-heading h2 { font-size:10px; }.case-highlights>div { grid-template-columns:1fr; gap:28px; }.case-highlights { padding-bottom:40px; } }

/* Project-fact columns share a centred composition and a readable demo hover. */
.case-facts>div,.case-demo { text-align:center; }
.case-demo .button { margin-inline:auto; }
.case-overview .case-demo .button:hover,.case-overview .case-demo .button:focus-visible { background:var(--ink); border-color:var(--ink); color:var(--paper); }

/* QA corrections: light-surface hover contrast and wide-screen hero fit. */
.pricing-surface .pricing-package .button:hover,.pricing-surface .pricing-package .button:focus-visible { background:var(--ink); color:var(--paper); border-color:var(--ink); }
@media(min-width:1700px) { .hero-copy { max-width:640px; } }

/* Fade only the hero artwork, preserving its focus ring and interactive area. */
.field-surface canvas,.field-fallback { -webkit-mask-image:linear-gradient(to right,#000 0%,#000 40%,#0009 66%,#0003 84%,transparent 100%); mask-image:linear-gradient(to right,#000 0%,#000 40%,#0009 66%,#0003 84%,transparent 100%); }
.field-fallback { opacity:.22; }

/* A vertical roadmap keeps every workstream legible on phones. */
@media(max-width:700px) {
 .timeline-rows { border-left:1px solid #77838b; margin-left:5px; padding-left:22px; }
 .timeline-rows>li { position:relative; padding-bottom:22px; }
 .timeline-rows>li:before { content:''; position:absolute; left:-27px; top:28px; width:8px; height:8px; background:#eeefec; border:1px solid var(--blue); transform:rotate(45deg); }
 .timeline-label { padding:20px 0 14px; }
 .timeline-label>span:before { content:none; }
 .timeline-track { display:block; background:none; padding:0; }
 .timeline-bar { min-height:44px; margin:0; padding:12px 14px; font-size:11px; }
 .timeline-key { margin-top:4px; }
}

#contact-verification{max-width:100%;}#verification-help{font-size:.85rem;line-height:1.5;}#verification-help:empty{display:none;}