/* ============================================================ packages.html (pricing-as-hub) — zephyr language, own grid. Like the home hero, this page breaks from the fixed 1200px canvas: sections are responsive grids capped at 1200px. All classes are svc- prefixed to stay clear of canvas rules. Motion: load choreography on the hero (svc-rise), scroll reveals on the shared .fade-in observer (script.js), the marquee reuses the global .eh-ticker component. services.js drives the add-on inquiry menu, testimonials, and package -> form flow. ============================================================ */ .svc-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(22px, 4vw, 48px); } .svc-eyebrow { font-family: var(--font-sub); font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--powder); } .svc-h2 { font-family: var(--font-display); font-weight: 200; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.08; text-transform: uppercase; letter-spacing: .02em; } .svc-h2 em { font-style: italic; text-transform: none; letter-spacing: 0; } .svc-btn { display: inline-flex; align-items: center; justify-content: center; padding: 17px 36px; background: var(--paleblue); text-decoration: none; border: 0; cursor: pointer; font-family: var(--font-sub); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--slate); transition: background .45s, color .45s, transform .45s; } .svc-btn:hover { background: var(--powder); color: var(--cream); } .svc-btn:focus-visible { outline: 2px solid var(--powder); outline-offset: 3px; } .svc-ghost { font-family: var(--font-sub); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--slate); text-decoration: none; border-bottom: 1px solid var(--powder); padding-bottom: 6px; transition: color .3s, border-color .3s; } .svc-ghost:hover { color: var(--powder); } /* scroll reveal (rides the shared .fade-in observer in script.js) */ .svc-main .fade-in { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; } .svc-main .fade-in.is-visible { opacity: 1; transform: none; } /* ---------- hero: split editorial + ticker ---------- */ /* Owner request: full-bleed FIXED background image, black overlay, window height, and rectangular rather than the kit's arch. Same treatment as .spin-hero on the photo-booth page, so the two hero pages read as one system. The photo moved out of .svc-hero-media (removed) and onto the section itself; ::before paints the overlay so the image can be tuned independently of it. */ .svc-hero { position: relative; overflow: hidden; min-height: 560px; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; background: #000 url("../images/booth-film-01-setup.webp") center / cover no-repeat fixed; } .svc-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(0,0,0,.76) 0%, rgba(0,0,0,.79) 55%, rgba(0,0,0,.84) 100%); /* Swept at 23 scroll positions x 2px sampling: .72/.76/.82 bottomed out at 4.75:1 on the gold eyebrow against a 4.5 floor. A FIXED background puts a different part of the photo under the copy at every scroll position, and this one includes the booth's white TAP TO START screen, so the margin needs to be real rather than nominal. Matches .spin-hero's firmed stops. */ } .svc-hero > * { position: relative; z-index: 1; } .svc-hero-grid { max-width: 1200px; margin: 0 auto; width: 100%; padding: clamp(40px, 5vw, 72px) clamp(22px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 720px); gap: clamp(36px, 5vw, 80px); align-items: center; } @keyframes svc-rise { to { opacity: 1; transform: none; } } .svc-rise { opacity: 0; transform: translateY(26px); animation: svc-rise .9s cubic-bezier(.2,.7,.2,1) forwards; } .svc-hero .svc-eyebrow { display: block; margin-bottom: 26px; animation-delay: .05s; } .svc-h1 { font-family: var(--font-display); font-weight: 200; font-size: clamp(46px, 6.6vw, 92px); line-height: .98; text-transform: uppercase; letter-spacing: .02em; } .svc-h1 .svc-line { display: block; } .svc-h1 em { font-style: italic; text-transform: none; letter-spacing: 0; color: var(--powder); } .svc-h1 .svc-line:nth-child(1) { animation-delay: .14s; } .svc-h1 .svc-line:nth-child(2) { animation-delay: .26s; } .svc-lede { max-width: 46ch; margin-top: 26px; font-size: 16px; line-height: 1.75; color: color-mix(in srgb, var(--slate) 78%, var(--cream)); animation-delay: .4s; } .svc-hero-actions { margin-top: 34px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; animation-delay: .52s; } .svc-hero-stats { margin-top: 44px; display: flex; gap: clamp(24px, 3vw, 52px); animation-delay: .64s; } .svc-stat { border-left: 1px solid rgba(43, 58, 85, .25); padding-left: 16px; } .svc-stat b { display: block; font-family: var(--font-display); font-weight: 200; font-size: clamp(24px, 2.4vw, 34px); line-height: 1; } .svc-stat span { display: block; margin-top: 6px; font-family: var(--font-sub); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--powder); white-space: nowrap; } .svc-hero-media { position: relative; justify-self: center; width: min(430px, 88%); animation-delay: .3s; } .svc-hero-arch { border-radius: 999px 999px 0 0; overflow: hidden; } .svc-hero-arch img, .svc-hero-arch video { width: 100%; aspect-ratio: 4 / 5.15; object-fit: cover; transform: scale(1.06); animation: eh-drift 14s ease-in-out infinite alternate; } .svc-plate { position: absolute; left: -26px; bottom: 42px; background: var(--butter); padding: 18px 24px; box-shadow: 0 18px 40px rgba(43, 58, 85, .18); } .svc-plate-n { font-family: var(--font-display); font-style: italic; font-weight: 200; font-size: 24px; } .svc-plate-s { margin-top: 6px; font-family: var(--font-sub); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--powder); } /* the global .eh-ticker component perches on the hero's bottom edge */ /* ---------- what's included ---------- */ .svc-includes { background: var(--linen); padding: clamp(64px, 8vw, 110px) 0; } .svc-inc-top { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 6vw, 90px); align-items: center; } .svc-inc-top .svc-eyebrow { display: block; margin-bottom: 20px; } .svc-inc-copy p { margin-top: 22px; max-width: 46ch; font-size: 15px; line-height: 1.8; color: color-mix(in srgb, var(--slate) 80%, var(--linen)); } .svc-arch-media { justify-self: center; width: min(360px, 78vw); } .svc-arch-media img, .svc-arch-media video { display: block; width: 100%; aspect-ratio: 4 / 5.1; object-fit: cover; border-radius: 999px 999px 0 0; } .svc-arch-media figcaption { margin-top: 14px; text-align: center; font-family: var(--font-sub); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--powder); } .svc-inc-row { margin-top: clamp(48px, 6vw, 84px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); } .svc-inc-item { border-top: 1px solid rgba(43, 58, 85, .22); padding-top: 22px; transition: border-color .4s; } .svc-inc-item:hover { border-top-color: var(--powder); } .svc-inc-num { font-family: var(--font-display); font-style: italic; font-weight: 200; font-size: 26px; color: var(--powder); } .svc-inc-item h3 { margin-top: 10px; font-family: var(--font-sub); font-weight: 400; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; } .svc-inc-item p { margin-top: 12px; font-size: 14.5px; line-height: 1.75; color: color-mix(in srgb, var(--slate) 78%, var(--linen)); } /* ---------- packages ---------- */ .svc-packages { background: var(--cream); padding: clamp(72px, 9vw, 120px) 0; scroll-margin-top: 84px; } .svc-pkg-head { text-align: center; max-width: 640px; margin: 0 auto clamp(48px, 6vw, 76px); } .svc-pkg-head .svc-eyebrow { display: block; margin-bottom: 18px; } /* Reconciled list: the card count is the client's package count, not the demo's. Flex-wrap + justify-content:center keeps a trailing row of 1 or 2 centred instead of stranded; a full row renders identically to the grid. */ .svc-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 2.4vw, 34px); align-items: stretch; } .svc-cards > .svc-card { flex: 0 1 calc((100% - 2 * clamp(20px, 2.4vw, 34px)) / 3 - 0.5px); min-width: 240px; } .svc-card { background: #fff; border: 1px solid rgba(43, 58, 85, .14); padding: clamp(26px, 2.6vw, 38px); display: flex; flex-direction: column; position: relative; transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s; } .svc-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(43, 58, 85, .14); } .svc-card-img, .svc-card-video { margin: 0 auto 26px; width: min(230px, 100%); border-radius: 999px 999px 0 0; overflow: hidden; } .svc-card-img img, .svc-card-video video { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); } .svc-card:hover .svc-card-img img, .svc-card:hover .svc-card-video video { transform: scale(1.05); } .svc-card-name { text-align: center; font-family: var(--font-sub); font-weight: 400; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; } .svc-card-price { text-align: center; margin-top: 14px; font-family: var(--font-display); font-weight: 200; font-size: clamp(36px, 3.4vw, 48px); line-height: 1; } .svc-card-price small { display: block; margin-top: 8px; font-family: var(--font-sub); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--powder); } .svc-card-blurb { margin-top: 20px; text-align: center; font-size: 14px; line-height: 1.7; color: color-mix(in srgb, var(--slate) 76%, #fff); } .svc-card ul { margin: 26px 0 30px; list-style: none; } .svc-card li { padding: 12px 2px; font-size: 13.5px; line-height: 1.5; text-align: center; border-top: 1px solid rgba(43, 58, 85, .12); } .svc-card li:last-child { border-bottom: 1px solid rgba(43, 58, 85, .12); } .svc-card .svc-btn { margin-top: auto; align-self: center; } .svc-card.is-featured { background: var(--slate); border-color: var(--slate); color: var(--cream); } .svc-card.is-featured .svc-card-price, .svc-card.is-featured .svc-card-name { color: var(--cream); } .svc-card.is-featured .svc-card-price small { color: var(--paleblue); } .svc-card.is-featured .svc-card-blurb { color: rgba(247, 248, 245, .78); } .svc-card.is-featured li { border-color: rgba(247, 248, 245, .22); } .svc-pill { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--butter); color: var(--slate); padding: 8px 18px; font-family: var(--font-sub); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; } .svc-pkg-note { margin-top: 34px; text-align: center; font-size: 13.5px; color: color-mix(in srgb, var(--slate) 65%, var(--cream)); } .svc-pkg-note a { color: var(--slate); } /* ---------- add-ons (the upgrade menu, dark stage) ---------- */ .svc-addons { background: var(--slate); color: var(--cream); padding: clamp(72px, 9vw, 120px) 0; scroll-margin-top: 84px; } .svc-addons .svc-eyebrow { color: var(--paleblue); } .svc-addons-head { max-width: 640px; margin-bottom: clamp(40px, 5vw, 64px); } .svc-addons-head .svc-eyebrow { display: block; margin-bottom: 18px; } .svc-addons-head p { margin-top: 18px; font-size: 15px; line-height: 1.75; color: rgba(247, 248, 245, .72); } /* click-through carousel: one slide per add-on, count-agnostic */ .svc-carousel-viewport { overflow: hidden; } .svc-carousel-track { display: flex; transition: transform .6s cubic-bezier(.2,.7,.2,1); will-change: transform; } .svc-slide { flex: 0 0 100%; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); border: 1px solid rgba(247, 248, 245, .16); background: color-mix(in srgb, var(--cream) 6%, var(--slate)); overflow: hidden; transition: opacity .6s ease; } .svc-slide[aria-hidden="true"] { opacity: .18; } .svc-slide-media { position: relative; overflow: hidden; height: clamp(360px, 38vw, 480px); } .svc-slide-media img, .svc-slide-media video { display: block; width: 100%; height: 100%; object-fit: cover; } .svc-slide-tag { position: absolute; top: 18px; left: 18px; background: var(--butter); color: var(--slate); padding: 8px 16px; font-family: var(--font-sub); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; } .svc-slide-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 4vw, 60px); } .svc-slide-index { font-family: var(--font-sub); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(247, 248, 245, .5); margin-bottom: 20px; } .svc-slide-index b { color: var(--paleblue); font-weight: 400; } .svc-slide-top { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; } .svc-slide-name { font-family: var(--font-display); font-weight: 200; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.04; text-transform: uppercase; letter-spacing: .02em; } .svc-slide-price { font-family: var(--font-display); font-weight: 200; font-size: clamp(30px, 3.4vw, 46px); line-height: 1; color: var(--paleblue); white-space: nowrap; } .svc-slide-blurb { margin-top: 22px; max-width: 46ch; font-size: 15px; line-height: 1.78; color: rgba(247, 248, 245, .72); } .svc-addon-add { align-self: flex-start; margin-top: 30px; display: inline-flex; align-items: center; gap: 12px; padding: 0; background: none; border: 0; cursor: pointer; font-family: var(--font-sub); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--cream); transition: color .3s; } .svc-addon-add:hover { color: var(--paleblue); } .svc-addon-add:focus-visible { outline: 2px solid var(--paleblue); outline-offset: 5px; } .svc-addon-add-i { width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(247, 248, 245, .4); border-radius: 50%; font-size: 18px; line-height: 1; transition: transform .4s cubic-bezier(.2,.7,.2,1), background .3s, color .3s, border-color .3s; } .svc-addon-add:hover .svc-addon-add-i { border-color: var(--paleblue); } .svc-slide.is-added .svc-addon-add-i { background: var(--paleblue); border-color: var(--paleblue); color: var(--slate); transform: rotate(45deg); } /* nav: arrows flanking the dots (JS hides the row when there is one slide) */ .svc-carousel-nav { margin-top: clamp(26px, 3vw, 40px); display: flex; align-items: center; justify-content: center; gap: 22px; } .svc-carousel-arrow { width: 48px; height: 48px; flex: none; border-radius: 50%; cursor: pointer; background: none; border: 1px solid rgba(247, 248, 245, .35); color: var(--cream); font-size: 24px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background .35s, color .35s, border-color .35s; } .svc-carousel-arrow:hover { background: var(--paleblue); color: var(--slate); border-color: var(--paleblue); } .svc-carousel-arrow:focus-visible { outline: 2px solid var(--paleblue); outline-offset: 3px; } .svc-carousel-dots { display: flex; align-items: center; gap: 12px; } .svc-carousel-dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(247, 248, 245, .3); transition: background .3s, transform .3s; } .svc-carousel-dots button.is-live { background: var(--paleblue); transform: scale(1.3); } .svc-addons-foot { margin-top: clamp(32px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .svc-addons-note { max-width: 44ch; font-size: 12.5px; line-height: 1.6; color: rgba(247, 248, 245, .58); } /* ---------- testimonials ---------- */ .svc-quote { background: var(--butter); padding: clamp(64px, 8vw, 104px) 0; text-align: center; } .svc-quote-stage { position: relative; min-height: 200px; } .svc-quote figure { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .7s ease; pointer-events: none; } .svc-quote figure.is-live { opacity: 1; transform: none; position: relative; pointer-events: auto; } .svc-quote blockquote { max-width: 780px; margin: 0 auto; font-family: var(--font-display); font-style: italic; font-weight: 200; font-size: clamp(24px, 3vw, 38px); line-height: 1.35; } .svc-quote figcaption { margin-top: 24px; font-family: var(--font-sub); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--powder); } .svc-quote-dots { margin-top: 30px; display: flex; justify-content: center; gap: 12px; } .svc-quote-dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: rgba(43, 58, 85, .25); cursor: pointer; transition: background .3s, transform .3s; } .svc-quote-dots button.is-live { background: var(--slate); transform: scale(1.25); } /* ---------- faq ---------- */ .svc-faq { background: var(--cream); padding: clamp(64px, 8vw, 110px) 0; } .svc-faq-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 6vw, 100px); align-items: start; } .svc-faq-intro .svc-eyebrow { display: block; margin-bottom: 18px; } .svc-faq-intro p { margin-top: 20px; max-width: 38ch; font-size: 15px; line-height: 1.8; color: color-mix(in srgb, var(--slate) 78%, var(--cream)); } .svc-faqs .faq-q { font-size: 15px; } /* animated open: grid-rows collapse, overriding the global display toggle */ .svc-faqs .faq-a { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1); } .svc-faqs .faq-item.open .faq-a { grid-template-rows: 1fr; } .svc-faqs .faq-a p { min-height: 0; padding: 0; font-size: 14.5px; line-height: 1.75; color: color-mix(in srgb, var(--slate) 80%, var(--cream)); } .svc-faqs .faq-item.open .faq-a p { padding-bottom: 18px; } /* ---------- mobile + motion safety ---------- */ @media (max-width: 900px) { .svc-hero-grid, .svc-inc-top, .svc-faq-grid { grid-template-columns: 1fr; } .svc-cards > .svc-card { flex: 1 1 100%; } .svc-inc-row { grid-template-columns: 1fr; gap: 30px; } .svc-card.is-featured { order: -1; } .svc-cards { gap: 40px; } .svc-arch-media { width: min(300px, 82vw); } .svc-hero-media { width: min(320px, 84vw); } .svc-plate { left: 0; } .svc-hero-stats { flex-wrap: wrap; } .svc-slide { grid-template-columns: 1fr; } .svc-slide-media { height: 260px; } .svc-addons-foot { flex-direction: column; align-items: flex-start; } .svc-addons-foot .svc-btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .svc-rise { animation: none; opacity: 1; transform: none; } .svc-hero-arch img, .svc-hero-arch video { animation: none; transform: none; } .svc-main .fade-in { transition: none; opacity: 1; transform: none; } .svc-card, .svc-card-img img, .svc-quote figure, .svc-card-video video { transition: none; } .svc-carousel-track { transition: none; } .eh-track { animation: none; } } /* ---------- package cards: count-aware layout (services.js) ---------- The platform can add or remove package cards on any portal save, so the section adapts at load: the custom-quote filler (.svc-card-filler) steps aside once three real packages exist, and at four or more visible cards the grid becomes a one-row slider with arrows flanking the row. At three or fewer nothing here applies and the grid renders exactly as designed. */ @media (min-width: 901px) { .svc-cards.is-slider { display: flex; justify-content: flex-start; flex-wrap: nowrap; /* BOTH axes hidden, NOT auto: the arrows are the only way the rail moves. As an auto scroller with x-mandatory snap it captured trackpad gestures, and a lone overflow-x forces overflow-y to compute to auto, so the hover/pill headroom (padding-top pulled back by margin) left ~26px of vertical overflow: the rail latched the wheel and froze PAGE scrolling over the whole section (found live on a client build 2026-08-01). hidden blocks user scrolling on both axes; the arrows' scrollTo() keeps working. */ overflow: hidden; /* the featured pill overhangs the cards by 14px; give the scroll box that headroom (padding pulled back by margin) so it never clips */ padding-top: 22px; margin-top: -22px; } .svc-cards.is-slider > article { flex: 0 0 calc((100% - 2 * clamp(20px, 2.4vw, 34px)) / 3); } } .svc-pkg-shell { position: relative; } .svc-pkg-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; background: var(--cream); border: 1px solid rgba(43, 54, 66, .25); color: var(--slate); font-size: 24px; line-height: 1; display: none; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(43, 54, 66, .14); transition: background .35s, color .35s, border-color .35s; } @media (min-width: 901px) { .svc-pkg-shell .svc-pkg-arrow { display: inline-flex; } } .svc-pkg-arrow:hover { background: var(--slate); color: var(--cream); border-color: var(--slate); } .svc-pkg-arrow:focus-visible { outline: 2px solid var(--paleblue); outline-offset: 3px; } .svc-pkg-prev { left: -22px; } .svc-pkg-next { right: -22px; } /* ---------- package cards: the SOLO layout (services.js adds .is-solo) ---------- One package is its own layout, not a third of a row. The flex grid above puts a lone card in a ~380px column stranded in the middle of a 1200px section, which reads as a broken grid rather than a design (measured on this build before this block: ~550px of dead space either side, and the price wrapping onto two lines in a column sized for a short number). .is-solo unfolds the SAME card into an editorial split: photo left, the package read top to bottom on the right. No markup changes, so the reconciler (src/site_prices.js) still clones and removes cards exactly as before, and the class is applied from the DOM card count at load, so a portal save that adds a second package drops straight back to the grid with nothing rebuilt. Desktop only. Under 900px the grid is already a full width stack, which is the right answer for one card too. */ @media (min-width: 901px) { .svc-cards.is-solo { display: block; } .svc-cards.is-solo > .svc-card { max-width: 1080px; margin-inline: auto; text-align: left; display: grid; grid-template-columns: .82fr 1.18fr; /* five rows for the five children that sit in column 2; the list takes the 1fr so the button lands on the bottom edge whatever the copy length */ grid-template-rows: auto auto auto 1fr auto; column-gap: clamp(32px, 4vw, 68px); padding: clamp(32px, 3.2vw, 46px); } /* rectangular, not the card's arch: the photo is the full left column */ .svc-cards.is-solo .svc-card-img, .svc-cards.is-solo .svc-card-video { grid-column: 1; grid-row: 1 / -1; align-self: center; width: 100%; margin: 0; border-radius: 0; } .svc-cards.is-solo .svc-card-img img, .svc-cards.is-solo .svc-card-video video { aspect-ratio: 4 / 5; } .svc-cards.is-solo .svc-card-name, .svc-cards.is-solo .svc-card-price, .svc-cards.is-solo .svc-card-blurb, .svc-cards.is-solo .svc-card > ul, .svc-cards.is-solo .svc-card > .svc-btn { grid-column: 2; text-align: left; } .svc-cards.is-solo .svc-card-name { align-self: end; } .svc-cards.is-solo .svc-card-name::after { content: ""; display: block; width: 46px; height: 1px; background: var(--powder); margin: 20px 0 0; } .svc-cards.is-solo .svc-card-price { margin-top: 18px; font-size: clamp(44px, 4.4vw, 62px); } .svc-cards.is-solo .svc-card-blurb { margin-top: 24px; max-width: 44ch; } .svc-cards.is-solo .svc-card > ul { margin: 30px 0 34px; align-self: start; } .svc-cards.is-solo .svc-card li { display: flex; align-items: baseline; gap: 14px; padding: 13px 2px; text-align: left; transition: padding-left .4s; } .svc-cards.is-solo .svc-card li::before { content: "\2726"; color: var(--powder); font-size: 9px; line-height: 1.6; } .svc-cards.is-solo .svc-card li:hover { padding-left: 8px; } .svc-cards.is-solo .svc-card > .svc-btn { margin-top: 0; align-self: start; justify-self: start; } /* A full width band that jumps 8px on hover reads as a bug, not a nicety. The photo still scales; that is the one motion this layout wants. */ .svc-cards.is-solo > .svc-card:hover { transform: none; box-shadow: none; } /* "Most booked for weddings" on the only package on offer is nonsense. */ .svc-cards.is-solo .svc-pill { display: none; } } @media (max-width: 900px) { /* iOS ignores background-attachment: fixed; same ::before workaround the kit uses on .mq-testimonial and that .spin-hero now uses. */ .svc-hero { background-image: none; clip-path: inset(0); } .svc-hero::after { content: ""; position: fixed; inset: 0; z-index: -1; background: url("../images/booth-film-01-setup.webp") center / cover no-repeat; } } /* ---- #addons: the slot that always ships (2026-08-27) -------------------- THE ADD-ON SLOT ALWAYS SHIPS, and hides itself until her price list actually has an add-on, so a list with none never renders a heading over no cards. The inert