@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight";
  src: url("assets/fonts/inter-tight.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ivory: #f4f4e8;
  --carbon: #20201f;
  --paprika: #e55b24;
  --muted: #575750;
  --line: rgba(32, 32, 31, 0.11);
  --accent-line: rgba(229, 91, 36, 0.3);
  --surface: rgba(255, 255, 255, 0.48);
  --accent-surface: rgba(229, 91, 36, 0.085);
  --display-font: "Inter Tight", "Arial", sans-serif;
  --body-font: "Inter", "Arial", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--ivory); color: var(--carbon); font-family: var(--body-font); font-size: 13px; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3, h4 { margin: 0; }
button, input, a { touch-action: manipulation; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--carbon); outline-offset: 5px; }
::selection { background: var(--paprika); color: var(--ivory); }
.container { width: min(1280px, calc(100% - 64px)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 10; padding: 12px 18px; background: var(--carbon); color: var(--ivory); border-radius: 8px; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

/* The outline icons are unmodified Tabler assets; masks inherit the brand color. */
.icon { display: inline-block; flex-shrink: 0; width: 24px; height: 24px; background-color: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.icon-arrow-up-right { --icon: url("assets/icons/arrow-up-right.svg"); }
.icon-arrow-right { --icon: url("assets/icons/arrow-right.svg"); }
.icon-camera { --icon: url("assets/icons/camera.svg"); }
.icon-map { --icon: url("assets/icons/map-2.svg"); }
.icon-file { --icon: url("assets/icons/file-text.svg"); }
.icon-data { --icon: url("assets/icons/database-import.svg"); }

/* Equal outer columns keep the larger wordmark centered in the page. */
.site-header { flex-shrink: 0; height: clamp(88px, 11svh, 112px); }
.header-inner { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; }
.brand { grid-column: 2; justify-self: center; }
.brand img { width: clamp(250px, 23vw, 360px); }
.header-cta { grid-column: 3; justify-self: end; min-width: 160px; }

.button { min-height: 40px; min-width: 154px; padding: 10px 17px 10px 22px; border: 1px solid transparent; border-radius: 10px; display: inline-flex; align-items: center; justify-content: space-between; gap: 23px; font-family: var(--display-font); font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.button .icon { width: 19px; height: 19px; }
.button-primary { background: var(--paprika); color: var(--carbon); border-color: var(--paprika); }
.button-primary:hover { background: #ec7141; border-color: #ec7141; box-shadow: 0 3px 12px rgba(229, 91, 36, 0.13); transform: translateY(-1px); }
.button:active { transform: translateY(1px); box-shadow: none; }
.button[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.booking-notice { position: fixed; z-index: 9998; left: 50%; bottom: 24px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 14px 18px; border: 1px solid var(--accent-line); border-radius: 12px; background: var(--ivory); box-shadow: 0 4px 20px rgba(32, 32, 31, 0.12); font-size: 12px; line-height: 1.6; }
.booking-notice a { display: block; margin-top: 6px; text-decoration: underline; text-underline-offset: 3px; }

/* Keep the copy and foreground devices in separate columns. */
.hero { --hero-content-width: 1280px; --hero-copy-width: clamp(440px, 34.4vw, 660px); position: relative; width: 100%; border: 1px solid var(--accent-line); border-radius: 96px 110px 110px 0; }
.hero-inner { min-height: 508px; display: grid; grid-template-columns: minmax(0, var(--hero-copy-width)) minmax(0, 1fr); gap: 25px; padding-top: 51px; padding-bottom: 43px; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { display: inline-block; padding: 6px 12px; border: 1px solid rgba(229, 91, 36, 0.65); border-radius: 30px; color: #a43d14; font-size: 10px; font-weight: 600; line-height: 13px; letter-spacing: 0.45px; text-transform: uppercase; }
h1 { margin-top: 15px; font-family: var(--display-font); font-size: 54px; font-weight: 600; line-height: 1.01; letter-spacing: -1.2px; }
h1 span { color: var(--paprika); }
.hero-description { max-width: 58ch; margin-top: 18px; color: var(--muted); font-size: 15px; line-height: 22px; letter-spacing: -0.2px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 24px; }
/* Scale both axes together so narrower laptop gutters keep the curves rounded. */
.hero-contours { position: absolute; left: -1px; bottom: 31px; width: min(130px, calc((100% - 1280px) / 3 - 16px)); height: auto; aspect-ratio: 4 / 7; overflow: visible; fill: none; stroke: var(--accent-line); stroke-width: 1; stroke-linecap: round; pointer-events: none; }
.hero-contours path { vector-effect: non-scaling-stroke; }
.hero-signature { position: absolute; bottom: -22px; left: -1px; width: max(112px, calc((100% - 1300px) / 2)); height: 54px; padding: 18px 24px 14px; background: var(--ivory); border: 1px solid var(--accent-line); border-top-right-radius: 70px; }
.hero-signature img { width: 41px; }

/* The original transparent bezels sit over their lossless app screenshots. */
.hero-visual { position: absolute; inset: 0 12px 0 auto; width: calc(100% - max(32px, (100% - var(--hero-content-width)) / 2) - var(--hero-copy-width) - 36px); container-type: size; isolation: isolate; pointer-events: none; }
.hero-building { position: absolute; z-index: 0; right: 0; bottom: 4%; width: 68%; height: calc(100% + 64px); object-fit: contain; object-position: right bottom; }
.hero-device { position: absolute; filter: drop-shadow(8px 6px 6px rgba(32, 32, 31, 0.17)) drop-shadow(2px 2px 1px rgba(32, 32, 31, 0.1)); }
.hero-device-ipad { z-index: 1; right: 40%; bottom: 6%; width: min(60%, calc(62cqh * 2640 / 1880)); aspect-ratio: 2640 / 1880; }
.hero-device-iphone { z-index: 2; left: 61.5%; bottom: 1%; width: min(24%, calc(72cqh * 1350 / 2760)); aspect-ratio: 1350 / 2760; }
.hero-device-screen { position: absolute; }
.hero-device-bezel { position: relative; width: 100%; height: 100%; }
.hero-device-ipad .hero-device-screen { left: 4.16666667%; top: 5.63829787%; width: 91.66666667%; height: 88.72340426%; border-radius: 2.5% / 3.63%; }
.hero-device-iphone .hero-device-screen { left: 5.333333%; top: 2.5%; width: 89.333333%; height: 95%; border-radius: 14% / 6.44%; }

.content-sections { padding-top: 18px; }
.features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.feature-card { display: flex; align-items: center; gap: 12px; min-height: 100px; padding: 17px 11px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.feature-icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 51px; height: 55px; border-radius: 16px; background: var(--accent-surface); color: var(--paprika); }
.feature-icon .icon { width: 36px; height: 36px; }
.feature-card h2 { margin-bottom: 6px; font-family: var(--display-font); font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: -0.25px; }
.feature-card p { font-size: 11.3px; line-height: 16px; letter-spacing: -0.1px; }

.workflow { margin-top: 20px; padding: 24px 30px; border: 1px solid var(--line); border-radius: 23px; background: rgba(255, 255, 255, 0.3); }
.workflow-content > h2 { margin-left: 0; font-family: var(--display-font); font-size: 21px; font-weight: 600; line-height: 29px; letter-spacing: -0.4px; text-align: center; }
.workflow-steps { --step-size: 32px; --step-gap: 24px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--step-gap); list-style: none; padding: 0; margin: 26px 0 0; }
.workflow-step { position: relative; display: grid; grid-template-columns: var(--step-size) minmax(0, 1fr); grid-template-rows: var(--step-size) auto; align-content: start; gap: 6px 8px; }
.workflow-step > div { display: contents; }
.step-number { grid-column: 1; grid-row: 1; width: var(--step-size); height: var(--step-size); display: flex; align-items: center; justify-content: center; border: 1px solid rgba(229, 91, 36, 0.17); border-radius: 50%; background: var(--accent-surface); color: #a43d14; font-family: var(--display-font); font-size: 16px; font-weight: 500; }
.workflow-step h3 { grid-column: 2; grid-row: 1; align-self: center; font-family: var(--display-font); font-size: 13px; font-weight: 600; line-height: 16px; }
.workflow-step p { grid-column: 2; grid-row: 2; font-size: 11px; line-height: 17px; text-wrap: pretty; }
.step-arrow { position: absolute; right: calc((var(--step-gap) + 18px) / -2); top: calc((var(--step-size) - 18px) / 2); width: 18px; height: 18px; color: #91918a; }
.site-footer { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 10px; }
.site-footer a { display: inline-flex; align-items: center; gap: 5px; }
.site-footer a:hover { color: var(--carbon); }
.site-footer .icon { width: 14px; height: 14px; }


@media (min-width: 1600px) {
  .hero { max-width: 1800px; margin-inline: auto; }
}

@media (min-width: 1800px) {
  .hero { --hero-content-width: 1440px; }
  .hero-inner { width: min(1440px, calc(100% - 64px)); }
  .hero-signature { width: max(112px, calc((100% - 1460px) / 2)); }
}

@media (max-width: 1250px) {
  .features { gap: 14px; }
  .feature-card { align-items: flex-start; gap: 10px; padding: 17px 12px; }
  .feature-icon { width: 42px; height: 48px; border-radius: 13px; }
  .feature-icon .icon { width: 30px; height: 30px; }
  .feature-card h2 { font-size: 14px; }
  .workflow-content > h2 { margin-left: 0; }
  .workflow-steps { --step-size: 32px; --step-gap: 15px; }
  .workflow-step { column-gap: 7px; }
  .step-arrow { display: none; }
}

@media (max-width: 960px) {
  .hero { border-top-left-radius: 65px; border-top-right-radius: 75px; border-bottom-right-radius: 75px; }
  .hero-inner { grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: 0; }
  .hero-signature { display: none; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-card { align-items: center; padding: 17px 16px; }
  .feature-icon { width: 51px; height: 55px; }
  .feature-icon .icon { width: 36px; height: 36px; }
  .feature-card h2 { font-size: 15px; }
  .workflow-steps { --step-size: 28px; --step-gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 23px; }
  .workflow-content > h2 { font-size: 20px; }
}

@media (max-width: 760px) {
  .container { width: calc(100% - 40px); }
  .hero { border-radius: 42px 42px 60px 0; }
  .hero-inner { min-height: 0; grid-template-columns: minmax(0, 1fr); padding-top: 37px; padding-bottom: 39px; }
  .eyebrow { font-size: 9px; letter-spacing: 0.45px; padding: 6px 10px; }
  h1 { margin-top: 20px; font-size: clamp(34px, 8.8vw, 52px); line-height: 1.075; letter-spacing: -0.9px; }
  .hero-description { max-width: 420px; margin-top: 19px; font-size: 12px; line-height: 20px; }
  .desktop-break { display: none; }
  .hero-actions { gap: 12px; margin-top: 24px; }
  .hero-actions .button { flex-basis: auto; min-width: 184px; min-height: 43px; padding-inline: 15px; gap: 16px; }
  .content-sections { padding-top: 17px; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .feature-card { min-height: 157px; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 16px; }
  .feature-icon { width: 41px; height: 43px; border-radius: 12px; }
  .feature-icon .icon { width: 29px; height: 29px; }
  .feature-card h2 { font-size: 14px; }
  .feature-card p { font-size: 11px; line-height: 17px; }
  .workflow { margin-top: 16px; padding: 23px 20px 20px; border-radius: 18px; }
  .workflow-content > h2 { max-width: 290px; margin-inline: auto; font-size: 22px; line-height: 28px; }
  .workflow-steps { --step-gap: 22px; grid-template-columns: minmax(0, 1fr); }
  .workflow-step h3 { font-size: 13px; }
  .workflow-step p { font-size: 11px; line-height: 17px; }
  .site-footer { min-height: 86px; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 20px; font-size: 9px; }
  .site-footer > p:nth-child(2) { order: 3; flex-basis: 100%; }
}

@media (max-width: 370px) {
  .container { width: calc(100% - 32px); }
  h1 { font-size: 30px; }
  .feature-card { padding: 13px; }
}

/* Let desktop whitespace adapt to the available height. Keep natural scrolling
   on short windows and at increased browser zoom instead of clipping content. */
@media (min-width: 1024px) {
  body { min-height: 100svh; display: flex; flex-direction: column; }
  main { flex: 1; display: flex; flex-direction: column; }
  .hero { flex: 1; display: grid; }
  .hero-inner { min-height: 0; align-items: center; padding-block: clamp(16px, 2.4svh, 32px); }
  h1 { margin-top: 14px; font-size: clamp(40px, min(3.34vw, 6.4svh), 64px); line-height: 1.02; }
  .hero-description { margin-top: 16px; font-size: clamp(13px, 1.8svh, 16px); line-height: 1.5; }
  .hero-actions { margin-top: 20px; gap: 18px; }
  .hero-actions .button { min-width: 170px; min-height: 44px; font-size: 13px; }
  .content-sections { flex-shrink: 0; padding-top: clamp(10px, 1.4svh, 16px); }
  .feature-card { min-height: 80px; padding-block: 11px; }
  .feature-icon { height: 48px; }
  .workflow { margin-top: clamp(10px, 1.4svh, 16px); padding-block: clamp(18px, 2.5svh, 28px); }
  .workflow-content { align-self: center; }
  .workflow-content > h2 { margin-left: 0; }
  .workflow-steps { margin-top: 18px; }
  .site-footer { flex-shrink: 0; min-height: clamp(28px, 4svh, 44px); }
}

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

/* Keep the enlarged hero readable on compact 16:9 displays. */
@media (min-width: 1024px) and (max-height: 760px) {
  .site-header { height: 64px; }
  .hero-inner { padding-block: 14px; }
  .hero-description { margin-top: 12px; }
  .hero-actions { margin-top: 16px; }
  .features { gap: 14px; }
  .feature-card { gap: 10px; }
  .feature-icon { width: 42px; height: 42px; }
  .feature-icon .icon { width: 30px; height: 30px; }
  .workflow { padding-block: 10px; }
  .workflow-steps { margin-top: 14px; }
  .workflow-step p { max-width: none; }
  .site-footer { min-height: 26px; }
}

@media (max-width: 1503px) {
  .hero-signature, .hero-contours { display: none; }
}


@media (max-width: 760px) {
  .site-header { height: auto; padding-block: 24px 20px; }
  .header-inner { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; }
  .brand, .header-cta { grid-column: 1; justify-self: center; }
  .brand img { width: min(260px, 72vw); }
  .header-cta { min-width: 154px; min-height: 40px; }
}

/* A stacked scene gives tablet and phone visitors a complete view of all assets. */
@media (min-width: 1101px) and (max-width: 1799px) {
  .hero-building { height: 100%; }
}

@media (max-width: 1100px) {
  .hero-inner { width: min(840px, calc(100% - 64px)); display: flex; flex-direction: column; align-items: stretch; gap: 24px; min-height: 0; padding-block: 42px 22px; }
  .hero-copy { max-width: 660px; }
  .hero-visual { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 1.25; }
  .hero-building { height: 100%; width: 68%; }
  h1 { font-size: clamp(44px, 5.5vw, 54px); }
}

@media (max-width: 760px) {
  .hero-inner { width: calc(100% - 40px); gap: 26px; padding-block: 32px 32px; }
  .hero-visual { aspect-ratio: 1.08; }
  .hero-building { width: 72%; }
  .hero-device { filter: drop-shadow(5px 4px 4px rgba(32, 32, 31, 0.17)); }
  .hero-device-ipad { right: auto; left: 0; width: 64%; bottom: 7%; }
  .hero-device-iphone { left: 64%; width: 26%; }
  h1 { font-size: clamp(28px, 8.5vw, 52px); }
}

@media (max-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .hero-visual.has-parallax .hero-building { transform: translate3d(0, var(--building-shift, 0px), 0); }
  .hero-visual.has-parallax .hero-device-ipad { transform: translate3d(0, var(--ipad-shift, 0px), 0); }
  .hero-visual.has-parallax .hero-device-iphone { transform: translate3d(0, var(--iphone-shift, 0px), 0); }
}