/* ==========================================================================
   Socially Blended
   Brand: #F5EFC6 #4D0E12 #A5BCD6 #4A2E27 #231815
   Type:  Instrument Serif (heading + italic subheading), Public Sans (body)
   ========================================================================== */

:root {
  --cream: #F5EFC6;
  --maroon: #4D0E12;
  --sky: #A5BCD6;
  --brown: #4A2E27;
  --ink: #231815;

  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter: clamp(16px, 2.6vw, 40px);
  --nav-h: 72px;
  --wob-h: clamp(36px, 5vw, 72px); /* height of the wavy edges on What We Do */
  --ring-h: clamp(60px, 6vw, 88px); /* binder rings, which reach .44 of this into the blue section */

  /* Width the wave ribbon is drawn at. It never gets narrower than 900px,
     so its lettering stays readable on phones. */
  --ribbon-w: max(100vw, 900px);

  --grain: 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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; }
img { max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
em { font-style: italic; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: .6em 1em;
  background: var(--ink);
  color: var(--cream);
  border-radius: 999px;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* --------------------------------------------------------------- shared */

.eyebrow {
  font-size: clamp(.72rem, .95vw, .85rem);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--brown);
}
.eyebrow--light { color: var(--sky); }
.eyebrow--flush { text-align: left; }

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.05em 1.9em;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: 600 clamp(.72rem, .9vw, .82rem)/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), background-color .2s, color .2s, border-color .2s;
}
.pill:hover { transform: translateY(-2px) rotate(-1.5deg); }
.pill--sky { background: var(--sky); color: var(--maroon); }
.pill--sky:hover { background: var(--cream); }
.pill--ink { background: var(--ink); color: var(--cream); padding: .85em 1.5em; }
.pill--ink:hover { background: var(--maroon); }
.pill--maroon { background: var(--maroon); color: var(--cream); }
.pill--maroon:hover { background: var(--ink); }
.pill--outline { border-color: var(--ink); color: var(--ink); }
.pill--outline:hover { background: var(--ink); color: var(--cream); }

/* Scroll reveal, only when JS is available to undo it */
.js [data-reveal] {
  opacity: 0;
  translate: 0 26px;
  transition: opacity .8s ease var(--d, 0s), translate .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0s);
}
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }

/* ------------------------------------------------------------------ nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  background: var(--cream);
  color: var(--ink);
}
.nav__group { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); }

/* The SB logo (#logo in the sprite). Its bar is a cut through the letters, not a
   visible pill, so --logo-cut must match the background the logo sits on.
   Set the size with --sb-h on any parent. */
.sb {
  display: block;
  flex: none;
  width: calc(var(--sb-h) * 1.522);
  height: var(--sb-h);
  fill: currentColor;
}
.logo {
  --sb-h: calc(var(--nav-h) - 8px);
  --logo-cut: var(--cream);
  display: block;
  color: var(--maroon);
}

.nav__links { display: flex; gap: clamp(14px, 2vw, 30px); }
.nav__links a {
  position: relative;
  font-size: .86rem;
  font-weight: 500;
  text-decoration: none;
  padding: .3em 0;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.nav__links a:hover::after { transform: scaleX(1); }

.nav__toggle {
  display: none;
  padding: .7em 1.2em;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: 600 .74rem/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

.menu {
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: 49;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.5rem;
  padding: var(--gutter);
  background: var(--maroon);
  color: var(--cream);
}
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a {
  font: 400 clamp(3rem, 15vw, 5rem)/1.05 var(--serif);
  text-decoration: none;
}
.menu .pill { align-self: flex-start; }

/* ----------------------------------------------------------------- hero */

.hero {
  --fig: min(56vw, 96svh); /* width of the cut-out; the burst behind her matches it */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  background: var(--maroon);
  color: var(--cream);
}

.hero__meta {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(14px, 1.7vw, 26px) var(--gutter) 0;
  font-size: clamp(.8rem, 1.3vw, 1.2rem);
  font-weight: 400;
  line-height: 1.22;
  text-transform: uppercase;
}
.hero__lede { max-width: 21em; }
.hero__book {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(12px, 1.4vw, 22px);
  text-align: right;
}
.hero__book p { max-width: 17em; }

.hero__stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* Portfolio pieces fly between the burst and her (script.js) */
.fly { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fly img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  visibility: hidden;
  border-radius: 3px;
  box-shadow: 0 14px 34px rgba(35, 24, 21, .38);
  backface-visibility: hidden;
}

/* Sits behind her so the maroon tee and dark hair don't sink into the maroon */
.hero__burst {
  position: absolute;
  left: 50%;
  bottom: calc(var(--fig) * .1);
  width: var(--fig);
  margin-left: calc(var(--fig) / -2);
  animation: burst-in 1.1s cubic-bezier(.2, .8, .2, 1) both, spin 90s linear 1.1s infinite;
}

.hero__cutout {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -.5vw;
  width: var(--fig);
  max-width: none;
  translate: -50% calc(var(--scroll, 0) * .05px);
  animation: rise 1.2s cubic-bezier(.2, .8, .2, 1) both;
}

/* Chalk outline around her. Same box and movement as the cut-out, so the two stay locked together.
   The drawings are 40px bigger than the image on every side, hence the percentages. */
.hero__doodle {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -.5vw;
  width: var(--fig);
  aspect-ratio: 1081 / 993;
  translate: -50% calc(var(--scroll, 0) * .05px);
  pointer-events: none;
  animation: rise 1.2s cubic-bezier(.2, .8, .2, 1) both;
}
.hero__doodle img {
  position: absolute;
  left: -3.7%;
  top: -4.028%;
  width: 107.4%;
  height: 108.056%;
  max-width: none;
}

.hero__word {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: calc(var(--ribbon-w) * .065);
  font: 400 min(17.8vw, 30svh)/.8 var(--serif);
  letter-spacing: -.028em;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 .02em .18em rgba(35, 24, 21, .28);
}
.hero__line { display: inline-block; animation: rise 1.1s cubic-bezier(.2, .8, .2, 1) .12s both; }
em.hero__line { animation-delay: .24s; padding-right: .04em; }

@keyframes rise { from { opacity: 0; transform: translateY(7%); } to { opacity: 1; transform: none; } }
@keyframes burst-in { from { opacity: 0; scale: .8; } to { opacity: 1; scale: 1; } }
@keyframes spin { to { rotate: 360deg; } }

/* --------------------------------------------------------------- ribbon */

.ribbon {
  position: relative;
  z-index: 5;
  margin-top: calc(var(--ribbon-w) * -.078);
  overflow: hidden;
  pointer-events: none;
}
.ribbon svg {
  width: var(--ribbon-w);
  height: auto;
  margin-left: calc((100vw - var(--ribbon-w)) / 2);
  overflow: visible;
}
.ribbon__floor { fill: var(--cream); }
.ribbon__band { fill: none; stroke: var(--sky); stroke-width: 92; }
.ribbon__text, .ribbon__measure {
  font: 400 72px var(--serif);
  fill: var(--maroon);
  letter-spacing: -.005em;
}
.ribbon__measure { visibility: hidden; }

/* ---------------------------------------------------------------- about */

.about {
  padding: clamp(4px, 1vw, 16px) var(--gutter) clamp(48px, 6vw, 92px);
  background: var(--cream);
  text-align: center;
}
.about__head {
  position: relative;
  max-width: 13.2em;
  margin: clamp(22px, 3vw, 44px) auto clamp(28px, 4vw, 56px);
  font-size: clamp(3.1rem, 8.4vw, 8.6rem);
}
.about__head h2 {
  font: inherit;
  font-family: var(--serif);
  line-height: 1; /* clears the tallest letters, so g and y never touch the line below */
  letter-spacing: -.025em;
  color: var(--brown);
  text-wrap: balance;
}
.tag {
  position: absolute;
  left: var(--x);
  top: var(--y);
  rotate: var(--r);
  padding: .45em 1.15em;
  border-radius: 999px;
  font: 500 clamp(.66rem, 1vw, .92rem)/1 var(--sans);
  white-space: nowrap;
  animation: bob 5s ease-in-out infinite;
  box-shadow: 0 6px 16px rgba(35, 24, 21, .18);
}
.tag:nth-of-type(2) { animation-delay: -1.7s; }
.tag:nth-of-type(3) { animation-delay: -3.3s; }
.tag--sky { background: var(--sky); color: var(--ink); }
.tag--maroon { background: var(--maroon); color: var(--cream); }
.tag--brown { background: var(--brown); color: var(--cream); }
@keyframes bob { 50% { transform: translateY(-.55em); } }

.about__aside {
  font: italic 400 clamp(1.5rem, 3vw, 2.9rem)/1.1 var(--serif);
  color: var(--maroon);
}

/* --------------------------------------------------------------- binder */

/* The rings bind the cream page above to the blue one below. Each goes through a hole in the cream
   and a hole punched into the top of the blue section, over the grid images too. */
.binder {
  position: relative;
  height: calc(var(--ring-h) * .75);
  background: var(--cream);
}
.binder__rings {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: calc(var(--ring-h) * -.44); /* the lower hole lands about a third of a ring into the blue */
  z-index: 1;
  height: var(--ring-h);
  display: flex;
  justify-content: space-around;
  pointer-events: none;
}
.ring { width: auto; height: 100%; }

/* ---------------------------------------------------------------- split */

.split {
  display: grid;
  grid-template-columns: minmax(0, 39fr) minmax(0, 61fr);
  background: var(--sky);
  color: var(--ink);
}
.split__copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(28px, 4vw, 64px) clamp(16px, 2vw, 32px) calc(clamp(28px, 4vw, 64px) + var(--wob-h)) clamp(16px, 4vw, 64px);
  padding-top: max(clamp(28px, 4vw, 64px), calc(var(--ring-h) * .44 + 22px)); /* clear of the binder rings */
}
.split__copy h2 {
  font: 400 clamp(3rem, 6.4vw, 6.6rem)/.88 var(--serif);
  letter-spacing: -.022em;
  color: var(--maroon);
}
.split__copy h2 em { white-space: nowrap; }
.split__copy p {
  max-width: 30em;
  font-size: clamp(.95rem, 1.1vw, 1.08rem);
  line-height: 1.5;
}
.split__copy p + p { margin-top: 1em; }

/* Left column: a square over a 4:5 (2.25 widths tall). Right column: a 9:16 over a square
   (2.78 widths tall). The right column is narrower by that ratio, so both end level and every
   grid shows uncropped, and min-height is the height that gives. */
.split__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.235fr) minmax(0, 1fr);
  gap: clamp(8px, 1vw, 14px);
  padding-right: clamp(8px, 1vw, 14px);
  min-height: clamp(560px, calc(75.8vw - 30px), 1600px);
}
.split__col { display: flex; flex-direction: column; gap: clamp(8px, 1vw, 14px); min-height: 0; }
.tile {
  position: relative;
  overflow: hidden;
  min-height: 0;
  background: var(--brown);
}
.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.tile:hover img { transform: scale(1.05); }
.tile--short { flex: 4 1 0; } /* square grids */
.tile--tall { flex: 5 1 0; } /* 4:5 grids */
.tile--story { flex: 7.11 1 0; } /* 9:16 story grids: 16/9 of a square's 4 */
.split__col:first-child .tile--short { border-radius: 0 0 12px 12px; }
.split__col:first-child .tile--tall { border-radius: 12px 12px 0 0; }
.split__col:last-child .tile--tall { border-radius: 0 0 12px 12px; }
.split__col:last-child .tile--short { border-radius: 12px 12px 0 0; }

/* ------------------------------------------------- what we do (wiggles) */

.services {
  position: relative;
  background: var(--brown);
  color: var(--cream);
}
.wob {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--wob-h);
  pointer-events: none;
}
/* Sits above the section, over the bottom of the photos, so they run behind the wave */
.wob--top { bottom: calc(100% - 1px); fill: var(--brown); }
.wob--bottom { bottom: -1px; fill: var(--cream); }

.services__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: calc(clamp(84px, 11vw, 168px) - var(--wob-h)) var(--gutter) clamp(90px, 12vw, 176px);
}
.services__head { text-align: center; margin-bottom: clamp(40px, 6vw, 84px); }
.wiggle-title {
  margin: .08em 0 .05em;
  font: italic 400 clamp(4.4rem, 15vw, 15rem)/.92 var(--serif);
  letter-spacing: -.02em;
  color: var(--cream);
}
.wiggle-title .ch { animation: wiggle 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.21s); }
.services__hint {
  font: italic 400 clamp(1.1rem, 1.7vw, 1.55rem)/1.2 var(--serif);
  color: var(--sky);
}

.ch { display: inline-block; transform-origin: 50% 80%; will-change: transform; }
.ch--space { width: .22em; }

@keyframes wiggle {
  0%, 100% { transform: translateY(-.035em) rotate(-3.5deg); }
  50% { transform: translateY(.04em) rotate(3.5deg); }
}
@keyframes wiggle-quick {
  0%, 100% { transform: none; }
  25% { transform: translateY(-.09em) rotate(-7deg); }
  75% { transform: translateY(.06em) rotate(6deg); }
}

.svc-list { position: relative; }
.svc {
  position: relative;
  display: grid;
  grid-template-columns: clamp(2.2rem, 5vw, 5rem) minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(8px, 2vw, 28px);
  padding: clamp(18px, 2.3vw, 34px) 0;
}
.svc__num {
  font-size: clamp(.72rem, .9vw, .85rem);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--sky);
}
.svc__name {
  font: 400 clamp(2.5rem, 6.4vw, 6rem)/1 var(--serif);
  letter-spacing: -.018em;
}
.svc__name--it { font-style: italic; }
.svc:hover .svc__name .ch { animation: wiggle-quick .55s ease-in-out 2; animation-delay: calc(var(--i) * 16ms); }
.svc__desc {
  max-width: 24em;
  justify-self: end;
  font-size: clamp(.92rem, 1.15vw, 1.1rem);
  line-height: 1.42;
  color: var(--cream);
  opacity: .86;
}

/* Row dividers: script.js draws a straight line through the middle, on the row edge. */
.string {
  position: absolute;
  left: 0;
  top: -40px;
  width: 100%;
  height: 80px;
  overflow: visible;
  pointer-events: none;
}
.string path { fill: none; stroke: var(--sky); stroke-width: 1.5; }
.svc-end { position: relative; height: 0; }

/* ----------------------------------------------------------------- work */

.work {
  padding: clamp(18px, 2.4vw, 36px) var(--gutter) clamp(52px, 6.5vw, 96px);
  background: var(--cream);
  text-align: center;
}
.work__title {
  margin: .14em 0 clamp(28px, 4vw, 60px);
  font: 400 clamp(3rem, 7.4vw, 7.6rem)/.92 var(--serif);
  letter-spacing: -.022em;
  color: var(--maroon);
}

.reels {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 6vw, 96px);
}
.reel { flex: 0 0 auto; width: clamp(180px, 20vw, 290px); }

.phone {
  position: relative;
  padding: 8px;
  border-radius: clamp(28px, 3vw, 42px);
  background: var(--ink);
  box-shadow:
    inset 0 0 0 1.5px rgba(245, 239, 198, .18),
    0 22px 40px -18px rgba(35, 24, 21, .55);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.reel:nth-child(1) .phone { rotate: -1.6deg; }
.reel:nth-child(3) .phone { rotate: 1.6deg; }
.reel:hover .phone { transform: translateY(-10px); }
.phone::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 50%;
  width: 28%;
  height: 12px;
  border-radius: 999px;
  background: var(--ink);
  transform: translateX(-50%);
}
.phone__screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 19;
  border-radius: clamp(21px, 2.4vw, 34px);
  background: var(--brown);
}
.phone__screen video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* the 9:16 reels fill the taller screen, losing a sliver at each side */
}
.phone { cursor: pointer; } /* tapping the phone plays or pauses its reel (script.js) */

.phone__ui {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: .6em;
  padding: 14px;
  background: linear-gradient(to top, rgba(35, 24, 21, .72), rgba(35, 24, 21, 0) 42%);
  color: var(--cream);
  text-align: left;
}
.phone__ui p { font: italic 400 clamp(1.05rem, 1.5vw, 1.4rem)/1.05 var(--serif); }
.phone__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(44px, 4.6vw, 62px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cream);
  color: var(--maroon);
  border: 0;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .35s;
}
.reel:hover .phone__play { transform: translate(-50%, -50%) scale(1.14); }
/* The play button steps aside while the reel runs, and comes back for keyboard focus */
.reel.is-playing .phone__play { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
.reel.is-playing .phone__play:focus-visible { opacity: 1; transform: translate(-50%, -50%); }
.phone__play svg { width: 46%; height: 46%; fill: currentColor; }

.reel__stats {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  padding: 0 4px;
}
.reel__stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: .76rem;
  font-weight: 600;
  color: var(--brown);
}
.reel__stats svg { width: 19px; height: 19px; fill: var(--maroon); }

/* ------------------------------------------------------------ offerings */

.offerings {
  position: relative;
  isolation: isolate;
  padding: clamp(40px, 5vw, 76px) var(--gutter) clamp(52px, 6.5vw, 100px);
  background: var(--maroon);
  color: var(--cream);
}
.offerings::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: .34;
  mix-blend-mode: soft-light;
}
.offerings__title {
  margin-bottom: clamp(24px, 3vw, 44px);
  text-align: center;
  font: italic 400 clamp(4rem, 11.5vw, 11rem)/.8 var(--serif);
  letter-spacing: -.025em;
}
.offerings__title span {
  display: block;
  margin-bottom: -.32em;
  padding-left: 1.05em;
  font-size: .44em;
  line-height: 1;
}

.cards {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) repeat(2, minmax(0, 1fr));
  max-width: 1180px;
  margin: 0 auto;
}
/* The wrapper adds no box: all three cards share row 1 and stay level, while the stub hangs into row 2 */
.pkg { display: contents; }
.pkg:hover > .card, .pkg:hover > .stub { z-index: 1; transform: translateY(-10px); }
.card {
  --hole: var(--maroon);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px clamp(16px, 2.2vw, 32px) clamp(24px, 2.6vw, 36px);
  background: var(--cream);
  color: var(--brown);
  text-align: center;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s;
}
.card:hover {
  z-index: 1;
  transform: translateY(-10px);
  box-shadow: 0 26px 40px -22px rgba(35, 24, 21, .9);
}
.card--dark { background: var(--brown); color: var(--cream); }
.card + .card { border-left: 3px dotted var(--maroon); } /* the two cream sheets would otherwise merge */

.card__holes { display: flex; justify-content: center; gap: clamp(26px, 3.4vw, 46px); margin-bottom: clamp(16px, 1.8vw, 24px); }
.card__holes i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--hole);
  box-shadow: inset 0 1px 2px rgba(35, 24, 21, .7);
}

/* Absolute, so it doesn't push the icon down */
.card__flag {
  position: absolute;
  top: 38px;
  padding: .55em 1.2em;
  border-radius: 2px;
  background: var(--sky);
  color: var(--maroon);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.card__icon {
  width: clamp(96px, 10vw, 128px);
  height: clamp(96px, 10vw, 128px);
  margin: clamp(30px, 3vw, 40px) 0 clamp(16px, 1.8vw, 24px);
  transition: rotate .45s cubic-bezier(.2, .8, .2, 1);
}
.card:hover .card__icon { rotate: -5deg; }

.card__name {
  font: 400 clamp(1.5rem, 2.3vw, 2.15rem)/1.05 var(--serif);
  color: var(--maroon);
}
.card--dark .card__name { color: var(--sky); }
.card__price {
  margin-top: .3em;
  font: italic 400 clamp(1.9rem, 2.9vw, 2.7rem)/1 var(--serif);
  color: var(--maroon);
}
.card__price span { font-size: .62em; margin-left: .06em; }
.card--dark .card__price { color: var(--cream); }
.card__scope {
  margin-top: .85em;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.card__list {
  width: 100%;
  margin: 1.1em 0 1.5em;
  padding-top: 1.1em;
  border-top: 1px solid currentColor;
  text-align: left;
  font-size: clamp(.86rem, 1vw, .95rem);
  line-height: 1.35;
}
.card__list li { position: relative; padding-left: 1.05em; }
.card__list li + li { margin-top: .55em; }
.card__list li::before { content: '\2726'; position: absolute; left: 0; font-size: .72em; top: .22em; }
.card__cta {
  margin-top: auto;
  font: italic 400 1.3rem/1 var(--serif);
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
}
.card__cta:hover { color: var(--maroon); }
.card--dark .card__cta:hover { color: var(--sky); }

/* The Reels add-on: a tear-off stub, with a dotted perforation and a notch at each end */
.stub {
  grid-area: 2 / 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 1.4vw, 20px);
  padding: clamp(14px, 1.5vw, 22px) clamp(16px, 2.2vw, 32px);
  border-top: 3px dotted var(--maroon);
  background: var(--sky);
  color: var(--maroon);
  text-decoration: none;
  clip-path: inset(-10px 0 -60px); /* keeps the notches off the next card */
  transform-origin: 0 0;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), rotate .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s;
}
.stub::before, .stub::after {
  content: '';
  position: absolute;
  top: -10px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--maroon);
}
.stub::before { left: -9px; }
.stub::after { right: -9px; }
.stub:hover { rotate: 1deg; }
.pkg:hover > .stub { box-shadow: 0 26px 40px -22px rgba(35, 24, 21, .9); }
.stub__copy { font-size: clamp(.78rem, .88vw, .85rem); line-height: 1.3; }
.stub__copy strong {
  display: block;
  margin-bottom: .1em;
  font: italic 400 clamp(1.2rem, 1.75vw, 1.6rem)/1.05 var(--serif);
}
.stub:hover .stub__copy strong { text-decoration: underline 1px; text-underline-offset: .18em; }
.stub__price {
  flex: none;
  font: italic 400 clamp(1.7rem, 2.6vw, 2.4rem)/1 var(--serif);
}
.stub__price span { font-size: .62em; margin-left: .06em; }

.cards__note {
  grid-area: 2 / 2 / auto / -1;
  align-self: center;
  justify-self: center;
  max-width: 31em;
  padding: clamp(18px, 2vw, 30px) clamp(16px, 2.2vw, 32px) 0;
  text-align: center;
  font: 400 clamp(1.15rem, 1.65vw, 1.55rem)/1.18 var(--serif);
  color: var(--sky);
}
.cards__note em { color: var(--cream); white-space: nowrap; }
.cards__note small {
  display: block;
  margin-top: .95em;
  font: 700 .64rem/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream);
}

/* ----------------------------------------------------------------- call */

.call {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(36px, 4.4vw, 68px) var(--gutter);
  background: var(--cream);
  overflow: hidden;
}
.call::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: .16;
  mix-blend-mode: multiply;
}

.call__left { position: relative; min-width: 0; }
.call__title {
  display: flex;
  flex-direction: column;
  font: italic 400 clamp(4rem, 10.2vw, 10.4rem)/.8 var(--serif);
  letter-spacing: -.012em;
  text-transform: uppercase;
  color: var(--maroon);
}
.call__title span:nth-child(1) { padding-left: 4%; }
.call__title span:nth-child(2) { padding-left: 2%; }
.call__title span:nth-child(3) { align-self: flex-end; padding-right: 12%; }

.rotary {
  width: 72%;
  max-width: 560px;
  height: auto;
  margin: calc(clamp(4rem, 10.2vw, 10.4rem) * -1.5) auto 0 2%;
  position: relative;
  z-index: 1;
  overflow: visible;
}
.rotary__dial { transform-box: view-box; transform-origin: 360px 456px; }
.rotary:hover .rotary__dial { animation: dial 1.9s cubic-bezier(.4, 0, .2, 1); }
@keyframes dial {
  0% { transform: rotate(0); }
  38% { transform: rotate(150deg); }
  100% { transform: rotate(0); }
}

.call__copy {
  max-width: 27em;
  margin: clamp(14px, 1.6vw, 22px) auto 0;
  text-align: center;
  font-size: clamp(.95rem, 1.1vw, 1.05rem);
  line-height: 1.42;
}
.call__lead {
  margin-bottom: .25em;
  font: italic 400 clamp(1.5rem, 2.2vw, 2rem)/1.08 var(--serif);
  color: var(--maroon);
}
.call__copy .pill { margin-top: 1.25em; }

.call__right { min-width: 0; }

.tin {
  width: min(100%, 520px);
  margin: 0 auto;
  rotate: 2deg;
  filter: drop-shadow(0 26px 22px rgba(35, 24, 21, .35));
}
.tin__half {
  --metal: linear-gradient(120deg, #EFE9CF 0%, #B9B199 24%, #E6DFC6 46%, #A49C85 72%, #DAD3BA 100%);
  padding: clamp(10px, 1.1vw, 16px);
  border-radius: clamp(16px, 1.9vw, 26px);
  background: var(--metal);
  box-shadow: inset 0 1.5px 1px rgba(245, 239, 198, .95), inset 0 -2px 3px rgba(35, 24, 21, .28);
}
.tin__well {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-radius: clamp(9px, 1.1vw, 15px);
  background: linear-gradient(165deg, #9F9680, #CFC8AF 55%, #B6AE96);
  box-shadow: inset 0 8px 18px rgba(35, 24, 21, .5), inset 0 -2px 4px rgba(245, 239, 198, .55);
}
.tin__hinge {
  display: flex;
  justify-content: center;
  gap: 42%;
  height: 7px;
}
.tin__hinge i {
  width: 34px;
  height: 100%;
  background: linear-gradient(90deg, #7D7562, #E6DFC6 45%, #7D7562);
}

.print {
  position: relative;
  width: 34%;
  height: 92%;
  padding: 3.5% 3.5% 3.5%;
  background: var(--cream);
  box-shadow: 0 6px 12px rgba(35, 24, 21, .4);
  rotate: -2deg;
  transition: rotate .4s cubic-bezier(.2, .8, .2, 1);
}
.print img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
}
.tin:hover .print { rotate: 3deg; }
.print__clip {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #EFE9CF, #8B836D 75%);
  box-shadow: 0 1px 2px rgba(35, 24, 21, .5);
}
.print__clip--top { top: -7px; }
.print__clip--bottom { bottom: -7px; }

.bizcard {
  --sb-h: clamp(58px, 7vw, 112px);
  --logo-cut: var(--maroon);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80%;
  height: 80%;
  padding: 3%;
  background: var(--maroon);
  color: var(--cream);
  text-align: center;
  box-shadow: 0 8px 14px rgba(35, 24, 21, .45);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.tin:hover .bizcard { transform: translateY(-5px) rotate(-1.5deg); }
.bizcard span { margin-top: .4em; font-size: clamp(.55rem, .78vw, .74rem); letter-spacing: .1em; text-transform: uppercase; }
.bizcard small { margin-top: 1.3em; font-size: clamp(.48rem, .62vw, .6rem); letter-spacing: .2em; text-transform: uppercase; color: var(--sky); }

/* -------------------------------------------------------------- contact */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  background: var(--sky);
  color: var(--ink);
}
.contact__photo { position: relative; min-height: clamp(320px, 40vw, 600px); }
.contact__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.spark { position: absolute; animation: twinkle 4s ease-in-out infinite; }
.spark--a { top: 14%; left: 78%; width: clamp(24px, 3vw, 44px); height: clamp(24px, 3vw, 44px); fill: var(--cream); }
.spark--b { top: 42%; right: clamp(-44px, -3vw, -24px); z-index: 2; width: clamp(48px, 6vw, 88px); height: clamp(48px, 6vw, 88px); fill: var(--maroon); animation-delay: -1.3s; }
.spark--c { bottom: 16%; left: 66%; width: clamp(20px, 2.4vw, 34px); height: clamp(20px, 2.4vw, 34px); fill: var(--cream); animation-delay: -2.6s; }
@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0); }
  50% { transform: scale(.74) rotate(24deg); }
}

.contact__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 4.6vw, 72px) clamp(24px, 7vw, 110px);
}
.contact__name {
  display: flex;
  flex-direction: column;
  margin: .12em 0 clamp(20px, 2.6vw, 38px);
  font: 400 clamp(4rem, 9.2vw, 9.4rem)/.84 var(--serif);
  letter-spacing: -.026em;
  color: var(--maroon);
}
.contact__lines { display: grid; gap: .8em; font-size: clamp(1rem, 1.35vw, 1.25rem); font-weight: 500; }
.contact__lines li { display: flex; align-items: center; gap: .85em; min-width: 0; }
.contact__lines a { text-decoration: none; overflow-wrap: anywhere; }
.contact__lines a:hover { text-decoration: underline; text-underline-offset: .2em; }
.dot {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75em;
  height: 1.75em;
  border-radius: 50%;
  background: var(--ink);
  color: var(--sky);
}
.dot svg { width: 58%; height: 58%; fill: currentColor; }
.contact__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 3vw, 44px); }

/* --------------------------------------------------------------- follow */

.follow {
  padding: clamp(28px, 3vw, 44px) var(--gutter) clamp(44px, 5vw, 76px);
  background: var(--cream);
}
.follow__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .32em;
  margin-bottom: clamp(16px, 2vw, 28px);
  font: 400 clamp(1.8rem, 2.8vw, 2.7rem)/1 var(--serif);
  color: var(--brown);
}
.follow__title svg { width: .86em; height: .86em; fill: currentColor; }

.ig {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 20px);
  max-width: 1280px;
  margin: 0 auto;
}
.ig__tile {
  position: relative;
  overflow: hidden;
  display: block;
  aspect-ratio: 1;
  border-radius: 8px;
  background: var(--brown);
  color: var(--cream);
}
.ig__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
.ig__tile:hover img { transform: scale(1.07); }
.ig__stack { position: absolute; top: 9px; right: 9px; width: 18px; height: 18px; color: var(--cream); filter: drop-shadow(0 1px 2px rgba(35, 24, 21, .5)); }
.ig__tile--type {
  display: grid;
  place-items: center;
  background: var(--maroon);
  text-align: center;
  text-decoration: none;
  font: 400 clamp(1.3rem, 2.5vw, 2.5rem)/.96 var(--serif);
  letter-spacing: -.01em;
  transition: background-color .3s;
}
.ig__tile--type:hover { background: var(--brown); }

/* --------------------------------------------------------------- footer */

.footer { background: var(--ink); color: var(--cream); }
.footer__grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  border-bottom: 1px solid rgba(245, 239, 198, .32);
}
.footer__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9em;
  padding: clamp(22px, 3vw, 40px) 12px;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
}
.footer__col a { text-decoration: none; }
.footer__col a:hover { color: var(--sky); }
.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(22px, 3vw, 40px) 12px;
  border-inline: 1px solid rgba(245, 239, 198, .32);
  text-align: center;
}
.footer__logo {
  --sb-h: clamp(92px, 10vw, 160px);
  --logo-cut: var(--ink);
}
.footer__tag {
  margin-top: .8em;
  font-size: clamp(.6rem, .75vw, .72rem);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--sky);
}
.footer__tag span { font-family: var(--serif); font-style: italic; }
.footer__legal {
  display: grid;
  gap: 4px;
  padding: 14px var(--gutter);
  text-align: center;
  font-size: .72rem;
  opacity: .82;
}

/* ---------------------------------------------------------- breakpoints */

/* Portrait tablets: bigger figure, and the hero stops short of a very tall screen */
@media (max-aspect-ratio: 1/1) and (min-width: 761px) {
  .hero {
    --fig: min(88vw, 70svh);
    min-height: min(calc(100svh - var(--nav-h)), 125vw);
  }
}

@media (max-width: 760px) {
  :root { --nav-h: 64px; }

  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: block; }

  /* Hero stacks: copy on top, wordmark on two lines, and the booking button under the wordmark
     where a thumb can reach it. --lift raises her and the wordmark to make room for it. */
  .hero { min-height: max(calc(100svh - var(--nav-h)), 600px); --lift: 70px; }
  .hero__meta {
    position: absolute; /* spans the whole hero, so the button can be placed at the bottom */
    inset: 0;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    font-size: .82rem;
    pointer-events: none;
  }
  .hero__meta > * { pointer-events: auto; }
  .hero__lede { max-width: 19em; }
  .hero__book { align-items: flex-end; align-self: flex-end; margin-top: -2px; }
  .hero__book .pill {
    position: absolute;
    left: 50%;
    bottom: 54px; /* clear of the ribbon, which rises toward the left edge */
    translate: -50% 0;
    padding: 1.3em 2.6em;
    font-size: .8rem;
  }
  /* Full width, unless the screen is too short to fit her and the burst below the copy (330px is
     the copy on top plus the space under the burst). Same as max(hero height - 330px, 270px). */
  .hero { --fig: min(100vw, max(100svh - 394px, 270px)); }
  .hero__burst { bottom: calc(130px + var(--lift)); }
  .hero__cutout, .hero__doodle { bottom: calc(64px + var(--lift)); }
  .hero__word {
    bottom: calc(var(--ribbon-w) * .05 + var(--lift));
    font-size: 33vw;
    line-height: .8;
    white-space: normal;
  }
  .hero__line { display: block; }

  .tag { font-size: .66rem; }

  .split { grid-template-columns: 1fr; }
  .split__grid { min-height: calc(124.3vw - 22px); padding: 0 8px; }
  .split__copy { gap: 1.2rem; padding-bottom: clamp(28px, 4vw, 64px); }

  /* Rows stack: number and name, then description underneath */
  .svc { grid-template-columns: 2rem minmax(0, 1fr); row-gap: 8px; }
  .svc__desc { grid-column: 2; justify-self: start; }
  .svc__num { align-self: start; padding-top: .9em; }

  /* Phones become a swipeable row */
  .work { padding-inline: 0; }
  .work .eyebrow, .work__title { padding-inline: var(--gutter); }
  .reels {
    justify-content: flex-start;
    gap: 22px;
    padding: 6px 12vw 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .reels::-webkit-scrollbar { display: none; }
  .reel { width: 62vw; scroll-snap-align: center; }

  .cards { grid-template-columns: 1fr; gap: 12px; max-width: 440px; }
  .pkg { display: block; }
  .card + .card { border-left: 0; }
  .cards__note { grid-area: auto; padding-top: 14px; }
  .card__icon { width: 112px; height: 112px; }

  .call { grid-template-columns: 1fr; gap: 34px; }
  .call__title { font-size: 22vw; }
  .rotary { width: 84%; margin-top: -30vw; margin-left: 0; }
  .tin { width: 100%; }
  .bizcard { --sb-h: 20vw; }
  .bizcard span { font-size: 2.2vw; }
  .bizcard small { font-size: 1.8vw; }

  .contact { grid-template-columns: 1fr; }
  .contact__photo { min-height: 74vw; }
  .spark--b { top: auto; right: 12%; bottom: -32px; }
  .contact__name { font-size: 24vw; }

  .ig { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ig__tile { grid-column: span 2; }
  .ig__tile:nth-child(n + 4) { grid-column: span 3; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; grid-row: 1; border-inline: 0; border-bottom: 1px solid rgba(245, 239, 198, .32); }
  .footer__col + .footer__brand + .footer__col { border-left: 1px solid rgba(245, 239, 198, .32); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; translate: none; }
}