/* Home-only mobile composition trial. Base = phone; desktop resets at 48rem. */

/* Header */

.nav-wrap > nav {
  position: absolute;
  inset: 100% 0 auto;
}

.menu-button {
  margin-left: auto;
}

.nav-list {
  top: 0;
}

/* Readable mobile rhythm */

.hero {
  padding-block: 4.5rem;
}

.hero-grid {
  gap: 3.5rem;
}

h1 {
  max-width: 9ch;
  font-size: clamp(3rem, 13vw, 4rem);
  line-height: 0.96;
  letter-spacing: -0.045em;
}

h2 {
  font-size: clamp(2.55rem, 10vw, 3.3rem);
  line-height: 1.03;
}

.hero-copy {
  max-width: 32ch;
  margin-block: 2rem;
  font-size: 1.125rem;
  line-height: 1.65;
}

.actions {
  align-items: flex-start;
  gap: 1.25rem;
}

.actions .button {
  width: 100%;
}

.actions .button--light {
  width: auto;
  min-height: auto;
  padding: 0.25rem 0;
  border: 0;
  border-bottom: 0.125rem solid var(--color-ink);
  border-radius: 0;
}

/* Supporting graphic comes after the message and stays contained. */

.hero-visual {
  min-height: 17rem;
  margin-inline: 0.5rem;
}

/* Sections remain single-column and easy to scan. */

.section {
  padding-block: 4.5rem;
}

.section-head {
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.section-head p,
.work-card p,
.why-card p,
.step p,
.price-card li,
details p {
  line-height: 1.65;
}

.work-grid,
.why-grid,
.steps,
.pricing-grid {
  gap: 1.5rem;
}

.work-card,
.why-card,
.step,
.price-card {
  padding: 1.5rem;
}

.why-card b,
.step b {
  margin-bottom: 1.5rem;
}

.step {
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: 1rem;
}

.step b {
  grid-row: 1 / 3;
}

.step p {
  margin-top: 0.75rem;
}

.price-card {
  box-shadow: 0.375rem 0.375rem 0 var(--color-ink);
}

.price-card ul {
  display: grid;
  gap: 0.75rem;
  margin-block: 0 2rem;
}

.price-card .button,
.closing .button {
  width: 100%;
}

.closing {
  text-align: left;
}

.closing h2,
.closing p {
  margin-inline: 0;
}

/* Restore the approved desktop composition. */

@media (min-width: 48rem) {
  .nav-wrap > nav {
    position: static;
    inset: auto;
  }

  .menu-button {
    margin-left: 0;
  }

  .nav-list {
    top: auto;
  }

  .hero {
    padding-block: var(--space-24);
  }

  .hero-grid {
    gap: var(--space-8);
  }

  h1 {
    max-width: 12ch;
    font-size: var(--text-h1);
    line-height: 0.98;
    letter-spacing: -0.045em;
  }

  h2 {
    font-size: var(--text-h2);
    line-height: 1.02;
  }

  .hero-copy {
    max-width: 33rem;
    margin: var(--space-6) 0;
    font-size: var(--text-lg);
    line-height: 1.55;
  }

  .actions {
    gap: var(--space-3);
  }

  .actions .button,
  .actions .button--light {
    width: auto;
    min-height: 2.75rem;
    padding: var(--space-3) var(--space-6);
    border: var(--line) solid var(--color-ink);
    border-radius: 999px;
  }

  .hero-visual {
    min-height: 22rem;
    margin-inline: 0;
  }

  .section {
    padding-block: var(--space-24);
  }

  .section-head {
    gap: var(--space-4);
    margin-bottom: var(--space-8);
  }

  .work-grid,
  .why-grid,
  .steps,
  .pricing-grid {
    gap: var(--space-4);
  }

  .work-card,
  .why-card,
  .step {
    padding: var(--space-6);
  }

  .price-card {
    padding: var(--space-8);
    box-shadow: none;
  }

  .why-card b,
  .step b {
    margin-bottom: var(--space-8);
  }

  .step {
    display: block;
  }

  .step p {
    margin-top: 1rem;
  }

  .price-card ul {
    display: block;
    margin-bottom: var(--space-8);
  }

  .price-card .button,
  .closing .button {
    width: auto;
  }

  .closing {
    text-align: center;
  }

  .closing h2 {
    margin-inline: auto;
  }

  .closing p {
    margin-inline: auto;
  }
}

/* Preview proof content on Home mobile */

.work-card .project-image {
  aspect-ratio: 4/3;
}

@media (min-width:48rem) {

}

/* Approved centred mobile closing composition */

@media (max-width:47.99rem) {
  .closing {
    text-align: center;
  }

  .closing h2,.closing p {
    margin-inline: auto;
  }

  .closing .button {
    margin-inline: auto;
  }

  .section#work .section-head {
    text-align: center;
  }

  .section#work .section-head h2 {
    margin-inline: auto;
  }
}

/* Dark cinematic Home hero mobile sizing */

@media (max-width:47.99rem) {
  .hero-visual.hero-studio {
    min-height: 22rem;
    margin-inline: 0;
  }

  .hero .meaningful-carousel {
    max-width: none;
    line-height: 1;
  }

  .hero-copy {
    color: #c7c6c0;
  }
}

/* Full-screen mobile navigation */

/* Approved Home Hero scroll story */

.home-page .hero {
  align-items: initial;
  background: radial-gradient(circle at 78% 40%,rgba(244,122,36,.24),transparent 27%),linear-gradient(125deg,#090909,#1d1c19);
  overflow: clip;
}

.home-page .hero::before,.home-page .hero::after {
  display: none;
}

.home-page .hero>.container {
  padding-block: clamp(2rem,5vh,3.5rem);
}

.home-page .hero-grid>div:first-child {
  padding-top: clamp(.5rem,2vh,1.5rem);
}

.home-page .hero .actions {
  row-gap: 1rem;
}

.home-page .story-visual {
  isolation: isolate;
}

.story-glow {
  position: absolute;
  z-index: -2;
  width: 76%;
  aspect-ratio: 1;
  right: -2%;
  top: 7%;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(244,122,36,.34),transparent 67%);
  filter: blur(18px);
}

.story-mac {
  position: absolute;
  inset: 4% 3% 12% 0;
  overflow: hidden;
  border: 2px solid var(--color-cream);
  border-radius: 1.1rem;
  background: var(--color-cream);
  color: var(--color-ink);
  box-shadow: 1rem 1rem 0 rgba(0,0,0,.5);
  transform: rotate(-2deg);
  transform-origin: center;
}

.story-toolbar {
  height: 2.5rem;
  padding: 0 .8rem;
  display: flex;
  align-items: center;
  border-bottom: 2px solid var(--color-ink);
  background: #dfded9;
}

.story-toolbar>span {
  display: flex;
  gap: .35rem;
}

.story-toolbar i {
  width: .55rem;
  height: .55rem;
  border: 1px solid var(--color-ink);
  border-radius: 50%;
  background: var(--color-coral);
}

.story-toolbar b {
  margin-left: auto;
  font-size: .5rem;
}

.story-site {
  height: calc(100% - 2.5rem);
  padding: 1rem;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: .8rem;
}

.story-site-nav,.story-site-footer {
  display: flex;
  justify-content: space-between;
  font: 700 .4rem/1 var(--font-display);
}

.story-site-main {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: .8rem;
}

.story-site-main>div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story-site small {
  color: var(--color-coral);
  font: 800 .34rem/1 var(--font-display);
}

.story-site-title {
  margin: 1rem 0;
  font: 800 clamp(1rem,2.3vw,2rem)/.9 var(--font-display);
}

.story-site-button {
  width: 5rem;
  padding: .45rem;
  border: 1px solid var(--color-ink);
  border-radius: 999px;
  background: var(--color-coral);
  font-size: .33rem;
  font-weight: 800;
}

.story-site figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-ink);
  border-radius: .7rem;
  background: var(--color-stone);
}

.story-site figure i:first-child {
  position: absolute;
  width: 75%;
  aspect-ratio: 1;
  right: -20%;
  top: -20%;
  border-radius: 50%;
  background: var(--color-coral);
}

.story-site figure i:last-child {
  position: absolute;
  width: 50%;
  height: 65%;
  left: 12%;
  bottom: -10%;
  border: 1px solid var(--color-ink);
  border-radius: 5rem 5rem 0 0;
  background: var(--color-cream);
}

.story-panels {
  position: absolute;
  inset: 3% 0 10%;
  pointer-events: none;
}

.story-panel {
  position: absolute;
  padding: 1rem;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  align-items: stretch;
  gap: .8rem;
  border: 1.5px solid var(--color-cream);
  border-radius: 1rem;
  box-shadow: .65rem .65rem 0 rgba(0,0,0,.45);
  font-family: var(--font-display);
  opacity: 0;
}

.story-panel small {
  color: var(--color-coral);
  font-size: .4rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.story-panel strong {
  display: block;
  margin: .6rem 0;
  font-size: clamp(.72rem,1.45vw,1.18rem);
  line-height: .94;
}

.story-panel p {
  margin: 0;
  max-width: 19rem;
  font: 500 .5rem/1.35 var(--font-body);
}

.panel-ui {
  min-width: 0;
  padding: .55rem;
  overflow: hidden;
  border: 1px solid currentColor;
  border-radius: .55rem;
  font-family: var(--font-display);
}

.panel-ui>b {
  display: block;
  font-size: .31rem;
  letter-spacing: .05em;
}

.panel-ui--hero {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  background: var(--color-stone);
}

.panel-ui--hero i {
  height: .35rem;
  background: var(--color-ink);
}

.panel-ui--hero i:nth-of-type(2) {
  width: 72%;
}

.panel-ui--hero .panel-ui-action {
  width: 3.3rem;
  margin-top: auto;
  padding: .3rem;
  border: 1px solid var(--color-ink);
  border-radius: 99px;
  background: var(--color-coral);
  font-size: .26rem;
  font-weight: 800;
}

.panel-ui--services {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: .35rem;
  background: var(--color-cream);
}

.panel-ui--services>div {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: .25rem;
}

.panel-ui--services i {
  border: 1px solid var(--color-ink);
  border-radius: .25rem;
  background: var(--color-stone);
}

.panel-ui--services i:nth-child(2) {
  background: var(--color-coral);
}

.panel-ui--services span {
  font-size: .22rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.panel-ui--contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .28rem;
  background: #242424;
  color: var(--color-cream);
}

.panel-ui--contact>b {
  grid-column: 1/-1;
}

.panel-ui--contact .panel-ui-action {
  padding: .3rem;
  border: 1px solid var(--color-cream);
  border-radius: 99px;
  background: transparent;
  color: inherit;
  font-size: .22rem;
  font-weight: 800;
}

.panel-ui--contact i {
  grid-column: 1/-1;
  height: .45rem;
  border: 1px solid var(--color-cream);
  border-radius: .2rem;
}

.panel-ui--contact span {
  grid-column: 1/-1;
  padding: .3rem;
  border-radius: 99px;
  background: var(--color-coral);
  color: var(--color-ink);
  font-size: .22rem;
  font-weight: 800;
  text-align: center;
}

.story-panel--one {
  inset: 1% 24% 57% 0;
  background: var(--color-cream);
  color: var(--color-ink);
  transform: translate(18%,24%) rotate(-2deg);
}

.story-panel--two {
  inset: 34% 0 26% 23%;
  background: var(--color-stone);
  color: var(--color-ink);
  transform: translate(-12%,0) rotate(2deg);
}

.story-panel--three {
  inset: 65% 14% 0 5%;
  background: #171717;
  color: var(--color-cream);
  transform: translate(8%,-24%) rotate(-1deg);
}

.story-caption {
  position: absolute;
  z-index: 6;
  left: 0;
  bottom: -.5rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--color-cream);
  font: 800 .5rem/1 var(--font-display);
  letter-spacing: .07em;
}

.story-caption span {
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-coral);
  color: var(--color-ink);
}

@media (min-width:64rem) {
  .home-page .hero-grid {
    grid-template-columns: 1.08fr .92fr;
    gap: clamp(2.5rem,5vw,5rem);
  }

  .home-page .hero .meaningful-carousel {
    font-size: clamp(4.8rem,6.7vw,6.8rem);
  }
}

@media (max-width:63.99rem) {
  .home-page .hero {
    min-height: 165svh;
  }

  .home-page .hero>.container {
    padding-block: 1.5rem;
    align-content: start;
  }

  .home-page .story-visual {
    min-height: 22rem;
  }

  .story-panel {
    grid-template-columns: 1fr .72fr;
    padding: .72rem;
    gap: .5rem;
  }

  .story-panel p {
    display: none;
  }

  .story-panel strong {
    font-size: .64rem;
  }

  .panel-ui {
    padding: .4rem;
  }

  .story-caption {
    bottom: -.25rem;
    font-size: .42rem;
  }
}

@media (prefers-reduced-motion:reduce) {
  .home-page .hero {
    min-height: 100svh;
  }

  .story-mac {
    opacity: 0 !important;
  }

  .story-panel {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Final preview refinement: stable responsive layout and a detailed dark business-site Mac. */

.home-page .meaningful-carousel {
  width: 100%;
  contain: layout;
}

.home-page .carousel-frame,.home-page .carousel-fixed {
  width: 100%;
}

.home-page .hero-grid>div:first-child {
  min-width: 0;
}

.home-page .story-mac {
  background: #211d19;
  border-color: #d8d2ca;
  box-shadow: 1rem 1rem 0 rgba(0,0,0,.5),0 1.5rem 5rem rgba(244,122,36,.13);
}

.home-page .story-toolbar {
  background: #171411;
  border-color: #090807;
  color: #d8d2ca;
}

.home-page .story-toolbar i {
  border-color: #090807;
}

.home-page .story-toolbar i:nth-child(1) {
  background: #ff655b;
}

.home-page .story-toolbar i:nth-child(2) {
  background: #f1bd43;
}

.home-page .story-toolbar i:nth-child(3) {
  background: #61c777;
}

.home-page .story-toolbar b {
  padding: .3rem .65rem;
  border: 1px solid #302a24;
  border-radius: .35rem;
  background: #0e0d0b;
  color: #bcb6ae;
  font-weight: 500;
}

.home-page .story-site {
  position: relative;
  background: radial-gradient(circle at 88% 18%,rgba(244,122,36,.18),transparent 24%),linear-gradient(135deg,#211c18,#151310);
  color: #f8f8f6;
}

.home-page .story-site-nav {
  padding-bottom: .55rem;
  border-bottom: 1px solid rgba(248,248,246,.08);
  color: #d8d2ca;
}

.home-page .story-site-nav span {
  color: #83786d;
}

.home-page .story-site-main {
  grid-template-columns: 1.15fr .85fr;
  gap: 1rem;
}

.home-page .story-site small {
  display: inline-flex;
  width: max-content;
  padding: .3rem .55rem;
  border-radius: 999px;
  background: linear-gradient(90deg,#ff9b45,#ff684c);
  color: #16120f;
  box-shadow: 0 0 1rem rgba(244,122,36,.22);
}

.home-page .story-site-title {
  color: #f4eee7;
  text-shadow: 0 .2rem 1.2rem rgba(0,0,0,.28);
}

.home-page .story-site-button {
  border-color: #ff8b3e;
  background: linear-gradient(90deg,#ff9b45,#ff6049);
  box-shadow: 0 0 1.2rem rgba(244,122,36,.38);
  color: #15110e;
}

.home-page .story-site figure {
  border-color: #5d4637;
  background: linear-gradient(145deg,#5b2e1b,#231813);
}

.home-page .story-site figure::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 9%;
  height: .55rem;
  border-radius: 999px;
  background: linear-gradient(90deg,#ff9b45 0 24%,transparent 24% 67%,#6e6258 67% 77%,transparent 77% 81%,#6e6258 81% 91%,transparent 91%);
}

.home-page .story-site figure i:first-child {
  width: 95%;
  height: 34%;
  aspect-ratio: auto;
  right: auto;
  left: 3%;
  top: 32%;
  border-radius: .65rem;
  background: linear-gradient(115deg,#ff9b45,#ff554d);
}

.home-page .story-site figure i:last-child {
  width: 27%;
  height: 20%;
  left: 5%;
  bottom: 7%;
  border-color: #6d4b39;
  border-radius: .5rem;
  background: #3a241a;
  box-shadow: 4.1rem 0 0 #3a241a,8.2rem 0 0 #3a241a;
}

.home-page .story-site-footer {
  padding-top: .55rem;
  border-top: 1px solid rgba(248,248,246,.08);
  color: #9c8f83;
}

.story-cursor {
  position: absolute;
  z-index: 8;
  left: 53%;
  top: 47%;
  display: flex;
  align-items: center;
  filter: drop-shadow(0 .2rem .25rem rgba(0,0,0,.4));
  animation: story-cursor-move 4s ease-in-out infinite;
}

.story-cursor svg {
  width: 1.15rem;
  fill: #f8f8f6;
  stroke: #0b0b0b;
  stroke-width: .7;
}

.story-cursor span {
  margin-left: .2rem;
  padding: .28rem .42rem;
  border-radius: .3rem;
  background: #f47a24;
  color: #0b0b0b;
  font: 800 .35rem/1 var(--font-display);
}

@keyframes story-cursor-move {
  0%,100% {
    transform: translate(0,0);
  }

  50% {
    transform: translate(3rem,2.4rem);
  }
}

@media (min-width:64rem) {
  .home-page .hero {
    min-height: 175svh;
    display: block;
  }

  .home-page .hero>.container {
    position: sticky;
    top: 4.7rem;
    height: calc(100svh - 4.7rem);
    padding-block: clamp(2rem,5vh,3.5rem);
    display: grid;
    align-items: start;
    align-content: start;
  }

  .home-page .hero-grid {
    grid-template-columns: 1.08fr .92fr;
  }

  .home-page .story-visual {
    min-height: 29rem;
    margin-top: 0;
  }
}

@media (max-width:63.99rem) {
  .home-page .hero {
    min-height: auto;
    display: block;
    padding: 0;
  }

  .home-page .hero>.container {
    position: relative;
    top: auto;
    height: auto;
    padding-block: clamp(2rem,7vw,3.5rem);
    display: grid;
    align-items: start;
    align-content: start;
  }

  .home-page .hero-grid {
    grid-template-columns: 1fr;
    gap: clamp(2.5rem,8vw,4rem);
  }

  .home-page .story-visual {
    order: 2;
    min-height: clamp(24rem,92vw,31rem);
    width: 100%;
    margin: 0;
  }

  .home-page .meaningful-carousel {
    min-height: 2.28em;
  }

  .home-page .story-caption {
    bottom: 0;
  }

  .home-page .story-mac {
    inset: 3% 2% 14% 0;
  }

  .home-page .story-panel {
    grid-template-columns: 1fr .68fr;
  }
}

@media (max-width:30rem) {
  .home-page .hero .actions {
    margin-top: 1.75rem;
  }

  .home-page .story-visual {
    min-height: 25rem;
  }

  .home-page .story-site-nav span {
    display: none;
  }

  .home-page .story-site-title {
    font-size: 1rem;
  }

  .home-page .story-panel {
    grid-template-columns: 1fr;
  }

  .home-page .panel-ui {
    display: none;
  }
}

@media (prefers-reduced-motion:reduce) {
  .story-cursor {
    animation: none;
  }
}

/* Owner correction: copy first, complete Mac below at every viewport width. */

.home-page .hero {
  min-height: auto !important;
  padding: 0 !important;
  display: block !important;
}

.home-page .hero>.container {
  position: relative !important;
  top: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding-top: clamp(2rem,5vw,4rem) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: start !important;
  align-content: start !important;
  gap: clamp(2.5rem,6vw,5rem) !important;
}

.home-page .hero-grid {
  grid-template-columns: 1fr !important;
}

.home-page .story-visual {
  order: 2 !important;
  align-self: start !important;
}

@media (max-width:63.99rem) {
  .home-page .hero>.container {
    padding-bottom: 85svh !important;
  }

  .home-page .story-visual {
    top: 5rem !important;
    min-height: clamp(24rem,92vw,31rem) !important;
  }
}

@media (max-width:30rem) {
  .home-page .hero>.container {
    padding-top: 1.75rem !important;
    gap: 2.5rem !important;
    padding-bottom: 80svh !important;
  }

  .home-page .story-visual {
    top: 4.8rem !important;
    min-height: 25rem !important;
  }
}

/* Owner correction: normal Mac width and a bounded pinned story stage. */

.home-page .hero>.container {
  padding-bottom: 0 !important;
}

.home-page .story-scroll {
  position: relative;
  grid-column: 1/-1;
  width: 100%;
}

.home-page .story-visual {
  position: sticky !important;
  width: min(100%,52rem) !important;
  min-height: clamp(24rem,46vw,30rem) !important;
  margin: 0 auto !important;
}

.home-page .story-mac {
  inset: 2% 1% 11% 1% !important;
}

@media (max-width:63.99rem) {
  .home-page .story-scroll {
    height: 165svh;
  }

  .home-page .story-visual {
    top: 5rem !important;
    width: min(100%,44rem) !important;
    min-height: clamp(23rem,86vw,29rem) !important;
  }
}

@media (max-width:30rem) {
  .home-page .story-scroll {
    height: 155svh;
  }

  .home-page .story-visual {
    top: 4.8rem !important;
    width: 100% !important;
    min-height: 24rem !important;
  }
}

/* Timing correction: centre the complete Mac before the held story begins. */

.home-page .story-visual {
  top: clamp(6.5rem,12vh,8rem) !important;
}

.home-page .story-scroll {
  height: 190svh;
}

@media (max-width:63.99rem) {
  .home-page .story-visual {
    top: clamp(6rem,15vh,8rem) !important;
  }

  .home-page .story-scroll {
    height: 180svh;
  }
}

@media (max-width:30rem) {
  .home-page .story-visual {
    top: clamp(5.5rem,14vh,7rem) !important;
  }

  .home-page .story-scroll {
    height: 175svh;
  }
}

/* Centred editorial Hero lockup and natural desktop Mac proportion. */

.home-page .hero-grid>div:first-child {
  width: min(100%,62rem);
  margin-inline: auto;
  text-align: center;
}

.home-page .meaningful-carousel {
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
  min-height: 2.28em;
  line-height: .92;
  letter-spacing: -.055em;
}

.home-page .carousel-frame>span,.home-page .carousel-fixed {
  transform-origin: center;
  text-align: center;
}

.home-page .carousel-frame--who {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.065em;
}

.home-page .carousel-frame--who>span {
  filter: drop-shadow(0 .35rem 1.1rem rgba(244,122,36,.08));
}

.home-page .carousel-frame--what {
  margin-top: .04em;
  font-family: var(--font-body);
  font-size: .5em;
  font-weight: 650;
  letter-spacing: -.035em;
  word-spacing: .12em;
  line-height: 1.08;
}

.home-page .carousel-fixed {
  margin-top: .16em;
  font-family: var(--font-display);
  font-size: .41em;
  font-weight: 800;
  letter-spacing: .015em;
}

.home-page .hero .actions {
  justify-content: center;
  align-items: center;
  margin-top: clamp(2.1rem,4vw,3.25rem);
}

.home-page .hero .button--light {
  border-color: rgba(248,248,246,.28);
}

.home-page .story-caption {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: max-content;
  max-width: 100%;
  justify-content: center;
  text-align: center;
}

@media (min-width:64rem) {
  .home-page .story-visual {
    width: min(100%,47rem) !important;
    min-height: 0 !important;
    aspect-ratio: 16/10;
  }

  .home-page .story-mac {
    inset: 1% 1% 10% !important;
  }

  .home-page .story-panels {
    inset: 2% 1% 9%;
  }

  .home-page .meaningful-carousel {
    font-size: clamp(4.7rem,7vw,7.2rem);
  }
}

@media (max-width:63.99rem) {
  .home-page .story-caption {
    left: 0;
    transform: none;
    width: auto;
    justify-content: flex-start;
    text-align: left;
  }

  .home-page .meaningful-carousel {
    font-size: clamp(3rem,12vw,5rem);
  }

  .home-page .hero .actions {
    margin-top: 2rem;
  }
}

@media (max-width:30rem) {
  .home-page .meaningful-carousel {
    min-height: 2.38em;
    font-size: clamp(2.65rem,12.5vw,3.75rem);
  }

  .home-page .carousel-frame--what {
    font-size: .47em;
    word-spacing: .08em;
  }

  .home-page .carousel-fixed {
    font-size: .39em;
  }

  .home-page .hero .actions {
    justify-content: center;
  }

  .home-page .hero .actions .button {
    width: 100%;
  }

  .home-page .hero .actions .button--light {
    width: auto;
  }
}

/* Alternating atmospheric system for inner pages */

.inner-page main>section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.inner-page main>section>.container {
  position: relative;
  z-index: 1;
}

.inner-page main>section:first-child {
  background: radial-gradient(circle at 88% 14%,rgba(244,122,36,.16),transparent 27%),linear-gradient(135deg,var(--color-cream),var(--color-stone));
}

.inner-page main>.section:not(.founder-team):not(.closing):nth-of-type(even) {
  background: radial-gradient(circle at 8% 90%,rgba(244,122,36,.12),transparent 24%),var(--color-stone);
}

.inner-page main>.section:not(.founder-team):not(.closing):nth-of-type(odd) {
  background: radial-gradient(circle at 92% 10%,rgba(11,11,11,.045),transparent 25%),var(--color-cream);
}

.inner-page main>.section:not(.founder-team):not(.closing)::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 22rem;
  height: 22rem;
  right: -14rem;
  top: -14rem;
  border: 1px solid rgba(244,122,36,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgba(244,122,36,.018);
  pointer-events: none;
}

.inner-page main>.section:not(.founder-team):not(.closing):nth-of-type(even)::before {
  left: -15rem;
  right: auto;
  top: auto;
  bottom: -14rem;
  border-color: rgba(11,11,11,.1);
  box-shadow: 0 0 0 4rem rgba(11,11,11,.015);
}

.inner-page .founder-team {
  background: radial-gradient(circle at 86% 18%,rgba(244,122,36,.18),transparent 27%),var(--color-ink);
}

.inner-page .closing {
  background: radial-gradient(circle at 80% 38%,rgba(248,248,246,.22),transparent 28%),linear-gradient(135deg,var(--color-coral),#dc641b);
}

.inner-page .closing::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 25rem;
  height: 25rem;
  right: -14rem;
  top: -15rem;
  border: 1px solid rgba(11,11,11,.16);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgba(11,11,11,.02);
  pointer-events: none;
}

@media (max-width:47.99rem) {
  .inner-page main>section:first-child {
    background: radial-gradient(circle at 92% 8%,rgba(244,122,36,.13),transparent 23%),linear-gradient(145deg,var(--color-cream),var(--color-stone));
  }

  .inner-page main>.section:not(.founder-team):not(.closing)::before {
    width: 17rem;
    height: 17rem;
  }
}