/*
 * Loom — a composition-led Pagestic theme.
 *
 * The visual system deliberately avoids the usual full-width stripe + centred
 * card-grid rhythm. Content moves through offset canvases, editorial rails,
 * woven grids, and neighbour-aware compositions.
 */

/* Fallback colours, used only when no palette file has loaded. This file is linked after the chosen palette
   and after a website's custom colours, so as plain :root rules these would win over both and every Loom
   website would look the same. :where() gives them no weight, so the palette and custom colours win. */
:where(:root) {
  --background: #f5f2eb;
  --surface: #fffdf8;
  --surface-alt: #e9e4d9;
  --primary: #17233c;
  --primary-alt: #25385d;
  --accent: #ff5f57;
  --accent-ink: #c7353e;
  --on-accent: #000;
  --text-primary: #172033;
  --text-secondary: #667085;
  --border: #d8d2c6;
  --loom-pop: #68d9c5;
  --loom-glow: #ffca6a;
}

:root {
  --loom-shell: min(92vw, 1460px);
  --loom-reading: 760px;
  --loom-gutter: clamp(1rem, 3vw, 3rem);
  --loom-radius: clamp(1.4rem, 3vw, 3.5rem);
  --loom-radius-sm: clamp(1rem, 1.5vw, 1.65rem);
  --loom-shadow: 0 32px 90px color-mix(in srgb, var(--text-primary) 12%, transparent);
  --loom-ease: cubic-bezier(.2, .78, .2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--background);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background:
    radial-gradient(circle at 7% 8%, color-mix(in srgb, var(--loom-glow) 24%, transparent), transparent 25rem),
    radial-gradient(circle at 96% 42%, color-mix(in srgb, var(--loom-pop) 14%, transparent), transparent 28rem),
    var(--background);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.is-menu-open {
  overflow: hidden;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-body);
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
video,
iframe,
svg {
  display: block;
  max-width: 100%;
}

figure,
blockquote {
  margin: 0;
}

p,
h1,
h2,
h3,
h4,
ul,
ol {
  margin-top: 0;
}

.loom-main h1,
.loom-main h2,
.loom-main h3,
.loom-main h4,
.loom-main p,
.loom-main li,
.loom-main blockquote,
.loom-header,
.loom-footer {
  overflow-wrap: anywhere;
}

button {
  color: inherit;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

[hidden] {
  display: none !important;
}

.loom-page-atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.loom-page-atmosphere i {
  position: absolute;
  width: clamp(15rem, 28vw, 34rem);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
  border-radius: 50%;
}

.loom-page-atmosphere i:nth-child(1) {
  top: 14vh;
  left: -12rem;
}

.loom-page-atmosphere i:nth-child(2) {
  top: 63vh;
  right: -18rem;
}

.loom-page-atmosphere i:nth-child(3) {
  bottom: -20rem;
  left: 38vw;
  width: 44rem;
}

.loom-skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 1000;
  padding: .8rem 1rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--background);
  transform: translateY(-160%);
}

.loom-skip-link:focus {
  transform: none;
}

.loom-main {
  position: relative;
  isolation: isolate;
}

.loom-shell {
  position: relative;
  width: var(--loom-shell);
  margin-inline: auto;
}

.loom-section {
  position: relative;
  padding-block: clamp(4.25rem, 7.25vw, 7rem);
}

.loom-section + .loom-section:not(.loom-hero):not(.loom-spacer):not(.loom-divider) {
  margin-top: clamp(-2.25rem, -2vw, -1rem);
}

.loom-section--even > .loom-shell {
  width: min(88vw, 1370px);
}

.loom-section--last {
  padding-bottom: clamp(5rem, 8vw, 8rem);
}

.loom-section-head {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
  margin-bottom: clamp(2rem, 4vw, 4rem);
}

.loom-section-head,
.loom-section-head__copy,
.loom-hero__copy,
.loom-editorial__copy,
.loom-contact__intro,
.loom-price-card,
.loom-story-facts > *,
.loom-stats article {
  min-width: 0;
}

.stat-number,
.loom-story-facts > * > *,
.loom-stats article > * {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.loom-section-head--center {
  text-align: center;
}

.loom-section-head--split .loom-section-head__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .65fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: end;
}

.loom-section-head__marker {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding-top: .6rem;
  color: var(--text-secondary);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
}

.loom-section-head__marker i {
  width: 2.25rem;
  height: 1px;
  background: currentColor;
}

.loom-section-head :is(h1, h2) {
  max-width: 16ch;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 3.6vw, 4rem);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.02;
  text-wrap: pretty;
}

.loom-section-head--center :is(h1, h2) {
  margin-inline: auto;
}

.loom-eyebrow {
  margin: 0 0 1rem;
  color: var(--accent-ink);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  line-height: 1.3;
  text-transform: uppercase;
}

.loom-section-intro,
.loom-section-intro p {
  max-width: 42rem;
  margin: 0;
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
}

.loom-icon {
  width: 1.1em;
  height: 1.1em;
  stroke-width: 1.8;
}

.loom-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  max-width: 100%;
  min-height: 3.25rem;
  padding: .85rem 1.25rem .85rem 1.45rem;
  border: 1px solid var(--primary);
  border-radius: 999px;
  background: var(--primary);
  color: var(--background);
  font-size: .86rem;
  font-weight: 750;
  line-height: 1;
  text-align: center;
  transition:
    gap .3s var(--loom-ease),
    transform .3s var(--loom-ease),
    background-color .2s ease,
    border-color .2s ease;
}

.loom-button svg,
.loom-text-link svg,
.loom-index-card__arrow svg,
.loom-service-card__arrow svg,
.loom-accreditations a svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.loom-button:hover {
  gap: 1.15rem;
  transform: translateY(-2px);
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.loom-button--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border);
}

.loom-button--light {
  border-color: color-mix(in srgb, currentColor 35%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--text-primary);
}

.loom-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 2rem;
}

.loom-rich-text {
  color: var(--text-secondary);
}

.loom-rich-text > :first-child {
  margin-top: 0;
}

.loom-rich-text > :last-child {
  margin-bottom: 0;
}

.loom-rich-text p,
.loom-rich-text li {
  line-height: 1.78;
}

.loom-rich-text a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

.loom-rich-text strong {
  color: var(--text-primary);
}

.loom-rich-text ul,
.loom-rich-text ol {
  padding-left: 1.25rem;
}

.loom-rich-text--large {
  font-size: clamp(1.05rem, 1.45vw, 1.32rem);
}

.loom-rich-text--article {
  max-width: var(--loom-reading);
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
}

.loom-rich-text--article h2,
.loom-rich-text--article h3 {
  margin: 2.6em 0 .8em;
  color: var(--text-primary);
  font-family: var(--font-heading);
  letter-spacing: -.035em;
  line-height: 1.08;
}

.loom-rich-text--article h2 {
  font-size: clamp(1.8rem, 3vw, 2.9rem);
}

.loom-rich-text--article h3 {
  font-size: clamp(1.4rem, 2vw, 2rem);
}

.loom-text-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--accent-ink);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
}

/* Header / navigation ---------------------------------------------------- */

.loom-announcement {
  position: relative;
  z-index: 70;
  padding: .55rem var(--loom-gutter);
  background: var(--accent);
  color: var(--on-accent);
}

.loom-announcement__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  width: var(--loom-shell);
  margin: auto;
  font-size: .78rem;
  font-weight: 650;
}

.loom-announcement__inner p {
  margin: 0;
}

.loom-announcement__inner > span {
  display: grid;
  place-items: center;
}

.loom-announcement__inner a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-bottom: 1px solid currentColor;
}

.announcement-dismiss {
  margin-left: auto;
  padding: .3rem;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.loom-topline {
  position: relative;
  z-index: 60;
  display: flex;
  min-height: 2.35rem;
  overflow: hidden;
  background: var(--text-primary);
  color: var(--background);
}

.loom-topline__track {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  align-items: center;
  gap: 1.2rem;
  padding-inline: 1.2rem;
  white-space: nowrap;
  opacity: .62;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.loom-topline__track i {
  width: .3rem;
  height: .3rem;
  border-radius: 50%;
  background: var(--loom-pop);
}

.loom-topline__contact {
  display: flex;
  flex-shrink: 0;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  padding-inline: 1.2rem;
  border-left: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  font-size: .72rem;
}

.loom-header {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: .8rem var(--loom-gutter);
  transition: padding .25s ease;
}

.loom-header::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--background) 82%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
  content: "";
  opacity: 0;
  transition: opacity .25s ease;
}

.loom-header.is-scrolled::before {
  opacity: 1;
}

.loom-header.is-scrolled {
  padding-block: .45rem;
}

.loom-header__inner,
.loom-header__center-brand,
.loom-header__center-nav {
  width: var(--loom-shell);
  margin-inline: auto;
}

.loom-header__inner {
  display: grid;
  grid-template-columns: minmax(12rem, .7fr) auto minmax(12rem, .7fr);
  gap: 1.5rem;
  align-items: center;
  min-height: 4.5rem;
  padding: .55rem .65rem .55rem 1.2rem;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--text-primary) 7%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.loom-brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}

.loom-brand__mark {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 2.6rem;
  overflow: hidden;
  border-radius: 50% 50% 50% .5rem;
  background: var(--primary);
  color: var(--background);
}

.loom-brand__mark img {
  width: 100%;
  height: 100%;
  padding: .35rem;
  object-fit: contain;
}

.loom-brand__mark b {
  font-family: var(--font-heading);
  font-size: .78rem;
}

.loom-brand__text {
  overflow: hidden;
  font-family: var(--font-heading);
  font-size: clamp(.92rem, 1.3vw, 1.12rem);
  font-weight: 650;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loom-brand--light {
  color: var(--background);
}

.loom-brand--light .loom-brand__mark {
  background: var(--background);
  color: var(--text-primary);
}

.loom-nav--desktop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .1rem;
}

.loom-nav__item {
  position: relative;
}

.loom-nav__item > a {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .72rem .85rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}

.loom-nav__item > a .loom-icon {
  width: .8rem;
  height: .8rem;
}

.loom-nav--desktop .loom-nav__item:hover > a,
.loom-nav--desktop .loom-nav__item:focus-within > a {
  background: var(--surface-alt);
  color: var(--accent-ink);
}

.loom-nav__children {
  position: absolute;
  top: calc(100% + .55rem);
  left: 50%;
  width: min(19rem, 80vw);
  padding: .55rem;
  border: 1px solid var(--border);
  border-radius: 1.4rem;
  background: var(--surface);
  box-shadow: var(--loom-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, .75rem);
  transition: opacity .2s ease, transform .3s var(--loom-ease);
}

.loom-nav--desktop .loom-nav__item:hover .loom-nav__children,
.loom-nav--desktop .loom-nav__item:focus-within .loom-nav__children {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* The submenu hangs a little below its item. This bridges the strip between them: without it the pointer leaves
   the item on its way down, the submenu closes at once, and a sub-item can never be clicked. */
.loom-nav--desktop .loom-nav__children::before {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: calc(.55rem + 4px);
  content: "";
}

.loom-nav__children a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem .85rem;
  border-radius: .9rem;
  font-size: .8rem;
  font-weight: 650;
}

.loom-nav__children a:hover {
  background: var(--surface-alt);
}

.loom-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .65rem;
}

.loom-header__actions .loom-button {
  min-height: 2.8rem;
  padding: .7rem 1rem .7rem 1.2rem;
  font-size: .75rem;
}

.loom-header__phone {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: var(--text-secondary);
  font-size: .72rem;
  font-weight: 700;
}

/* Where modules draw their header widgets (a mini cart): theme slot header_actions. */
.loom-header__slot {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.loom-menu-button,
.loom-menu-close {
  display: none;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
}

.loom-menu-button {
  align-content: center;
  gap: .22rem;
}

.loom-menu-button span {
  display: block;
  width: 1rem;
  height: 2px;
  margin: 0 auto;
  border-radius: 999px;
  background: currentColor;
}

.loom-header--centered {
  position: relative;
  padding-top: 1.15rem;
  background: color-mix(in srgb, var(--background) 88%, transparent);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.loom-header__center-brand {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 4.25rem;
  border-bottom: 1px solid var(--border);
}

.loom-header__center-brand > a {
  justify-self: center;
}

.loom-header__center-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: .8rem;
}

.loom-header__edition {
  color: var(--text-secondary);
  font-size: .66rem;
  letter-spacing: .2em;
}

.loom-header__social {
  display: flex;
  justify-self: end;
  gap: .85rem;
}

.loom-header__social svg,
.loom-footer__social svg {
  width: .95rem;
  height: .95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.loom-header__center-nav {
  display: flex;
  justify-content: center;
  padding-top: .45rem;
}

.loom-mobile-panel {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  padding: 1rem;
  padding:
    max(1rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  background: var(--background);
  overscroll-behavior: contain;
}

.loom-mobile-panel.is-open {
  opacity: 1;
  transform: none;
}

.loom-mobile-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.loom-nav--mobile {
  display: grid;
  padding-block: 2rem;
}

.loom-nav--mobile .loom-nav__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.25rem;
  border-bottom: 1px solid var(--border);
}

.loom-nav--mobile .loom-nav__item > a {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 1;
  grid-template-columns: 3rem minmax(0, 1fr);
  min-height: 4.2rem;
  padding: .8rem 0;
  border-radius: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 6vw, 2.4rem);
  line-height: 1.1;
}

.loom-nav--mobile .loom-nav__item--parent > a {
  grid-column: 1;
}

.loom-nav--mobile .loom-nav__item > a:hover,
.loom-nav--mobile .loom-nav__item > a:focus-visible {
  color: var(--accent-ink);
}

.loom-nav--mobile small {
  align-self: start;
  padding-top: .25rem;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: .62rem;
}

.loom-nav__submenu-toggle {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  place-items: center;
  align-self: center;
  justify-self: end;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.loom-nav__submenu-toggle:hover,
.loom-nav__submenu-toggle:focus-visible {
  background: var(--surface-alt);
  color: var(--accent-ink);
}

.loom-nav__submenu-toggle .loom-icon {
  width: 1rem;
  height: 1rem;
  transition: transform .25s var(--loom-ease);
}

.loom-nav__submenu-toggle[aria-expanded="true"] .loom-icon {
  transform: rotate(180deg);
}

.loom-nav--mobile .loom-nav__children {
  position: static;
  display: grid;
  grid-column: 1 / -1;
  width: auto;
  margin: 0 0 .85rem 3rem;
  padding: .35rem;
  border: 0;
  border-radius: 1rem;
  background: transparent;
  box-shadow: none;
  color: var(--text-primary);
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.loom-nav--mobile .loom-nav__children a {
  min-width: 0;
  padding: .7rem .8rem;
  color: var(--text-primary);
  font-size: .84rem;
  line-height: 1.35;
  transition: background-color .2s ease, color .2s ease;
}

.loom-nav--mobile .loom-nav__children a:hover,
.loom-nav--mobile .loom-nav__children a:focus-visible {
  background: var(--surface-alt);
  color: var(--accent-ink);
  transform: none;
}

.loom-mobile-panel__slot {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding-block: .25rem .75rem;
}

.loom-mobile-panel__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.loom-breadcrumbs {
  width: var(--loom-shell);
  margin: 1rem auto 0;
  padding-inline: .5rem;
}

.loom-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-secondary);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
}

.loom-breadcrumbs li {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.loom-breadcrumbs i {
  width: 1.5rem;
  height: 1px;
  background: var(--border);
}

/* Hero ------------------------------------------------------------------- */

.loom-hero {
  --loom-hero-dock-lift: 3.5rem;
  padding: 0 var(--loom-gutter) clamp(2rem, 5vw, 5rem);
  margin: 0;
}

.loom-hero--with-offerings-dock {
  --loom-hero-dock-lift: 6rem;
}

.loom-hero__canvas {
  position: relative;
  width: 100%;
  max-width: 1560px;
  min-height: min(760px, calc(100svh - 7rem));
  margin-inline: auto;
  /* No overflow here: the form card and the feature strip inside carry shadows that a clipping box cuts off. */
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  border-radius: clamp(1.5rem, 4vw, 5rem);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 90%, transparent), var(--surface-alt));
  box-shadow: var(--loom-shadow);
}

.loom-hero__canvas::after {
  position: absolute;
  top: 8%;
  right: 5%;
  width: clamp(9rem, 18vw, 20rem);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--text-primary) 12%, transparent);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.loom-hero__layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(24rem, 1.12fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
  min-height: min(760px, calc(100svh - 7rem));
  padding: clamp(2rem, 5vw, 5.5rem);
}

.loom-hero--with-dock .loom-hero__layout {
  padding-bottom: calc(clamp(2rem, 5vw, 5.5rem) + var(--loom-hero-dock-lift));
}

.loom-hero__copy {
  position: relative;
  z-index: 3;
}

.loom-hero__signal {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--text-secondary);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.loom-hero__signal span {
  width: 2.5rem;
  height: 1px;
  background: var(--accent);
}

.loom-hero__copy > :is(h1, h2),
.loom-hero-slide__copy > :is(h1, h2) {
  max-width: 14ch;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2.7rem, 4.35vw, 5.25rem);
  font-weight: 600;
  letter-spacing: -.047em;
  line-height: .96;
  text-wrap: pretty;
}

.loom-hero__lead {
  max-width: 38rem;
  margin-top: 1.5rem;
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
}

.loom-hero__lead p {
  margin-bottom: .75rem;
}

.loom-hero__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem 1.25rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-secondary);
  font-size: .82rem;
  font-weight: 650;
}

.loom-hero__points li {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.loom-hero__points li > span {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 1.75rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--loom-pop) 20%, transparent);
  color: var(--primary);
}

.loom-hero__portrait,
.loom-editorial__media {
  position: relative;
  align-self: stretch;
  min-height: 30rem;
  overflow: hidden;
  border-radius: 48% 48% 2rem 2rem / 38% 38% 2rem 2rem;
  background: var(--surface-alt);
  transform: rotate(1.4deg);
}

.loom-hero__portrait img,
.loom-editorial__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.loom-hero__orbit {
  position: absolute;
  inset: 4%;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: inherit;
}

.loom-hero--cover .loom-hero__canvas {
  color: #fff;
  background: var(--text-primary);
}

.loom-hero--cover .loom-hero__layout {
  grid-template-columns: minmax(0, 1fr) minmax(10rem, .35fr);
}

.loom-hero--cover .loom-hero__copy {
  align-self: end;
  max-width: 70rem;
}

.loom-hero--cover .loom-hero__lead,
.loom-hero--cover .loom-hero__signal,
.loom-hero--cover .loom-hero__points {
  color: rgba(255, 255, 255, .78);
}

.loom-hero__cover-media,
.loom-hero__video,
.loom-hero__wash {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.loom-hero__cover-media {
  display: block;
  margin: 0;
}

.loom-hero__cover-media img,
.loom-hero__video video,
.loom-hero__video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.loom-hero__video iframe {
  transform: scale(1.08);
}

.loom-hero__wash {
  background:
    linear-gradient(90deg, rgba(5, 8, 14, .8), rgba(5, 8, 14, .12) 78%),
    linear-gradient(0deg, rgba(5, 8, 14, .62), transparent 62%);
}

.loom-hero__video-label {
  position: absolute;
  right: clamp(1.5rem, 4vw, 4rem);
  bottom: clamp(1.5rem, 4vw, 4rem);
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  background: rgba(0, 0, 0, .16);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.loom-hero__form-card {
  position: relative;
  z-index: 4;
  padding: clamp(1.25rem, 2.5vw, 2.25rem);
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  border-radius: 2.2rem 2.2rem .75rem 2.2rem;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .2);
  color: var(--text-primary);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.loom-hero--with-form .loom-hero__layout {
  grid-template-columns: minmax(0, 1fr) minmax(22rem, .72fr);
}

.loom-hero__dock {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(86%, 1180px);
  min-height: 7rem;
  margin: calc(0rem - var(--loom-hero-dock-lift)) auto 2rem;
  padding: 1.25rem 2rem;
  border: 1px solid var(--border);
  border-radius: 1.5rem 1.5rem .45rem 1.5rem;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 20px 55px color-mix(in srgb, var(--text-primary) 13%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.loom-hero__dock--offerings {
  display: block;
  width: min(94%, 1320px);
}

.loom-hero__dock-title {
  margin: 0 0 1rem;
  color: var(--text-secondary);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.loom-hero-offerings {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.loom-hero-offering {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem .9rem;
  padding: 1.25rem;
  border-left: 1px solid var(--border);
  transition: background-color .2s ease;
}

.loom-hero-offering:first-child {
  border-left: 0;
}

.loom-hero-offering:nth-child(n + 5) {
  border-top: 1px solid var(--border);
}

.loom-hero-offering:nth-child(4n + 1) {
  border-left: 0;
}

.loom-hero-offering:hover {
  background: var(--surface-alt);
}

.loom-hero-offering__number {
  grid-column: 1 / -1;
  color: var(--text-secondary);
  font-size: .6rem;
  font-weight: 750;
  letter-spacing: .12em;
}

.loom-hero-offering__icon {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  background: var(--primary);
  color: var(--background);
}

.loom-hero-offering strong {
  align-self: center;
  font-family: var(--font-heading);
  font-size: 1rem;
}

.loom-hero-offering p {
  grid-column: 1 / -1;
  margin: .2rem 0 0;
  color: var(--text-secondary);
  font-size: .76rem;
  line-height: 1.5;
}

.loom-hero-slider,
.loom-hero-slider .swiper-wrapper,
.loom-hero-slider .swiper-slide {
  min-height: min(760px, calc(100svh - 7rem));
}

.loom-hero-slider {
  width: 100%;
  overflow: hidden;
  border-radius: inherit;
}

.loom-hero-slider__proof {
  position: absolute;
  top: clamp(1.5rem, 4vw, 3.5rem);
  right: clamp(1.5rem, 4vw, 4rem);
  z-index: 5;
  padding: .7rem 1rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(5, 9, 16, .34);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.loom-hero-slider__contact {
  position: relative;
  z-index: 7;
  display: grid;
  grid-template-columns: minmax(14rem, .65fr) minmax(24rem, 1.35fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  width: min(92%, 1120px);
  margin: -5rem auto 2rem;
  padding: clamp(1.4rem, 3vw, 2.8rem);
  border: 1px solid var(--border);
  border-radius: 2rem 2rem .55rem 2rem;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--loom-shadow);
  color: var(--text-primary);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.loom-hero-slider__contact > div {
  align-self: start;
}

.loom-hero-slide {
  position: relative;
  display: flex;
  align-items: end;
  padding: clamp(2rem, 6vw, 7rem);
  color: #fff;
}

.loom-hero--with-dock .loom-hero-slide {
  padding-bottom: calc(clamp(2rem, 6vw, 7rem) + var(--loom-hero-dock-lift));
}

.loom-hero-slide__media,
.loom-hero-slide__shade {
  position: absolute;
  inset: 0;
}

.loom-hero-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.loom-hero-slide__shade {
  background: linear-gradient(90deg, rgba(4, 8, 15, .82), rgba(4, 8, 15, .05) 78%),
    linear-gradient(0deg, rgba(4, 8, 15, .66), transparent 60%);
}

.loom-hero-slide__copy {
  position: relative;
  z-index: 2;
  max-width: 72rem;
}

.loom-hero-slide__copy .loom-hero__lead,
.loom-hero-slide__copy .loom-hero__signal {
  color: rgba(255, 255, 255, .78);
}

.theme-swiper[data-swiper-skin="loom"],
[data-swiper-scope][data-swiper-skin="loom"] {
  --theme-swiper-accent: var(--accent-ink, var(--accent));
  --theme-swiper-control-radius: 50% 50% 50% .45rem;
  --theme-swiper-control-bg: var(--surface);
  --theme-swiper-control-hover-bg: var(--accent);
  --theme-swiper-control-hover-fg: var(--on-accent, #000);
  --theme-swiper-dot-active: var(--accent-ink, var(--accent));
}

@supports (color: color-mix(in srgb, #000 50%, transparent)) {
  .theme-swiper[data-swiper-skin="loom"],
  [data-swiper-scope][data-swiper-skin="loom"] {
    --theme-swiper-control-bg: color-mix(in srgb, var(--surface) 88%, transparent);
  }
}

/* Forms ------------------------------------------------------------------ */

.loom-form {
  display: grid;
  gap: .85rem;
}

.loom-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

.loom-field {
  display: grid;
  gap: .35rem;
}

.loom-field > span {
  color: var(--text-secondary);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.loom-field input,
.loom-field select,
.loom-field textarea {
  width: 100%;
  min-height: 3rem;
  padding: .75rem 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  resize: vertical;
  transition: border-color .2s ease;
}

.loom-field input:focus,
.loom-field select:focus,
.loom-field textarea:focus {
  border-color: var(--accent);
}

.loom-field input::placeholder,
.loom-field textarea::placeholder {
  color: color-mix(in srgb, var(--text-secondary) 65%, transparent);
}

.loom-check {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  color: var(--text-secondary);
  font-size: .8rem;
}

.loom-check input {
  accent-color: var(--accent);
}

.loom-button--submit {
  width: 100%;
  margin-top: .35rem;
  border: 0;
  cursor: pointer;
}

.loom-form__error {
  color: #c73544;
  font-size: .8rem;
}

.loom-form__success {
  display: grid;
  justify-items: start;
  gap: .65rem;
  min-height: 18rem;
  align-content: center;
}

.loom-form__success-icon {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  margin-bottom: .5rem;
  border-radius: 50% 50% 50% .65rem;
  background: color-mix(in srgb, var(--loom-pop) 35%, var(--surface));
  color: var(--text-primary);
}

.loom-form__success-icon svg {
  width: 1.65rem;
  height: 1.65rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.loom-form__success h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 3vw, 2.65rem);
  line-height: 1;
}

.loom-form__success p {
  max-width: 34rem;
  margin: 0;
  color: var(--text-secondary);
}

.loom-form[aria-busy="true"] .loom-button--submit {
  cursor: wait;
  opacity: .7;
}

.loom-form-intro {
  margin-bottom: 1rem;
  color: var(--text-secondary);
  font-size: .85rem;
}

/* Editorial content ------------------------------------------------------ */

.loom-editorial > .loom-shell {
  padding: clamp(1.25rem, 3vw, 3rem);
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: var(--loom-radius);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.loom-editorial__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(24rem, 1.2fr);
  gap: clamp(2rem, 7vw, 8rem);
  align-items: center;
}

.loom-editorial--reverse .loom-editorial__copy {
  order: 2;
}

.loom-editorial--reverse .loom-editorial__media,
.loom-editorial--reverse .loom-editorial__statement {
  order: 1;
}

.loom-editorial__copy {
  padding: clamp(1rem, 4vw, 4rem);
}

.loom-editorial__rule {
  display: block;
  width: 7rem;
  height: .35rem;
  margin-top: 2.2rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--loom-pop));
}

.loom-editorial__media {
  min-height: clamp(29rem, 56vw, 48rem);
  transform: rotate(-1deg);
}

.loom-editorial--reverse .loom-editorial__media {
  border-radius: 2rem 48% 48% 2rem / 2rem 38% 38% 2rem;
  transform: rotate(1deg);
}

.loom-editorial__media figcaption {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .75rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .32);
  color: #fff;
  font-size: .65rem;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.loom-editorial__media figcaption i {
  width: 2rem;
  height: 1px;
  background: currentColor;
}

.loom-editorial__statement {
  display: grid;
  place-items: center;
  min-height: 30rem;
  border-radius: 50% 50% 1.25rem 50%;
  background: var(--primary);
  color: var(--background);
}

.loom-editorial__statement span {
  font-family: var(--font-heading);
  font-size: 13rem;
  line-height: .5;
}

.loom-editorial__facts {
  position: relative;
  z-index: 2;
  width: min(88%, 1180px);
  margin: -3rem auto 0;
}

.loom-story-facts {
  display: grid;
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  background: var(--surface);
  box-shadow: var(--loom-shadow);
}

.loom-story-facts--stats {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.loom-story-facts--stats > div {
  display: grid;
  gap: .25rem;
  padding: 1.5rem;
  border-left: 1px solid var(--border);
}

.loom-story-facts--stats > div:first-child {
  border-left: 0;
}

.loom-story-facts--stats strong {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 3rem);
}

.loom-story-facts--stats small {
  color: var(--text-secondary);
}

.loom-story-facts--features {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: .5rem;
}

.loom-story-facts--features article {
  display: grid;
  grid-template-columns: 2.7rem 1fr;
  gap: 1rem;
  padding: 1.1rem;
}

.loom-story-facts--features article > span {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  background: var(--surface-alt);
}

.loom-story-facts--features strong {
  font-family: var(--font-heading);
}

.loom-story-facts--features p {
  margin: .25rem 0 0;
  color: var(--text-secondary);
  font-size: .78rem;
}

.loom-article__masthead {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(22rem, 1.1fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: end;
  margin-bottom: clamp(3.5rem, 7vw, 7rem);
}

.loom-article__masthead--text-only {
  grid-template-columns: minmax(0, 56rem);
}

.loom-article__masthead-copy {
  min-width: 0;
}

.loom-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.1rem;
  margin-bottom: 1.25rem;
  color: var(--text-secondary);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.loom-article__masthead h1 {
  max-width: 14ch;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 3.9vw, 4.75rem);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: .98;
  text-wrap: pretty;
}

.loom-article__dek {
  max-width: 38rem;
  margin: 1.4rem 0 0;
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
}

.loom-article__cover {
  height: clamp(22rem, 38vw, 38rem);
  overflow: hidden;
  border-radius: 48% 1.5rem 1.5rem 1.5rem / 38% 1.5rem 1.5rem 1.5rem;
  background: var(--surface-alt);
}

.loom-article__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.loom-article__layout {
  display: grid;
  grid-template-columns: 10rem minmax(0, var(--loom-reading));
  gap: clamp(2rem, 6vw, 6rem);
  justify-content: center;
}

.loom-article__rail {
  position: sticky;
  top: 8rem;
  align-self: start;
  display: grid;
  gap: .8rem;
  color: var(--text-secondary);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.loom-article__rail span {
  color: var(--accent-ink);
  font-family: var(--font-heading);
  font-size: 2rem;
}

.loom-article__rail i {
  width: 100%;
  height: 1px;
  background: var(--border);
}

.loom-duet__grid {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--loom-radius);
  background: var(--surface);
}

.loom-duet__panel {
  position: relative;
  min-height: 30rem;
  padding: clamp(2rem, 5vw, 5.5rem);
}

.loom-duet__panel--primary {
  background: var(--primary);
  color: var(--background);
}

.loom-duet__panel--primary .loom-rich-text {
  color: color-mix(in srgb, var(--background) 74%, transparent);
}

.loom-duet__panel :is(h1, h2) {
  margin: 0 0 1.5rem;
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3.4vw, 3.75rem);
  letter-spacing: -.045em;
  line-height: .98;
}

.loom-duet__index {
  position: absolute;
  right: 1.5rem;
  bottom: .75rem;
  color: color-mix(in srgb, currentColor 13%, transparent);
  font-family: var(--font-heading);
  font-size: 10rem;
  line-height: 1;
}

.loom-index__list {
  display: grid;
  border-top: 1px solid var(--border);
}

.loom-index-card {
  display: grid;
  grid-template-columns: 4rem minmax(7rem, .35fr) minmax(0, 1fr) 3rem;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: center;
  min-height: 10rem;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--border);
  transition: padding .3s var(--loom-ease), background-color .2s ease;
}

.loom-index-card:hover {
  padding-inline: 1rem;
  background: color-mix(in srgb, var(--surface) 65%, transparent);
}

.loom-index-card__number {
  color: var(--text-secondary);
  font-size: .68rem;
  letter-spacing: .12em;
}

.loom-index-card figure {
  height: 7rem;
  margin: 0;
  overflow: hidden;
  border-radius: 999px;
}

.loom-index-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--loom-ease);
}

.loom-index-card:hover figure img {
  transform: scale(1.08);
}

.loom-index-card h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.1vw, 2.4rem);
  letter-spacing: -.035em;
}

.loom-index-card p {
  max-width: 38rem;
  margin: .35rem 0 0;
  color: var(--text-secondary);
  font-size: .82rem;
}

.loom-index-card__arrow {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border: 1px solid var(--border);
  border-radius: 50%;
}

/* Services / commerce ---------------------------------------------------- */

.loom-services__mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 1rem;
}

.loom-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 21rem;
  padding: clamp(1.35rem, 2.8vw, 2.6rem);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 1.25rem 1.25rem .35rem 1.25rem;
  background: var(--surface);
  transition: transform .4s var(--loom-ease), background-color .3s ease;
}

.loom-service-card:nth-child(3n) {
  border-radius: 1.25rem .35rem 1.25rem 1.25rem;
}

.loom-service-card--lead {
  grid-column: span 2;
  min-height: 30rem;
  background:
    radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--loom-pop) 36%, transparent), transparent 13rem),
    var(--primary);
  color: var(--background);
}

.loom-service-card:hover {
  z-index: 2;
  background-color: var(--surface-alt);
  transform: translateY(-.5rem) rotate(-.4deg);
}

.loom-service-card--lead:hover {
  background-color: var(--primary-alt);
}

.loom-service-card__index {
  color: color-mix(in srgb, currentColor 55%, transparent);
  font-size: .64rem;
  letter-spacing: .14em;
}

.loom-service-card__icon {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  margin: 2.5rem 0 auto;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--primary);
}

.loom-service-card--lead .loom-service-card__icon {
  background: color-mix(in srgb, var(--background) 18%, transparent);
  color: var(--background);
}

.loom-service-card h3 {
  max-width: 15ch;
  margin: 1.5rem 0 .7rem;
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2vw, 2.5rem);
  letter-spacing: -.04em;
  line-height: 1;
}

.loom-service-card p {
  max-width: 35rem;
  margin: 0;
  color: color-mix(in srgb, currentColor 68%, transparent);
  font-size: .85rem;
}

.loom-service-card__arrow {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  border-radius: 50%;
}

.loom-services__cta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.25rem;
  align-items: center;
  margin-top: 1rem;
  padding: 1.2rem 1.2rem 1.2rem 1.5rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
}

.loom-services__cta > span {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
}

.loom-services__cta h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2vw, 2rem);
}

.loom-features__list {
  border-top: 1px solid var(--border);
}

.loom-feature-row {
  display: grid;
  grid-template-columns: 4rem 4.5rem minmax(12rem, .7fr) minmax(0, 1fr);
  gap: 1.2rem;
  align-items: center;
  min-height: 9rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.loom-feature-row__index {
  color: var(--text-secondary);
  font-size: .65rem;
  letter-spacing: .1em;
}

.loom-feature-row__icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50% 50% 50% .65rem;
  background: var(--surface-alt);
  color: var(--accent-ink);
}

.loom-feature-row h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.2vw, 2.3rem);
  letter-spacing: -.035em;
}

.loom-feature-row p {
  margin: 0;
  color: var(--text-secondary);
}

.loom-pricing > .loom-shell {
  width: min(95vw, 1540px);
  padding: clamp(1.25rem, 3vw, 3rem);
  border-radius: var(--loom-radius);
  background: var(--text-primary);
  color: var(--background);
}

.loom-pricing .loom-section-head__marker,
.loom-pricing .loom-section-intro {
  color: color-mix(in srgb, var(--background) 68%, transparent);
}

.loom-pricing__layout {
  display: grid;
}

.loom-pricing__layout > * {
  min-width: 0;
}

.loom-pricing__layout--with-faq {
  grid-template-columns: minmax(0, 1.3fr) minmax(19rem, .7fr);
  gap: 1rem;
}

.loom-pricing__plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: .75rem;
  align-items: stretch;
}

.loom-price-card {
  display: flex;
  flex-direction: column;
  min-height: 37rem;
  padding: clamp(1.25rem, 2.5vw, 2.3rem);
  border: 1px solid color-mix(in srgb, var(--background) 17%, transparent);
  border-radius: 1.4rem;
  background: color-mix(in srgb, var(--background) 6%, transparent);
}

.loom-price-card--featured {
  background: var(--accent);
  color: var(--on-accent);
  transform: translateY(-1.1rem);
}

.loom-price-card header {
  position: relative;
  min-height: 13rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

.loom-price-card__index {
  color: color-mix(in srgb, currentColor 55%, transparent);
  font-size: .62rem;
}

.loom-price-card__icon {
  position: absolute;
  top: 0;
  right: 0;
}

.loom-price-card header small {
  display: inline-block;
  margin: 1rem 0 0;
  padding: .35rem .55rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.loom-price-card h3 {
  margin: 2.2rem 0 .5rem;
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 2vw, 2.2rem);
}

.loom-price-card__price {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 4rem);
  letter-spacing: -.05em;
  line-height: 1;
}

.loom-price-card ul {
  display: grid;
  gap: .65rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
  font-size: .8rem;
}

.loom-price-card li {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
}

.loom-price-card li.is-excluded {
  opacity: .38;
  text-decoration: line-through;
}

.loom-price-card footer {
  margin-top: auto;
}

.loom-price-card .loom-button {
  width: 100%;
  border-color: var(--background);
  background: var(--background);
  color: var(--text-primary);
}

.loom-pricing__answers {
  padding: 1.4rem;
  border-radius: 1.4rem;
  background: var(--background);
  color: var(--text-primary);
}

.loom-areas__layout {
  display: grid;
  grid-template-columns: minmax(20rem, .7fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 7vw, 8rem);
  align-items: start;
}

.loom-areas__layout .loom-section-head {
  position: sticky;
  top: 8rem;
  grid-template-columns: 4rem 1fr;
  margin: 0;
}

.loom-areas__cloud {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.loom-areas__cloud > * {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--font-heading);
  font-size: clamp(.95rem, 1.5vw, 1.3rem);
  transition: transform .25s var(--loom-ease), background-color .2s ease;
}

.loom-areas__cloud > *:nth-child(3n) {
  transform: translateY(1rem);
}

.loom-areas__cloud > a:hover {
  background: var(--primary);
  color: var(--background);
  transform: translateY(-.25rem);
}

.loom-areas__cloud small,
.loom-areas__cloud a span {
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-size: .58rem;
}

.loom-journey__layout {
  position: relative;
  display: grid;
  max-width: 58rem;
  margin-inline: auto;
}

.loom-journey__layout--paired {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: none;
  gap: clamp(2rem, 6vw, 7rem);
}

.loom-journey__column {
  position: relative;
}

.loom-journey__column::before {
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  left: 1.6rem;
  width: 1px;
  background: var(--border);
  content: "";
}

.loom-journey-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 1.5rem;
  padding-bottom: 2.7rem;
}

.loom-journey-step__marker {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid var(--border);
  border-radius: 50% 50% .45rem 50%;
  background: var(--surface);
  color: var(--accent-ink);
  font-size: .65rem;
  font-weight: 800;
}

.loom-journey-step time {
  display: block;
  margin-bottom: .35rem;
  color: var(--accent-ink);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.loom-journey-step h3 {
  margin: 0 0 .55rem;
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2vw, 2rem);
}

.loom-journey-step p {
  margin: 0;
  color: var(--text-secondary);
  font-size: .86rem;
}

.loom-contact__canvas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(24rem, .72fr);
  gap: clamp(2rem, 7vw, 8rem);
  padding: clamp(2rem, 6vw, 7rem);
  overflow: hidden;
  border-radius: 2rem 2rem .5rem 2rem;
  background:
    radial-gradient(circle at 8% 88%, color-mix(in srgb, var(--loom-pop) 30%, transparent), transparent 22rem),
    var(--primary);
  color: var(--background);
}

.loom-contact__intro :is(h1, h2) {
  max-width: 12ch;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2.15rem, 3.65vw, 4rem);
  letter-spacing: -.045em;
  line-height: 1;
}

.loom-contact__intro > .loom-eyebrow,
.loom-contact__faq .loom-eyebrow {
  color: var(--background);
}

.loom-contact__intro > .loom-rich-text {
  max-width: 35rem;
  margin-top: 1.5rem;
  color: color-mix(in srgb, var(--background) 72%, transparent);
}

.loom-contact__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 1rem 0;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius: 50% 50% .65rem 50%;
}

.loom-contact__details {
  display: grid;
  gap: .65rem;
  margin-top: 2rem;
}

.loom-contact__details > span {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .84rem;
}

.loom-contact__form,
.loom-faq__contact {
  padding: clamp(1.4rem, 3vw, 2.7rem);
  border-radius: 1.7rem;
  background: var(--surface);
  color: var(--text-primary);
}

.loom-contact__faq {
  max-width: 38rem;
  margin-top: 2rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--background) 18%, transparent);
  border-radius: 1rem;
}

.loom-contact__faq .loom-faq-question {
  color: var(--background);
}

.loom-contact__faq .loom-faq-answer {
  color: color-mix(in srgb, var(--background) 75%, transparent);
}

.loom-cta {
  padding-block: clamp(2rem, 5vw, 5rem);
}

.loom-cta__canvas {
  position: relative;
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) minmax(16rem, .75fr);
  gap: 2rem;
  align-items: end;
  min-height: 26rem;
  padding: clamp(2rem, 6vw, 7rem);
  overflow: hidden;
  border-radius: 50% 2rem 2rem 2rem / 28% 2rem 2rem 2rem;
  background: var(--text-primary);
  color: var(--background);
}

.loom-cta__copy,
.loom-cta__actions {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.loom-cta__actions {
  width: 100%;
  max-width: 34rem;
  justify-self: end;
}

.loom-cta__actions .loom-actions {
  justify-content: flex-end;
  margin-top: 0;
}

.loom-cta__copy > span {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 2rem;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 50%;
}

.loom-cta :is(h1, h2) {
  max-width: 12ch;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 3.45vw, 4rem);
  letter-spacing: -.045em;
  line-height: .98;
}

.loom-cta__copy > div {
  max-width: 38rem;
  margin-top: 1.3rem;
  color: color-mix(in srgb, currentColor 72%, transparent);
}

.loom-cta__canvas > figure,
.loom-cta__wash {
  position: absolute;
  inset: 0;
}

.loom-cta__canvas > figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.loom-cta__wash {
  background: linear-gradient(90deg, rgba(5, 7, 12, .82), rgba(5, 7, 12, .18));
}

/* Proof / testimonials --------------------------------------------------- */

.loom-review-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .65rem;
}

.loom-review-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem .8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: .7rem;
}

.loom-stars,
.loom-review-star {
  color: var(--accent-ink);
  letter-spacing: -.1em;
}

.loom-review-pills--light .loom-review-pill {
  border-color: rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .82);
}

.loom-review-pills--light .loom-stars,
.loom-review-pills--light .loom-review-star {
  color: currentColor;
}

.loom-proof-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  width: 100%;
}

.loom-proof-stat {
  display: grid;
  justify-items: center;
  min-width: 0;
  padding: .75rem 1rem;
  border-left: 1px solid var(--border);
  text-align: center;
}

.loom-proof-stat:first-child {
  border-left: 0;
}

.loom-proof-stat strong {
  display: block;
  max-width: 100%;
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 2.5vw, 2.5rem);
  line-height: 1;
  overflow-wrap: anywhere;
}

.loom-proof-stat span {
  display: block;
  max-width: 100%;
  color: var(--text-secondary);
  font-size: .68rem;
  overflow-wrap: anywhere;
}

.loom-proof-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 3rem);
  width: 100%;
}

.loom-proof-logo {
  display: grid;
  place-items: center;
  gap: .35rem;
  min-width: 6rem;
  color: var(--text-secondary);
  font-size: .65rem;
}

.loom-proof-logo img {
  width: auto;
  max-width: 8rem;
  height: 2.5rem;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .72;
}

.loom-testimonials__heading {
  position: relative;
}

.loom-testimonials__glyph {
  position: absolute;
  top: -4rem;
  right: 3vw;
  color: color-mix(in srgb, var(--accent) 14%, transparent);
  font-family: var(--font-heading);
  font-size: clamp(9rem, 20vw, 22rem);
  line-height: .6;
}

.loom-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.loom-testimonial-carousel {
  padding: 1rem 0 4rem;
}

.loom-quote-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 27rem;
  padding: clamp(1.5rem, 3vw, 3rem);
  border: 1px solid var(--border);
  border-radius: 1.5rem 1.5rem .4rem 1.5rem;
  background: var(--surface);
}

.loom-quote-card__mark {
  color: var(--accent-ink);
  font-family: var(--font-heading);
  font-size: 5rem;
  line-height: .65;
}

.loom-quote-card blockquote {
  margin: 1rem 0 2rem;
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2vw, 2.1rem);
  letter-spacing: -.025em;
  line-height: 1.24;
}

.loom-quote-card footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .8rem;
  align-items: center;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.loom-quote-card footer figure {
  width: 2.8rem;
  height: 2.8rem;
  margin: 0;
  overflow: hidden;
  border-radius: 50%;
}

.loom-quote-card footer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.loom-quote-card footer strong,
.loom-quote-card footer span {
  display: block;
}

.loom-quote-card footer strong {
  font-size: .8rem;
}

.loom-quote-card footer span,
.loom-quote-card footer small {
  color: var(--text-secondary);
  font-size: .65rem;
}

.loom-testimonials__proof {
  position: relative;
  z-index: 2;
  width: min(92%, 1160px);
  margin: -1rem auto 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-alt);
}

.loom-proof-band {
  padding-block: 1.5rem;
}

.loom-proof-band__inner {
  display: grid;
  grid-template-columns: auto 1fr 5rem;
  gap: 1.5rem;
  align-items: center;
  min-height: 5.5rem;
  padding: 1rem 1.5rem;
  border-block: 1px solid var(--border);
}

.loom-proof-band__label {
  font-family: var(--font-heading);
  font-size: .9rem;
}

.loom-proof-band__line {
  height: 1px;
  background: var(--accent);
}

.loom-stats__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border-radius: clamp(4rem, 8vw, 7rem) 2rem 2rem 2rem;
  background: color-mix(in srgb, var(--background) 18%, var(--primary));
  color: var(--background);
}

.loom-stats article {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-column: span 3;
  min-height: 20rem;
  padding: 2rem;
  background: var(--primary);
}

@media (min-width: 901px) {
  .loom-stats__grid:has(> article:only-child) > article {
    grid-column: 1 / -1;
  }

  .loom-stats__grid:has(> article:nth-child(2):last-child) > article {
    grid-column: span 6;
  }

  .loom-stats__grid:has(> article:nth-child(3):last-child) > article,
  .loom-stats__grid:has(> article:nth-child(6):last-child) > article {
    grid-column: span 4;
  }

  .loom-stats__grid:has(> article:nth-child(5):last-child) > article {
    grid-column: span 4;
  }

  .loom-stats__grid:has(> article:nth-child(5):last-child) > article:nth-last-child(-n + 2) {
    grid-column: span 6;
  }

  .loom-stats__grid:has(> article:nth-child(7):last-child) > article:nth-child(n + 5) {
    grid-column: span 4;
  }
}

.loom-stats__index {
  color: color-mix(in srgb, currentColor 58%, transparent);
  font-size: .65rem;
}

.loom-stats article i {
  margin: 3rem 0 auto;
}

.loom-stats article strong {
  margin-top: auto;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 2.8vw, 3.75rem);
  letter-spacing: -.055em;
  line-height: 1;
}

.loom-stats article p {
  margin: .75rem 0 0;
  color: color-mix(in srgb, currentColor 70%, transparent);
  font-size: .8rem;
}

.loom-trust__layout {
  display: grid;
  grid-template-columns: minmax(18rem, .65fr) minmax(0, 1.35fr);
  gap: clamp(2rem, 7vw, 8rem);
  align-items: center;
}

.loom-trust__layout .loom-section-head {
  grid-template-columns: 4rem 1fr;
  margin: 0;
}

.loom-trust__marks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.loom-trust__marks figure {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 10rem;
  margin: 0;
  padding: 1.5rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 52%, transparent);
}

.loom-trust__marks img {
  max-width: 8rem;
  max-height: 4rem;
  object-fit: contain;
  filter: grayscale(1);
}

.loom-trust__marks span {
  position: absolute;
  top: .6rem;
  left: .7rem;
  color: var(--text-secondary);
  font-size: .55rem;
}

.loom-logos {
  padding-block: 2rem;
}

.loom-logos__heading {
  margin: 0 0 1rem;
  color: var(--text-secondary);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}

.loom-logo-marquee {
  padding-block: 1rem;
  border-block: 1px solid var(--border);
}

.loom-logo-slide {
  width: auto !important;
  padding-inline: 1.6rem;
}

.loom-logo-slide img,
.loom-logos__static img {
  width: auto;
  max-width: 10rem;
  height: 3rem;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .65;
  transition: filter .2s ease, opacity .2s ease;
}

.loom-logo-slide a:hover img,
.loom-logos__static a:hover img {
  filter: none;
  opacity: 1;
}

.loom-logos__static {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem 4rem;
  padding-block: 1.5rem;
  border-block: 1px solid var(--border);
}

.loom-accreditations__ledger {
  border-top: 1px solid var(--border);
}

.loom-accreditations__ledger article {
  display: grid;
  grid-template-columns: 3rem 8rem 1fr auto;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: center;
  min-height: 10rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.loom-accreditations__index {
  color: var(--text-secondary);
  font-size: .62rem;
}

.loom-accreditations figure {
  display: grid;
  place-items: center;
  height: 6rem;
  margin: 0;
  padding: .7rem;
  border-radius: 50%;
  background: var(--surface);
}

.loom-accreditations figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.loom-accreditations h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2vw, 2rem);
}

.loom-accreditations p,
.loom-accreditations small {
  display: block;
  max-width: 42rem;
  margin: .35rem 0 0;
  color: var(--text-secondary);
  font-size: .76rem;
}

.loom-accreditations article > a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--accent-ink);
  font-size: .75rem;
  font-weight: 800;
}

/* FAQ / visual media ----------------------------------------------------- */

.loom-faq__layout {
  display: grid;
  max-width: 62rem;
  margin-inline: auto;
}

.loom-faq__layout--conversation {
  grid-template-columns: minmax(0, 1fr) minmax(22rem, .8fr);
  max-width: none;
  gap: clamp(1rem, 4vw, 4rem);
  align-items: start;
}

.loom-faq-list {
  border-top: 1px solid var(--border);
}

.loom-faq-item {
  border-bottom: 1px solid var(--border);
}

.loom-faq-question {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 1.5rem;
  gap: 1rem;
  align-items: center;
  width: 100%;
  padding: 1.35rem 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
}

.loom-faq-question > span:nth-child(2) {
  min-width: 0;
  overflow-wrap: anywhere;
}

.loom-faq-question__number {
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: .62rem;
}

.loom-faq-question i {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
}

.loom-faq-question i::before,
.loom-faq-question i::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  content: "";
  transition: transform .25s ease;
}

.loom-faq-question i::after {
  transform: rotate(90deg);
}

.loom-faq-question[aria-expanded="true"] i::after {
  transform: rotate(0);
}

.loom-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows .4s var(--loom-ease);
}

.loom-faq-answer > * {
  min-height: 0;
  padding: 0 2rem 0 4rem;
  overflow: hidden;
}

.loom-faq-question[aria-expanded="true"] + .loom-faq-answer {
  grid-template-rows: 1fr;
}

.loom-faq-question[aria-expanded="true"] + .loom-faq-answer > * {
  padding-bottom: 1.5rem;
}

.loom-gallery__mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(8rem, 14vw, 14rem);
  grid-auto-flow: dense;
  gap: .75rem;
}

.loom-gallery-item {
  position: relative;
  grid-column: span 4;
  grid-row: span 2;
  width: 100%;
  min-height: 18rem;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 1.2rem;
  background: var(--surface-alt);
  cursor: zoom-in;
}

.loom-gallery__mosaic .loom-gallery-item:nth-child(6n + 1) {
  grid-column: span 7;
  grid-row: span 3;
}

.loom-gallery__mosaic .loom-gallery-item:nth-child(6n + 2) {
  grid-column: span 5;
  grid-row: span 3;
  border-radius: 45% 1.2rem 1.2rem 1.2rem;
}

.loom-gallery__mosaic .loom-gallery-item:nth-child(6n) {
  grid-column: 1 / -1;
  grid-row: span 3;
}

.loom-gallery__mosaic .loom-gallery-item:nth-child(6n + 1):last-child,
.loom-gallery__mosaic .loom-gallery-item:nth-child(6n + 3):last-child {
  grid-column: 1 / -1;
}

.loom-gallery__mosaic .loom-gallery-item:nth-child(6n + 3):nth-last-child(2),
.loom-gallery__mosaic .loom-gallery-item:nth-child(6n + 4):last-child {
  grid-column: span 6;
}

.loom-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--loom-ease);
}

.loom-gallery-item:hover img {
  transform: scale(1.055);
}

.loom-gallery-item > span {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  padding: .45rem .55rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .32);
  color: #fff;
  font-size: .58rem;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.loom-gallery-carousel {
  padding-bottom: .25rem;
}

.loom-gallery-carousel .loom-gallery-item {
  height: clamp(20rem, 39vw, 34rem);
}

.loom-gallery__comparison {
  margin-top: clamp(2rem, 5vw, 5rem);
  padding: clamp(1.25rem, 3vw, 3rem);
  border-radius: var(--loom-radius);
  background: var(--text-primary);
  color: var(--background);
}

.loom-before-after__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.loom-comparison {
  margin: 0;
}

.loom-comparison__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 1.35rem;
  background: var(--surface-alt);
  --compare-position: 50%;
}

.loom-comparison__after,
.loom-comparison__before,
.loom-comparison__before img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.loom-comparison__before {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--compare-position);
  overflow: hidden;
}

.loom-comparison__before img {
  /*
   * A 50/50 no-script fallback. The interaction layer keeps this width in
   * sync with the range value without relying on unsupported CSS division.
   */
  width: 200%;
  max-width: none;
}

.loom-comparison__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--compare-position);
  width: 2px;
  background: #fff;
  transform: translateX(-1px);
}

.loom-comparison__handle span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #fff;
  color: #111;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
  transform: translate(-50%, -50%);
}

.loom-comparison__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.loom-comparison__label {
  position: absolute;
  bottom: .8rem;
  padding: .45rem .6rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .4);
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.loom-comparison__label--before {
  left: .8rem;
}

.loom-comparison__label--after {
  right: .8rem;
}

.loom-comparison figcaption {
  padding: .75rem .25rem;
  color: var(--text-secondary);
  font-size: .75rem;
}

.loom-video__frame,
.loom-embed__frame {
  position: relative;
  margin: 0;
  padding: clamp(.5rem, 1vw, .85rem);
  border: 1px solid var(--border);
  border-radius: var(--loom-radius);
  background: var(--surface);
  box-shadow: var(--loom-shadow);
  transform: rotate(-.35deg);
}

.loom-video__frame iframe,
.loom-video__frame video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: calc(var(--loom-radius) - .55rem);
  background: #000;
}

.loom-video__frame figcaption {
  padding: .85rem 1rem .2rem;
  color: var(--text-secondary);
  font-size: .76rem;
}

.loom-video__corner {
  position: absolute;
  top: -.8rem;
  right: 8%;
  width: 7rem;
  height: 1.6rem;
  background: color-mix(in srgb, var(--loom-glow) 72%, transparent);
  transform: rotate(3deg);
}

.loom-embed__frame iframe {
  width: 100%;
  min-height: 24rem;
  border: 0;
  border-radius: calc(var(--loom-radius) - .55rem);
  background: var(--surface);
}

/* A player or page waiting for cookie consent (theme_frame) takes the frame's place and shape. */
.loom-video__frame .pagestic-frame,
.loom-embed__frame .pagestic-frame {
  border-radius: calc(var(--loom-radius) - .55rem);
}

.loom-embed__frame .pagestic-frame {
  min-height: 24rem;
}

.loom-hero__video .pagestic-frame {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
  background: transparent;
}

.loom-portfolio__proof-label {
  margin: 0 0 1rem;
  color: var(--text-secondary);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.loom-portfolio__mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.loom-project-card {
  grid-column: span 5;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 1.4rem;
  background: var(--surface);
}

.loom-project-card--lead {
  grid-column: span 7;
  grid-row: span 2;
}

.loom-project-card:nth-child(3n) {
  grid-column: span 7;
}

.loom-project-card__gallery {
  position: relative;
  height: clamp(18rem, 31vw, 31rem);
  overflow: hidden;
  background: var(--surface-alt);
}

.loom-project-card__media {
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--surface-alt);
  cursor: zoom-in;
}

.loom-project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--loom-ease);
}

.loom-project-card:hover .loom-project-card__media img {
  transform: scale(1.04);
}

.loom-project-card__thumbs {
  position: absolute;
  right: .7rem;
  bottom: .7rem;
  z-index: 2;
  display: flex;
  max-width: calc(100% - 1.4rem);
  gap: .35rem;
  padding: .35rem;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: .9rem;
  background: rgba(5, 9, 16, .42);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.loom-project-card__thumb {
  width: 3.4rem;
  height: 3.4rem;
  flex: 0 0 3.4rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: .65rem;
  background: var(--surface-alt);
  cursor: zoom-in;
}

.loom-project-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.loom-project-card__body {
  position: relative;
  padding: clamp(1.25rem, 2.5vw, 2.4rem);
}

.loom-project-card__index {
  color: var(--text-secondary);
  font-size: .6rem;
}

.loom-project-card h3 {
  max-width: 16ch;
  margin: 1rem 0 .5rem;
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.2vw, 2.6rem);
  letter-spacing: -.04em;
  line-height: 1;
}

.loom-project-card small {
  color: var(--text-secondary);
  font-size: .68rem;
}

.loom-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: 1rem;
}

.loom-tags span {
  padding: .32rem .55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: .62rem;
}

.loom-project-card blockquote {
  margin: 1.25rem 0;
  padding-left: 1rem;
  border-left: 2px solid var(--accent);
  color: var(--text-secondary);
  font-family: var(--font-heading);
}

.loom-project-card__fused-quote cite {
  display: block;
  margin-top: .5rem;
  font-family: var(--font-body);
  font-size: .66rem;
  font-style: normal;
}

.loom-portfolio__voices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.loom-team__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 3vw, 3rem) 1rem;
}

.loom-person {
  grid-column: span 4;
}

.loom-person:nth-child(3n + 2) {
  transform: translateY(4rem);
}

.loom-person figure {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0 0 1.25rem;
  overflow: hidden;
  border-radius: 48% 48% 1.2rem 1.2rem / 34% 34% 1.2rem 1.2rem;
  background: var(--surface-alt);
}

.loom-person figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82);
  transition: filter .4s ease, transform .6s var(--loom-ease);
}

.loom-person:hover figure img {
  filter: saturate(1);
  transform: scale(1.035);
}

.loom-person__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 74% 20%, color-mix(in srgb, var(--loom-glow) 55%, transparent), transparent 34%),
    linear-gradient(145deg, var(--surface-alt), color-mix(in srgb, var(--loom-pop) 25%, var(--surface)));
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: clamp(3.5rem, 8vw, 8rem);
  letter-spacing: -.08em;
}

.loom-person figure > .loom-person__index {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  z-index: 1;
  padding: .35rem .45rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .42);
  color: #fff;
  font-size: .6rem;
}

.loom-person h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2vw, 2rem);
}

.loom-person__role {
  margin: .2rem 0 .8rem;
  color: var(--accent-ink);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.loom-person .loom-rich-text {
  font-size: .78rem;
}

.loom-person__social {
  display: flex;
  gap: .55rem;
  margin-top: 1rem;
}

.loom-person__social a {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: 50%;
}

/* Journal / location ----------------------------------------------------- */

.loom-journal__filter {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.5rem;
  color: var(--text-secondary);
  font-size: .75rem;
}

.loom-journal__filter strong {
  padding: .35rem .6rem;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--text-primary);
}

.loom-journal__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.loom-post-card {
  grid-column: span 6;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  background: var(--surface);
}

.loom-post-card--feature {
  grid-column: 1 / -1;
  grid-row: auto;
}

.loom-post-card:last-child:nth-child(even) {
  grid-column: 1 / -1;
}

.loom-post-card__link {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.loom-post-card__media {
  position: relative;
  height: 15rem;
  margin: 0;
  overflow: hidden;
}

.loom-post-card--feature .loom-post-card__media {
  height: auto;
  min-height: clamp(22rem, 34vw, 31rem);
}

.loom-post-card--feature .loom-post-card__link,
.loom-post-card:last-child:nth-child(even) .loom-post-card__link {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(19rem, .55fr);
}

.loom-post-card:last-child:nth-child(even):not(.loom-post-card--feature) .loom-post-card__link {
  grid-template-columns: minmax(18rem, .75fr) minmax(0, 1.25fr);
}

.loom-post-card:last-child:nth-child(even):not(.loom-post-card--feature) .loom-post-card__media {
  height: auto;
  min-height: 20rem;
}

.loom-post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--loom-ease);
}

.loom-post-card:hover .loom-post-card__media img {
  transform: scale(1.04);
}

.loom-post-card__media span {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  padding: .35rem .45rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .42);
  color: #fff;
  font-size: .6rem;
}

.loom-post-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.35rem;
}

.loom-post-card--feature .loom-post-card__body {
  justify-content: center;
  padding: clamp(1.5rem, 3vw, 3rem);
}

.loom-post-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  color: var(--text-secondary);
  font-size: .62rem;
}

.loom-post-card h3 {
  margin: 1rem 0 .65rem;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2vw, 2rem);
  letter-spacing: -.035em;
  line-height: 1.08;
}

.loom-post-card--feature h3 {
  font-size: clamp(1.75rem, 2.6vw, 2.8rem);
}

.loom-post-card p {
  margin: 0 0 1.2rem;
  color: var(--text-secondary);
  font-size: .8rem;
}

.loom-post-card .loom-text-link {
  margin-top: auto;
}

.loom-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
  font-size: .75rem;
}

.loom-pagination a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem .85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 700;
}

.loom-empty {
  display: grid;
  justify-items: center;
  gap: .8rem;
  padding: 5rem 1rem;
  border: 1px dashed var(--border);
  border-radius: var(--loom-radius);
  color: var(--text-secondary);
  text-align: center;
}

.loom-empty .loom-icon {
  width: 2.5rem;
  height: 2.5rem;
}

.loom-map__canvas {
  display: grid;
}

.loom-map__canvas--paired {
  grid-template-columns: minmax(0, 1.25fr) minmax(20rem, .75fr);
  gap: 1rem;
}

.loom-map__frame {
  position: relative;
  height: 100%;
  min-height: 36rem;
  overflow: hidden;
  border-radius: 50% 2rem 2rem 2rem / 22% 2rem 2rem 2rem;
  background: var(--surface-alt);
}

.loom-map__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(.25) saturate(.72) contrast(1.05);
}

.loom-map__pin {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}

.loom-map__locations {
  display: grid;
  align-content: start;
  gap: .75rem;
}

.loom-location-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1.35rem;
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  background: var(--surface);
}

.loom-location-card__icon {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--accent-ink);
}

.loom-location-card h3 {
  margin: 0 0 .45rem;
  font-family: var(--font-heading);
  font-size: 1.2rem;
}

.loom-location-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: .78rem;
}

.loom-location-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin-top: .8rem;
  font-size: .74rem;
  font-weight: 700;
}

.loom-location-card__hours {
  display: grid;
  margin-top: .7rem;
  color: var(--text-secondary);
  font-size: .68rem;
}

/* Footer / utility ------------------------------------------------------- */

.loom-footer {
  position: relative;
  z-index: 2;
  padding: 0 var(--loom-gutter) var(--loom-gutter);
}

.loom-footer__canvas {
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding: clamp(2rem, 6vw, 6rem);
  overflow: hidden;
  border-radius: 4rem 4rem 1rem 4rem;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--loom-pop) 20%, transparent), transparent 20rem),
    var(--text-primary);
  color: var(--background);
}

.loom-footer__masthead {
  display: grid;
  grid-template-columns: .45fr 1fr auto;
  gap: 2rem;
  align-items: end;
  padding-bottom: clamp(2rem, 5vw, 5rem);
  border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.loom-footer__masthead h2 {
  max-width: 12ch;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 4rem);
  letter-spacing: -.05em;
  line-height: .95;
}

.loom-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr .65fr;
  gap: clamp(2rem, 6vw, 7rem);
  padding-block: clamp(2rem, 5vw, 5rem);
}

.loom-footer-nav {
  display: grid;
}

.loom-footer-nav a {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: .7rem;
  padding: .55rem 0;
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.8vw, 1.7rem);
}

.loom-footer-nav small {
  padding-top: .2rem;
  color: color-mix(in srgb, currentColor 48%, transparent);
  font-family: var(--font-body);
  font-size: .55rem;
}

.loom-footer__children {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.loom-footer__children div {
  display: grid;
  align-content: start;
  gap: .4rem;
}

.loom-footer__children strong {
  margin-bottom: .4rem;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.loom-footer__children a,
.loom-footer__contact,
.loom-footer__contact a {
  color: color-mix(in srgb, currentColor 68%, transparent);
  font-size: .75rem;
  font-style: normal;
}

.loom-footer__contact {
  display: grid;
  align-content: start;
  gap: .6rem;
}

.loom-footer__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  color: color-mix(in srgb, currentColor 58%, transparent);
  font-size: .65rem;
}

.loom-footer__bottom p {
  margin: 0;
}

.loom-footer__social {
  display: flex;
  gap: .7rem;
}

.loom-footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .8rem;
}

.loom-footer--minimal .loom-footer__canvas {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  padding-block: 2rem;
  border-radius: 999px;
}

.loom-footer--minimal p {
  margin: 0;
  color: color-mix(in srgb, currentColor 65%, transparent);
  font-size: .68rem;
  text-align: center;
}

.loom-not-found {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 70svh;
  width: var(--loom-shell);
  margin-inline: auto;
  overflow: hidden;
}

.loom-not-found__number {
  color: color-mix(in srgb, var(--accent) 18%, transparent);
  font-family: var(--font-heading);
  font-size: clamp(10rem, 26vw, 28rem);
  letter-spacing: -.1em;
  line-height: .7;
}

.loom-not-found__copy {
  position: relative;
  z-index: 2;
}

.loom-not-found h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2.3rem, 4vw, 4.5rem);
  letter-spacing: -.05em;
}

.loom-not-found__copy > p:not(.loom-eyebrow) {
  max-width: 32rem;
  color: var(--text-secondary);
}

.loom-spacer--sm { height: 2rem; }
.loom-spacer--md { height: 5rem; }
.loom-spacer--lg { height: 9rem; }
.loom-spacer--xl { height: 14rem; }

.loom-divider {
  display: grid;
  place-items: center;
  width: var(--loom-shell);
  height: 4rem;
  margin-inline: auto;
}

.loom-divider--line span {
  width: min(100%, 38rem);
  height: 1px;
  background: var(--border);
}

.loom-divider--dashed span {
  width: min(100%, 38rem);
  border-top: 1px dashed var(--border);
}

.loom-divider--dotted span {
  width: min(100%, 38rem);
  border-top: 2px dotted var(--border);
}

.loom-divider--none {
  height: 1px;
}

.loom-divider--none span {
  display: none;
}

.loom-divider--dots span {
  width: 4rem;
  height: .45rem;
  background: radial-gradient(circle, var(--accent) 2px, transparent 2.5px) 0 0 / 1rem .45rem;
}

.loom-divider--gradient span {
  width: min(100%, 38rem);
  height: .35rem;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--loom-pop), transparent);
}

.loom-fused-block:empty {
  display: none;
}

/* Lightbox --------------------------------------------------------------- */

.loom-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(4, 7, 11, .94);
  color: #fff;
}

.loom-lightbox[hidden] {
  display: none;
}

.loom-lightbox__image {
  max-width: min(92vw, 1400px);
  max-height: 86svh;
  border-radius: 1.25rem;
  object-fit: contain;
}

.loom-lightbox__close,
.loom-lightbox__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.loom-lightbox__close {
  top: 1rem;
  right: 1rem;
}

.loom-lightbox__close svg,
.loom-lightbox__nav svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.loom-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
}

.loom-lightbox__nav--prev { left: 1rem; }
.loom-lightbox__nav--next { right: 1rem; }

/* Reveal motion ---------------------------------------------------------- */

.loom-reveal-ready .loom-section-head,
.loom-reveal-ready .loom-editorial__grid,
.loom-reveal-ready .loom-service-card,
.loom-reveal-ready .loom-feature-row,
.loom-reveal-ready .loom-price-card,
.loom-reveal-ready .loom-journey-step,
.loom-reveal-ready .loom-quote-card,
.loom-reveal-ready .loom-gallery-item,
.loom-reveal-ready .loom-project-card,
.loom-reveal-ready .loom-person,
.loom-reveal-ready .loom-post-card,
.loom-reveal-ready .loom-location-card {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity .7s ease, transform .8s var(--loom-ease);
}

.is-revealed,
.loom-reveal-ready .is-revealed {
  opacity: 1;
  transform: none;
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1180px) {
  .loom-header__inner {
    grid-template-columns: 1fr auto;
  }

  .loom-nav--desktop,
  .loom-header__phone,
  .loom-header__slot,
  .loom-header__actions > .loom-button {
    display: none;
  }

  .loom-menu-button,
  .loom-menu-close {
    display: grid;
  }

  .loom-header__center-nav {
    display: none;
  }

  .loom-hero__layout {
    grid-template-columns: minmax(0, .95fr) minmax(20rem, 1.05fr);
    padding: clamp(2rem, 4vw, 4rem);
  }

  .loom-pricing__plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loom-price-card--featured {
    transform: none;
  }

  .loom-price-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .loom-footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .loom-footer__contact {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .loom-section {
    padding-block: clamp(3.75rem, 10vw, 5rem);
  }

  .loom-section-head,
  .loom-section-head--split .loom-section-head__copy {
    grid-template-columns: minmax(0, 1fr);
  }

  .loom-section-head__marker {
    display: none;
  }

  .loom-hero {
    padding-inline: .6rem;
  }

  .loom-hero__canvas,
  .loom-hero__layout {
    min-height: auto;
  }

  .loom-hero__layout,
  .loom-hero--with-form .loom-hero__layout,
  .loom-hero--cover .loom-hero__layout {
    grid-template-columns: 1fr;
    padding: 2rem;
  }

  .loom-hero--with-dock .loom-hero__layout {
    padding-bottom: calc(2rem + var(--loom-hero-dock-lift));
  }

  .loom-hero__copy {
    padding-block: 3rem 1rem;
  }

  .loom-hero__portrait {
    min-height: 28rem;
  }

  .loom-hero--cover .loom-hero__layout {
    min-height: 38rem;
  }

  .loom-hero-slider__contact {
    grid-template-columns: 1fr;
    margin-top: -2rem;
  }

  .loom-hero-offerings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loom-hero-offering:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .loom-hero-offering:nth-child(4) {
    border-top: 1px solid var(--border);
  }

  .loom-hero-offering:nth-child(odd) {
    border-left: 0;
  }

  .loom-editorial__grid,
  .loom-editorial--reverse .loom-editorial__grid,
  .loom-areas__layout,
  .loom-trust__layout,
  .loom-contact__canvas,
  .loom-faq__layout--conversation,
  .loom-map__canvas--paired {
    grid-template-columns: 1fr;
  }

  .loom-editorial--reverse .loom-editorial__copy,
  .loom-editorial--reverse .loom-editorial__media {
    order: initial;
  }

  .loom-editorial__media {
    min-height: 32rem;
  }

  .loom-article__layout {
    grid-template-columns: 1fr;
  }

  .loom-article__masthead {
    grid-template-columns: 1fr;
  }

  .loom-article__cover {
    order: -1;
    height: clamp(20rem, 65vw, 32rem);
    min-height: 0;
  }

  .loom-article__rail {
    position: static;
    display: flex;
    align-items: center;
  }

  .loom-article__rail i {
    width: 3rem;
  }

  .loom-duet__grid,
  .loom-journey__layout--paired,
  .loom-pricing__layout--with-faq {
    grid-template-columns: minmax(0, 1fr);
  }

  .loom-services__mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loom-service-card--lead {
    grid-column: 1 / -1;
  }

  .loom-feature-row {
    grid-template-columns: 3rem 3.2rem 1fr;
  }

  .loom-feature-row p {
    grid-column: 3;
  }

  .loom-areas__layout .loom-section-head,
  .loom-trust__layout .loom-section-head {
    position: static;
    grid-template-columns: 1fr;
  }

  .loom-cta__canvas {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .loom-cta__actions {
    max-width: none;
    justify-self: start;
  }

  .loom-cta__actions .loom-actions {
    justify-content: flex-start;
  }

  .loom-testimonials__grid,
  .loom-before-after__grid {
    grid-template-columns: 1fr;
  }

  .loom-stats__grid,
  .loom-story-facts--stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loom-stats article:nth-child(3),
  .loom-story-facts--stats > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  }

  .loom-stats article:nth-child(4),
  .loom-story-facts--stats > div:nth-child(4) {
    border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  }

  .loom-stats article:nth-child(n + 3),
  .loom-story-facts--stats > div:nth-child(n + 3) {
    border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  }

  .loom-stats article:nth-child(odd),
  .loom-story-facts--stats > div:nth-child(odd) {
    border-left: 0;
  }

  .loom-stats article {
    grid-column: auto;
    border: 0;
  }

  .loom-stats article:last-child:nth-child(odd),
  .loom-story-facts--stats > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .loom-trust__marks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loom-gallery__mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }

  .loom-gallery__mosaic .loom-gallery-item {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 18rem;
  }

  .loom-portfolio__mosaic,
  .loom-team__grid,
  .loom-journal__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loom-project-card,
  .loom-project-card--lead,
  .loom-project-card:nth-child(3n),
  .loom-person,
  .loom-post-card {
    grid-column: auto;
    grid-row: auto;
  }

  .loom-post-card--feature,
  .loom-post-card:last-child:nth-child(even) {
    grid-column: 1 / -1;
  }

  .loom-person:nth-child(3n + 2) {
    transform: none;
  }

  .loom-footer__masthead {
    grid-template-columns: 1fr;
  }

  .loom-footer__grid {
    grid-template-columns: 1fr;
  }

  .loom-footer__bottom {
    grid-template-columns: 1fr;
  }

  .loom-footer-legal {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  :root {
    --loom-shell: calc(100vw - 1.5rem);
  }

  .loom-hero--with-dock {
    --loom-hero-dock-lift: 1.5rem;
  }

  .loom-hero--with-offerings-dock {
    --loom-hero-dock-lift: 2rem;
  }

  .loom-header {
    padding-inline: .55rem;
  }

  .loom-header__inner {
    min-height: 3.8rem;
    padding-left: .8rem;
  }

  .loom-brand__text {
    max-width: 10rem;
  }

  .loom-header__center-brand {
    grid-template-columns: 1fr auto;
  }

  .loom-header__center-brand > a {
    justify-self: start;
  }

  .loom-header__edition,
  .loom-header__social {
    display: none;
  }

  .loom-topline {
    display: none;
  }

  .loom-announcement__inner {
    justify-content: flex-start;
  }

  .loom-announcement__inner > span,
  .loom-announcement__inner a {
    display: none;
  }

  .loom-hero__layout {
    padding: 1.2rem;
  }

  .loom-hero--with-dock .loom-hero__layout {
    padding-bottom: calc(1.2rem + var(--loom-hero-dock-lift));
  }

  .loom-hero__copy {
    padding-block: 2rem .5rem;
  }

  .loom-hero__copy > :is(h1, h2),
  .loom-hero-slide__copy > :is(h1, h2) {
    font-size: clamp(2.35rem, 9vw, 2.8rem);
  }

  .loom-hero__points,
  .loom-form__row,
  .loom-hero-offerings,
  .loom-story-facts--features,
  .loom-pricing__plans,
  .loom-services__mosaic,
  .loom-portfolio__mosaic,
  .loom-team__grid,
  .loom-journal__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .loom-hero__portrait,
  .loom-editorial__media {
    min-height: 22rem;
  }

  .loom-hero__dock {
    width: 94%;
    padding: 1rem;
  }

  .loom-hero-offering {
    border: 0;
    border-top: 1px solid var(--border);
  }

  .loom-hero-offering:first-child {
    border-top: 0;
  }

  .loom-section-head :is(h1, h2) {
    font-size: clamp(2rem, 8vw, 2.75rem);
  }

  .loom-article__masthead {
    margin-bottom: 3.5rem;
  }

  .loom-article__masthead h1 {
    font-size: clamp(2.25rem, 8.5vw, 3rem);
  }

  .loom-article__cover {
    height: 18rem;
  }

  .loom-post-card--feature,
  .loom-post-card:last-child:nth-child(even) {
    grid-column: auto;
  }

  .loom-post-card--feature .loom-post-card__link,
  .loom-post-card:last-child:nth-child(even) .loom-post-card__link {
    display: flex;
  }

  .loom-post-card--feature .loom-post-card__media,
  .loom-post-card:last-child:nth-child(even):not(.loom-post-card--feature) .loom-post-card__media {
    height: 17rem;
    min-height: 0;
  }

  .loom-editorial > .loom-shell,
  .loom-pricing > .loom-shell {
    width: calc(100vw - .8rem);
    padding: 1rem;
  }

  .loom-editorial__copy {
    padding: .5rem;
  }

  .loom-editorial__facts {
    width: 100%;
    margin-top: 1rem;
  }

  .loom-duet__panel {
    min-height: auto;
    padding: 2rem 1.25rem 5rem;
  }

  .loom-index-card {
    grid-template-columns: 2rem 1fr 2.5rem;
    gap: .75rem;
    min-height: 7rem;
  }

  .loom-index-card figure {
    display: none;
  }

  .loom-service-card--lead {
    grid-column: auto;
  }

  .loom-services__cta {
    grid-template-columns: auto 1fr;
    border-radius: 1.2rem;
  }

  .loom-services__cta .loom-button {
    grid-column: 1 / -1;
  }

  .loom-feature-row {
    grid-template-columns: 2rem 3rem 1fr;
    gap: .7rem;
  }

  .loom-feature-row__icon {
    width: 3rem;
    height: 3rem;
  }

  .loom-feature-row p {
    grid-column: 1 / -1;
    padding-left: 5.7rem;
  }

  .loom-price-card {
    min-height: auto;
  }

  .loom-journey__layout--paired {
    gap: 3rem;
  }

  .loom-contact__canvas {
    padding: 1.25rem;
  }

  .loom-cta__canvas {
    grid-template-columns: 1fr;
    min-height: 24rem;
    padding: 2rem 1.25rem;
    border-radius: 2rem;
  }

  .loom-stats__grid,
  .loom-story-facts--stats {
    grid-template-columns: 1fr;
    border-radius: 1.5rem;
  }

  .loom-stats__grid {
    gap: 0;
  }

  .loom-stats article,
  .loom-story-facts--stats > div {
    min-height: auto;
    border: 0 !important;
    border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent) !important;
  }

  .loom-stats article:first-child,
  .loom-story-facts--stats > div:first-child {
    border-top: 0 !important;
  }

  .loom-proof-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loom-proof-stat:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .loom-proof-stat:nth-child(4) {
    border-top: 1px solid var(--border);
  }

  .loom-testimonials__proof {
    width: 100%;
    border-radius: 1.2rem;
  }

  .loom-trust__marks {
    grid-template-columns: 1fr;
  }

  .loom-accreditations__ledger article {
    grid-template-columns: 2rem 5rem 1fr;
  }

  .loom-accreditations article > a {
    grid-column: 3;
  }

  .loom-gallery__mosaic {
    grid-template-columns: minmax(0, 1fr);
  }

  .loom-gallery__mosaic .loom-gallery-item {
    min-height: 19rem;
  }

  .loom-map__frame {
    min-height: 24rem;
    border-radius: 1.5rem;
  }

  .loom-footer {
    padding-inline: .4rem;
  }

  .loom-footer__canvas {
    width: 100%;
    padding: 2rem 1.25rem;
    border-radius: 2rem;
  }

  .loom-footer--minimal .loom-footer__canvas {
    grid-template-columns: 1fr;
    justify-items: start;
    border-radius: 1.5rem;
  }

  .loom-footer__children {
    grid-template-columns: 1fr;
  }

  .loom-not-found {
    grid-template-columns: 1fr;
    padding-block: 4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .loom-section-head,
  .loom-editorial__grid,
  .loom-service-card,
  .loom-feature-row,
  .loom-price-card,
  .loom-journey-step,
  .loom-quote-card,
  .loom-gallery-item,
  .loom-project-card,
  .loom-person,
  .loom-post-card,
  .loom-location-card {
    opacity: 1;
    transform: none;
  }
}