/* styles.css */
:root{
  --bg: #0b0b0d;
  --ink: #0f1115;
  --cream: #f4f1ea;
  --paper: #fbfaf7;
  --muted: rgba(255,255,255,.72);
  --mutedDark: rgba(15,17,21,.72);
  --line: rgba(255,255,255,.12);
  --lineDark: rgba(15,17,21,.12);

  --serif: "Fraunces", ui-serif, Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --radius: 22px;
  --shadow: 0 18px 60px rgba(0,0,0,.35);

  --container: 1120px;

  /* header height used for content offset (NOT hero section offset) */
  --header-h: 70px;

  /* footer height used for final/footer overlay math */
  --footer-h: 84px;

  /* typography scale */
  --body: clamp(15px, 0.35vw + 14px, 17px);
  --lh: 1.55;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--sans);
  font-size: var(--body);
  line-height: var(--lh);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

img{
  width: 100%;
  height: auto;
  display: block;
}

.container{
  width: min(var(--container), calc(100% - 40px));
  margin-inline: auto;
}

@media (max-width: 520px){
  .container{ width: min(var(--container), calc(100% - 28px)); }
}

/* Make anchor jumps land correctly under fixed header */
section[id]{
  scroll-margin-top: calc(var(--header-h) + 18px);
}

/* Better text wrapping */
h1,h2,h3,p,a,span{
  overflow-wrap: break-word;
  word-break: normal;
}
.title, .h2, .final__title{
  text-wrap: balance;
}
.subtitle, .lead, .final__sub{
  text-wrap: pretty;
}

/* TOPBAR */
.topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;

  background: rgba(251,250,247,.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--lineDark);

  transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
}

.topbar__inner{
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  min-width: 0;
}

@media (max-width: 520px){
  .topbar__inner{
    grid-template-columns: 1fr auto auto;
    gap: 10px;
  }
}

.brand{
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  line-height: 1.05;
  min-width: 0;
}
.brand__name{
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .2px;
  white-space: nowrap;
}
.brand__sub{
  font-size: 12px;
  opacity: .72;
  margin-top: 3px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav{
  display: none;
  gap: 18px;
}
.nav a{
  text-decoration: none;
  color: var(--ink);
  opacity: .78;
  font-size: 13px;
}
.nav a:hover{ opacity: 1; }

.pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--lineDark);
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
  background: rgba(255,255,255,.6);
  white-space: nowrap;
}

@media (max-width: 520px){
  .pill{ padding: 10px 12px; }
}

.menuBtn{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--lineDark);
  background: rgba(255,255,255,.6);
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0 12px;
  cursor: pointer;
}
.menuBtn span{
  height: 2px;
  background: var(--ink);
  opacity: .8;
  border-radius: 2px;
}

.mobileNav{
  border-top: 1px solid var(--lineDark);
  padding: 12px 0 16px;
  background: rgba(251,250,247,.92);
  backdrop-filter: blur(14px);
}
.mobileNav a{
  display: block;
  width: min(var(--container), calc(100% - 40px));
  margin-inline: auto;
  padding: 12px 0;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid rgba(15,17,21,.06);
  font-size: 14px;
}
@media (max-width: 520px){
  .mobileNav a{ width: min(var(--container), calc(100% - 28px)); }
}
.mobileNav__call{
  font-weight: 600;
  border-bottom: 0;
}

/* Overlay mode on top of hero */
.topbar--overlay{
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.topbar--overlay .brand,
.topbar--overlay .nav a,
.topbar--overlay .pill{
  color: #fff;
}
.topbar--overlay .nav a{ opacity: .85; }
.topbar--overlay .nav a:hover{ opacity: 1; }
.topbar--overlay .pill{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.22);
}
.topbar--overlay .menuBtn{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.22);
}
.topbar--overlay .menuBtn span{
  background: #fff;
  opacity: .9;
}

/* After scroll: premium glass look */
.topbar.is-scrolled{
  background: rgba(251,250,247,.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--lineDark);
}
.topbar.is-scrolled .brand,
.topbar.is-scrolled .nav a,
.topbar.is-scrolled .pill{
  color: var(--ink);
}
.topbar.is-scrolled .pill{
  background: rgba(255,255,255,.6);
  border-color: var(--lineDark);
}
.topbar.is-scrolled .menuBtn{
  background: rgba(255,255,255,.6);
  border-color: var(--lineDark);
}
.topbar.is-scrolled .menuBtn span{
  background: var(--ink);
}

/* HERO */
.hero{
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--bg);
  padding-top: 0;
}

.hero__media{
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero__media img{
  width: 100%;
  height: 110%;
  object-fit: cover;
  object-position: var(--focal-x, 50%) var(--focal-y, 35%);
  filter: contrast(1.02) saturate(1.02);
  transform: translate3d(0,0,0) scale(1.08);
  will-change: transform;
}
.hero__overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 500px at 25% 30%, rgba(0,0,0,.20), rgba(0,0,0,.58)),
    linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.18));
  z-index: 2;
}

.hero__content{
  position: relative;
  color: #fff;
  z-index: 3;
  padding: calc(76px + var(--header-h)) 0 86px;

  /* ✅ mobile-friendly: readable width, no “skinny column” */
  max-width: 62ch;
  margin-inline: auto;
  text-align: left;
}

@media (max-width: 520px){
  .hero__content{
    padding: calc(66px + var(--header-h)) 0 78px;
    max-width: 56ch;
  }
}

.kicker{
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .86;
  margin: 0 0 12px;
}

.title{
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(40px, 7vw, 72px);
  line-height: 1.04;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
  text-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.subtitle{
  max-width: 56ch;
  font-size: clamp(15px, 0.35vw + 15px, 18px);
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 24px;
  text-shadow: 0 14px 50px rgba(0,0,0,.28);
}

.hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 14px;
  border: 1px solid transparent;
  transition: transform .16s ease, opacity .16s ease, background .16s ease, box-shadow .28s ease;
  will-change: transform;
}
.btn:active{ transform: translateY(1px); }

.btn--primary{
  background: rgba(255,255,255,.92);
  color: #0b0b0d;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  position: relative;
  overflow: hidden;
}
.btn--primary:hover{ background: #fff; box-shadow: 0 26px 70px rgba(0,0,0,.38); }
.btn--primary::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: radial-gradient(circle at 30% 40%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
  opacity:.35;
  transform: translateX(-12%);
  transition: transform .6s ease, opacity .6s ease;
}
.btn--primary:hover::after{
  transform: translateX(10%);
  opacity:.45;
}

.btn--ghost{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  color: #fff;
  backdrop-filter: blur(10px);
}
.btn--ghost:hover{ background: rgba(255,255,255,.14); }

.hero__meta{
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: rgba(255,255,255,.70);
  font-size: 13px;
}
.dot{ opacity: .5; }

.scrollHint{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  display: grid;
  place-items: center;
  text-decoration: none;
  z-index: 4;
}
.scrollHint__line{
  width: 2px;
  height: 16px;
  background: rgba(255,255,255,.75);
  border-radius: 2px;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
  0%, 100%{ opacity: .35; transform: translateY(-2px); }
  50%{ opacity: 1; transform: translateY(2px); }
}

.br-md{ display: none; }

/* STATEMENT */
.statement{
  background: var(--paper);
  padding: 54px 0;
  border-bottom: 1px solid var(--lineDark);
}
.statement__text{
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.25;
  margin: 0;
  color: #101218;
}

/* SECTIONS */
.section{ padding: 72px 0; }
@media (max-width: 600px){
  .section{ padding: 56px 0; }
  .statement{ padding: 44px 0; }
}

.section__head{
  margin-bottom: 24px;
  display: grid;
  gap: 10px;
}
.h2{
  font-family: var(--serif);
  font-size: clamp(28px, 3.1vw, 46px);
  line-height: 1.08;
  margin: 0;
}
.lead{
  margin: 0;
  max-width: 66ch;
  line-height: 1.75;
  opacity: .86;
  font-size: clamp(14px, 0.25vw + 14px, 16px);
}
.miniCall{
  display: inline-block;
  width: fit-content;
  margin-top: 6px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  opacity: .9;
  font-size: 14px;
}
.miniCall:hover{ opacity: 1; }

.section--dark{
  background: var(--bg);
  color: #fff;
}
.section--dark .lead{ color: var(--muted); }
.section--dark .miniCall{ color: #fff; opacity: .86; }
.section--dark .miniCall:hover{ opacity: 1; }

.section--light{
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--lineDark);
  border-bottom: 1px solid var(--lineDark);
}

.section--soft{
  background: #f3efe7;
  color: var(--ink);
}

/* GALLERY (editorial maternity) */
.gallery{
  display: grid;
  gap: 18px;
}
.gallery--editorial{
  grid-template-columns: 1fr;
}
.shot{
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.section--light .shot{
  border-color: rgba(15,17,21,.10);
  background: rgba(255,255,255,.6);
}

.shot img{
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.shot--wide img{ aspect-ratio: 16 / 9; }
.shot--offset{ transform: translateX(0); }

.section__cta{ margin-top: 28px; }
.ctaCard{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding: 20px;
  display: grid;
  gap: 14px;
  align-items: center;
}
.h3{
  font-family: var(--serif);
  margin: 0 0 6px;
  font-size: 22px;
}
.ctaCard p{
  margin: 0;
  color: rgba(255,255,255,.72);
  line-height: 1.6;
  font-size: 14px;
}

/* MILESTONES GRID */
.grid{ display: grid; gap: 14px; }
.grid--moments{ grid-template-columns: 1fr; }
.tile{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(15,17,21,.10);
  background: rgba(255,255,255,.6);
  box-shadow: 0 10px 40px rgba(0,0,0,.08);
}
.tile img{
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.tile--tall img{ aspect-ratio: 3 / 4; }

.callout{
  margin-top: 18px;
  border-radius: var(--radius);
  padding: 18px;
  border: 1px solid var(--lineDark);
  background: rgba(255,255,255,.65);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.callout p{
  margin: 0;
  max-width: 70ch;
  line-height: 1.7;
  font-size: 14px;
  opacity: .92;
}
.btn--dark{
  background: var(--ink);
  color: #fff;
}
.btn--dark:hover{ opacity: .92; }

/* ABOUT */
.about{
  display: grid;
  gap: 18px;
}
.about__copy p{
  margin: 0 0 12px;
  line-height: 1.85;
  opacity: .92;
  font-size: clamp(14px, 0.25vw + 14px, 16px);
}
.about__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}
.social{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.social a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  opacity: .82;
  font-size: 14px;
}
.social a:hover{ opacity: 1; }
.social--light a{ color: #fff; opacity: .86; }

.about__media{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(15,17,21,.12);
  box-shadow: 0 14px 46px rgba(0,0,0,.12);
}
.about__media img{
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* REVIEWS (base cards if used anywhere) */
.quotes{
  display: grid;
  gap: 14px;
}
.quote{
  margin: 0;
  border-radius: var(--radius);
  padding: 18px;
  border: 1px solid var(--lineDark);
  background: rgba(255,255,255,.72);
}
.quote p{
  font-family: var(--serif);
  margin: 0 0 10px;
  line-height: 1.5;
  font-size: 18px;
}
.quote footer{
  font-size: 13px;
  opacity: .70;
}

/* FINAL */
.final{
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: #000;
  padding-top: 0;
}

.final__media{
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.final__media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  object-position: var(--focal-x, 50%) var(--focal-y, 35%);
  will-change: transform;
}

.final__overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 420px at 30% 40%, rgba(0,0,0,.18), rgba(0,0,0,.60)),
    linear-gradient(to top, rgba(0,0,0,.70), rgba(0,0,0,.18));
  z-index: 2;
}

.final__content{
  position: relative;
  z-index: 3;
  color: #fff;
  padding: calc(var(--header-h) + 90px) 0 calc(var(--footer-h) + 90px);
  max-width: 62ch;
}

.final__title{
  font-family: var(--serif);
  margin: 0 0 10px;
  font-size: clamp(32px, 4.8vw, 54px);
  line-height: 1.06;
  max-width: 22ch;
}
.final__sub{
  margin: 0 0 20px;
  color: var(--muted);
  line-height: 1.75;
  font-size: clamp(14px, 0.25vw + 14px, 16px);
}
.final__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* FOOTER */
.footer{
  background: #090a0c;
  color: rgba(255,255,255,.84);
  padding: 22px 0;
}
.footer__inner{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.footer__brand{
  font-family: var(--serif);
  font-size: 16px;
}
.footer__meta{
  font-size: 12px;
  opacity: .65;
  margin-top: 4px;
}
.footer__right{
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.footer__call{
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.55);
  font-size: 14px;
}
.footer__social a{
  color: rgba(255,255,255,.84);
  text-decoration: none;
  margin-left: 10px;
  font-size: 13px;
  opacity: .8;
}
.footer__social a:hover{ opacity: 1; }

/* Footer overlays upward onto the final section */
.footer--overlay{
  position: relative;
  z-index: 50;
  margin-top: calc(var(--footer-h) * -1);
  background: linear-gradient(
    to top,
    rgba(0,0,0,.92) 0%,
    rgba(0,0,0,.72) 45%,
    rgba(0,0,0,0) 100%
  );
  border-top: 1px solid rgba(255,255,255,.10);
}

.footer--overlay{
  color: rgba(255,255,255,.86);
}
.footer--overlay .footer__call{ color: #fff; }
.footer--overlay .footer__social a{ color: rgba(255,255,255,.86); }

.footer__credit{
  margin-top: 10px;
  font-size: 12px;
  opacity: .72;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.footer__credit a{
  color: rgba(255,255,255,.86);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.35);
}
.footer__credit a:hover{
  opacity: 1;
  border-bottom-color: rgba(255,255,255,.6);
}

/* REVEAL ANIMATIONS */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* RESPONSIVE LAYOUT */
@media (min-width: 860px){
  .nav{ display: inline-flex; }
  .menuBtn{ display: none; }
  .br-md{ display: inline; }

  .gallery--editorial{
    grid-template-columns: 1.1fr .9fr;
    align-items: start;
  }
  .shot--offset{ transform: translateX(24px); }
  .shot--wide{ grid-column: 1 / -1; }

  .ctaCard{
    grid-template-columns: 1fr auto;
    padding: 22px;
  }

  .grid--moments{
    grid-template-columns: repeat(12, 1fr);
    gap: 14px;
  }
  .grid--moments .tile:nth-child(1){ grid-column: 1 / span 4; }
  .grid--moments .tile:nth-child(2){ grid-column: 5 / span 4; }
  .grid--moments .tile:nth-child(3){ grid-column: 9 / span 4; }
  .grid--moments .tile:nth-child(4){ grid-column: 1 / span 6; }
  .grid--moments .tile:nth-child(5){ grid-column: 7 / span 6; }

  .about{
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
  }

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

/* prefers reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .reveal{ transition: none; }
  .scrollHint__line{ animation: none; }
}

/* =========================================================
   CINEMATIC UPGRADES
   ========================================================= */

/* Film grain + vignette */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .085;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
body::after{
  content:"";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(circle at 50% 35%, rgba(0,0,0,0) 35%, rgba(0,0,0,.22) 100%);
  opacity: .55;
}

/* Variable aspect-ratio system */
.shot, .tile, .about__media{ --ar: 4/5; }
.shot--wide{ --ar: 16/9; }
.tile--tall{ --ar: 3/4; }
.ar-1x1{ --ar: 1/1; }
.ar-4x5{ --ar: 4/5; }
.ar-3x4{ --ar: 3/4; }
.ar-16x9{ --ar: 16/9; }
.ar-21x9{ --ar: 21/9; }

.pos-top img{ object-position: center top; }
.pos-bottom img{ object-position: center bottom; }
.pos-left img{ object-position: left center; }
.pos-right img{ object-position: right center; }

/* Override fixed aspect-ratio rules cleanly */
.shot img, .tile img, .about__media img{
  width: 100%;
  height: 100%;
  aspect-ratio: var(--ar);
  object-fit: cover;
  object-position: center;
}

/* Cinematic hover / depth */
.shot, .tile, .about__media, .quote{
  transform: translateY(0);
  transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s ease, border-color .55s ease;
  will-change: transform;
}
.shot:hover, .tile:hover, .about__media:hover{
  transform: translateY(-5px);
  box-shadow: 0 26px 90px rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.18);
}
.section--light .tile:hover,
.section--soft .about__media:hover{
  border-color: rgba(15,17,21,.16);
}
.shot img, .tile img, .about__media img{
  transform: scale(1.02);
  transition: transform .9s cubic-bezier(.2,.8,.2,1), filter .9s ease;
  filter: contrast(1.03) saturate(1.03);
}
.shot:hover img, .tile:hover img, .about__media:hover img{
  transform: scale(1.07);
  filter: contrast(1.06) saturate(1.06);
}

/* =========================================================
   TYPEWRITER EFFECT (mobile-stable + good wraps)
   ========================================================= */

/* Container is full width so wrapping is consistent */
.type{
  position: relative;
  display: block;
  width: 100%;
}

/* Ghost defines final layout immediately */
.type .type-ghost{
  display: block;
  visibility: hidden;
  white-space: normal;
  width: 100%;
}

/* Live overlays exactly */
.type .type-live{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  white-space: normal;
}

/* prevent mid-word splits */
.type .w{ display:inline-block; white-space:nowrap; }
.type .sp{ display:inline-block; }

/* caret */
.type .caret{
  display: inline-block;
  width: 10px;
  height: 1em;
  transform: translateY(2px);
  margin-left: 3px;
  background: currentColor;
  opacity: .85;
  animation: caretBlink .9s steps(1) infinite;
}
@keyframes caretBlink{ 50%{ opacity: 0; } }

.type .ch{
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(2px);
  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.2,.8,.2,1),
    filter .55s ease;
  will-change: opacity, transform, filter;
}

/* ✅ force nicer hero title line breaks on mobile */
.hero .title.type{
  max-width: 18ch;
}
@media (max-width: 520px){
  .hero .title.type{ max-width: 15ch; }
}
@media (min-width: 900px){
  .hero .title.type{ max-width: 22ch; }
}