:root {
  color-scheme: dark;
  --bg: #080f18;
  --panel: #101b27;
  --line: #28333e;
  --text: #f0f1f2;
  --muted: #a9b4c0;
  --gold: #dfbb77;
  --radius: 18px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 115px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
a,
button {
  touch-action: manipulation;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
p {
  margin: 0 0 1.25rem;
  color: var(--muted);
}
h1,
h2,
h3,
h4 {
  margin: 0 0 1.15rem;
  line-height: 1.12;
  font-weight: 560;
  letter-spacing: -0.045em;
}
h1 {
  font-size: clamp(2.8rem, 5.2vw, 5.5rem);
}
h2 {
  font-size: clamp(2.2rem, 3.5vw, 3.7rem);
}
h3 {
  font-size: 1.45rem;
  letter-spacing: -0.025em;
}
h4 {
  font-size: 1.6rem;
}
h1 span,
h2 span,
h1 em,
h2 em {
  color: var(--gold);
  font-style: normal;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 5px;
}
.wrap {
  width: min(1320px, calc(100% - 96px));
  margin: auto;
}
.section {
  padding: 105px 0;
}
.compact {
  padding-top: 10px;
}
.eyebrow {
  font-size: 0.69rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 650;
  margin-bottom: 24px;
}
.lead {
  font-size: 1.1rem;
  max-width: 620px;
  line-height: 1.85;
}
.caption,
.form-help {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 22px;
  line-height: 1.7;
}
.caption a,
.form-help a {
  text-decoration: underline;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 32px;
}
.button {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  border: 1px solid var(--gold);
  border-radius: 7px;
  background: var(--gold);
  color: #10151c;
  padding: 15px 21px;
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.5;
  transition:
    transform 0.2s,
    background 0.2s;
}
.button:hover {
  transform: translateY(-3px);
  background: #f1d397;
}
.button.secondary {
  background: transparent;
  color: var(--text);
  border-color: #46515b;
}
.button.secondary:hover {
  background: #1b2732;
}
.text-link {
  display: inline-block;
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 0;
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 20px;
  background: var(--gold);
  color: #000;
  padding: 14px;
  z-index: 100;
}
.skip-link:focus {
  top: 10px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
[hidden] {
  display: none !important;
}
.promo-bar {
  display: flex;
  justify-content: center;
  gap: 30px;
  align-items: center;
  background: #dec18b;
  color: #171b21;
  padding: 10px 20px;
  font-size: 0.73rem;
  letter-spacing: 0.02em;
}
.promo-bar > span:first-child {
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  font-weight: 700;
}
.promo-bar > span:last-child {
  font-weight: 650;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #080f18f5;
  border-bottom: 1px solid #25313b;
  backdrop-filter: blur(16px);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 100px;
}
.brand {
  flex-shrink: 0;
  display: block;
  width: 152px;
  position: relative;
}
.brand img,
.footer-brand img,
.account-logo {
  mix-blend-mode: screen;
  mask-image: radial-gradient(ellipse at center, #000 45%, transparent 74%);
  -webkit-mask-image: radial-gradient(
    ellipse at center,
    #000 45%,
    transparent 74%
  );
}
.brand img {
  width: 152px;
  height: 96px;
  object-fit: contain;
}
#navigation {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 0.78rem;
  font-weight: 500;
}
#navigation a {
  position: relative;
  padding: 12px 0;
  color: #c4cbd1;
  white-space: nowrap;
}
#navigation a:hover,
#navigation a[aria-current="page"] {
  color: var(--gold);
}
#navigation a[aria-current="page"]:after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
}
#navigation .nav-login {
  border: 0;
  margin-left: 12px;
}
#navigation .nav-contact {
  border: 1px solid #64707a;
  border-radius: 6px;
  padding: 11px 18px;
  color: var(--text);
}
.menu-button {
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 15px;
  display: none;
}
.home-hero {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: 65px;
  align-items: center;
  padding-top: 90px;
  padding-bottom: 80px;
  min-height: 710px;
}
.home-hero h1 {
  font-size: clamp(3rem, 4.5vw, 5rem);
  max-width: 640px;
}
.hero-note {
  font-size: 0.73rem;
  margin: 38px 0 0;
  color: #80909d;
}
.business-map {
  min-width: 0;
  background: radial-gradient(
    ellipse at center,
    #25312f 0%,
    #111c26 43%,
    #0b141e 75%
  );
  border: 1px solid #384047;
  border-radius: 20px;
  box-shadow: 0 30px 90px #0005;
  overflow: hidden;
  transform: perspective(1500px) rotateY(-5deg);
}
.map-top,
.map-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 19px 22px;
  font-size: 0.58rem;
  letter-spacing: 0.07em;
  color: #9dacb7;
  border-bottom: 1px solid var(--line);
}
.map-top > span:last-child {
  margin-left: auto;
  font-size: 0.5rem;
}
.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 16px var(--gold);
}
.map-bottom {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  justify-content: space-between;
  font-size: 0.69rem;
  letter-spacing: 0;
}
.map-bottom > span:last-child {
  color: var(--gold);
  font-size: 1.3rem;
}
.map-orbit {
  position: relative;
  min-height: 435px;
  background:
    linear-gradient(90deg, transparent 49.8%, #53615b55 50%, transparent 50.2%),
    linear-gradient(0deg, transparent 49.8%, #53615b55 50%, transparent 50.2%);
}
.map-orbit:before {
  content: "";
  position: absolute;
  inset: 60px 100px;
  border: 1px solid #8f835044;
  border-radius: 50%;
  box-shadow:
    0 0 0 35px #a5945f07,
    0 0 0 70px #a5945f04;
}
.map-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 145px;
  height: 145px;
  border: 1px solid #b49c66;
  border-radius: 50%;
  background: #101b21;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 45px #c6a65616;
}
.map-core > span {
  font-size: 0.56rem;
  letter-spacing: 0.21em;
}
.map-core strong {
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  color: var(--gold);
}
.map-core small {
  font-size: 0.55rem;
  color: var(--muted);
  margin-top: 8px;
}
.map-node {
  position: absolute;
  width: 43%;
  background: #131f2be8;
  border: 1px solid #3a454d;
  border-radius: 10px;
  padding: 17px 15px;
  box-shadow: 0 9px 25px #0003;
}
.map-node span {
  display: block;
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin-bottom: 9px;
}
.map-node strong {
  display: block;
  font-size: 0.73rem;
  font-weight: 550;
}
.map-node small {
  font-size: 0.57rem;
  color: var(--muted);
}
.n1 {
  top: 30px;
  left: 20px;
}
.n2 {
  top: 30px;
  right: 20px;
}
.n3 {
  bottom: 30px;
  left: 20px;
}
.n4 {
  bottom: 30px;
  right: 20px;
}
.capability-strip {
  border-block: 1px solid var(--line);
  background: #0d1721;
}
.capability-strip > .wrap {
  display: flex;
  justify-content: space-between;
  gap: 35px;
  overflow-x: auto;
  padding: 24px 0;
  scrollbar-width: thin;
}
.capability-strip span {
  font-size: 0.65rem;
  letter-spacing: 0.13em;
  white-space: nowrap;
  color: #b8c2cc;
}
.section-heading {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: end;
  gap: 100px;
  margin-bottom: 45px;
}
.section-heading > p {
  max-width: 470px;
  margin-bottom: 20px;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.service-card {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, #15202b, #0d1720);
  transition:
    border 0.25s,
    transform 0.25s;
}
.service-card:hover {
  transform: translateY(-5px);
  border-color: #8d794f;
}
.number {
  font-size: 0.74rem;
  color: var(--gold);
  display: block;
  margin-bottom: 50px;
}
.service-card h3 {
  max-width: 270px;
  font-size: 1.6rem;
}
.service-card p {
  font-size: 0.88rem;
}
.service-card .text-link {
  margin-top: 20px;
}
.sector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sector-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: #101a24;
  transition: transform 0.25s;
}
.sector-card:hover {
  transform: translateY(-5px);
}
.sector-art {
  height: 235px;
  padding: 25px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at top right, #765b5666, transparent), #192129;
  position: relative;
}
.construction .sector-art {
  background:
    radial-gradient(ellipse at top right, #a5823855, transparent), #1b252c;
}
.clinic .sector-art {
  background:
    radial-gradient(ellipse at top right, #538f8a55, transparent), #15262d;
}
.art-index {
  font-size: 0.65rem;
  color: #afbabd;
  letter-spacing: 0.14em;
}
.mini-window {
  width: 92%;
  background: #111d29;
  border: 1px solid #52606b;
  border-radius: 10px;
  margin: 20px 0 0 35px;
  padding: 18px;
  transform: rotate(-5deg);
  box-shadow: 0 15px 30px #0004;
}
.mini-window > span {
  font-size: 0.7rem;
  color: #e6dfd0;
}
.mini-window i {
  display: block;
  height: 9px;
  background: #33414e;
  margin: 12px 0;
  border-radius: 5px;
  width: 90%;
}
.mini-window i:nth-of-type(2) {
  width: 70%;
  background: #796948;
}
.mini-window b {
  display: block;
  color: #b9c6cd;
  font-size: 0.6rem;
  font-weight: 400;
  margin-top: 17px;
}
.sector-copy {
  padding: 29px;
}
.sector-copy .eyebrow {
  font-size: 0.58rem;
  margin-bottom: 18px;
}
.sector-copy h3 {
  font-size: 1.6rem;
}
.sector-copy p:not(.eyebrow) {
  font-size: 0.82rem;
}
.sector-copy .text-link {
  font-size: 0.8rem;
  margin-top: 15px;
}
.offer-section {
  background: linear-gradient(120deg, #16232e, #0d1720);
  border-block: 1px solid #384048;
}
.offer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 130px;
  padding-block: 90px;
  align-items: center;
}
.offer-grid > div > p {
  max-width: 470px;
}
.price-card {
  background: #0a141e;
  border: 1px solid #877452;
  border-radius: 20px;
  padding: 42px;
}
.price-card > p:first-child {
  color: var(--gold);
  font-size: 0.63rem;
  letter-spacing: 0.15em;
}
.price {
  font-size: 5rem;
  line-height: 1.2;
  letter-spacing: -0.06em;
  font-weight: 550;
}
.price span {
  font-size: 0.9rem;
  color: var(--muted);
  letter-spacing: 0;
}
.monthly {
  font-size: 2rem;
  color: var(--gold);
  margin: 8px 0 26px;
  letter-spacing: -0.04em;
}
.monthly span {
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--muted);
}
.price-card ul {
  padding: 22px 0;
  list-style: none;
  border-top: 1px solid var(--line);
  margin: 25px 0 10px;
}
.price-card li {
  padding: 9px 0;
  font-size: 0.9rem;
}
.price-card li:before {
  content: "✓";
  color: var(--gold);
  margin-right: 15px;
}
.price-card .button {
  width: 100%;
}
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 35px;
}
.steps article {
  border-top: 1px solid #4f5352;
  padding-top: 24px;
}
.steps span {
  color: var(--gold);
  font-size: 0.7rem;
  display: block;
  margin-bottom: 35px;
}
.steps h3 {
  font-size: 1.3rem;
}
.steps p {
  font-size: 0.85rem;
}
.end-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  padding-block: 70px;
  border-top: 1px solid var(--line);
}
.end-cta h2 {
  font-size: clamp(2rem, 3vw, 3rem);
}
.end-cta p {
  max-width: 660px;
}
.end-cta .button {
  flex-shrink: 0;
}
.site-footer {
  border-top: 1px solid var(--line);
  background: #070d15;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  padding-block: 42px;
}
.footer-brand img {
  width: 220px;
  height: 140px;
  object-fit: contain;
}
.footer-top p {
  font-size: 0.7rem;
  margin-left: 20px;
}
.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 65px;
  align-content: center;
  font-size: 0.78rem;
  color: #b1bac4;
}
.footer-links a:hover {
  color: var(--gold);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-block: 23px;
  font-size: 0.65rem;
  color: #8e9ba7;
}
.page-intro {
  padding-top: 85px;
  padding-bottom: 60px;
}
.page-intro h1 {
  max-width: 1030px;
}
.page-intro .lead {
  max-width: 750px;
  margin-top: 27px;
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  border-top: 1px solid var(--line);
}
.split p {
  font-size: 1rem;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.feature-grid article {
  border-top: 1px solid #4c5156;
  padding: 28px 6px 10px;
}
.feature-grid article > span {
  color: var(--gold);
  font-size: 0.7rem;
  display: block;
  margin-bottom: 25px;
}
.feature-grid p {
  font-size: 0.9rem;
}
.note-panel {
  padding: 35px;
  border: 1px solid var(--line);
  border-radius: 15px;
  margin-bottom: 70px;
  background: var(--panel);
}
.note-panel p {
  margin: 0;
}
.startup-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 110px;
  align-items: start;
  padding-block: 20px 100px;
}
.inclusions article {
  display: flex;
  gap: 22px;
  padding: 25px 0;
  border-bottom: 1px solid var(--line);
}
.inclusions article > span {
  color: var(--gold);
}
.inclusions h3 {
  font-size: 1.2rem;
}
.inclusions p {
  font-size: 0.9rem;
  margin: 0;
}
.founder-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 100px;
  padding-block: 20px 100px;
  align-items: center;
}
.founder-art {
  min-height: 470px;
  border: 1px solid #47504f;
  border-radius: 20px;
  background:
    radial-gradient(ellipse at bottom right, #8b713333, transparent 65%),
    #121e29;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.founder-art > strong {
  font-size: 8rem;
  letter-spacing: -0.08em;
  font-weight: 450;
  color: var(--gold);
  line-height: 1;
}
.founder-art strong span {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  margin-top: 22px;
}
.founder-art p {
  margin: 0;
  font-size: 0.85rem;
}
.founder-role {
  color: var(--gold);
}
.founder-bio h2 {
  font-size: 3rem;
}
.demo-section {
  padding-bottom: 35px;
}
.demo-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  margin-bottom: 25px;
}
.demo-toolbar > .eyebrow {
  margin: 0;
}
.demo-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.demo-tabs button {
  padding: 10px 17px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font-size: 0.78rem;
}
.demo-tabs button[aria-pressed="true"] {
  border-color: var(--gold);
  color: var(--gold);
  background: #ddba7210;
}
.demo-window {
  border: 1px solid #4b555e;
  border-radius: 18px;
  background: linear-gradient(120deg, #172532, #101b27);
  overflow: hidden;
  box-shadow: 0 25px 60px #0003;
}
.window-chrome {
  display: flex;
  justify-content: space-between;
  padding: 18px 27px;
  border-bottom: 1px solid #3b4751;
  color: #8d9ba7;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
}
.window-chrome span:first-child {
  letter-spacing: 0.3em;
  color: #6b777e;
}
.demo-panel {
  padding: 42px;
}
.demo-panel + .demo-panel {
  border-top: 1px solid var(--line);
}
.demo-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  margin-bottom: 35px;
}
.demo-heading h3 {
  font-size: 2.1rem;
}
.demo-heading .eyebrow {
  margin-bottom: 14px;
  font-size: 0.6rem;
}
.demo-badge {
  color: #bac4ce;
  font-size: 0.6rem;
  border: 1px solid #4b5965;
  border-radius: 20px;
  padding: 7px 12px;
  white-space: nowrap;
}
.demo-body {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 28px;
}
.demo-row {
  display: flex;
  align-items: center;
  gap: 25px;
  border-bottom: 1px solid #3b4955;
  padding: 23px 0;
}
.demo-row > span {
  font-size: 0.7rem;
  color: var(--gold);
  min-width: 65px;
}
.demo-row strong {
  font-size: 0.9rem;
  display: block;
  font-weight: 500;
}
.demo-row small {
  font-size: 0.74rem;
  color: var(--muted);
  display: block;
  margin-top: 5px;
}
.demo-row > b {
  margin-left: auto;
  color: var(--gold);
  font-weight: 400;
}
.demo-side {
  padding: 28px;
  background: linear-gradient(140deg, #31413f, #223035);
  border: 1px solid #53635c;
  border-radius: 12px;
}
.demo-side > span {
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  color: var(--gold);
}
.demo-side h4 {
  margin: 24px 0;
  font-size: 1.9rem;
}
.demo-side p {
  font-size: 0.83rem;
  margin-bottom: 0;
}
.contact-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 75px;
  padding-bottom: 100px;
}
.contact-card,
.account-card,
.request-card {
  padding: 35px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  min-width: 0;
}
.contact-card h2,
.contact-prompts h2 {
  font-size: 2.4rem;
}
.contact-option {
  padding-top: 27px;
  margin-top: 30px;
  border-top: 1px solid var(--line);
}
.email-link {
  color: var(--gold);
  overflow-wrap: anywhere;
}
.notice {
  border-left: 2px solid var(--gold);
  background: #21303a;
  padding: 16px 20px;
  margin-block: 20px;
  font-size: 0.9rem;
}
.notice p:last-child {
  margin: 0;
}
.notice.error {
  border-color: #ed9c9c;
}
.notice.success {
  border-color: #90c7a8;
}
.site-form {
  display: grid;
  gap: 21px;
  margin-top: 28px;
}
.site-form label {
  display: grid;
  gap: 9px;
  font-size: 0.83rem;
}
.site-form input,
.site-form select,
.site-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #596571;
  border-radius: 6px;
  background: #0c1721;
  color: var(--text);
}
.site-form textarea {
  resize: vertical;
  min-height: 125px;
}
.form-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.account-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  padding-block: 85px 100px;
}
.account-card h2 {
  font-size: 2.4rem;
}
.account-logo {
  width: 240px;
  height: 160px;
  object-fit: contain;
  margin: 0 auto 22px;
}
.google-button {
  width: 100%;
  justify-content: center;
}
.portal-section {
  padding-block: 65px 90px;
}
.portal-heading {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 30px;
  margin-bottom: 40px;
}
.portal-heading h1 {
  font-size: clamp(2.6rem, 4vw, 4rem);
}
.owner-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 30px;
}
.request-list {
  display: grid;
  gap: 26px;
  margin-top: 30px;
}
.request-heading {
  display: flex;
  justify-content: space-between;
  gap: 25px;
}
.request-heading > span {
  font-size: 0.75rem;
}
.preserve-lines {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.client-reply {
  padding: 22px;
  background: #23343b;
  border-left: 2px solid var(--gold);
}
.call-details {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}
.inbox-section {
  margin-top: 65px;
}
.request-card details {
  margin-top: 24px;
}
.request-card summary {
  cursor: pointer;
  color: var(--gold);
}
.narrow {
  max-width: 850px;
}
.policy-page h2 {
  font-size: 1.8rem;
  margin-top: 35px;
}
.policy-page a {
  text-decoration: underline;
}
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: page-out 0.16s ease both;
}
::view-transition-new(root) {
  animation: page-in 0.25s ease both;
}
@keyframes page-out {
  to {
    opacity: 0;
  }
}
@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .home-hero,
  .page-intro {
    animation: page-in 0.6s ease both;
  }
}
@media (min-width: 1500px) {
  .wrap {
    width: min(1450px, calc(100% - 160px));
  }
  .home-hero {
    gap: 100px;
  }
  .map-orbit {
    min-height: 460px;
  }
}
@media (max-width: 1150px) {
  .wrap {
    width: calc(100% - 56px);
  }
  #navigation {
    gap: 15px;
    font-size: 0.7rem;
  }
  #navigation .nav-login {
    margin-left: 0;
  }
  .home-hero {
    gap: 30px;
  }
  .home-hero h1 {
    font-size: 3.7rem;
  }
  .business-map {
    transform: none;
  }
  .section-heading {
    gap: 45px;
  }
  .offer-grid {
    gap: 55px;
  }
  .service-card {
    padding: 25px;
  }
  .sector-copy {
    padding: 23px;
  }
  .startup-layout,
  .founder-layout,
  .split {
    gap: 55px;
  }
  .map-node {
    padding: 14px 10px;
  }
  .map-node strong {
    font-size: 0.66rem;
  }
  .map-node small {
    font-size: 0.52rem;
  }
}
@media (max-width: 900px) {
  .header-inner {
    min-height: 88px;
    flex-wrap: wrap;
  }
  .brand,
  .brand img {
    width: 128px;
    height: 82px;
  }
  .js .menu-button {
    display: block;
  }
  .js #navigation {
    display: none;
    width: 100%;
    padding: 10px 0 25px;
    flex-direction: column;
    align-items: stretch;
  }
  .js #navigation.is-open {
    display: flex;
  }
  #navigation {
    flex-wrap: wrap;
    padding-bottom: 15px;
  }
  .home-hero {
    grid-template-columns: 1fr;
    padding-top: 65px;
    gap: 50px;
  }
  .home-hero h1 {
    font-size: clamp(3rem, 7vw, 5rem);
  }
  .home-hero .lead {
    max-width: 620px;
  }
  .business-map {
    max-width: 650px;
    width: 100%;
    margin: auto;
  }
  .map-orbit {
    min-height: 450px;
  }
  .map-node strong {
    font-size: 0.8rem;
  }
  .map-node small {
    font-size: 0.65rem;
  }
  .section {
    padding-block: 75px;
  }
  .section-heading {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .section-heading > p {
    max-width: 650px;
  }
  .sector-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 20px;
  }
  .sector-card {
    min-width: 320px;
    flex: 0 0 42%;
    scroll-snap-align: start;
  }
  .service-grid {
    grid-template-columns: 1fr;
  }
  .service-card {
    display: grid;
    grid-template-columns: 0.18fr 1fr 1.2fr;
    gap: 25px;
  }
  .service-card .number {
    margin: 0;
  }
  .service-card .text-link {
    grid-column: 2/4;
    margin: 0;
  }
  .offer-grid {
    gap: 35px;
  }
  .price-card {
    padding: 28px;
  }
  .price {
    font-size: 4rem;
  }
  .steps {
    grid-template-columns: 1fr 1fr;
  }
  .demo-toolbar {
    align-items: start;
    flex-direction: column;
    gap: 17px;
  }
  .demo-panel {
    padding: 28px;
  }
  .demo-body {
    grid-template-columns: 1.3fr 1fr;
  }
  .demo-heading h3 {
    font-size: 1.7rem;
  }
  .startup-layout {
    gap: 35px;
  }
  .founder-layout,
  .contact-layout,
  .account-intro,
  .owner-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .founder-art {
    min-height: 380px;
  }
  .founder-art > strong {
    font-size: 6rem;
  }
  .feature-grid {
    gap: 20px;
  }
  .feature-grid h3 {
    font-size: 1.25rem;
  }
  .end-cta {
    gap: 30px;
  }
  .footer-links {
    gap: 14px 30px;
  }
  .account-intro {
    padding-block: 55px 75px;
  }
}
@media (max-width: 600px) {
  .wrap {
    width: calc(100% - 36px);
  }
  .promo-bar {
    gap: 6px 14px;
    flex-wrap: wrap;
    padding: 9px 15px;
    font-size: 0.66rem;
  }
  .promo-bar > span:first-child {
    font-size: 0.55rem;
  }
  .promo-bar > span:last-child {
    display: none;
  }
  .home-hero {
    padding-top: 45px;
    padding-bottom: 50px;
  }
  .home-hero h1 {
    font-size: 3.1rem;
  }
  .lead {
    font-size: 1rem;
  }
  .eyebrow {
    font-size: 0.6rem;
  }
  .actions {
    gap: 12px;
  }
  .actions .button {
    width: 100%;
  }
  .hero-note {
    margin-top: 24px;
  }
  .map-top {
    padding: 15px;
    font-size: 0.5rem;
  }
  .map-top > span:last-child {
    display: none;
  }
  .map-orbit {
    min-height: 400px;
  }
  .map-orbit:before {
    inset: 60px;
  }
  .map-node {
    width: 44%;
    padding: 13px 10px;
  }
  .n1,
  .n3 {
    left: 12px;
  }
  .n2,
  .n4 {
    right: 12px;
  }
  .n1,
  .n2 {
    top: 20px;
  }
  .n3,
  .n4 {
    bottom: 20px;
  }
  .map-node strong {
    font-size: 0.65rem;
  }
  .map-node small {
    font-size: 0.5rem;
  }
  .map-node span {
    font-size: 0.43rem;
  }
  .map-core {
    width: 125px;
    height: 125px;
  }
  .map-core strong {
    font-size: 1rem;
  }
  .map-bottom {
    padding: 14px;
    font-size: 0.59rem;
  }
  .section {
    padding-block: 55px;
  }
  .section-heading {
    margin-bottom: 30px;
  }
  .section-heading h2 {
    font-size: 2.4rem;
  }
  .service-card {
    display: block;
  }
  .service-card .number {
    margin-bottom: 28px;
  }
  .service-card h3 {
    font-size: 1.65rem;
  }
  .service-card .text-link {
    margin-top: 12px;
  }
  .sector-card {
    flex-basis: 88%;
    min-width: 270px;
  }
  .sector-art {
    height: 205px;
  }
  .offer-grid {
    grid-template-columns: 1fr;
    padding-block: 55px;
    gap: 35px;
  }
  .offer-grid h2 {
    font-size: 2.6rem;
  }
  .price-card {
    padding: 28px;
  }
  .steps {
    gap: 25px;
  }
  .steps span {
    margin-bottom: 22px;
  }
  .steps h3 {
    font-size: 1.2rem;
  }
  .end-cta {
    display: block;
    padding-block: 50px;
  }
  .end-cta .button {
    margin-top: 10px;
  }
  .footer-top {
    display: block;
    padding-block: 30px;
  }
  .footer-links {
    margin-top: 30px;
    font-size: 0.74rem;
    gap: 15px 20px;
  }
  .footer-bottom {
    font-size: 0.58rem;
    gap: 20px;
  }
  .page-intro {
    padding-top: 50px;
    padding-bottom: 35px;
  }
  .page-intro h1 {
    font-size: 2.85rem;
  }
  .split,
  .startup-layout,
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .feature-grid article {
    padding-bottom: 15px;
  }
  .startup-layout {
    padding-bottom: 55px;
  }
  .founder-layout {
    padding-bottom: 60px;
  }
  .founder-art {
    padding: 30px;
  }
  .founder-bio h2 {
    font-size: 2.5rem;
  }
  .demo-tabs {
    gap: 7px;
  }
  .demo-tabs button {
    padding: 9px 12px;
    font-size: 0.68rem;
  }
  .demo-panel {
    padding: 22px;
  }
  .demo-heading {
    display: block;
    margin-bottom: 15px;
  }
  .demo-badge {
    display: inline-block;
    margin-bottom: 10px;
  }
  .demo-body {
    grid-template-columns: 1fr;
  }
  .demo-side {
    padding: 23px;
  }
  .demo-side h4 {
    font-size: 1.6rem;
    margin: 15px 0;
  }
  .demo-row {
    gap: 14px;
    padding: 20px 0;
  }
  .demo-row > span {
    min-width: 42px;
    font-size: 0.6rem;
  }
  .demo-row strong {
    font-size: 0.78rem;
  }
  .demo-row small {
    font-size: 0.65rem;
  }
  .window-chrome {
    padding: 16px;
    font-size: 0.46rem;
  }
  .contact-layout {
    padding-bottom: 60px;
  }
  .contact-card,
  .account-card,
  .request-card {
    padding: 23px;
  }
  .contact-card h2,
  .contact-prompts h2,
  .account-card h2 {
    font-size: 2rem;
  }
  .form-two {
    grid-template-columns: 1fr;
  }
  .portal-heading,
  .request-heading {
    display: block;
  }
  .portal-heading form {
    margin-top: 25px;
  }
  .note-panel {
    padding: 25px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}
/* A manual, keyboard-accessible showcase; no automatic motion. */
.showcase-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 0.75rem;
}
.showcase-controls > div {
  display: flex;
  gap: 8px;
}
.showcase-controls button {
  width: 42px;
  height: 42px;
  border: 1px solid #56616b;
  border-radius: 50%;
  color: var(--text);
  background: transparent;
}
.showcase-controls button:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.showcase-controls button:disabled {
  opacity: 0.3;
  cursor: default;
}
.sector-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #746344 #101a24;
  padding-bottom: 18px;
}
.sector-card {
  flex: 0 0 calc((100% - 48px) / 2.65);
  scroll-snap-align: start;
}
.sector-grid:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
}
@media (max-width: 900px) {
  .sector-card {
    flex-basis: 43%;
    min-width: 320px;
  }
}
@media (max-width: 600px) {
  .sector-card {
    flex-basis: 88%;
    min-width: 270px;
  }
}
/* Promotion-led home: offer, business overview, selected work. */
.promotion-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 90px;
  align-items: center;
  padding-block: 64px 78px;
}
.promotion-copy h1 {
  font-size: clamp(3rem, 4.5vw, 4.9rem);
}
.promotion-copy .lead {
  max-width: 530px;
  font-size: 1rem;
}
.promotion-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 28px 0 24px;
  flex-wrap: wrap;
}
.promotion-price strong {
  font-size: 2.8rem;
  font-weight: 550;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.05em;
}
.promotion-price span {
  font-size: 0.84rem;
  color: var(--muted);
}
.promotion-price b {
  font-size: 1.2rem;
  font-weight: 400;
  margin-inline: 8px;
}
.preview-promise {
  font-size: 0.8rem;
  max-width: 430px;
  margin-top: 17px;
}
.brand-promise {
  font-size: 0.72rem;
  margin-top: 28px;
  color: var(--text);
}
.brand-promise span {
  display: block;
  color: var(--gold);
  margin-top: 4px;
}
.promotion-inclusions {
  display: block;
  border: 1px solid #796948;
  border-radius: 20px;
  padding: 30px 34px;
  background:
    radial-gradient(ellipse at top right, #79603724, transparent 70%), #121d28;
  transition:
    border-color 0.2s,
    transform 0.2s;
}
.promotion-inclusions:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}
.package-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.package-heading .eyebrow {
  margin: 0;
}
.package-heading > span:last-child {
  color: var(--gold);
  font-size: 1.4rem;
}
.promotion-inclusions ul {
  padding: 0;
  list-style: none;
  margin: 22px 0;
}
.promotion-inclusions li {
  padding: 10px 0;
  border-bottom: 1px solid #34404a;
  font-size: 0.86rem;
  display: flex;
  gap: 13px;
}
.promotion-inclusions li:before {
  content: "✓";
  color: var(--gold);
}
.promotion-inclusions > p {
  font-size: 0.8rem;
  margin-bottom: 8px;
}
.business-overview,
.home-work-feature,
.project-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  padding-block: 80px;
  border-top: 1px solid var(--line);
}
.business-overview h2,
.home-work-feature h2,
.project-story h2 {
  font-size: clamp(2rem, 3.1vw, 3.1rem);
}
.service-directory a {
  display: flex;
  align-items: start;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.service-directory a:first-child {
  padding-top: 0;
}
.service-directory a > span {
  font-size: 0.65rem;
  color: var(--gold);
  padding-top: 6px;
}
.service-directory h3 {
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.service-directory p {
  font-size: 0.83rem;
  margin: 0;
}
.service-directory b {
  font-weight: 400;
  margin-left: auto;
  color: var(--gold);
}
.feature-notebook {
  padding: 34px;
  border-left: 2px solid #937c51;
  background: linear-gradient(120deg, #182630, #101a24);
}
.feature-notebook h3 {
  font-size: 1.7rem;
}
.feature-notebook p {
  font-size: 0.9rem;
}
.package-extra {
  padding-block: 60px 85px;
  border-top: 1px solid var(--line);
}
.package-extra > p {
  max-width: 780px;
}
.project-details {
  padding: 25px 35px;
  background: var(--panel);
  border-radius: 12px;
}
.project-details dt {
  font-size: 0.65rem;
  letter-spacing: 0.13em;
  color: var(--gold);
  text-transform: uppercase;
}
.project-details dd {
  margin: 8px 0 25px;
  color: var(--muted);
  font-size: 0.95rem;
}
@media (max-width: 1050px) {
  .promotion-hero {
    gap: 40px;
  }
  .promotion-inclusions {
    padding: 25px;
  }
  .business-overview,
  .home-work-feature,
  .project-story {
    gap: 45px;
  }
  .promotion-copy h1 {
    font-size: 3.7rem;
  }
}
@media (max-width: 700px) {
  .promotion-hero {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-block: 40px 55px;
  }
  .promotion-copy h1 {
    font-size: 3.15rem;
  }
  .promotion-price strong {
    font-size: 2.5rem;
  }
  .promotion-price b {
    margin-inline: 3px;
  }
  .promotion-price span {
    font-size: 0.75rem;
  }
  .promotion-copy > .button {
    width: 100%;
  }
  .business-overview,
  .home-work-feature,
  .project-story {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-block: 50px;
  }
  .promotion-inclusions {
    padding: 24px;
  }
  .feature-notebook {
    padding: 26px;
  }
  .brand-promise {
    margin-bottom: 0;
  }
  .package-extra {
    padding-block: 40px 55px;
  }
}
.portfolio-websites {
  padding-block: 20px 70px;
}
.portfolio-heading {
  margin-bottom: 35px;
}
.portfolio-heading h2 {
  font-size: 2.6rem;
}
.portfolio-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.portfolio-project {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}
.portfolio-project > a {
  display: block;
  overflow: hidden;
}
.portfolio-project img {
  width: 100%;
  aspect-ratio: 1.94;
  object-fit: cover;
  object-position: top;
  transition: transform 0.3s;
}
.portfolio-project > a:hover img {
  transform: scale(1.025);
}
.portfolio-project > div {
  padding: 28px;
}
.portfolio-project h3 {
  font-size: 1.6rem;
}
.portfolio-project p:not(.eyebrow) {
  font-size: 0.88rem;
}
.preview-enquiry {
  padding-bottom: 15px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.preview-enquiry h3 {
  font-size: 1.4rem;
}
.preview-enquiry p {
  font-size: 0.9rem;
}
@media (max-width: 700px) {
  .portfolio-pair {
    grid-template-columns: 1fr;
  }
  .portfolio-project > div {
    padding: 24px;
  }
  .portfolio-heading h2 {
    font-size: 2.2rem;
  }
}
.actual-app {
  padding-bottom: 45px;
}
.screenshot-panel {
  border: 1px solid #47525b;
  border-radius: 15px;
  overflow: hidden;
  background: var(--panel);
  margin-bottom: 20px;
}
.screenshot-panel img {
  width: 100%;
  height: auto;
}
.screenshot-caption {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  padding: 30px;
}
.screenshot-caption h2 {
  font-size: 1.65rem;
  margin: 0;
}
.screenshot-caption p {
  font-size: 0.9rem;
  margin: 0;
}
.salon-scope {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 85px;
  padding-block: 65px 85px;
  border-top: 1px solid var(--line);
}
.workflow-list article {
  display: flex;
  gap: 23px;
  padding: 23px 0;
  border-bottom: 1px solid var(--line);
}
.workflow-list article > span {
  color: var(--gold);
  font-size: 0.7rem;
}
.workflow-list h3 {
  font-size: 1.25rem;
}
.workflow-list p {
  font-size: 0.87rem;
  margin-bottom: 0;
}
.project-screenshot {
  align-self: center;
  display: block;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.project-screenshot img {
  width: 100%;
}
.project-screenshot > span {
  display: block;
  padding: 17px 22px;
  color: var(--gold);
  font-size: 0.8rem;
  background: var(--panel);
}
@media (max-width: 700px) {
  .screenshot-caption,
  .salon-scope {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .screenshot-caption {
    padding: 22px;
  }
  .screenshot-caption h2 {
    font-size: 1.4rem;
  }
  .salon-scope {
    padding-block: 45px 55px;
  }
}
/* Signature story and restrained interactive details. */
.clarity-story {
  margin-top: 30px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    radial-gradient(ellipse at center, #a9914c15, transparent 70%), #0d1822;
  overflow: hidden;
}
.clarity-labels,
.clarity-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 16px 20px;
  font-size: 0.64rem;
  color: var(--muted);
}
.clarity-labels span:last-child {
  color: var(--gold);
}
.clarity-stage {
  height: 245px;
  position: relative;
  isolation: isolate;
}
.clarity-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: #17252d;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  opacity: 0.25;
  transition: opacity 1s;
}
.clarity-core strong {
  color: var(--gold);
  font-size: 0.87rem;
}
.clarity-token {
  position: absolute;
  z-index: 2;
  padding: 12px 15px;
  border: 1px solid #61717d;
  background: #152430;
  border-radius: 7px;
  font-size: 0.69rem;
  transition:
    transform 1.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 1s;
  min-width: 95px;
  text-align: center;
}
.token-bookings {
  left: 7%;
  top: 18%;
  transform: translate(18px, 17px) rotate(-14deg);
}
.token-email {
  right: 7%;
  top: 18%;
  transform: translate(-16px, 7px) rotate(12deg);
}
.token-data {
  left: 7%;
  bottom: 18%;
  transform: translate(24px, -17px) rotate(8deg);
}
.token-tasks {
  right: 7%;
  bottom: 18%;
  transform: translate(-24px, -12px) rotate(-10deg);
}
.clarity-line {
  position: absolute;
  left: 25%;
  top: 50%;
  width: 50%;
  height: 1px;
  background: #c5a35f;
  opacity: 0;
  z-index: -1;
  transition: opacity 1s 0.5s;
}
.line-a {
  transform: rotate(26deg);
}
.line-b {
  transform: rotate(-26deg);
}
.line-c,
.line-d {
  display: none;
}
.is-connected .clarity-token {
  transform: none;
  border-color: #c5a35f;
}
.is-connected .clarity-core {
  opacity: 1;
}
.is-connected .clarity-line {
  opacity: 0.6;
}
.clarity-footer {
  border-top: 1px solid var(--line);
}
.clarity-footer p {
  font-size: 0.67rem;
  margin: 0;
}
.clarity-footer button {
  border: 0;
  background: none;
  color: var(--gold);
  font-size: 0.72rem;
  white-space: nowrap;
}
.device-project {
  padding: 16px !important;
}
.device-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 0.72rem;
}
.device-toolbar > div {
  display: flex;
  gap: 6px;
}
.device-toolbar button,
.highlight-controls button,
.walkthrough-controls button {
  color: var(--muted);
  border: 1px solid #455460;
  border-radius: 6px;
  background: transparent;
  padding: 8px 12px;
  font-size: 0.7rem;
}
.device-toolbar button[aria-pressed="true"],
.highlight-controls button[aria-pressed="true"] {
  color: var(--gold);
  border-color: var(--gold);
  background: #d7ad5610;
}
.device-stage {
  position: relative;
  width: 100%;
  margin: auto;
  overflow: hidden;
  border: 1px solid #485660;
  border-radius: 10px;
  background: #eef0ed;
  transition: height 0.3s;
}
.device-shell {
  transform-origin: top left;
}
.device-shell iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}
.device-project[data-device="phone"] .device-stage {
  border: 6px solid #53606a;
  border-radius: 26px;
}
.project-highlights {
  padding-top: 19px;
}
.highlight-controls {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.project-highlights [data-highlight-note] {
  font-size: 0.79rem !important;
  min-height: 65px;
  margin: 14px 0 0;
}
.project-highlights .caption {
  font-size: 0.64rem !important;
  margin: 10px 0 0;
}
.device-project[data-highlight="identity"] .device-stage {
  box-shadow: 0 0 0 2px #b9965144;
}
.device-project[data-highlight="services"] .device-stage {
  box-shadow: 0 0 0 2px #7aa4b844;
}
.device-project[data-highlight="bookings"] .device-stage,
.device-project[data-highlight="contact"] .device-stage {
  box-shadow: 0 0 0 2px #8baf9944;
}
.walkthrough-controls {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
  margin: 23px 0;
}
.walkthrough-controls span {
  font-size: 0.78rem;
  color: var(--gold);
  margin-inline: auto;
}
.walkthrough-controls button {
  padding: 11px 16px;
}
.walkthrough-controls button:disabled {
  opacity: 0.35;
  cursor: default;
}
.walkthrough-controls [data-walk-play] {
  border-color: var(--gold);
  color: var(--gold);
}
.brief-builder {
  padding: 30px 35px;
  margin-bottom: 60px;
  background: linear-gradient(125deg, #1a2b35, #101c26);
  border: 1px solid #746341;
  border-radius: 18px;
}
.brief-heading {
  display: flex;
  justify-content: space-between;
  gap: 35px;
}
.brief-heading h2 {
  font-size: 2rem;
}
.brief-heading p {
  max-width: 700px;
  font-size: 0.9rem;
}
.brief-heading > span {
  font-size: 0.75rem;
  color: var(--gold);
  white-space: nowrap;
}
.brief-builder fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.brief-builder legend {
  font-size: 1.25rem;
  margin-bottom: 25px;
  letter-spacing: -0.02em;
}
.brief-builder label + label {
  margin-top: 20px;
}
.brief-builder .form-two label + label {
  margin-top: 0;
}
.brief-navigation,
.brief-delivery {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 20px;
  flex-wrap: wrap;
}
.brief-delivery {
  justify-content: start;
}
.brief-navigation button:disabled {
  opacity: 0.35;
  cursor: default;
}
.brief-builder [role="status"] {
  font-size: 0.85rem;
  margin-top: 17px;
  color: var(--gold);
}
.package-faq {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 80px;
  padding-block: 65px 85px;
  border-top: 1px solid var(--line);
}
.package-faq h2 {
  font-size: 2.6rem;
}
.package-faq details {
  border-bottom: 1px solid #36444f;
  padding-block: 20px;
}
.package-faq summary {
  cursor: pointer;
  font-size: 0.93rem;
  color: var(--text);
  line-height: 1.5;
  list-style: none;
  padding-right: 30px;
  position: relative;
}
.package-faq summary:after {
  content: "+";
  position: absolute;
  right: 3px;
  top: 0;
  color: var(--gold);
}
.package-faq details[open] summary:after {
  content: "−";
}
.package-faq details p {
  font-size: 0.86rem;
  margin: 16px 0 0;
}
.package-faq summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 7px;
}
.tools-section {
  border-top: 1px solid var(--line);
  padding-block: 40px 50px;
}
.tools-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.tools-heading p {
  font-size: 0.78rem;
  max-width: 590px;
}
.tools-heading .eyebrow {
  margin: 0;
}
.tools-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  align-items: center;
  margin-top: 25px;
}
.tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 17px 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 0.7rem;
  text-align: center;
}
.tool-item:hover {
  border-color: #7d704f;
}
.tool-item img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.tool-item .tool-wordmark {
  width: 116px;
  height: 32px;
}
.tools-section .caption {
  font-size: 0.65rem;
  margin-bottom: 0;
}
@media (max-width: 800px) {
  .package-faq {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .tools-list {
    grid-template-columns: repeat(3, 1fr);
  }
  .tools-heading {
    display: block;
  }
  .tools-heading .eyebrow {
    margin-bottom: 12px;
  }
  .brief-builder {
    padding: 25px;
  }
  .brief-heading {
    display: block;
  }
  .device-toolbar {
    align-items: start;
  }
  .device-toolbar > span {
    max-width: 100px;
  }
  .project-highlights [data-highlight-note] {
    min-height: 0;
  }
  .walkthrough-controls [data-walk-play] {
    width: 100%;
  }
}
@media (max-width: 450px) {
  .clarity-token {
    font-size: 0.6rem;
    padding: 10px;
    min-width: 80px;
  }
  .clarity-core {
    width: 95px;
    height: 95px;
    font-size: 0.5rem;
  }
  .clarity-core strong {
    font-size: 0.72rem;
  }
  .token-bookings,
  .token-data {
    left: 4%;
  }
  .token-email,
  .token-tasks {
    right: 4%;
  }
  .clarity-labels {
    font-size: 0.53rem;
    padding: 14px;
  }
  .clarity-footer {
    padding: 12px;
  }
  .clarity-footer p {
    font-size: 0.59rem;
  }
  .brief-builder .form-two label + label {
    margin-top: 15px;
  }
  .brief-delivery .button {
    width: 100%;
  }
  .package-faq h2 {
    font-size: 2.2rem;
  }
  .tools-list {
    gap: 10px;
  }
  .tool-item {
    font-size: 0.6rem;
  }
  .tool-item .tool-wordmark {
    width: 90px;
  }
  .device-toolbar button {
    padding: 7px 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .clarity-token {
    transform: none;
  }
  .clarity-core {
    opacity: 1;
  }
  .clarity-line {
    opacity: 0.6;
  }
  .device-stage {
    transition: none;
  }
}
.mono-tool {
  filter: invert(1);
}
.business-overview .service-directory {
  align-self: center;
}

/* Quiet decorative tools and supplementary project screenshots. */
.tools-subtle .tool-item {
  border: 0;
  opacity: 0.65;
  filter: grayscale(1);
  pointer-events: none;
}
.tools-subtle .tool-item img {
  filter: brightness(0) invert(1);
}
.portfolio-extra {
  border-block: 1px solid var(--line);
  padding: 24px 0;
}
.portfolio-extra summary {
  cursor: pointer;
  color: var(--gold);
  padding: 12px 0;
}
.portfolio-screens {
  display: grid;
  gap: 24px;
  padding-block: 20px;
}
.portfolio-screens figure {
  margin: 0;
}
.portfolio-screens img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.portfolio-screens figcaption {
  font-size: 0.8rem;
  padding-top: 12px;
}
.actual-app .demo-toolbar {
  flex-wrap: wrap;
}
.actual-app .demo-tabs {
  flex-wrap: wrap;
}

/* Individual project galleries keep each brand together. */
.showcase-row {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  padding: 65px 0;
  border-bottom: 1px solid var(--line);
}
.project-gallery {
  min-width: 0;
}
.gallery-stage {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #111e27;
}
.gallery-stage figure {
  margin: 0;
}
.gallery-stage figure[hidden] {
  display: none;
}
.gallery-stage img {
  width: 100%;
  height: auto;
  aspect-ratio: 1.5;
  object-fit: contain;
  object-position: center;
  display: block;
}
.gallery-stage figcaption {
  padding: 12px 20px;
  color: var(--muted);
  font-size: 0.75rem;
  border-top: 1px solid var(--line);
}
.gallery-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 15px;
}
.gallery-controls[hidden] {
  display: none;
}
.gallery-controls button {
  background: transparent;
  border: 1px solid var(--line);
  color: inherit;
  border-radius: 6px;
  padding: 9px 12px;
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  transition:
    background 0.25s,
    border-color 0.25s;
}
.gallery-controls button:hover,
.gallery-controls button[aria-pressed="true"] {
  border-color: var(--gold);
  background: #dfb86618;
}
.gallery-dots {
  display: flex;
  gap: 6px;
}
[data-gallery-play] {
  margin-left: auto;
}
.showcase-copy h3 {
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.15;
  margin-bottom: 20px;
}
.showcase-copy h4 {
  font-size: 1rem;
  margin-bottom: 12px;
}
.showcase-copy p {
  font-size: 0.9rem;
}
.showcase-copy .caption {
  font-size: 0.72rem;
}
.managed-showcase {
  padding: 65px 0;
  max-width: 850px;
}
.managed-showcase h2 {
  font-size: clamp(1.7rem, 3vw, 2.7rem);
}
@media (max-width: 800px) {
  .showcase-row {
    grid-template-columns: 1fr;
    padding-block: 40px;
    gap: 25px;
  }
  .showcase-copy {
    max-width: 620px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .motion-ready {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity 0.75s ease,
      transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .motion-ready.is-visible {
    opacity: 1;
    transform: none;
  }
  .button,
  .text-link {
    transition:
      transform 0.25s ease,
      background 0.25s ease,
      color 0.25s ease;
  }
  .button:hover {
    transform: translateY(-3px);
  }
  .package-faq details[open] p {
    animation: faq-open 0.28s ease-out;
  }
  @keyframes faq-open {
    from {
      opacity: 0;
      transform: translateY(-5px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* Owner-managed additions keep the public layout responsive. */
.owner-login{display:block;width:max-content;margin:0 auto;padding:14px 24px;font-size:.75rem;color:var(--muted,#a8b4bd)}
.cms-media{display:grid;gap:28px}.cms-media figure{margin:0}.cms-media img,.cms-media video{display:block;max-width:100%;width:100%;max-height:760px;object-fit:contain;border-radius:16px}.cms-media figcaption{padding:14px 0;color:#a8b4bd}