.unique-site {
  min-height: 860px;
  padding: 18px;
  overflow: hidden;
  font-family: Inter, system-ui, sans-serif;
  background: var(--surface);
  color: var(--ink);
}

.selector {
  position: relative;
  top: auto;
  z-index: 1;
}

.unique-site .u-nav {
  min-height: 72px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 0 20px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface2) 88%, transparent);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .08);
}

.unique-site .u-nav strong {
  font-size: 1.25rem;
}

.unique-site .u-nav nav {
  justify-self: center;
  display: flex;
  gap: 16px;
  color: var(--soft);
  font-weight: 900;
}

.unique-site .u-nav a,
.unique-site button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 900;
}

.unique-site h2 {
  margin: 0 0 18px;
  color: inherit;
  font-size: clamp(2.3rem, 5vw, 5.2rem);
  line-height: .94;
}

.unique-site p {
  color: var(--soft);
  line-height: 1.62;
}

.unique-site img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.unique-site figure {
  margin: 0;
}

.unique-site span,
.unique-site small {
  color: var(--accent);
  text-transform: uppercase;
  font-size: .75rem;
  font-weight: 900;
}

.lux-hero,
.clinic-hero,
.build-hero,
.estate-hero,
.dining-hero,
.academy-hero,
.finance-hero,
.resort-hero,
.logistics-hero,
.saas-hero {
  margin-top: 18px;
}

.u-luxury {
  background: #100d0a;
  color: #fff8ef;
}

.u-luxury .u-nav,
.u-luxury .lux-strip article,
.u-luxury .lux-editorial article {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .11);
}

.u-luxury .u-nav nav,
.u-luxury p {
  color: #d9c7ad;
}

.lux-hero {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(360px, 1fr);
  gap: 24px;
  align-items: stretch;
}

.lux-hero > div {
  display: grid;
  align-content: end;
  min-height: 510px;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, .12);
}

.lux-hero figure {
  min-height: 510px;
}

.lux-editorial,
.lux-strip {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.lux-editorial {
  grid-template-columns: 1.2fr repeat(3, 1fr);
}

.lux-editorial article,
.lux-strip article {
  padding: 20px;
}

.lux-editorial figure {
  min-height: 230px;
  position: relative;
}

.lux-editorial figcaption,
.dining-gallery figcaption,
.build-gallery figcaption,
.fleet-strip figcaption,
.saas-gallery figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-weight: 900;
}

.lux-strip {
  grid-template-columns: repeat(3, 1fr);
}

.lux-strip b,
.lux-strip strong,
.lux-strip span {
  display: block;
}

.lux-strip b {
  color: var(--accent);
  font-size: 2.6rem;
}

.u-clinic {
  background: linear-gradient(135deg, #f1fbfb, #e7f6ff);
}

.clinic-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  padding: 36px;
  border-radius: 8px;
  background: linear-gradient(120deg, rgba(15, 159, 155, .12), rgba(255, 255, 255, .9));
}

.clinic-hero aside {
  display: grid;
  gap: 10px;
  padding: 22px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(10, 80, 90, .12);
}

.clinic-hero label {
  color: var(--soft);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.clinic-hero aside span {
  padding: 12px;
  border-radius: 8px;
  background: #eefafa;
  color: var(--ink);
  text-transform: none;
  font-size: .95rem;
}

.clinic-doctors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.clinic-doctors article {
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
}

.clinic-doctors img {
  height: 190px;
}

.clinic-doctors div {
  padding: 16px;
}

.clinic-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.clinic-timeline span {
  padding: 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  text-align: center;
}

.u-construction {
  background: #17120d;
  color: #fff5e6;
}

.u-construction .u-nav {
  background: #241b12;
}

.u-construction .u-nav nav,
.u-construction p {
  color: #cdbba5;
}

.build-hero {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(360px, 1fr);
  gap: 16px;
  align-items: stretch;
}

.build-hero > div {
  min-height: 480px;
  display: grid;
  align-content: center;
  padding: 30px;
  background: repeating-linear-gradient(135deg, rgba(216,139,34,.12) 0 12px, transparent 12px 24px), #22180f;
}

.build-hero figure {
  min-height: 480px;
}

.build-ledger,
.build-gallery {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.build-ledger {
  grid-template-columns: repeat(3, 1fr);
}

.build-ledger article {
  padding: 20px;
  border-left: 4px solid var(--accent);
  background: #241b12;
}

.build-gallery {
  grid-template-columns: 1.2fr 1fr 1fr;
}

.build-gallery figure {
  min-height: 230px;
  position: relative;
}

.u-realestate {
  background: #eef4ff;
}

.estate-hero {
  min-height: 520px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: end;
  gap: 18px;
  padding: 30px;
  border-radius: 8px;
  background: linear-gradient(rgba(5, 12, 28, .12), rgba(5, 12, 28, .5)), var(--estate) center/cover;
  color: #fff;
}

.estate-hero p {
  color: rgba(255, 255, 255, .8);
}

.estate-hero form {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
}

.estate-hero label {
  color: var(--soft);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.estate-hero form span {
  color: var(--ink);
  text-transform: none;
  font-size: 1rem;
}

.estate-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.estate-list article {
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
}

.estate-list img {
  height: 220px;
}

.estate-list div {
  padding: 16px;
}

.estate-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.estate-bar span {
  padding: 14px;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-align: center;
}

.u-restaurant {
  background: #2c120a;
  color: #fff6ed;
}

.u-restaurant .u-nav {
  background: rgba(255, 243, 232, .08);
}

.u-restaurant p,
.u-restaurant .u-nav nav {
  color: #e8c9b4;
}

.dining-hero {
  display: grid;
  grid-template-columns: minmax(360px, 1.1fr) minmax(0, .9fr);
  gap: 0;
}

.dining-hero figure {
  min-height: 560px;
}

.dining-hero > div {
  display: grid;
  align-content: center;
  padding: 36px;
  background: #3f1710;
}

.menu-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.menu-board article {
  padding: 22px;
  background: rgba(255, 255, 255, .08);
}

.dining-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.dining-gallery figure {
  min-height: 220px;
  position: relative;
}

.u-education {
  background: linear-gradient(135deg, #f4f0ff, #effbff);
}

.academy-hero {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(360px, 1fr);
  gap: 22px;
  align-items: center;
  padding: 34px;
  border-radius: 8px;
  background: #fff;
}

.academy-hero figure {
  min-height: 430px;
  border-radius: 8px;
  overflow: hidden;
}

.program-row,
.campus-feed {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.program-row {
  grid-template-columns: repeat(3, 1fr);
}

.program-row article {
  padding: 22px;
  border-radius: 8px;
  background: #fff;
  border-top: 4px solid var(--accent);
}

.campus-feed {
  grid-template-columns: 1.4fr 1fr 1fr;
}

.campus-feed figure {
  min-height: 220px;
  overflow: hidden;
  border-radius: 8px;
}

.u-finance {
  background: #071d1c;
  color: #f4fffd;
}

.u-finance .u-nav {
  background: rgba(255, 255, 255, .07);
}

.u-finance p,
.u-finance .u-nav nav {
  color: #b9d0cf;
}

.finance-hero {
  display: grid;
  grid-template-columns: minmax(0, .9fr) 360px;
  gap: 18px;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(135deg, rgba(15,118,110,.22), rgba(23,37,84,.35));
}

.finance-panel {
  display: flex;
  align-items: end;
  gap: 12px;
  min-height: 330px;
  padding: 20px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .07);
}

.finance-panel strong {
  align-self: start;
  margin-right: auto;
}

.finance-panel i {
  width: 32px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(var(--accent), var(--accent2));
}

.finance-proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.finance-proof article {
  padding: 18px;
  background: rgba(255, 255, 255, .075);
}

.finance-proof img {
  height: 160px;
  margin-top: 12px;
  border-radius: 8px;
}

.u-hospitality {
  background: #eef9fb;
}

.resort-hero {
  position: relative;
  min-height: 560px;
  display: grid;
  align-content: end;
  padding: 30px;
  overflow: hidden;
  border-radius: 8px;
  color: #fff;
}

.resort-hero figure {
  position: absolute;
  inset: 0;
}

.resort-hero figure:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 47, 58, .76), transparent 60%);
}

.resort-hero > div,
.resort-hero form {
  position: relative;
  z-index: 1;
}

.resort-hero p {
  color: rgba(255, 255, 255, .8);
}

.resort-hero form {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 20px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .9);
}

.resort-hero form span {
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 8px;
  background: #eef9fb;
  color: var(--ink);
}

.room-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.room-cards article {
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
}

.room-cards img {
  height: 220px;
}

.room-cards div {
  padding: 16px;
}

.u-logistics {
  background: #fff7ed;
}

.logistics-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
  align-items: center;
  padding: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, #fff, #ffead5);
}

.logistics-hero aside {
  display: grid;
  gap: 12px;
  padding: 20px;
  border-radius: 8px;
  background: #111827;
  color: #fff;
}

.logistics-hero aside span {
  color: #fff;
  font-size: 1.2rem;
  text-transform: none;
}

.logistics-hero aside i {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

.route-map {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(0, .8fr);
  gap: 12px;
  margin-top: 12px;
}

.route-map figure {
  min-height: 320px;
  overflow: hidden;
  border-radius: 8px;
}

.route-map > div {
  padding: 22px;
  border-radius: 8px;
  background: #fff;
}

.route-map span {
  display: grid;
  grid-template-columns: 1fr auto;
  margin-top: 10px;
  padding: 12px;
  border-radius: 8px;
  background: #fff7ed;
  color: var(--ink);
}

.fleet-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.fleet-strip figure {
  min-height: 190px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.u-saas {
  background: #0c1032;
  color: #f8fbff;
}

.u-saas .u-nav {
  background: rgba(255, 255, 255, .08);
}

.u-saas p,
.u-saas .u-nav nav {
  color: #c5cdf7;
}

.saas-hero {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(380px, 1fr);
  gap: 18px;
  align-items: center;
  padding: 34px;
  border-radius: 8px;
  background: radial-gradient(circle at 80% 12%, rgba(6,182,212,.32), transparent 32%), linear-gradient(135deg, #11133b, #1f1b66);
}

.product-window {
  display: grid;
  gap: 14px;
  min-height: 360px;
  padding: 22px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
}

.product-window span {
  display: block;
  height: 36px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

.product-window span:nth-child(3) {
  width: 72%;
}

.product-window span:nth-child(4) {
  width: 88%;
}

.product-window span:nth-child(5) {
  width: 58%;
}

.feature-cloud {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.feature-cloud article {
  padding: 20px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
}

.saas-gallery {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.saas-gallery figure {
  min-height: 210px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.device.tablet .lux-hero,
.device.tablet .clinic-hero,
.device.tablet .build-hero,
.device.tablet .estate-hero,
.device.tablet .dining-hero,
.device.tablet .academy-hero,
.device.tablet .finance-hero,
.device.tablet .resort-hero form,
.device.tablet .logistics-hero,
.device.tablet .route-map,
.device.tablet .saas-hero,
.device.mobile .lux-hero,
.device.mobile .clinic-hero,
.device.mobile .build-hero,
.device.mobile .estate-hero,
.device.mobile .dining-hero,
.device.mobile .academy-hero,
.device.mobile .finance-hero,
.device.mobile .resort-hero form,
.device.mobile .logistics-hero,
.device.mobile .route-map,
.device.mobile .saas-hero {
  grid-template-columns: 1fr;
}

.device.tablet .lux-editorial,
.device.tablet .build-ledger,
.device.tablet .build-gallery,
.device.tablet .estate-list,
.device.tablet .menu-board,
.device.tablet .dining-gallery,
.device.tablet .program-row,
.device.tablet .campus-feed,
.device.tablet .finance-proof,
.device.tablet .room-cards,
.device.tablet .fleet-strip,
.device.tablet .feature-cloud,
.device.tablet .saas-gallery,
.device.mobile .lux-editorial,
.device.mobile .lux-strip,
.device.mobile .clinic-doctors,
.device.mobile .clinic-timeline,
.device.mobile .build-ledger,
.device.mobile .build-gallery,
.device.mobile .estate-list,
.device.mobile .estate-bar,
.device.mobile .menu-board,
.device.mobile .dining-gallery,
.device.mobile .program-row,
.device.mobile .campus-feed,
.device.mobile .finance-proof,
.device.mobile .room-cards,
.device.mobile .fleet-strip,
.device.mobile .feature-cloud,
.device.mobile .saas-gallery {
  grid-template-columns: 1fr;
}

.device.mobile .unique-site {
  padding: 12px;
}

.device.mobile .u-nav {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 10px;
  padding: 16px;
}

.device.mobile .u-nav nav {
  justify-self: start;
  flex-wrap: wrap;
  gap: 10px;
}

.device.mobile .unique-site h2 {
  font-size: clamp(2.1rem, 12vw, 3.3rem);
}

.device.mobile .lux-hero > div,
.device.mobile .build-hero > div,
.device.mobile .academy-hero,
.device.mobile .finance-hero,
.device.mobile .logistics-hero,
.device.mobile .saas-hero {
  padding: 22px;
}

.device.mobile .lux-hero figure,
.device.mobile .build-hero figure,
.device.mobile .academy-hero figure,
.device.mobile .dining-hero figure,
.device.mobile .resort-hero,
.device.mobile .product-window {
  min-height: 300px;
}

.unique-site .u-nav [data-demo-page],
.page-index [data-demo-page] {
  cursor: pointer;
}

.unique-site .u-nav strong.active,
.unique-site .u-nav span.active {
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.site-page-tabs {
  display: flex;
  gap: 8px;
  margin: 12px 0 0;
  padding: 10px;
  overflow-x: auto;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface2) 82%, transparent);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .07);
}

.site-page-tabs button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  background: transparent;
  color: var(--ink);
  font-size: .72rem;
}

.site-page-tabs button.active {
  background: var(--accent);
  color: #fff;
}

.deep-story,
.conversion-lane,
.homepage-proof,
.inner-grid,
.inner-editorial,
.inner-workflow,
.inner-product,
.inner-tracker,
.inner-project-board,
.inner-appointment,
.inner-program,
.inner-finance,
.inner-lookbook,
.inner-menu {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.deep-story {
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  padding: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface2) 92%, transparent), color-mix(in srgb, var(--accent) 12%, var(--surface)));
}

.deep-story h3,
.inner-product h3,
.inner-finance h3 {
  margin: 8px 0 10px;
  font-size: clamp(1.8rem, 3vw, 3.2rem);
  line-height: 1;
}

.deep-story aside {
  display: grid;
  gap: 8px;
}

.deep-story aside span,
.inner-workflow span,
.inner-tracker span,
.inner-project-board span,
.inner-program span {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface2) 78%, transparent);
  color: var(--ink);
}

.deep-story aside b,
.inner-workflow b {
  color: var(--accent);
}

.page-index {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.page-index article,
.conversion-lane article,
.homepage-proof,
.inner-grid article,
.inner-menu article,
.inner-cta,
.inner-product article,
.inner-finance > div,
.inner-finance article,
.inner-tracker article,
.inner-project-board article,
.inner-appointment article,
.inner-program article {
  padding: 20px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface2) 90%, transparent);
  color: var(--ink);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .07);
}

.page-index article p,
.conversion-lane article p,
.homepage-proof p,
.inner-grid article p,
.inner-cta p,
.inner-product article p,
.inner-finance > div p,
.inner-tracker article p,
.inner-project-board article p,
.inner-appointment article p,
.inner-program article p {
  color: var(--soft);
}

.page-index article {
  min-height: 168px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.page-index article:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 54px rgba(0, 0, 0, .12);
}

.page-index strong,
.conversion-lane strong,
.inner-grid strong,
.inner-cta strong,
.inner-menu strong {
  display: block;
  margin: 7px 0;
  color: var(--ink);
  font-size: 1.06rem;
}

.conversion-lane,
.homepage-proof,
.inner-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.homepage-proof {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 20px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ink) 8%, var(--surface2));
}

.homepage-proof > div,
.homepage-proof article {
  padding: 18px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface2) 82%, transparent);
}

.homepage-proof > div {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1fr);
  gap: 18px;
  align-items: end;
}

.homepage-proof h3 {
  margin: 8px 0 10px;
  color: var(--ink);
  font-size: clamp(1.65rem, 2.35vw, 2.65rem);
  line-height: 1.02;
}

.homepage-proof article strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 1.7rem;
}

.inner-hero {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(380px, 1fr);
  gap: 18px;
  align-items: stretch;
  margin-top: 12px;
  padding: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface2) 92%, transparent), color-mix(in srgb, var(--accent) 15%, var(--surface)));
}

.inner-hero h2 {
  font-size: clamp(2.15rem, 3.6vw, 4.1rem);
  line-height: .95;
}

.inner-hero figure,
.inner-editorial figure,
.inner-lookbook figure,
.inner-tracker figure,
.inner-project-board figure,
.inner-appointment figure,
.inner-program figure {
  min-height: 250px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.inner-hero figure {
  min-height: 390px;
}

.inner-editorial,
.inner-lookbook {
  grid-template-columns: 1.2fr 1fr 1fr;
}

.inner-editorial figcaption,
.inner-lookbook figcaption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .58);
  color: #fff;
  font-weight: 900;
}

.inner-editorial figcaption span {
  display: block;
  margin-bottom: 3px;
  color: #fff;
}

.inner-workflow {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.inner-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  margin-top: 12px;
}

.inner-search {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 16px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface2) 94%, transparent);
}

.inner-search span {
  padding: 16px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface2));
  color: var(--ink);
}

.inner-menu,
.inner-product,
.inner-tracker,
.inner-project-board,
.inner-appointment,
.inner-program,
.inner-finance {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inner-menu {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.inner-product .product-window,
.inner-finance article {
  min-height: 320px;
}

.inner-finance article {
  display: flex;
  align-items: end;
  gap: 10px;
}

.inner-finance article strong {
  align-self: start;
  margin-right: auto;
}

.inner-finance article i {
  width: 42px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, var(--accent2), var(--accent));
}

.inner-tracker article,
.inner-project-board article,
.inner-appointment article,
.inner-program article {
  display: grid;
  align-content: center;
  gap: 10px;
}

.u-luxury .inner-hero,
.u-luxury .deep-story {
  background: linear-gradient(135deg, #19110c, #f4e7d1);
  color: #fff;
}

.u-clinic .inner-grid article {
  border-left: 5px solid var(--accent);
}

.u-construction .inner-project-board,
.u-construction .inner-grid article {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface2)) 0 12px, var(--surface2) 12px 24px);
}

.u-construction .inner-hero {
  color: var(--ink);
  background: linear-gradient(135deg, #fff7ea, #e7d8c2);
}

.u-construction .inner-hero p {
  color: #5b4938;
}

.u-restaurant .inner-menu article {
  background: #3f1710;
  color: #fff;
}

.u-restaurant .inner-menu article p {
  color: #e8c9b4;
}

.u-finance .inner-hero,
.u-saas .inner-hero,
.u-saas .inner-product {
  background: radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--accent2) 35%, transparent), transparent 34%), linear-gradient(135deg, var(--ink), color-mix(in srgb, var(--accent) 32%, #080b1f));
  color: #fff;
}

.u-logistics .inner-workflow span {
  border-left: 5px solid var(--accent);
}

.device.tablet .deep-story,
.device.tablet .page-index,
.device.tablet .conversion-lane,
.device.tablet .homepage-proof,
.device.tablet .inner-hero,
.device.tablet .inner-grid,
.device.tablet .inner-editorial,
.device.tablet .inner-workflow,
.device.tablet .inner-product,
.device.tablet .inner-tracker,
.device.tablet .inner-project-board,
.device.tablet .inner-appointment,
.device.tablet .inner-program,
.device.tablet .inner-finance,
.device.tablet .inner-lookbook,
.device.mobile .deep-story,
.device.mobile .page-index,
.device.mobile .conversion-lane,
.device.mobile .homepage-proof,
.device.mobile .inner-hero,
.device.mobile .inner-grid,
.device.mobile .inner-editorial,
.device.mobile .inner-workflow,
.device.mobile .inner-search,
.device.mobile .inner-menu,
.device.mobile .inner-product,
.device.mobile .inner-tracker,
.device.mobile .inner-project-board,
.device.mobile .inner-appointment,
.device.mobile .inner-program,
.device.mobile .inner-finance,
.device.mobile .inner-lookbook,
.device.mobile .inner-cta {
  grid-template-columns: 1fr;
}

.device.tablet .page-index {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.device.mobile .site-page-tabs {
  padding: 8px;
}

.device.mobile .site-page-tabs button {
  min-height: 32px;
  font-size: .68rem;
}

.device.mobile .deep-story,
.device.mobile .inner-hero,
.device.mobile .inner-cta {
  padding: 18px;
}

.device.mobile .inner-hero h2 {
  font-size: clamp(2rem, 10vw, 3rem);
}

.device.mobile .inner-hero figure,
.device.mobile .inner-editorial figure,
.device.mobile .inner-lookbook figure {
  min-height: 280px;
}