/* ============================================================
   ANNMARIA MAKEUP — ransom-note collage booking site
   Matched to the "Pretty Little Marketer" reference system
   ============================================================ */

:root {
  /* warm paper + muted pastels (from reference) */
  --cream:   #F1ECE1;
  --cream-2: #E9E2D3;
  --paper:   #FCFBF7;
  --ink:     #191713;
  --ink-2:   #4a443a;

  --mint:   #C7E7B7;
  --mint-line: #86BE63;
  --pink:   #F7C4D4;
  --yellow: #F8E6A2;
  --blue:   #C6E5F1;
  --lav:    #D8CAEE;
  --coral:  #FF7A55;
  --pink-btn: #F6A9C1;

  --gold-1: #F7CE57;
  --gold-2: #E39B1C;

  --shadow:    5px 5px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);

  --f-bric:  'Bricolage Grotesque', system-ui, sans-serif;
  --f-luxe:  'Playfair Display', Georgia, serif;
  /* every family now resolves to the elegant serif for one consistent voice */
  --f-mono:  'Playfair Display', Georgia, serif;
  --f-arch:  'Playfair Display', Georgia, serif;
  --f-serif: 'Playfair Display', Georgia, serif;
  --f-pixel: 'Playfair Display', Georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-bric);
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M4 2 L4 22 L9 17 L13 25 L16 23 L12 15 L20 15 Z' fill='white' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 26px; }

/* mono micro-labels used everywhere */
.mono { font-family: var(--f-mono); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-weight: 700; font-size: 13px; letter-spacing: .04em;
  padding: 12px 22px; border-radius: 100px;
  background: var(--pink-btn); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: var(--shadow-sm);
  cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
.btn--white { background: #fff; }
.btn--ink { background: var(--ink); color: var(--cream); }
.btn--lg { font-size: 15px; padding: 16px 32px; }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 200; background: var(--cream); border-bottom: 1.5px solid var(--ink); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; padding: 15px 26px; max-width: 1240px; margin: 0 auto; }
.logo { font-family: var(--f-luxe); font-weight: 600; font-size: 26px; letter-spacing: .01em; line-height: 1; }
.logo em { font-style: italic; font-weight: 500; }
.nav__links { display: flex; gap: 26px; align-items: center; }
.nav__links a:not(.joinbtn) { font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.nav__links a.ul { border-bottom: 1.5px solid var(--ink); padding-bottom: 2px; }
.nav__links a:not(.joinbtn):hover { color: var(--coral); }
.joinbtn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: #fff; border: 2px solid var(--ink); border-radius: 100px; padding: 8px 16px; box-shadow: var(--shadow-sm);
  transition: transform .12s ease;
}
.joinbtn:hover { transform: translate(-2px,-2px); }
.joinbtn .reddot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); border: 1px solid var(--ink); display: inline-block; }
.nav__burger { display: none; background: none; border: none; font-size: 24px; cursor: pointer; }

/* ---------- Ransom-note type system ---------- */
.ransom { font-weight: 800; line-height: .9; letter-spacing: -.01em; }
.ransom .w { display: inline-block; white-space: nowrap; }
.r-bric  { font-family: var(--f-bric); font-weight: 800; }
.r-arch  { font-family: var(--f-arch); }
.r-serif { font-family: var(--f-serif); font-weight: 400; }
.r-pixel { font-family: var(--f-pixel); font-weight: 700; }
.r-out   { font-family: var(--f-arch); color: var(--cream); -webkit-text-stroke: 2.5px var(--ink); }
.box-mint  { background: var(--mint);  border: 3px solid var(--ink); border-radius: .18em; padding: 0 .06em; }
.box-yellow{ background: var(--yellow);border: 3px solid var(--ink); border-radius: .2em;  padding: 0 .08em; }
.box-pink  { background: var(--pink);  border: 3px solid var(--ink); border-radius: .2em;  padding: 0 .08em; }
.box-line  { background: transparent; border: 3px solid var(--mint-line); border-radius: .2em; padding: 0 .06em; }
.tl { display: inline-block; transform: rotate(-7deg); }
.tr { display: inline-block; transform: rotate(6deg); }
.tu { display: inline-block; transform: translateY(-.06em); }
.td { display: inline-block; transform: translateY(.06em); }

/* ---------- Hero ---------- */
.hero { background: var(--cream); position: relative; overflow: hidden; border-bottom: 1.5px solid var(--ink); padding-top: 88px; }
.hero__inner { text-align: center; position: relative; z-index: 5; }
.tag {
  display: inline-block; font-family: var(--f-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-indent: .12em; text-transform: uppercase;
  background: var(--pink); border: 2px solid var(--ink); padding: 6px 16px; border-radius: 100px; box-shadow: var(--shadow-sm);
}
.hero__title {
  font-family: 'Playfair Display', var(--f-serif);
  font-weight: 600; color: var(--ink);
  font-size: clamp(50px, 9.6vw, 132px);
  line-height: 1.02; letter-spacing: -.015em;
  margin: 52px 0 38px; white-space: nowrap;
}
.hero__title em { font-style: italic; font-weight: 500; }
.hero__sub { max-width: 520px; margin: 0 auto; font-size: 16px; line-height: 1.55; color: var(--ink-2); font-weight: 500; }

/* doodles behind/around title */
.doodle { position: absolute; z-index: 2; }
.spark { color: var(--gold-1); -webkit-text-stroke: 2px var(--ink); font-size: 30px; }
.bubble {
  background: #fff; border: 2.5px solid var(--ink); border-radius: 40px 40px 40px 6px;
  padding: 8px 16px 10px; font-size: 22px; letter-spacing: 3px; line-height: .5; box-shadow: var(--shadow-sm);
}

/* gold 3D star (CSS) */
.gstar { display: inline-block; background: linear-gradient(145deg, var(--gold-1) 30%, var(--gold-2)); filter: drop-shadow(2px 3px 0 rgba(0,0,0,.25)); clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }

/* collage row along hero baseline */
.collage { position: relative; z-index: 4; height: 300px; margin-top: 44px; }
.collage .row {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 0; padding: 0 10px;
}
.cut {
  border: 3px solid var(--ink); background: #fff; object-fit: cover;
  box-shadow: 4px 4px 0 rgba(0,0,0,.18); position: relative;
}
.cut.c1 { width: 150px; height: 190px; border-radius: 16px; transform: rotate(-5deg); margin-right: -14px; z-index: 2; }
.cut.c2 { width: 140px; height: 210px; border-radius: 90px 90px 16px 16px; transform: rotate(3deg); margin-right: -12px; z-index: 3; }
.cut.c3 { width: 168px; height: 168px; border-radius: 50%; transform: rotate(-2deg); margin-right: -14px; z-index: 4; }
.cut.c4 { width: 150px; height: 200px; border-radius: 16px; transform: rotate(4deg); margin-right: -12px; z-index: 3; }
.cut.c5 { width: 138px; height: 180px; border-radius: 16px; transform: rotate(-4deg); filter: grayscale(1) contrast(1.05); z-index: 2; }
.collage .gstar.g-a { position: absolute; width: 82px; height: 82px; left: 3%;  bottom: 92px; transform: rotate(-12deg); }
.collage .gstar.g-b { position: absolute; width: 52px; height: 52px; right: 6%; bottom: 150px; transform: rotate(14deg); }
.collage .bubble.b-a { position: absolute; right: 12%; top: 0; }
.collage .spark.sp-a { position: absolute; left: 24%; top: 20px; }
.collage .spark.sp-b { position: absolute; right: 26%; bottom: 40px; font-size: 22px; }

/* ---------- Ticker ---------- */
.ticker { background: var(--cream); border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); overflow: hidden; white-space: nowrap; padding: 9px 0; }
.ticker--ink { background: var(--ink); color: var(--cream); }
.ticker--mint { background: var(--mint); }
.ticker__track { display: inline-block; animation: scroll 30s linear infinite; }
.ticker__track span { font-family: var(--f-mono); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; padding: 0 4px; }
.ticker__track .ico { color: var(--coral); padding: 0 18px; font-size: 12px; }
@keyframes scroll { from { transform: translateX(0);} to { transform: translateX(-50%);} }

/* ---------- Signup / booking (the "join the club" analog) ---------- */
.signup { background: var(--paper); position: relative; overflow: hidden; padding: 164px 0 172px; border-bottom: 1.5px solid var(--ink); }
.signup__letters span { position: absolute; font-weight: 800; color: var(--ink); opacity: .9; }
.env { position: absolute; width: 62px; height: 44px; border: 2.5px solid var(--ink); border-radius: 6px; box-shadow: var(--shadow-sm); }
.env::before { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 55%); background: var(--ink); opacity: .1; }
.env.e1 { background: #fff; top: 16%; left: 12%; transform: rotate(-12deg); }
.env.e2 { background: var(--blue); bottom: 18%; right: 12%; transform: rotate(10deg); }
.signup__head { font-family: var(--f-luxe); font-weight: 600; font-size: clamp(46px, 7.6vw, 88px); text-align: center; line-height: 1.02; letter-spacing: -.01em; position: relative; z-index: 3; }
.signup__head em { font-style: italic; font-weight: 500; }
.signup__sub { text-align: center; color: var(--ink-2); font-size: 15px; font-weight: 500; margin-top: 12px; position: relative; z-index: 3; }
.form { max-width: 620px; margin: 26px auto 0; position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form .field { display: flex; flex-direction: column; }
.form .field--full { grid-column: 1 / -1; }
.form label { font-family: var(--f-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 5px; }
.form input, .form select {
  font-family: var(--f-luxe); font-size: 16px; letter-spacing: 0;
  padding: 13px 18px; border: 2px solid var(--ink); border-radius: 100px; background: #fff; color: var(--ink); width: 100%;
}
.form textarea {
  font-family: var(--f-luxe); font-size: 16px; letter-spacing: 0;
  padding: 13px 18px; border: 2px solid var(--ink); border-radius: 20px; background: #fff; color: var(--ink); width: 100%;
  resize: vertical; min-height: 104px;
}
.form input::placeholder, .form textarea::placeholder { color: #9a938a; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; box-shadow: var(--shadow-sm); }
.signup__cta { text-align: center; margin-top: 28px; position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.signup__cta small { color: var(--ink-2); font-size: 13px; }
.signup--page { padding-top: 60px; }
.form .subrow { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 4px; }
.form .subrow .btn { background: var(--pink-btn); }
.form small { color: var(--ink-2); font-size: 12px; text-align: center; }
.form-note { grid-column: 1/-1; text-align: center; font-family: var(--f-mono); font-size: 12px; font-weight: 700; color: var(--coral); min-height: 16px; }

/* ---------- Cards carousel (insiders analog = services) ---------- */
.cards { background: var(--cream); padding: 160px 0 104px; }
.cards__head { font-family: var(--f-luxe); font-weight: 600; font-size: clamp(30px, 4.6vw, 52px); text-align: center; letter-spacing: -.01em; margin-bottom: 34px; }
.cards__head em { font-style: italic; font-weight: 500; }
.cards__track { display: flex; gap: 18px; overflow-x: auto; padding: 6px 26px 22px; scroll-snap-type: x mandatory; }
.cards__track::-webkit-scrollbar { height: 8px; }
.cards__track::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 100px; }
.card { flex: 0 0 288px; scroll-snap-align: start; border: 2px solid var(--ink); border-radius: 22px; padding: 24px; display: flex; flex-direction: column; min-height: 250px; box-shadow: var(--shadow-sm); }
.card--pink { background: var(--pink); } .card--blue { background: var(--blue); }
.card--mint { background: var(--mint); } .card--yellow { background: var(--yellow); }
.card--lav { background: var(--lav); }
.card__title { font-family: var(--f-luxe); font-weight: 600; font-size: 24px; line-height: 1.14; letter-spacing: -.01em; }
.card__rule { border: none; border-top: 1.5px solid var(--ink); margin: 14px 0 12px; opacity: .5; }
.card__meta { font-family: var(--f-mono); font-size: 12px; font-weight: 700; line-height: 1.5; flex: 1; }
.card__meta b { font-size: 15px; }
.card .btn { align-self: flex-start; margin-top: 16px; background: #fff; font-size: 11px; padding: 9px 16px; }
.cards__ctrls { display: flex; gap: 14px; justify-content: center; margin-top: 8px; }
.cards__ctrls button {
  width: 48px; height: 42px; border: 2px solid var(--ink); border-radius: 100px; background: #fff; box-shadow: var(--shadow-sm);
  font-family: var(--f-mono); font-size: 18px; cursor: pointer; transition: transform .12s ease;
}
.cards__ctrls button:hover { transform: translate(-2px,-2px); }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--cream); border-radius: 42px 42px 0 0; margin-top: 4px; padding: 40px 0 0; }
.reel { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; padding-bottom: 40px; }
.reel__item { aspect-ratio: 3/4; border-radius: 16px; overflow: hidden; position: relative; border: 1.5px solid rgba(255,255,255,.15); }
.reel__item img, .reel__item video { width: 100%; height: 100%; object-fit: cover; }
.reel__item .play { position: absolute; left: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.85); border: 1.5px solid var(--ink); display: grid; place-items: center; font-size: 11px; color: var(--ink); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 30px; padding-bottom: 40px; }
.foot__lead { font-family: var(--f-luxe); font-weight: 600; font-size: 25px; line-height: 1.22; max-width: 330px; }
.foot__lead em { font-style: italic; font-weight: 500; }
.foot__socials { display: flex; gap: 10px; margin-top: 18px; }
.foot__socials a { width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.4); display: grid; place-items: center; font-size: 16px; transition: background .15s, color .15s; }
.foot__socials a:hover { background: var(--pink); color: var(--ink); border-color: var(--pink); }
.foot__col h4 { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pink); margin-bottom: 14px; }
.foot__col a { display: block; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 11px; opacity: .85; }
.foot__col a:hover { opacity: 1; color: var(--pink); }
.foot-word { font-family: var(--f-luxe); font-weight: 600; font-size: clamp(40px, 11.5vw, 168px); line-height: .9; text-align: center; padding: 14px 10px 8px; white-space: nowrap; color: var(--cream); letter-spacing: -.01em; }
.foot-word em { font-style: italic; font-weight: 500; }
.foot-word .dot { color: var(--pink); font-style: normal; }
.foot-bar { border-top: 1.5px solid rgba(255,255,255,.22); margin-top: 20px; padding: 18px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .82; }
.foot-bar .credit { color: var(--pink); }
.foot-bar a.credit:hover { text-decoration: underline; text-underline-offset: 2px; }
.cookie { position: static; font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: var(--cream); border-radius: 8px; padding: 6px 12px; cursor: pointer; }

/* ---------- Inner pages ---------- */
.pagehead { text-align: center; background: var(--cream); padding: 64px 26px 12px; }
.pagehead .eyebrow { font-family: var(--f-luxe); font-size: 13px; font-style: italic; letter-spacing: .04em; color: var(--coral); margin-bottom: 8px; }
.pagehead h1 { font-family: var(--f-luxe); font-weight: 600; font-size: clamp(42px, 7vw, 84px); line-height: 1.02; letter-spacing: -.015em; }
.pagehead h1 em { font-style: italic; font-weight: 500; }
.pagehead p { max-width: 560px; margin: 16px auto 0; color: var(--ink-2); font-size: 16px; line-height: 1.55; font-weight: 500; }
.page { background: var(--cream); padding: 30px 0 72px; }

/* services grid (reuses .card visuals) */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 960px; margin: 0 auto; padding: 0 26px; }
.svc-grid .card { flex: initial; width: auto; min-height: 0; }
.svc-grid .card__meta { flex: initial; }
.svc-grid .card .card__desc { font-family: var(--f-bric); font-size: 14.5px; line-height: 1.5; font-weight: 500; margin: 2px 0 4px; }

/* portfolio gallery */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1000px; margin: 0 auto; padding: 0 26px; }
.gallery figure { margin: 0; aspect-ratio: 4/5; border: 2px solid var(--ink); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm); background: var(--cream-2); transition: transform .15s ease, box-shadow .15s ease; }
.gallery figure:hover { transform: rotate(-1deg) scale(1.02); box-shadow: var(--shadow); }
.gallery img, .gallery video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* about */
.about-wrap { max-width: 980px; margin: 0 auto; padding: 0 26px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px; align-items: center; }
.about-photo { border: 2px solid var(--ink); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }
.about-photo img { width: 100%; display: block; }
.about-text h2 { font-family: var(--f-luxe); font-weight: 600; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; margin-bottom: 16px; }
.about-text h2 em { font-style: italic; font-weight: 500; }
.about-text p { font-family: var(--f-bric); font-size: 16.5px; line-height: 1.62; color: var(--ink-2); font-weight: 500; margin-bottom: 16px; }
.about-stats { display: flex; gap: 34px; max-width: 980px; margin: 56px auto 0; padding: 34px 26px 0; border-top: 1.5px solid var(--ink); flex-wrap: wrap; justify-content: center; text-align: center; }
.about-stats .stat b { font-family: var(--f-luxe); font-weight: 600; font-size: 40px; display: block; line-height: 1; }
.about-stats .stat span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.page-cta { text-align: center; margin-top: 52px; }

/* services: 3 looks + home-service price panel */
.svc-grid--3 { grid-template-columns: repeat(3, 1fr); max-width: 1000px; }
.home-svc { max-width: 720px; margin: 40px auto 0; padding: 30px 34px; border: 2px solid var(--ink); border-radius: 22px; background: var(--paper); box-shadow: var(--shadow-sm); }
.home-svc__title { font-family: var(--f-luxe); font-weight: 600; font-size: 26px; line-height: 1.15; }
.home-svc__title em { font-style: italic; font-weight: 500; color: var(--ink-2); font-size: 19px; }
.home-svc__note { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin: 6px 0 12px; }
.pricelist { list-style: none; }
.pricelist li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 2px; border-top: 1.5px solid rgba(0,0,0,.14); }
.pricelist li span { font-family: var(--f-luxe); font-weight: 500; font-size: 18px; }
.pricelist li b { font-family: var(--f-luxe); font-weight: 600; font-size: 18px; white-space: nowrap; }

/* ---------- Classes page ---------- */
.class-badge { display: inline-block; font-family: var(--f-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; background: var(--mint); border: 2px solid var(--ink); border-radius: 100px; padding: 8px 20px; box-shadow: var(--shadow-sm); }
.class-loc { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 14px 0 22px; }
.included { list-style: none; margin: 0 0 18px; }
.included li { font-family: var(--f-luxe); font-size: 19px; padding: 10px 0 10px 30px; position: relative; border-bottom: 1.5px solid rgba(0,0,0,.1); }
.included li::before { content: "✓"; position: absolute; left: 2px; top: 10px; color: var(--coral); font-family: var(--f-bric); font-weight: 700; }
.class-note { font-family: var(--f-bric); font-size: 14px; color: var(--ink-2); font-style: italic; margin-bottom: 22px; }
.class-price { font-family: var(--f-luxe); font-weight: 600; font-size: clamp(44px, 6vw, 58px); line-height: 1; }
.class-price small { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); margin-top: 8px; }
.class-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

/* ---------- Class advert: homepage band ---------- */
.classband { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; text-align: center; max-width: 1120px; margin: 8px auto 64px; padding: 20px 26px; background: var(--mint); border: 2px solid var(--ink); border-radius: 20px; box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .12s ease; }
.classband:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow); }
.classband__tag { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: var(--cream); border-radius: 100px; padding: 5px 12px; }
.classband__text { font-family: var(--f-luxe); font-size: 18px; }
.classband__text strong { font-weight: 600; }
.classband__cta { font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; border-bottom: 2px solid var(--ink); padding-bottom: 1px; }

/* ---------- Class advert: popup modal ---------- */
.promo-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(25,23,19,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.promo-overlay.show { opacity: 1; visibility: visible; }
.promo { position: relative; width: min(440px, 100%); background: var(--paper); border: 2px solid var(--ink); border-radius: 24px; box-shadow: var(--shadow); padding: 32px 30px 26px; text-align: center; transform: translateY(12px) scale(.98); transition: transform .25s ease; max-height: 90vh; overflow: auto; }
.promo-overlay.show .promo { transform: none; }
.promo__close { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.promo__tag { display: inline-block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; background: var(--mint); border: 2px solid var(--ink); border-radius: 100px; padding: 5px 14px; }
.promo__title { font-family: var(--f-luxe); font-weight: 600; font-size: 34px; line-height: 1.05; margin: 14px 0 4px; }
.promo__title em { font-style: italic; font-weight: 500; }
.promo__sub { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.promo__list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 18px 0 12px; }
.promo__list li { font-family: var(--f-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; border: 1.5px solid var(--ink); border-radius: 100px; padding: 5px 11px; }
.promo__note { font-size: 12.5px; color: var(--ink-2); font-family: var(--f-bric); }
.promo__price { font-family: var(--f-luxe); font-weight: 600; font-size: 42px; margin: 10px 0 18px; }
.promo__cta { display: flex; flex-direction: column; gap: 10px; }
.promo__cta .btn { justify-content: center; }
.promo__later { margin-top: 14px; background: none; border: none; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; text-decoration: underline; }

@media (max-width: 900px) {
  .svc-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .about-wrap { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 480px) {
  .gallery { grid-template-columns: 1fr; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .reel { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .form { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .collage { height: 150px; }
  .cut.c1,.cut.c4,.cut.c5 { display: none; }
  .cut.c2 { width: 104px; height: 150px; } .cut.c3 { width: 120px; height: 120px; }
  .collage .gstar.g-a { width: 54px; height: 54px; }
  .env { display: none; }
}
@media (max-width: 480px) {
  .reel { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr; }
}