@font-face {
  font-family:Fustat;
  src:url('../fonts/Fustat-Variable.ttf') format('truetype');
  font-weight:200 800;
  font-display:swap
}
@font-face {
  font-family:'Zen Dots';
  src:url('../fonts/ZenDots-Regular.ttf') format('truetype');
  font-weight:400;
  font-display:swap
}
:root {
  --navy:#0F1954;
  --turquoise:#38FFE1;
  --mint:#F2FFFD;
  --bg:#0F1954;
  --ink:#F2FFFD;
  --muted:#b9c1d8;
  --line:#ffffff26;
  --panel:#18225c;
  --header:#0F1954;
  --accent:#38FFE1;
  --paper:#141e58;
  --paper-ink:#F2FFFD;
  --paper-muted:#b9c1d8;
  --paper-line:#ffffff26;
  --paper-accent:#38FFE1;
  --paper-panel:#1e2a65;
  --paper-icon:#24336e;
  --paper-marker:#38FFE1;
  --paper-hover:#38FFE1;
  --project-art:#1b2b64;
  --project-art-featured:#20356a;
  --project-art-booking:#252b61;
  --project-art-website:#1b2b60;
  --project-badge:#0F1954;
  --field-placeholder:#b9c1d8;
  --form-error:#ff98a5;
  --form-error-bg:#ff98a50d;
  color-scheme:dark
}
[data-theme=light] {
  --bg:#F2FFFD;
  --ink:#0F1954;
  --muted:#54617b;
  --line:#0f195426;
  --panel:#fff;
  --header:#fff;
  --accent:#0F1954;
  --paper:#fff;
  --paper-ink:#0F1954;
  --paper-muted:#58647c;
  --paper-line:#0f195426;
  --paper-accent:#0F1954;
  --paper-panel:#e5f4f0;
  --paper-icon:#0F1954;
  --paper-marker:#098779;
  --paper-hover:#087b70;
  --project-art:#ddeeea;
  --project-art-featured:#dbe8f3;
  --project-art-booking:#e3e6f0;
  --project-art-website:#e2e8ee;
  --project-badge:#fff;
  --field-placeholder:#6b778b;
  --form-error:#a92533;
  --form-error-bg:#a9253306;
  color-scheme:light
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:110px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Fustat,sans-serif;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}
button,a {
  touch-action:manipulation
}
button {
  cursor:pointer
}
a {
  color:inherit;
  text-decoration:none
}
button {
  color:inherit
}
button:disabled {
  cursor:wait;
  opacity:.6
}
img {
  display:block;
  max-width:100%;
  height:auto
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  line-height:1.25
}
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px
}
input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px
}
[hidden] {
  display:none!important
}
.shell {
  width:min(1320px,calc(100% - 96px));
  margin-inline:auto
}
.section {
  padding-block:100px
}
.icon {
  width:22px;
  height:22px;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}
.icon-sprite {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.font-brand {
  font-family:'Zen Dots',sans-serif;
  font-weight:400;
  letter-spacing:.03em;
  font-size:12px
}
.muted {
  color:var(--muted)
}
.tiny {
  font-size:13px
}
.text-accent {
  color:var(--accent)
}
.square {
  display:inline-block;
  width:8px;
  height:8px;
  background:var(--accent);
  flex-shrink:0
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:15px;
  font-weight:500
}
.btn {
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:12px 25px;
  font-weight:650;
  font-size:16px;
  border:1px solid transparent;
  border-radius:3px;
  transition:background .2s,transform .2s,border-color .2s
}
.btn:hover {
  transform:translateY(-2px)
}
.btn-primary {
  background:var(--turquoise);
  color:var(--navy)
}
.btn-primary:hover {
  background:#76ffe9
}
.btn-outline {
  border-color:var(--line);
  background:transparent;
  color:var(--ink)
}
.btn-outline:hover {
  border-color:var(--accent)
}
.btn-small {
  min-height:42px;
  padding:8px 17px;
  font-size:14px;
  gap:14px;
  background:var(--turquoise);
  color:var(--navy)
}
.icon-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  min-height:42px;
  border:1px solid var(--line);
  border-radius:3px;
  background:transparent
}
.icon-button:hover {
  background:var(--panel)
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:5px 0;
  border:0;
  border-bottom:1px solid currentColor;
  font-weight:650;
  background:transparent;
  font-size:16px
}
.skip-link {
  position:fixed;
  top:10px;
  inset-inline-start:20px;
  z-index:100;
  transform:translateY(-160%);
  padding:10px 20px;
  background:var(--turquoise);
  color:var(--navy)
}
.skip-link:focus {
  transform:none
}
.site-header {
  position:sticky;
  top:0;
  z-index:30;
  background:var(--header);
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s
}
.site-header.scrolled {
  box-shadow:0 5px 25px #00000015
}
.header-inner {
  min-height:94px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px
}
.brand-logo {
  width:150px;
  height:auto
}
.logo-link {
  display:inline-flex;
  flex-shrink:0
}
.desktop-nav {
  display:flex;
  gap:24px;
  font-size:15px
}
.desktop-nav a {
  position:relative;
  padding-block:12px
}
.desktop-nav a:hover,.desktop-nav a[aria-current] {
  color:var(--accent)
}
.desktop-nav a[aria-current]::after {
  content:'';
  position:absolute;
  bottom:3px;
  inset-inline-start:0;
  width:7px;
  height:7px;
  background:var(--accent)
}
.header-actions {
  display:flex;
  align-items:center;
  gap:9px
}
.lang-code {
  font-size:12px;
  font-family:'Zen Dots',sans-serif
}
.menu-toggle {
  display:none
}
.mobile-nav {
  padding-block:12px 24px
}
.mobile-nav a {
  display:block;
  padding:11px 5px;
  border-bottom:1px solid var(--line)
}
/* Identity geometry lives here; content grids use Tailwind utilities. */
.hero {
  position:relative;
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  align-items:center;
  column-gap:40px;
  padding-block:68px 0
}
.hero-copy {
  position:relative;
  z-index:2;
  padding-bottom:42px
}
.hero h1 {
  font-size:clamp(54px,5.5vw,84px);
  font-weight:750;
  line-height:1.25;
  margin-block:23px 25px;
  letter-spacing:-.035em
}
.hero-highlight {
  color:var(--accent)
}
.headline-square {
  display:inline-block;
  width:12px;
  height:12px;
  background:var(--accent);
  margin-inline-start:12px;
  vertical-align:baseline
}
.hero-description {
  max-width:425px;
  color:var(--muted);
  font-size:19px;
  line-height:1.9
}
.hero-buttons {
  margin-top:31px
}
.hero-footnote {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:30px;
  font-size:13px;
  color:var(--muted)
}
.mini-steps {
  display:flex;
  align-items:flex-end;
  gap:4px;
  direction:ltr
}
.mini-steps i {
  display:block;
  background:var(--accent);
  width:7px;
  height:5px
}
.mini-steps i:nth-child(2) {
  height:9px
}
.mini-steps i:nth-child(3) {
  height:13px
}
.hero-visual {
  position:relative;
  height:465px;
  direction:ltr;
  isolation:isolate
}
.scene-grid {
  position:absolute;
  inset:16px 0 15px;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:48px 48px;
  opacity:.25;
  mask-image:linear-gradient(to right,transparent,#000 15%,#000 85%,transparent)
}
.scene-curve {
  position:absolute;
  width:76%;
  height:340px;
  border:1px solid var(--line);
  border-top:0;
  border-radius:0 0 260px 260px;
  inset-inline-start:11%;
  top:30px;
  z-index:-1
}
.scene-caption {
  display:flex;
  gap:12px;
  align-items:center;
  position:absolute;
  top:0;
  left:4%;
  right:0;
  color:var(--muted)
}
.scene-caption .square {
  width:6px;
  height:6px
}
.scene-caption-line {
  flex:1;
  height:1px;
  background:var(--line);
  margin-left:8px
}
.scene-route {
  position:absolute;
  left:-8px;
  top:123px;
  width:95px;
  height:223px;
  border-left:1px solid #38ffe180;
  border-bottom:1px solid #38ffe180
}
.scene-route i {
  position:absolute;
  width:10px;
  height:10px;
  background:var(--turquoise);
  left:-5px;
  top:-5px
}
.scene-route i:nth-child(2) {
  top:105px
}
.scene-route i:nth-child(3) {
  top:auto;
  bottom:-5px;
  left:auto;
  right:0
}
.desktop-demo {
  position:absolute;
  top:71px;
  left:6%;
  width:88%;
  height:303px;
  border:6px solid #29336b;
  border-radius:10px;
  background:#fff;
  transform:rotate(-5deg);
  box-shadow:0 24px 50px #040c3033;
  overflow:hidden
}
.browser-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 12px;
  background:#ecf0f7;
  color:#6e7890;
  font-family:Arial,sans-serif;
  font-size:9px;
  gap:8px;
  direction:ltr
}
.browser-dots {
  display:flex;
  gap:3px
}
.browser-dots i {
  width:4px;
  height:4px;
  background:#b4bdce;
  border-radius:50%
}
.browser-square {
  width:6px;
  height:6px;
  background:#8997b2
}
.demo-screen {
  height:calc(100% - 27px);
  direction:rtl
}
.mobile-demo {
  position:absolute;
  right:-2%;
  bottom:7px;
  width:138px;
  height:253px;
  border:5px solid #29336b;
  border-radius:21px;
  background:#fff;
  transform:rotate(6deg);
  box-shadow:0 15px 30px #040c3022;
  overflow:hidden;
  z-index:3
}
.phone-speaker {
  position:absolute;
  top:5px;
  left:calc(50% - 20px);
  width:40px;
  height:7px;
  background:#29336b;
  border-radius:8px;
  z-index:2
}
.phone-screen {
  height:100%;
  padding-top:18px;
  direction:rtl
}
.scene-label {
  position:absolute;
  left:0;
  bottom:21px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:13px 18px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:4px;
  color:var(--ink);
  direction:rtl;
  box-shadow:0 8px 20px #040c3015;
  max-width:78%;
  z-index:2
}
.label-icon {
  width:32px;
  height:32px;
  background:var(--turquoise);
  color:var(--navy);
  display:grid;
  place-items:center
}
.label-icon .icon {
  width:18px;
  height:18px
}
.scene-label b {
  display:block;
  font-size:13px
}
.scene-label span:not(.label-icon) {
  display:block;
  color:var(--muted);
  font-size:11px
}
.demo-disclosure {
  position:absolute;
  bottom:-15px;
  left:0;
  color:var(--muted);
  font-size:11px
}
.hero-bottom {
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-block:26px;
  margin-top:35px;
  color:var(--muted);
  gap:20px
}
.hero-bottom .font-brand {
  font-size:11px
}
.hero-bottom-middle {
  font-size:14px
}
.scroll-cue {
  font-size:13px;
  border-bottom:1px solid var(--line)
}
/* Real HTML interface mockups, explicitly labelled as illustrative. */
.mock-dashboard {
  display:grid;
  grid-template-columns:1fr 84px;
  height:100%;
  background:#f5f7fb;
  color:#192451;
  font-size:10px;
  direction:ltr;
  font-family:Fustat,sans-serif
}
.mock-sidebar {
  background:#0f1954;
  color:#f2fffd;
  padding:14px 9px;
  direction:rtl
}
.mock-logo {
  font-size:13px;
  font-family:'Zen Dots',sans-serif;
  color:#38ffe1;
  margin-bottom:21px
}
.mock-nav {
  padding:7px 6px;
  font-size:9px;
  white-space:nowrap;
  color:#c0c7dc;
  border-radius:3px
}
.mock-nav.selected {
  background:#38ffe1;
  color:#0f1954
}
.mock-main {
  padding:16px;
  direction:rtl;
  min-width:0
}
.mock-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px
}
.mock-heading b {
  font-size:15px
}
.mock-heading span {
  font-size:8px;
  color:#6e7890
}
.mock-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px
}
.mock-stat {
  background:#fff;
  padding:10px;
  border:1px solid #e4e8f0;
  border-radius:4px
}
.mock-stat span {
  display:block;
  color:#697490;
  font-size:8px
}
.mock-stat b {
  display:block;
  font-size:19px;
  line-height:1.5
}
.mock-chart {
  background:#fff;
  border:1px solid #e4e8f0;
  margin-top:10px;
  border-radius:4px;
  padding:11px
}
.mock-chart-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:9px
}
.chart-bars {
  height:74px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:9px;
  margin-top:10px;
  direction:ltr;
  border-bottom:1px solid #dee4ed;
  background:repeating-linear-gradient(to top,transparent 0,transparent 23px,#eaf0f5 24px)
}
.chart-bars i {
  width:17px;
  background:#26d6bd;
  border-radius:2px 2px 0 0
}
.chart-bars i:nth-child(3n) {
  background:#0f1954
}
.chart-months {
  display:flex;
  justify-content:space-between;
  font-size:7px;
  color:#818ba1;
  padding-top:5px;
  direction:ltr
}
.mock-store {
  height:100%;
  background:#faf9f5;
  color:#2b342f;
  overflow:hidden;
  font-family:Fustat,sans-serif
}
.store-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:9px 11px;
  border-bottom:1px solid #e5e4dc
}
.store-name {
  font-weight:800;
  font-size:19px;
  letter-spacing:-.03em
}
.store-head span {
  font-size:8px
}
.store-intro {
  padding:13px 11px 7px
}
.store-intro small {
  font-size:8px;
  color:#758274
}
.store-intro h4 {
  margin:3px 0 0;
  font-size:16px;
  line-height:1.5
}
.store-product {
  margin:5px 10px;
  padding:10px;
  background:#e4e8dd;
  text-align:center
}
.product-object {
  height:76px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:10px
}
.swatch {
  width:27px;
  height:55px;
  background:#647a67;
  border-radius:2px;
  border:1px solid #435e4533;
  box-shadow:3px 4px 0 #b3bfad
}
.swatch:nth-child(2) {
  height:66px;
  width:31px;
  background:#c9b998
}
.swatch:nth-child(3) {
  height:48px;
  background:#8c9b87
}
.store-product-label {
  font-size:8px;
  text-align:start;
  padding-top:5px;
  border-top:1px solid #bbc7b7;
  display:flex;
  justify-content:space-between
}
.store-footer {
  font-size:8px;
  padding:8px 12px;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.store-buy {
  padding:4px 10px;
  background:#2d4537;
  color:#fff;
  border-radius:2px
}
.mock-store-wide {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  padding:34px;
  background:#efeee7;
  min-height:280px;
  align-items:center;
  color:#293d31;
  direction:rtl
}
.mock-store-wide .store-name {
  font-size:26px
}
.mock-store-wide h4 {
  font-size:33px;
  line-height:1.4;
  margin-block:18px
}
.store-wide-art {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px
}
.store-wide-art .store-product {
  margin:0;
  min-height:140px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:#d4dbcb
}
.mock-store-wide .product-object {
  height:95px
}
.mock-store-wide .swatch {
  height:70px;
  width:40px
}
.mock-store-wide .swatch:nth-child(2) {
  height:88px
}
.mock-booking {
  height:100%;
  background:#f7f8fc;
  color:#293354;
  padding:24px;
  font-family:Fustat,sans-serif
}
.booking-head {
  display:flex;
  justify-content:space-between;
  font-size:13px;
  border-bottom:1px solid #dee3ef;
  padding-bottom:12px
}
.booking-head b {
  font-size:22px;
  color:#0f1954
}
.booking-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
  margin-top:18px
}
.booking-layout h4 {
  font-size:20px;
  margin:6px 0 12px
}
.calendar-grid {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:5px;
  direction:ltr;
  font-family:Arial,sans-serif
}
.calendar-grid span {
  padding:7px 2px;
  text-align:center;
  font-size:10px;
  color:#56647f
}
.calendar-grid .picked {
  background:#38ffe1;
  border-radius:3px;
  color:#0f1954
}
.booking-slots {
  display:flex;
  flex-wrap:wrap;
  gap:7px
}
.booking-slots span {
  font-size:11px;
  border:1px solid #d8deeb;
  border-radius:3px;
  padding:6px 10px
}
.booking-slots span:first-child {
  border-color:#0f1954;
  background:#0f1954;
  color:#fff
}
.booking-card {
  margin-top:17px;
  padding:15px;
  background:#fff;
  border:1px solid #dce3ee;
  border-radius:5px;
  font-size:12px
}
.booking-card b {
  display:block
}
.mock-corporate {
  display:grid;
  grid-template-columns:1fr .8fr;
  gap:25px;
  background:#ebeef3;
  color:#132150;
  padding:35px;
  height:100%;
  align-items:center;
  font-family:Fustat,sans-serif
}
.mock-corporate h4 {
  font-size:33px;
  margin:12px 0 16px;
  line-height:1.3
}
.corporate-lines {
  border:1px solid #0f195425;
  padding:24px 15px;
  height:180px;
  display:flex;
  align-items:flex-end;
  gap:9px
}
.corporate-lines i {
  flex:1;
  display:block;
  background:#0f1954;
  height:60%
}
.corporate-lines i:nth-child(2) {
  height:85%;
  background:#24cfb7
}
.corporate-lines i:nth-child(3) {
  height:100%
}
.corporate-lines i:nth-child(4) {
  height:40%;
  background:#7c8cac
}
/* Editorial sections and their identity rhythm. */
.section-label {
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:45px;
  font-size:14px;
  font-weight:600
}
.section-number {
  direction:ltr;
  font-family:'Zen Dots',sans-serif;
  font-size:11px;
  border:1px solid var(--line);
  padding:5px 8px;
  line-height:1.5
}
.label-rule {
  height:1px;
  background:var(--line);
  flex:1
}
.label-english {
  font-size:10px;
  color:var(--muted)
}
.section-title {
  font-size:clamp(32px,3.2vw,48px);
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.4
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:36px
}
.about-layout {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:100px
}
.lead {
  font-size:23px;
  font-weight:500;
  line-height:1.8;
  margin-bottom:18px
}
.about-content>.muted {
  line-height:1.9
}
.values-list {
  display:flex;
  gap:26px;
  margin-top:30px;
  padding-top:22px;
  border-top:1px solid var(--line)
}
.value-item {
  flex:1;
  min-width:0
}
.value-item b {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px
}
.value-item p {
  font-size:13px;
  color:var(--muted);
  margin-top:5px
}
.paper-section {
  background:var(--paper);
  color:var(--paper-ink);
  --muted:var(--paper-muted);
  --line:var(--paper-line);
  --ink:var(--paper-ink);
  --accent:var(--paper-accent);
  --panel:var(--paper-panel)
}
.editorial-note {
  display:flex;
  gap:9px;
  align-items:center;
  font-size:12px;
  max-width:270px
}
.editorial-note .square {
  width:5px;
  height:5px
}
.project-filters {
  margin-bottom:35px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line)
}
.filter-button {
  border:1px solid var(--line);
  border-radius:2px;
  background:transparent;
  font-size:14px;
  min-height:42px;
  padding:8px 19px;
  transition:background .2s
}
.filter-button[aria-pressed=true] {
  background:var(--accent);
  color:var(--bg);
  border-color:var(--accent)
}
.filter-button:hover {
  border-color:var(--accent)
}
.projects-grid {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:42px 32px
}
.project-card {
  min-width:0
}
.project-card.featured {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1.65fr 1fr;
  align-items:center;
  gap:50px
}
.project-art {
  position:relative;
  min-height:310px;
  overflow:hidden;
  background:var(--project-art);
  padding:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:5px
}
.project-card.featured .project-art {
  min-height:385px;
  background:var(--project-art-featured)
}
.project-art .browser-preview {
  width:95%;
  height:283px;
  border:5px solid #fff;
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 15px 40px #0f195419;
  transform:rotate(-3deg);
  direction:ltr
}
.project-art .mock-dashboard {
  font-size:10px
}
.project-art .mock-main {
  padding:20px
}
.project-art .mock-chart {
  margin-top:14px
}
.project-art .chart-bars {
  height:90px
}
.project-art .mock-store-wide {
  min-height:280px
}
.project-art.booking-art {
  background:var(--project-art-booking)
}
.project-art.website-art {
  background:var(--project-art-website)
}
.project-art .mock-booking,.project-art .mock-corporate {
  width:100%;
  min-height:260px;
  border-radius:4px;
  box-shadow:0 10px 30px #0f19540d;
  transform:rotate(2deg)
}
.project-art .mock-store-wide {
  border-radius:4px;
  transform:rotate(-2deg);
  width:100%;
  box-shadow:0 10px 30px #0f19540d
}
.project-badge {
  position:absolute;
  inset-inline-start:14px;
  top:14px;
  padding:3px 9px;
  background:var(--project-badge);
  color:var(--ink);
  font-size:11px;
  border:1px solid var(--line);
  z-index:1
}
.project-info {
  padding-top:20px
}
.project-card.featured .project-info {
  padding-top:0
}
.project-index {
  font-family:'Zen Dots',sans-serif;
  direction:ltr;
  font-size:12px;
  color:var(--muted)
}
.project-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:10px;
  font-size:12px;
  color:var(--paper-muted)
}
.project-info h3 {
  font-size:31px;
  margin-bottom:13px;
  font-weight:700
}
.project-info>p {
  color:var(--paper-muted);
  font-size:16px;
  line-height:1.8
}
.project-role {
  font-size:12px!important;
  margin-top:12px
}
.project-tech {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:15px;
  direction:ltr;
  font-size:10px;
  font-family:'Zen Dots',sans-serif;
  color:var(--muted)
}
.project-tech span {
  padding:4px 7px;
  border:1px solid var(--line);
  border-radius:2px
}
.project-details {
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:0;
  border-top:1px solid var(--line);
  width:100%;
  background:none;
  padding:14px 0;
  font-size:14px;
  font-weight:650
}
.project-details:hover {
  color:var(--paper-hover)
}
.project-details .icon {
  width:18px;
  height:18px
}
.empty-state {
  text-align:center;
  padding:50px 20px;
  border:1px dashed var(--line)
}
.empty-state>.icon {
  margin:auto auto 20px
}
.empty-state p {
  color:var(--muted);
  margin:15px 0 25px
}
.services-layout {
  display:grid;
  grid-template-columns: .75fr 1.25fr;
  gap:100px
}
.services-intro {
  position:sticky;
  top:140px;
  align-self:start
}
.services-list {
  padding-top:4px
}
.service-row {
  display:grid;
  grid-template-columns:34px 1fr 28px;
  gap:21px;
  align-items:start;
  border-top:1px solid var(--line);
  padding:23px 5px;
  margin-inline-start:0
}
.service-row:nth-child(3n+2) {
  margin-inline-start:25px
}
.service-row:nth-child(3n) {
  margin-inline-start:50px
}
.service-number {
  font-family:'Zen Dots',sans-serif;
  font-size:11px;
  color:var(--muted);
  padding-top:5px
}
.service-row h3 {
  font-size:22px;
  margin-bottom:8px
}
.service-row p {
  font-size:14px;
  color:var(--muted)
}
.service-row>.icon {
  color:var(--accent);
  margin-top:4px
}
.cases-section {
  padding-top:0
}
.case-list {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:35px
}
.case-item {
  border-top:1px solid var(--line);
  padding-top:25px
}
.case-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-bottom:20px
}
.case-head h3 {
  font-size:25px
}
.case-head span {
  font-size:12px;
  color:var(--muted)
}
.case-preview {
  height:180px;
  overflow:hidden;
  margin-bottom:22px;
  border-radius:4px;
  position:relative
}
.case-preview .mock-dashboard {
  grid-template-columns:1fr 70px
}
.case-preview .mock-main {
  padding:12px
}
.case-preview .mock-chart {
  margin-top:5px
}
.case-preview .chart-bars {
  height:42px
}
.case-preview .mock-store-wide {
  min-height:180px;
  padding:17px 25px
}
.case-preview .mock-store-wide h4 {
  font-size:23px;
  margin-block:10px
}
.case-preview .store-wide-art .store-product {
  min-height:130px
}
.case-flow {
  display:grid;
  gap:16px
}
.case-flow>div {
  display:grid;
  grid-template-columns:74px 1fr;
  gap:15px
}
.case-flow dt {
  font-size:13px;
  color:var(--accent);
  font-weight:700
}
.case-flow dd {
  margin:0;
  font-size:14px;
  color:var(--muted)
}
.products-layout {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:90px
}
.products-layout>div:first-child {
  max-width:420px
}
.product-note {
  font-size:12px;
  padding-inline-start:14px;
  border-inline-start:2px solid var(--line);
  color:var(--muted)
}
.product-item {
  padding:28px 0;
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:56px 1fr;
  gap:24px
}
.product-item:first-child {
  padding-top:0
}
.product-item:last-child {
  border-bottom:0
}
.product-icon {
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  background:var(--paper-icon);
  color:var(--turquoise);
  border-radius:4px 4px 20px 4px
}
.product-item h3 {
  font-size:27px;
  margin-bottom:8px
}
.product-item p {
  font-size:15px;
  color:var(--muted)
}
.product-features {
  display:flex;
  flex-wrap:wrap;
  gap:7px 16px;
  margin-block:14px;
  font-size:12px;
  color:var(--ink)
}
.product-features span::before {
  content:'▪';
  color:var(--paper-marker);
  margin-inline-end:5px
}
.product-item a {
  font-size:14px
}
.sectors-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:start
}
.sector-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px
}
.sector-tab {
  background:none;
  border:1px solid var(--line);
  padding:9px 16px;
  min-height:42px;
  font-size:14px;
  border-radius:2px
}
.sector-tab[aria-selected=true] {
  background:var(--turquoise);
  color:var(--navy);
  border-color:var(--turquoise)
}
.sector-panel {
  background:var(--panel);
  border:1px solid var(--line);
  padding:35px;
  min-height:265px;
  border-radius:4px 4px 54px 4px
}
.sector-panel .icon {
  color:var(--accent);
  width:35px;
  height:35px;
  margin-bottom:19px
}
.sector-panel h3 {
  font-size:29px;
  margin-bottom:12px
}
.sector-panel p {
  color:var(--muted);
  font-size:16px
}
.sector-solutions {
  margin-top:20px;
  display:flex;
  gap:9px;
  flex-wrap:wrap
}
.sector-solutions span {
  border:1px solid var(--line);
  padding:4px 9px;
  font-size:12px
}
.reasons-heading {
  display:flex;
  gap:20px;
  align-items:center;
  margin-block:55px 25px;
  font-size:16px;
  font-weight:650
}
.reasons-list {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:45px
}
.reason-item {
  display:grid;
  grid-template-columns:16px 1fr;
  gap:13px
}
.reason-item>.square {
  margin-top:8px
}
.reason-item h3 {
  font-size:18px;
  margin-bottom:10px
}
.reason-item p {
  font-size:14px;
  color:var(--muted)
}
.process-section {
  border-block:1px solid var(--line);
  background:var(--panel)
}
.process-steps {
  display:flex;
  align-items:flex-end;
  gap:0;
  padding-top:32px
}
.step-button {
  flex:1;
  min-width:0;
  min-height:135px;
  background:transparent;
  color:var(--ink);
  text-align:start;
  border:1px solid var(--line);
  border-inline-end:0;
  border-radius:0;
  padding:18px 16px;
  margin-bottom:0;
  position:relative
}
.step-button:last-child {
  border-inline-end:1px solid var(--line)
}
.step-button:nth-child(2) {
  margin-bottom:14px
}
.step-button:nth-child(3) {
  margin-bottom:28px
}
.step-button:nth-child(4) {
  margin-bottom:42px
}
.step-button:nth-child(5) {
  margin-bottom:56px
}
.step-button:nth-child(6) {
  margin-bottom:70px
}
.step-button[aria-selected=true] {
  background:var(--turquoise);
  color:var(--navy);
  border-color:var(--turquoise)
}
.step-button span {
  font-family:'Zen Dots',sans-serif;
  font-size:11px;
  display:block;
  margin-bottom:22px
}
.step-button b {
  font-size:18px;
  font-weight:650;
  display:block
}
.step-button::after {
  content:'';
  position:absolute;
  top:18px;
  inset-inline-end:16px;
  width:6px;
  height:6px;
  background:var(--muted)
}
.step-button[aria-selected=true]::after {
  background:var(--navy)
}
.process-detail {
  display:grid;
  grid-template-columns:170px 1fr auto;
  align-items:center;
  gap:35px;
  padding:27px 0 0;
  margin-top:28px;
  border-top:1px solid var(--line);
  min-height:105px
}
.process-detail h3 {
  font-size:24px
}
.process-detail p {
  color:var(--muted);
  font-size:16px
}
.process-deliverable {
  font-size:12px;
  border:1px solid var(--line);
  padding:8px 12px;
  color:var(--accent);
  max-width:240px
}
.team-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:110px
}
.tech-stack {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:25px;
  justify-content:flex-end
}
.tech-stack span {
  font-family:'Zen Dots',sans-serif;
  font-size:10px;
  border:1px solid var(--line);
  padding:5px 10px
}
.team-role {
  padding:17px 0;
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:32px 1fr;
  gap:18px
}
.team-role>.icon {
  color:var(--accent);
  margin-top:2px
}
.team-role h3 {
  font-size:21px;
  margin-bottom:6px
}
.team-role p {
  font-size:14px;
  color:var(--muted)
}
.careers-section {
  border-top:1px solid var(--line)
}
.careers-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:80px;
  align-items:start
}
.careers-copy>p {
  max-width:470px;
  line-height:1.9
}
.careers-areas-title {
  font-size:15px;
  margin-block:28px 12px
}
.career-areas {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.career-areas span {
  border:1px solid var(--line);
  padding:7px 12px;
  font-size:13px
}
.careers-panel {
  min-width:0;
  background:var(--panel);
  border-top:2px solid var(--accent);
  padding:30px
}
.careers-panel>h3 {
  font-size:25px
}
.career-steps {
  list-style:decimal;
  padding-inline-start:22px;
  margin-block:22px;
  display:grid;
  gap:12px;
  font-size:15px;
  color:var(--muted)
}
.career-steps li {
  padding-inline-start:5px
}
.career-steps li::marker {
  color:var(--accent);
  font-weight:700
}
.careers-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 22px
}
.careers-actions .btn {
  gap:16px
}
.careers-actions .text-link {
  font-size:14px
}
.careers-note {
  font-size:12px;
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--line)
}
.pricing-section {
  display:grid;
  grid-template-columns:60px 1.1fr .75fr;
  gap:40px;
  padding:42px;
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:4px
}
.pricing-section .section-title {
  font-size:33px
}
.pricing-section .eyebrow {
  font-size:13px;
  color:var(--accent)
}
.pricing-marker {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  direction:ltr
}
.pricing-marker i {
  width:15px;
  height:10px;
  background:var(--turquoise)
}
.pricing-marker i:nth-child(2) {
  width:30px
}
.pricing-marker i:nth-child(3) {
  width:45px
}
.pricing-support {
  padding-inline-start:35px;
  border-inline-start:1px solid var(--line);
  align-self:center
}
.pricing-support h3 {
  font-size:23px;
  margin-bottom:12px
}
.pricing-support p {
  font-size:14px;
  margin-bottom:14px
}
.pricing-support a {
  font-size:13px
}
.faq-layout {
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:90px
}
.faq-list details {
  border-top:1px solid var(--line)
}
.faq-list details:last-child {
  border-bottom:1px solid var(--line)
}
.faq-list summary {
  list-style:none;
  padding:22px 0;
  display:flex;
  justify-content:space-between;
  gap:22px;
  align-items:center;
  cursor:pointer;
  font-size:19px;
  font-weight:550
}
.faq-list summary::-webkit-details-marker {
  display:none
}
.faq-list summary .icon {
  width:18px;
  height:18px;
  transition:transform .2s
}
.faq-list details[open] summary .icon {
  transform:rotate(45deg);
  color:var(--accent)
}
.faq-list details p {
  color:var(--muted);
  padding:0 0 25px;
  max-width:95%;
  font-size:16px
}
.contact-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px
}
.contact-title {
  font-size:clamp(40px,4.6vw,69px);
  line-height:1.4;
  font-weight:750;
  letter-spacing:-.025em
}
.contact-copy>p {
  max-width:370px;
  line-height:1.9
}
.contact-title .headline-square {
  background:var(--paper-marker)
}
.contact-channels {
  margin-top:28px;
  display:grid;
  gap:13px
}
.contact-channel {
  display:flex;
  align-items:center;
  gap:13px;
  font-size:15px
}
.contact-channel .icon {
  width:19px;
  height:19px
}
.contact-channel:not(a) {
  color:var(--muted)
}
.contact-channel small {
  font-size:12px
}
.contact-signature {
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:50px
}
.contact-signature .mini-steps i {
  background:var(--ink)
}
.contact-signature .font-brand {
  font-size:10px
}
.quote-form {
  border-top:2px solid var(--accent);
  padding-top:23px
}
.form-heading {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  margin-bottom:25px
}
.form-heading h3 {
  font-size:25px
}
.form-heading>span {
  font-size:12px;
  color:var(--muted)
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px 15px
}
.field {
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0
}
.field.full {
  grid-column:1/-1
}
.field label {
  font-size:14px;
  font-weight:550
}
.field input,.field select,.field textarea {
  width:100%;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--line);
  border-radius:2px;
  padding:11px 12px;
  min-height:47px;
  font-size:14px
}
.field textarea {
  resize:vertical;
  min-height:112px
}
.field input::placeholder,.field textarea::placeholder {
  color:var(--field-placeholder);
  font-size:13px;
  opacity:1
}
.field [aria-invalid=true] {
  border-color:var(--form-error);
  background:var(--form-error-bg)
}
.field-error {
  font-size:12px;
  color:var(--form-error);
  line-height:1.5
}
.field-error:empty {
  display:none
}
.field select option {
  background:var(--paper);
  color:var(--ink)
}
.form-note {
  font-size:12px;
  color:var(--muted);
  margin-block:20px
}
.form-submit {
  width:100%;
  justify-content:space-between
}
.form-status {
  margin-top:15px;
  font-size:14px;
  line-height:1.8
}
.form-status[data-state=error] {
  color:var(--form-error)
}
.brief-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:12px
}
.brief-actions .text-link {
  font-size:13px
}
.brief-actions .icon {
  width:17px;
  height:17px
}
.site-footer {
  padding-top:42px
}
.footer-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding-bottom:30px;
  border-bottom:1px solid var(--line)
}
.footer-top p {
  font-size:18px
}
.footer-cta {
  font-size:15px;
  border-bottom:1px solid var(--accent);
  padding-bottom:4px
}
.footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding-block:25px;
  color:var(--muted);
  font-size:12px
}
.footer-bottom nav {
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  align-items:center
}
.footer-contact {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 24px;
  padding-block:14px;
  border-bottom:1px solid var(--line);
  font-size:14px
}
.footer-phones {
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px
}
.footer-phones a {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px
}
.footer-phones .icon {
  width:17px;
  height:17px;
  color:var(--accent)
}
.footer-phones a:hover {
  color:var(--accent)
}
.made-in {
  display:flex;
  align-items:center;
  gap:8px
}
.made-in .square {
  width:5px;
  height:5px
}
.project-dialog {
  background:var(--bg);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:5px;
  width:min(870px,calc(100% - 32px));
  max-height:90dvh;
  padding:42px;
  overscroll-behavior:contain
}
.project-dialog::backdrop {
  background:#050b2cbb
}
.dialog-close {
  position:absolute;
  top:15px;
  inset-inline-end:15px;
  z-index:1
}
.dialog-eyebrow {
  font-size:12px;
  color:var(--accent);
  margin-bottom:16px
}
.project-dialog h2 {
  font-size:36px;
  padding-inline-end:30px;
  margin-bottom:16px
}
.dialog-description {
  color:var(--muted);
  margin-bottom:25px
}
.dialog-preview {
  height:300px;
  overflow:hidden;
  border-radius:4px;
  margin-bottom:27px
}
.dialog-preview .mock-store-wide {
  min-height:300px
}
.dialog-flow {
  display:grid;
  gap:23px
}
.dialog-flow h3 {
  font-size:20px;
  color:var(--accent);
  margin-bottom:7px
}
.dialog-flow p {
  color:var(--muted);
  font-size:16px
}
.dialog-bottom {
  padding-top:25px;
  margin-top:25px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap
}
.dialog-meta {
  font-size:13px;
  color:var(--muted)
}
.dialog-bottom .btn {
  font-size:14px;
  min-height:44px
}
.noscript-note {
  padding:25px;
  text-align:center;
  color:var(--navy);
  background:var(--turquoise)
}
/* LTR mirrors the layout, keeping numbers, brand words, and demo charts isolated. */
[dir=ltr] .hero h1 {
  font-size:clamp(43px,4.7vw,69px);
  letter-spacing:-.035em;
  line-height:1.17
}
[dir=ltr] .hero-description {
  font-size:18px
}
[dir=ltr] .hero-visual {
  transform:scaleX(-1)
}
[dir=ltr] .hero-visual>*:not(.scene-grid):not(.scene-curve):not(.scene-route) {
  transform:scaleX(-1)
}
[dir=ltr] .hero-visual>.desktop-demo {
  transform:scaleX(-1) rotate(5deg)
}
[dir=ltr] .hero-visual>.mobile-demo {
  transform:scaleX(-1) rotate(-6deg)
}
[dir=ltr] .demo-screen,[dir=ltr] .phone-screen,[dir=ltr] .mock-main,[dir=ltr] .mock-sidebar,[dir=ltr] .mock-store-wide,[dir=ltr] .scene-label {
  direction:ltr
}
[dir=ltr] .tech-stack {
  justify-content:flex-start
}
[dir=ltr] .contact-title {
  font-size:clamp(40px,4vw,60px)
}
/* Responsive scenes are recomposed, not just stacked desktop layouts. */
@media(min-width:1600px) {
  .hero {
    padding-top:95px
  }
  .hero-visual {
    height:500px
  }
  .desktop-demo {
    height:330px
  }
  .mobile-demo {
    height:270px;
    width:147px
  }
  .scene-label {
    bottom:22px
  }
  .hero-bottom {
    margin-top:52px
  }
}
@media(max-width:1100px) {
  .shell {
    width:calc(100% - 64px)
  }
  .desktop-nav {
    gap:18px;
    font-size:14px
  }
  .header-cta {
    display:none
  }
  .hero {
    gap:18px;
    padding-top:50px
  }
  .hero h1 {
    font-size:65px
  }
  .hero-visual {
    height:420px
  }
  .desktop-demo {
    height:270px;
    left:2%;
    width:94%;
    top:77px
  }
  .mobile-demo {
    width:120px;
    height:229px;
    right:-2%;
    bottom:6px
  }
  .scene-label {
    padding:10px;
    left:0;
    bottom:18px
  }
  .scene-label b {
    font-size:11px
  }
  .scene-label span:not(.label-icon) {
    font-size:10px
  }
  .mock-main {
    padding:10px
  }
  .mock-stats {
    gap:5px
  }
  .mock-stat {
    padding:7px
  }
  .mock-stat b {
    font-size:17px
  }
  .mock-chart {
    padding:8px
  }
  .mock-dashboard {
    grid-template-columns:1fr 70px
  }
  .about-layout,.services-layout,.products-layout,.sectors-layout,.team-layout,.faq-layout,.contact-layout {
    gap:50px
  }
  .project-card.featured {
    gap:30px;
    grid-template-columns:1.4fr 1fr
  }
  .project-art {
    padding:20px;
    min-height:280px
  }
  .mock-store-wide {
    padding:22px;
    gap:15px
  }
  .mock-store-wide h4 {
    font-size:26px
  }
  .project-art .browser-preview {
    width:100%
  }
  .project-art .mock-booking {
    padding:16px
  }
  .booking-layout {
    gap:13px
  }
  .step-button {
    padding:15px 10px
  }
  .step-button b {
    font-size:16px
  }
  .process-detail {
    grid-template-columns:140px 1fr
  }
  .process-deliverable {
    grid-column:2
  }
  .pricing-section {
    gap:25px;
    padding:30px;
    grid-template-columns:45px 1fr .8fr
  }
  .pricing-support {
    padding-inline-start:25px
  }
  .hero-description {
    font-size:18px
  }
  .hero-buttons .btn {
    padding-inline:17px;
    font-size:15px;
    gap:13px
  }
}
@media(max-width:800px) {
  .shell {
    width:calc(100% - 40px)
  }
  .section {
    padding-block:70px
  }
  .desktop-nav {
    display:none
  }
  .menu-toggle {
    display:inline-flex
  }
  .header-inner {
    min-height:80px
  }
  .brand-logo {
    width:132px
  }
  .hero {
    padding-top:43px;
    grid-template-columns:1fr 1fr;
    gap:10px
  }
  .hero h1 {
    font-size:49px
  }
  .hero-description {
    font-size:16px
  }
  .hero-copy {
    padding-bottom:18px
  }
  .hero-visual {
    height:368px
  }
  .desktop-demo {
    height:228px;
    top:70px;
    border-width:4px
  }
  .mobile-demo {
    width:102px;
    height:194px;
    bottom:12px
  }
  .mock-sidebar {
    padding:10px 5px
  }
  .mock-dashboard {
    grid-template-columns:1fr 58px
  }
  .mock-nav {
    font-size:7px;
    padding:6px 3px
  }
  .mock-logo {
    font-size:10px
  }
  .mock-main {
    padding:8px
  }
  .mock-heading {
    margin-bottom:8px
  }
  .mock-heading b {
    font-size:12px
  }
  .mock-stat b {
    font-size:15px
  }
  .mock-stat span {
    font-size:7px
  }
  .chart-bars {
    height:53px;
    gap:6px
  }
  .mock-chart {
    padding:6px;
    margin-top:6px
  }
  .scene-label {
    max-width:77%;
    bottom:17px;
    gap:7px
  }
  .scene-label b {
    font-size:9px
  }
  .label-icon {
    width:25px;
    height:25px
  }
  .scene-label span:not(.label-icon) {
    font-size:8px
  }
  .hero-bottom {
    margin-top:25px
  }
  .hero-bottom-middle {
    display:none
  }
  .hero-footnote {
    font-size:11px
  }
  .hero-buttons {
    gap:9px!important
  }
  .hero-buttons .btn {
    font-size:13px;
    padding:9px 12px;
    min-height:45px;
    gap:8px
  }
  .hero-buttons .icon {
    width:16px
  }
  .hero .eyebrow {
    font-size:13px;
    gap:8px
  }
  .scene-caption .font-brand {
    font-size:9px
  }
  .about-layout {
    grid-template-columns:.8fr 1.2fr;
    gap:40px
  }
  .lead {
    font-size:19px
  }
  .values-list {
    gap:15px
  }
  .value-item b {
    font-size:13px
  }
  .value-item p {
    font-size:12px
  }
  .project-card.featured {
    grid-template-columns:1fr;
    gap:0
  }
  .project-card.featured .project-art {
    min-height:350px
  }
  .project-card.featured .project-info {
    padding-top:20px
  }
  .projects-grid {
    gap:30px 23px
  }
  .project-art {
    padding:15px;
    min-height:255px
  }
  .project-art .mock-store-wide {
    grid-template-columns:1fr;
    padding:18px;
    gap:10px;
    min-height:240px
  }
  .project-art .mock-store-wide h4 {
    font-size:21px;
    margin-block:5px
  }
  .project-art .store-wide-art .store-product {
    min-height:94px
  }
  .project-art .store-wide-art .product-object {
    height:58px
  }
  .project-art .mock-store-wide .swatch {
    height:45px;
    width:23px
  }
  .project-art .mock-store-wide .swatch:nth-child(2) {
    height:52px
  }
  .project-art .mock-booking {
    padding:12px;
    min-height:240px
  }
  .project-art .booking-layout {
    grid-template-columns:1fr;
    gap:5px;
    margin-top:9px
  }
  .project-art .booking-card {
    display:none
  }
  .project-art .calendar-grid span {
    padding:3px
  }
  .project-info h3 {
    font-size:26px
  }
  .project-info>p {
    font-size:15px
  }
  .project-role {
    font-size:11px!important
  }
  .services-layout {
    gap:40px;
    grid-template-columns:.8fr 1.2fr
  }
  .service-row {
    gap:12px;
    grid-template-columns:26px 1fr 22px
  }
  .service-row h3 {
    font-size:19px
  }
  .service-row p {
    font-size:13px
  }
  .service-row:nth-child(3n) {
    margin-inline-start:24px
  }
  .service-row:nth-child(3n+2) {
    margin-inline-start:12px
  }
  .products-layout {
    gap:40px
  }
  .product-item {
    gap:16px;
    grid-template-columns:45px 1fr
  }
  .product-icon {
    width:45px;
    height:45px
  }
  .product-item h3 {
    font-size:23px
  }
  .sectors-layout {
    gap:35px
  }
  .sector-panel {
    padding:24px
  }
  .reasons-list {
    gap:22px
  }
  .step-button b {
    font-size:14px
  }
  .step-button {
    min-height:125px;
    padding:12px 8px
  }
  .step-button:nth-child(2) {
    margin-bottom:10px
  }
  .step-button:nth-child(3) {
    margin-bottom:20px
  }
  .step-button:nth-child(4) {
    margin-bottom:30px
  }
  .step-button:nth-child(5) {
    margin-bottom:40px
  }
  .step-button:nth-child(6) {
    margin-bottom:50px
  }
  .step-button::after {
    inset-inline-end:9px
  }
  .team-layout {
    gap:40px
  }
  .pricing-section {
    grid-template-columns:35px 1fr;
    gap:22px
  }
  .pricing-support {
    grid-column:2;
    border-inline-start:0;
    padding-inline-start:0;
    border-top:1px solid var(--line);
    padding-top:22px
  }
  .faq-layout {
    gap:40px;
    grid-template-columns:.7fr 1.3fr
  }
  .faq-list summary {
    font-size:17px
  }
  .contact-layout {
    gap:40px
  }
  .contact-title {
    font-size:45px
  }
  .form-heading h3 {
    font-size:21px
  }
  .form-grid {
    grid-template-columns:1fr;
    gap:15px
  }
  .field.full {
    grid-column:auto
  }
  .footer-bottom {
    flex-wrap:wrap;
    gap:18px
  }
  .made-in {
    margin-inline-start:auto
  }
  .footer-top p {
    font-size:16px
  }
  [dir=ltr] .hero h1 {
    font-size:39px
  }
  [dir=ltr] .hero-description {
    font-size:15px
  }
  [dir=ltr] .hero-buttons .btn {
    font-size:12px
  }
  [dir=ltr] .contact-title {
    font-size:39px
  }
}
@media(max-width:600px) {
  html {
    scroll-padding-top:90px
  }
  .shell {
    width:calc(100% - 40px)
  }
  .section {
    padding-block:57px
  }
  .header-inner {
    min-height:76px;
    gap:10px
  }
  .brand-logo {
    width:120px
  }
  .header-actions {
    gap:6px
  }
  .icon-button {
    min-width:36px;
    min-height:38px
  }
  .icon-button .icon {
    width:19px;
    height:19px
  }
  .lang-code {
    font-size:10px
  }
  .hero {
    grid-template-columns:1fr;
    padding-top:36px;
    gap:0
  }
  .hero-copy {
    padding-bottom:0
  }
  .hero .eyebrow {
    font-size:13px
  }
  .hero h1 {
    font-size:clamp(48px,12.5vw,68px);
    margin-block:19px 18px;
    line-height:1.27
  }
  .hero-description {
    max-width:340px;
    font-size:17px;
    line-height:1.85
  }
  .hero-buttons {
    margin-top:24px
  }
  .hero-buttons .btn {
    min-height:49px;
    font-size:14px;
    padding-inline:19px;
    gap:14px
  }
  .hero-footnote {
    margin-top:21px;
    font-size:12px
  }
  .hero-visual {
    height:355px;
    margin-top:38px;
    margin-inline:-5px
  }
  .scene-caption {
    left:4%;
    top:0
  }
  .scene-caption .font-brand {
    font-size:9px
  }
  .desktop-demo {
    width:88%;
    left:3%;
    top:55px;
    height:231px
  }
  .mobile-demo {
    width:110px;
    height:210px;
    right:0;
    bottom:3px;
    border-width:4px
  }
  .scene-curve {
    top:20px;
    height:255px
  }
  .scene-route {
    left:1px;
    top:97px;
    height:164px;
    width:35px
  }
  .scene-route i:nth-child(2) {
    top:70px
  }
  .scene-label {
    left:0;
    bottom:8px;
    padding:9px 12px;
    max-width:68%;
    gap:9px
  }
  .scene-label b {
    font-size:10px
  }
  .scene-label span:not(.label-icon) {
    font-size:9px
  }
  .demo-disclosure {
    bottom:-21px;
    left:0;
    font-size:10px
  }
  .hero-bottom {
    margin-top:38px;
    padding-block:20px;
    gap:10px
  }
  .hero-bottom .font-brand {
    font-size:9px
  }
  .scroll-cue {
    font-size:11px
  }
  .about-layout,.services-layout,.products-layout,.sectors-layout,.team-layout,.faq-layout,.contact-layout {
    grid-template-columns:1fr;
    gap:30px
  }
  .section-title {
    font-size:34px;
    line-height:1.4
  }
  .section-label {
    margin-bottom:27px;
    gap:10px;
    font-size:13px
  }
  .section-number {
    font-size:10px;
    padding:4px 7px
  }
  .label-english {
    display:none
  }
  .lead {
    font-size:20px
  }
  .about-content>.muted {
    font-size:16px
  }
  .values-list {
    gap:13px
  }
  .value-item b {
    font-size:12px;
    gap:5px
  }
  .value-item .square {
    width:5px;
    height:5px
  }
  .value-item p {
    font-size:11px
  }
  .section-heading {
    display:block;
    margin-bottom:27px
  }
  .section-heading>p {
    margin-top:15px
  }
  .editorial-note {
    margin-top:15px;
    max-width:100%;
    font-size:11px
  }
  .project-filters {
    gap:7px!important;
    margin-bottom:25px;
    padding-bottom:18px
  }
  .filter-button {
    font-size:12px;
    padding:7px 11px;
    min-height:39px
  }
  .projects-grid {
    grid-template-columns:1fr;
    gap:28px
  }
  .project-card.featured {
    grid-column:auto;
    display:block
  }
  .project-art,.project-card.featured .project-art {
    min-height:255px;
    padding:20px 15px
  }
  .project-art .browser-preview {
    height:220px;
    transform:rotate(-3deg);
    width:98%
  }
  .project-art .mock-main {
    padding:12px
  }
  .project-art .chart-bars {
    height:61px
  }
  .project-art .mock-chart {
    margin-top:9px
  }
  .project-art .mock-stat b {
    font-size:16px
  }
  .project-art .mock-sidebar {
    width:auto
  }
  .project-art .mock-store-wide {
    grid-template-columns:1fr .95fr;
    gap:12px;
    padding:18px;
    min-height:225px
  }
  .project-art .mock-store-wide h4 {
    font-size:21px;
    line-height:1.5
  }
  .project-art .store-wide-art {
    grid-template-columns:1fr
  }
  .project-art .store-wide-art .store-product:nth-child(2) {
    display:none
  }
  .project-art .store-wide-art .store-product {
    min-height:153px
  }
  .project-art .store-wide-art .product-object {
    height:100px
  }
  .project-art .mock-store-wide .swatch {
    height:55px;
    width:24px
  }
  .project-art .mock-store-wide .swatch:nth-child(2) {
    height:67px
  }
  .project-art .mock-booking {
    min-height:225px;
    padding:17px
  }
  .project-art .booking-layout {
    grid-template-columns:1.1fr 1fr;
    gap:12px
  }
  .project-art .booking-layout h4 {
    font-size:17px
  }
  .project-art .calendar-grid {
    gap:2px
  }
  .project-art .booking-card {
    display:block;
    font-size:10px;
    padding:10px;
    margin-top:12px
  }
  .project-art .booking-slots {
    gap:5px
  }
  .project-art .booking-slots span {
    font-size:9px;
    padding:4px 6px
  }
  .project-info h3 {
    font-size:28px
  }
  .project-details {
    margin-top:13px;
    padding-block:12px
  }
  .project-art .mock-corporate {
    min-height:225px;
    padding:21px
  }
  .project-art .mock-corporate h4 {
    font-size:26px
  }
  .services-intro {
    position:static;
    max-width:100%
  }
  .services-intro p {
    margin-top:14px!important
  }
  .services-intro a {
    margin-top:18px!important
  }
  .service-row {
    padding-block:20px;
    grid-template-columns:28px 1fr 23px;
    gap:15px
  }
  .service-row:nth-child(3n+2) {
    margin-inline-start:12px
  }
  .service-row:nth-child(3n) {
    margin-inline-start:25px
  }
  .service-row h3 {
    font-size:21px
  }
  .service-row p {
    font-size:14px
  }
  .cases-section {
    padding-top:0
  }
  .case-list {
    grid-template-columns:1fr;
    gap:35px
  }
  .case-flow>div {
    grid-template-columns:70px 1fr;
    gap:12px
  }
  .case-flow dd {
    font-size:14px
  }
  .case-preview {
    height:190px
  }
  .case-preview .mock-store-wide {
    min-height:190px
  }
  .case-preview .mock-store-wide h4 {
    font-size:22px
  }
  .products-layout>div:first-child {
    max-width:100%
  }
  .product-item {
    grid-template-columns:48px 1fr;
    gap:17px
  }
  .product-item h3 {
    font-size:25px
  }
  .product-icon {
    width:48px;
    height:48px
  }
  .product-note {
    margin-top:17px!important
  }
  .product-features {
    font-size:12px
  }
  .sector-tabs {
    margin-top:20px;
    gap:8px
  }
  .sector-tab {
    font-size:13px;
    padding-inline:14px
  }
  .sector-panel {
    min-height:240px;
    padding:27px
  }
  .sector-panel h3 {
    font-size:27px
  }
  .reasons-heading {
    margin-block:35px 25px;
    font-size:15px
  }
  .reasons-list {
    grid-template-columns:1fr;
    gap:24px
  }
  .reason-item {
    gap:11px
  }
  .reason-item h3 {
    font-size:19px;
    margin-bottom:6px
  }
  .reason-item p {
    font-size:15px
  }
  .process-steps {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:stretch;
    gap:7px;
    padding-top:0
  }
  .step-button {
    min-height:107px;
    padding:14px 15px;
    border:1px solid var(--line)
  }
  .step-button:nth-child(n) {
    margin:0
  }
  .step-button:nth-child(odd) {
    margin-inline-start:0
  }
  .step-button:nth-child(even) {
    transform:translateY(10px)
  }
  .step-button:nth-child(3),.step-button:nth-child(4) {
    margin-inline-start:10px
  }
  .step-button:nth-child(5),.step-button:nth-child(6) {
    margin-inline-start:20px
  }
  .step-button b {
    font-size:16px
  }
  .step-button span {
    margin-bottom:14px
  }
  .step-button::after {
    top:16px;
    inset-inline-end:14px
  }
  .process-detail {
    grid-template-columns:1fr;
    gap:13px;
    margin-top:34px;
    padding-top:23px
  }
  .process-detail h3 {
    font-size:23px
  }
  .process-detail p {
    font-size:15px
  }
  .process-deliverable {
    grid-column:auto;
    justify-self:start;
    max-width:none
  }
  .team-layout {
    gap:24px
  }
  .tech-stack {
    justify-content:flex-end;
    gap:7px
  }
  .team-role {
    padding-block:17px
  }
  .pricing-section {
    grid-template-columns:1fr;
    padding:26px;
    gap:21px
  }
  .pricing-marker {
    display:none
  }
  .pricing-section .section-title {
    font-size:30px
  }
  .pricing-support {
    grid-column:auto;
    padding-top:21px
  }
  .faq-layout {
    gap:25px
  }
  .faq-list summary {
    font-size:17px;
    padding-block:20px
  }
  .faq-list details p {
    font-size:15px;
    max-width:100%
  }
  .contact-title {
    font-size:51px;
    line-height:1.4
  }
  .contact-layout {
    gap:38px
  }
  .contact-copy>p {
    margin-top:16px!important
  }
  .contact-signature {
    margin-top:28px
  }
  .form-heading h3 {
    font-size:23px
  }
  .form-grid {
    grid-template-columns:1fr 1fr;
    gap:15px 11px
  }
  .field.full {
    grid-column:1/-1
  }
  .field label {
    font-size:12px
  }
  .field input,.field select,.field textarea {
    font-size:14px;
    padding-inline:10px
  }
  .field input::placeholder {
    font-size:11px
  }
  .field:nth-child(1),.field:nth-child(2) {
    grid-column:1/-1
  }
  .form-note {
    line-height:1.9
  }
  .footer-top {
    flex-wrap:wrap;
    gap:15px;
    padding-bottom:25px
  }
  .footer-top .brand-logo {
    width:115px
  }
  .footer-top p {
    font-size:14px
  }
  .footer-cta {
    font-size:13px;
    width:max-content
  }
  .footer-bottom {
    display:grid;
    gap:17px;
    font-size:11px;
    padding-block:23px
  }
  .footer-bottom nav {
    gap:24px;
    font-size:12px
  }
  .made-in {
    margin-inline-start:0
  }
  .project-dialog {
    padding:25px;
    max-height:92dvh
  }
  .project-dialog h2 {
    font-size:30px;
    margin-top:10px
  }
  .dialog-close {
    top:10px;
    inset-inline-end:10px
  }
  .dialog-preview {
    height:235px
  }
  .dialog-preview .mock-main {
    padding:12px
  }
  .dialog-preview .mock-store-wide {
    padding:18px;
    gap:12px;
    min-height:235px
  }
  .dialog-preview .mock-store-wide h4 {
    font-size:25px
  }
  .dialog-preview .mock-booking {
    padding:14px
  }
  .dialog-preview .booking-layout {
    gap:12px
  }
  .dialog-preview .booking-layout h4 {
    font-size:18px
  }
  .dialog-preview .calendar-grid span {
    padding:4px 1px
  }
  .dialog-preview .booking-slots span {
    font-size:10px;
    padding:4px 6px
  }
  .dialog-preview .booking-card {
    padding:10px;
    font-size:11px
  }
  [dir=ltr] .hero h1 {
    font-size:clamp(45px,11vw,59px);
    line-height:1.16
  }
  [dir=ltr] .hero-description {
    font-size:17px
  }
  [dir=ltr] .hero-buttons .btn {
    font-size:13px
  }
  [dir=ltr] .contact-title {
    font-size:44px
  }
  [dir=ltr] .hero-visual {
    transform:none
  }
  [dir=ltr] .hero-visual>*:not(.scene-grid):not(.scene-curve):not(.scene-route) {
    transform:none
  }
  [dir=ltr] .hero-visual>.desktop-demo {
    transform:rotate(-5deg)
  }
  [dir=ltr] .hero-visual>.mobile-demo {
    transform:rotate(6deg)
  }
}
.font-brand[lang=ar] {
  font-family:Fustat,sans-serif;
  font-weight:600;
  letter-spacing:0
}
.brief-actions {
  flex-wrap:wrap
}
.brief-preview {
  width:100%;
  border:1px solid var(--line);
  padding:10px 14px;
  font-size:13px
}
.brief-preview summary {
  cursor:pointer;
  font-weight:650
}
.brief-preview pre {
  font-family:Fustat,sans-serif;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:14px;
  line-height:1.8;
  max-height:260px;
  overflow:auto;
  padding:14px 0 0;
  margin:0;
  color:var(--ink)
}
.about-layout>*,.services-layout>*,.products-layout>*,.sectors-layout>*,.team-layout>*,.faq-layout>*,.contact-layout>*,.case-item,.store-wide-art,.case-flow dd {
  min-width:0
}
.case-list {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.mock-store-wide {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.store-wide-art {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.project-art>[role=img] {
  width:100%;
  min-width:0
}
.browser-preview>.mock-dashboard {
  height:calc(100% - 27px)
}
.project-art .mock-main {
  padding:16px
}
.project-art .mock-heading {
  margin-bottom:10px
}
.project-art .mock-stat {
  padding:8px
}
.project-art .mock-chart {
  padding:8px
}
.project-art .chart-bars {
  height:65px
}
.case-preview .mock-stats {
  display:none
}
.case-preview .mock-heading {
  margin-bottom:8px
}
.case-preview .chart-bars {
  height:48px
}
.dialog-preview .mock-main {
  padding:12px
}
.dialog-preview .chart-bars {
  height:64px
}
.project-card.wide {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:50px;
  align-items:center
}
.project-card.wide .project-info {
  padding-top:0
}
.case-preview>.browser-preview {
  height:100%;
  overflow:hidden
}
.case-preview .mock-sidebar {
  font-size:9px
}
.dialog-preview>.browser-preview {
  height:100%;
  overflow:hidden
}
.verified-testimonial {
  border-block-start:1px solid var(--line);
  padding-block:24px;
  margin:25px 0
}
.verified-testimonial blockquote {
  margin:15px 0;
  font-size:21px
}
.verified-testimonial figcaption {
  color:var(--muted);
  font-size:14px
}
@media(max-width:800px) {
  .project-card.wide {
    display:block
  }
  .project-card.wide .project-info {
    padding-top:20px
  }
}
@media(max-width:600px) {
  .case-list {
    grid-template-columns:minmax(0,1fr)
  }
  .case-preview .mock-store-wide {
    grid-template-columns:1fr .9fr;
    gap:12px;
    padding:18px
  }
  .case-preview .store-wide-art {
    grid-template-columns:minmax(0,1fr)
  }
  .case-preview .store-product:nth-child(2) {
    display:none
  }
  .case-preview .mock-store-wide h4 {
    font-size:21px
  }
  .case-preview .product-object {
    gap:5px;
    padding:8px
  }
  .case-preview .swatch {
    width:22px;
    height:55px
  }
  .case-preview .swatch:nth-child(2) {
    width:25px;
    height:65px
  }
}
@media(max-width:600px) {
  .project-art .mock-main {
    padding:9px
  }
  .project-art .mock-heading {
    margin-bottom:8px
  }
  .project-art .mock-stat {
    padding:7px
  }
  .project-art .chart-bars {
    height:40px;
    margin-top:6px
  }
  .project-art .mock-chart {
    padding:6px;
    margin-top:7px
  }
}
/* On phones the six-stage journey becomes a single, readable vertical path. */
@media(max-width:600px) {
  .process-steps { grid-template-columns:minmax(0,1fr); gap:8px; }
  .step-button { display:grid; grid-template-columns:35px 1fr; align-items:center; min-height:74px; padding:14px 17px; }
  .step-button span { margin-bottom:0; }
  .step-button b { font-size:18px; }
  .step-button:nth-child(n) { transform:none; margin:0; }
  .step-button:nth-child(2) { margin-inline-start:8px; }
  .step-button:nth-child(3) { margin-inline-start:16px; }
  .step-button:nth-child(4) { margin-inline-start:24px; }
  .step-button:nth-child(5) { margin-inline-start:32px; }
  .step-button:nth-child(6) { margin-inline-start:40px; }
  .step-button::after { top:calc(50% - 3px); }
}
@media(max-width:800px) {
  .careers-layout {
    grid-template-columns:minmax(0,1fr);
    gap:32px
  }
}
@media(max-width:600px) {
  .careers-panel {
    padding:22px 18px
  }
  .careers-actions .btn {
    width:100%;
    justify-content:space-between
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important
  }
  .btn:hover {
    transform:none
  }
}