* {
  box-sizing:border-box
}
html {
  scroll-behavior:auto;
  scroll-padding-top:calc(var(--header-occupied, calc(var(--header) + env(safe-area-inset-top))) + 16px)
}
body {
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased
}
button,input,select,textarea {
  font:inherit
}
a {
  color:inherit;
  text-decoration:none
}
button,a,input,textarea,select {
  touch-action:manipulation
}
button {
  cursor:pointer
}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible {
  outline:2px solid #9bb1ff;
  outline-offset:5px
}
::selection {
  background:var(--accent);
  color:#fff
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.055em
}
em {
  font-style:normal;
  color:var(--muted)
}

/* Header and hero composition are in responsive.css. */
@font-face {
  font-family:Manrope;
  src:url('/assets/fonts/manrope-variable.ttf') format('truetype');
  font-style:normal;
  font-weight:200 800;
  font-display:swap
}
.section-heading {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:end;
  margin-bottom:56px
}
.section-heading h2 {
  margin-top:25px
}
.heading-period {
  color:var(--accent)
}
.section-intro {
  max-width:475px;
  margin-left:auto
}
.section-intro h3 {
  font-size:21px;
  letter-spacing:-.035em;
  line-height:1.4;
  margin-bottom:17px
}
.section-intro>p,.work-intro {
  color:var(--muted);
  font-size:13px;
  line-height:1.9
}
.services-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px 24px
}
.service-card {
  min-width:0;
  background:#0d121b;
  border:1px solid var(--line);
  display:flex;
  flex-direction:column
}
.media-frame {
  aspect-ratio:1.8;
  position:relative;
  overflow:hidden;
  background:#141d2c;
  isolation:isolate
}
.media-frame picture {
  display:block;
  height:100%;
  width:100%
}
.media-frame img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.85) contrast(1.04) brightness(.93);
  transition:transform .7s
}
.media-frame::after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(165deg,#1d3c7935,#0c163664);
  mix-blend-mode:color;
  z-index:1
}
.media-frame::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  opacity:.09;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.5' filter='url(%23n)'/%3E%3C/svg%3E")
}
.service-card:hover .media-frame img {
  transform:scale(1.035)
}
.service-content {
  padding:24px 24px 15px;
  display:flex;
  flex:1;
  flex-direction:column
}
.service-name {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:500
}
.service-name .index {
  color:#778399;
  font-size:9px;
  letter-spacing:0
}
.service-name i {
  width:5px;
  height:5px;
  background:var(--service-tint);
  margin-left:auto
}
.service-content h3 {
  margin:27px 0 16px;
  font-size:24px;
  line-height:1.25;
  letter-spacing:-.045em;
  max-width:300px
}
.service-description {
  font-size:12px;
  line-height:1.85;
  color:#939dac;
  flex:1
}
.service-bottom {
  border-top:1px solid var(--line);
  margin-top:28px;
  padding-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}
.service-tags {
  display:flex;
  gap:9px;
  flex-wrap:wrap
}
.tag {
  font-size:7px;
  letter-spacing:0;
  color:#8e9bb0;
  white-space:nowrap
}
.service-link {
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  flex-shrink:0;
  color:#abb9d6;
  font-size:22px
}
.service-link:hover {
  background:var(--accent);
  color:#fff
}
.service-summary {
  padding:40px 28px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  border:1px solid var(--line);
  background:radial-gradient(ellipse at 70% 15%,#18305b4d,transparent 65%)
}
.summary-mark svg {
  height:49px;
  width:49px;
  color:#6485ef;
  opacity:.7
}
.service-summary .eyebrow {
  font-size:8px;
  line-height:1.8;
  margin:32px 0 13px;
  max-width:200px;
  letter-spacing:1px
}
.service-summary h3 {
  font-size:35px;
  line-height:1.18
}
.service-summary .text-link {
  margin-top:28px
}
.media-note {
  font-family:var(--mono);
  font-size:8px;
  color:#717e92;
  margin-top:20px
}
.media-placeholder {
  padding:25px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#8e9bb0;
  font:11px/1.8 var(--mono)
}
.media-placeholder span {
  color:#bcc9e1;
  margin-bottom:9px
}
.process-wrap {
  background:#0d121b;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.process-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:85px
}
.process-heading h2 {
  margin:26px 0
}
.process-intro {
  color:var(--muted);
  font-size:13px;
  line-height:1.9
}
.process-steps {
  padding:0;
  margin:0;
  list-style:none
}
.process-steps li {
  display:flex;
  align-items:flex-start;
  gap:25px;
  border-top:1px solid var(--line);
  padding:32px 0
}
.process-steps li:last-child {
  border-bottom:1px solid var(--line)
}
.process-steps .index {
  color:#6f81aa;
  padding-top:5px;
  font-size:9px
}
.process-steps h3 {
  font-size:26px;
  letter-spacing:-.04em;
  margin-bottom:14px
}
.process-steps p {
  max-width:350px;
  color:var(--muted);
  font-size:12px;
  line-height:1.9
}
.step-glyph {
  margin-left:auto;
  font-size:24px;
  color:#71829f
}
.step-period {
  color:#71829f
}
.process-illustration {
  margin-top:65px;
  height:135px;
  position:relative;
  width:320px
}
.diagram-axis {
  height:1px;
  position:absolute;
  top:50px;
  left:0;
  right:0;
  background:linear-gradient(90deg,#375fd3,transparent)
}
.diagram-block {
  position:absolute;
  top:15px;
  width:65px;
  height:65px;
  border:1px solid #7198f170;
  background:linear-gradient(140deg,#2c49884d,#111a2a);
  transform:rotate(-30deg) skew(10deg);
  display:grid;
  place-items:center;
  box-shadow:-6px 7px 0 #182747;
  z-index:1
}
.diagram-block span {
  font:9px var(--mono);
  color:#afc7ff;
  transform:skew(-10deg) rotate(30deg)
}
.db-0 {
  left:0
}
.db-1 {
  left:75px;
  top:20px;
  opacity:.85
}
.db-2 {
  left:150px;
  top:25px;
  opacity:.65
}
.db-3 {
  left:225px;
  top:30px;
  opacity:.45
}
.diagram-caption {
  position:absolute;
  bottom:0;
  left:0;
  font:8px var(--mono);
  letter-spacing:1px;
  color:#7785a0
}
.why-section {
  border-bottom:1px solid var(--line)
}
.why-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:85px;
  margin-top:35px
}
.why-layout h2 {
  font-size:clamp(36px,3.9vw,58px);
  max-width:480px
}
.why-points {
  display:grid;
  gap:32px
}
.why-points article {
  display:flex;
  gap:22px
}
.why-icon {
  width:40px;
  height:40px;
  border:1px solid #ffffff20;
  display:grid;
  place-items:center;
  flex-shrink:0;
  font-size:20px;
  color:#8298c4
}
.why-points h3 {
  font-size:21px;
  margin:4px 0 11px;
  letter-spacing:-.035em
}
.why-points p {
  font-size:12px;
  color:var(--muted);
  max-width:360px;
  line-height:1.9
}
.work-intro {
  margin-bottom:4px;
  margin-left:auto
}
.work-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:25px
}
.work-placeholder {
  aspect-ratio:1.23;
  background:#0e141f;
  border:1px solid #ffffff12;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:21px
}
.work-placeholder .index {
  font-size:8px;
  color:#76839b
}
.placeholder-stamp {
  align-self:flex-start;
  font-family:var(--mono);
  font-size:7px;
  letter-spacing:1px;
  border:1px solid #ffffff20;
  padding:6px 9px;
  color:#a0acc1;
  z-index:2
}
.placeholder-shape {
  position:absolute;
  left:50%;
  top:47%;
  transform:translate(-50%,-50%);
  width:105px;
  height:105px
}
.placeholder-shape i {
  position:absolute;
  inset:0;
  border:1px solid #6281b343;
  background:#18253b2b;
  transform:rotate(-25deg) skew(10deg)
}
.placeholder-shape i:nth-child(2) {
  transform:translate(15px,-15px) rotate(-25deg) skew(10deg);
  background:transparent
}
.placeholder-shape i:nth-child(3) {
  transform:translate(-15px,15px) rotate(-25deg) skew(10deg);
  background:transparent
}
.shape-1 i {
  border-radius:50%;
  transform:rotateX(45deg)!important
}
.shape-1 i:nth-child(2) {
  transform:translateY(20px) rotateX(45deg)!important
}
.shape-1 i:nth-child(3) {
  transform:translateY(-20px) rotateX(45deg)!important
}
.shape-2 i {
  transform:rotate(45deg)!important
}
.shape-2 i:nth-child(2) {
  transform:translateX(20px) rotate(45deg)!important
}
.shape-2 i:nth-child(3) {
  transform:translateX(-20px) rotate(45deg)!important
}
.work-card h3 {
  font-size:18px;
  letter-spacing:-.03em;
  margin:24px 0 10px
}
.work-card>p {
  font:9px/1.8 var(--mono);
  color:#7d8a9f;
  max-width:290px
}
.contact-wrap {
  background:radial-gradient(ellipse at 0% 90%,#13276499,transparent 58%),#101621;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.contact-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px
}
.contact-copy h2 {
  font-size:clamp(40px,4.1vw,65px);
  line-height:1.14;
  margin:26px 0
}
.contact-copy h2 em {
  color:#9faece
}
.contact-copy>p:not(.eyebrow) {
  color:#99a4b8;
  max-width:355px;
  font-size:13px;
  line-height:1.9
}
.contact-motif {
  display:flex;
  align-items:center;
  gap:22px;
  margin-top:90px;
  color:#899bc0
}
.contact-motif svg {
  width:40px;
  height:40px;
  opacity:.55
}
.contact-motif span {
  font:8px/1.8 var(--mono);
  letter-spacing:1.1px
}
.enquiry-form {
  max-width:560px;
  width:100%;
  margin-left:auto
}
.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px
}
.field {
  margin-bottom:23px;
  min-width:0
}
.field label {
  display:block;
  font-size:11px;
  margin-bottom:10px;
  color:#d8deeb
}
.field label small {
  font-size:10px;
  color:#8b99b1
}
.field label>span {
  color:#91aafa
}
.field input,.field select,.field textarea {
  display:block;
  width:100%;
  border:0;
  border-bottom:1px solid #ffffff25;
  background:transparent;
  border-radius:0;
  color:#dce3f2;
  font-size:12px;
  padding:9px 0 13px;
  min-height:44px
}
.field input::placeholder,.field textarea::placeholder {
  color:#79869e;
  opacity:1
}
.field select {
  color-scheme:dark
}
.field select option {
  background:#121c2d
}
.field textarea {
  resize:vertical;
  min-height:95px
}
.submit-button {
  width:100%;
  justify-content:space-between;
  margin-top:2px;
  border:0
}
.submit-button:disabled {
  opacity:.6;
  cursor:not-allowed
}
.form-status {
  font-size:12px;
  border:1px solid #7d97d0;
  color:#c9d8f7;
  padding:14px;
  margin-top:20px
}
.site-footer {
  padding:50px var(--gutter) 26px;
  max-width:1600px;
  margin:auto
}
.footer-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:30px
}
.footer-top p {
  font-size:11px;
  color:#7f8a9e;
  margin-top:13px
}
.footer-contact {
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:13px;
  color:#8c97aa;
  text-align:right
}
.footer-contact a {
  padding-block:6px;
  color:var(--paper);
  text-decoration:underline;
  text-underline-offset:4px
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#718099;
  font:8px var(--mono);
  margin-top:22px
}
.footer-bottom a {
  min-height:44px;
  display:flex;
  align-items:center;
  gap:17px
}
.tile-top {
  padding:28px var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}
.style-tile {
  padding-top:80px
}
.style-tile h1 {
  font-size:70px;
  margin:30px 0
}
.tile-intro {
  color:var(--muted);
  max-width:590px
}
.tile-panel {
  padding:50px 0;
  border-bottom:1px solid var(--line)
}
.tile-panel>h2 {
  font-size:22px;
  margin-bottom:30px;
  letter-spacing:-.03em
}
.tile-brand {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.tile-wordmark {
  display:flex;
  align-items:center;
  gap:20px;
  font-size:45px;
  font-weight:600;
  letter-spacing:-2px
}
.tile-wordmark svg {
  width:60px
}
.tile-desk {
  width:360px;
  height:230px
}
.swatch-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px
}
.swatch {
  display:flex;
  flex-direction:column;
  font-size:13px;
  gap:7px
}
.swatch i {
  display:block;
  height:100px;
  border:1px solid var(--line);
  margin-bottom:7px
}
.swatch span {
  font:11px var(--mono);
  color:var(--muted)
}
.discipline-swatches {
  display:flex;
  gap:28px;
  margin-top:40px;
  font-size:11px;
  flex-wrap:wrap
}
.discipline-swatches i {
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:9px
}
.tile-type h3 {
  font-size:70px;
  margin:25px 0
}
.tile-type>p:not(.eyebrow) {
  max-width:500px;
  margin:25px 0;
  color:var(--muted)
}
.tile-buttons {
  display:flex;
  gap:30px;
  align-items:center;
  margin-bottom:35px
}
.tile-service {
  max-width:400px
}
.tile-photo {
  max-width:660px
}
.tile-panel>p {
  margin-top:25px;
  color:var(--muted);
  font-size:13px
}
@media (max-width: 1100px) {
  .section-heading {
    gap:45px
  }
  .services-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .process-section,.why-layout,.contact-section {
    gap:45px
  }
  .service-content h3 {
    max-width:none
  }
  .process-illustration {
    transform:scale(.85);
    transform-origin:left center
  }
  .tag {
    font-size:8px
  }
  .contact-copy h2 {
    font-size:46px
  }
}
@media (max-width: 600px) {
  .section-heading {
    display:block;
    margin-bottom:35px
  }
  .section-heading h2 {
    margin-top:20px
  }
  .section-intro {
    margin:30px 0 0;
    max-width:450px
  }
  .section-intro h3 {
    font-size:20px
  }
  .section-intro>p {
    font-size:12px
  }
  .services-grid {
    grid-template-columns:1fr;
    gap:24px
  }
  .service-content {
    padding:22px 22px 12px
  }
  .service-content h3 {
    font-size:25px;
    margin-top:24px
  }
  .service-description {
    font-size:13px
  }
  .service-summary {
    padding:35px;
    min-height:330px
  }
  .service-summary h3 {
    font-size:38px
  }
  .service-summary .eyebrow {
    max-width:none;
    margin-top:23px
  }
  .media-note {
    font-size:7px;
    line-height:1.7
  }
  .process-section,.why-layout,.contact-section {
    grid-template-columns:1fr;
    gap:38px
  }
  .process-heading h2 {
    font-size:46px
  }
  .process-illustration {
    margin-top:30px;
    height:120px;
    transform:scale(.8);
    margin-bottom:-15px
  }
  .process-steps li {
    gap:20px;
    padding:27px 0
  }
  .process-steps h3 {
    font-size:24px
  }
  .process-steps p {
    font-size:12px
  }
  .why-layout {
    margin-top:25px
  }
  .why-layout h2 {
    font-size:39px
  }
  .why-points {
    gap:28px
  }
  .why-points p {
    font-size:12px
  }
  .work-intro {
    margin-top:28px;
    font-size:12px
  }
  .work-grid {
    grid-template-columns:1fr;
    gap:35px
  }
  .work-placeholder {
    aspect-ratio:1.4
  }
  .work-card h3 {
    font-size:20px;
    margin-top:20px
  }
  .work-card>p {
    max-width:none
  }
  .contact-copy h2 {
    font-size:43px
  }
  .contact-copy>p:not(.eyebrow) {
    font-size:12px
  }
  .contact-motif {
    display:none
  }
  .contact-section {
    gap:35px
  }
  .enquiry-form {
    max-width:none
  }
  .form-row {
    grid-template-columns:1fr;
    gap:0
  }
  .field input,.field select,.field textarea {
    font-size:16px
  }
  .field label {
    font-size:12px
  }
  .footer-top {
    flex-direction:column;
    gap:27px
  }
  .footer-contact {
    text-align:left;
    gap:9px
  }
  .footer-top p {
    max-width:260px;
    line-height:1.8
  }
  .footer-bottom {
    align-items:flex-start;
    font-size:7px;
    gap:25px
  }
  .footer-bottom>span {
    padding-top:12px
  }
  .footer-bottom a {
    white-space:nowrap
  }
  .site-footer {
    padding-top:38px
  }
  .tile-top {
    gap:25px
  }
  .tile-top .text-link {
    font-size:10px
  }
  .style-tile h1 {
    font-size:46px
  }
  .tile-brand {
    display:block
  }
  .tile-wordmark {
    font-size:32px;
    gap:13px
  }
  .tile-wordmark svg {
    width:38px
  }
  .tile-desk {
    width:100%;
    height:230px
  }
  .swatch-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .tile-type h3 {
    font-size:48px
  }
  .tile-buttons {
    gap:20px
  }
  .tile-intro {
    font-size:13px
  }
}

.media-frame { aspect-ratio:3 / 2; }
.whatsapp-float {
  position:fixed;
  right:calc(20px + env(safe-area-inset-right));
  bottom:calc(20px + env(safe-area-inset-bottom));
  z-index:40;
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#128c7e;
  color:#fff;
  box-shadow:0 6px 24px #0006,0 0 0 1px #ffffff26;
  transition:background .2s;
}
.whatsapp-float:hover {background:#0d7367}
.whatsapp-float svg {display:block}
.whatsapp-label {
  position:absolute;
  right:calc(100% + 12px);
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface);
  color:var(--paper);
  font-size:.75rem;
  white-space:nowrap;
  pointer-events:none;
  visibility:hidden;
}
.whatsapp-float:focus-visible .whatsapp-label {visibility:visible}
@media(hover:hover) and (pointer:fine) {
  .whatsapp-float:hover .whatsapp-label {visibility:visible}
}
.has-whatsapp .site-footer {padding-bottom:calc(100px + env(safe-area-inset-bottom))}
.media-frame img { object-position:var(--media-x,50%) var(--media-y,50%); }
.media-fallback { position:absolute;inset:0;padding:24px;display:grid;place-content:center;text-align:center;font:12px/1.7 var(--mono);color:var(--muted); }
.media-fallback[hidden] {display:none}
.is-missing::before,.is-missing::after { display:none; }
.service-content,.work-card,.contact-copy,.field {min-width:0}
.field textarea {scroll-margin-block:calc(var(--header-occupied) + 24px) 32px}
@media (max-width: 600px) {
 .process-illustration {width:min(100%,320px);transform:none;}
 .diagram-block {width:19%;height:58px;}
 .db-1{left:25%}.db-2{left:50%}.db-3{left:75%}
 .service-description,.process-steps p,.why-points p,.section-intro>p,.contact-copy>p:not(.eyebrow),.work-intro {font-size:.9375rem;line-height:1.75}
 .media-note,.work-card>p {font-size:.6875rem}
 .tag {font-size:.5625rem}
 .site-footer {padding-bottom:calc(26px + env(safe-area-inset-bottom))}
 .footer-top p {font-size:.8125rem}
}