/* The site-wide system for the 2026 redesign (window 104, David 10/27: "make a version of the Chamberlin Studio website
   to be just like the Rev Productions"): REV Productions' layout, look and motion with Chamberlin Studio's own words,
   work and logo. Black page, white type, Poppins, centered sections, pill buttons with a round arrow. Page stylesheets
   add only what their page needs; the shared parts live here. Scroll-driven parts read --p (0 to 1), which js/studio.js
   sets on each [data-sx-stage]; with reduced motion everything rests in place. */
:root {
  --font-body: "Poppins", system-ui, sans-serif;
  --bg: #000;
  --card: #141414;
  --card-2: #1c1c1c;
  --line: rgba(255, 255, 255, .12);
  --soft: #c9c9c9;
  --wrap: 1224px;
  --pad: clamp(16px, 7.5vw, 108px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color: #fff; -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; scrollbar-gutter: stable; }
body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; background: var(--bg); color: #fff; overflow-x: clip; }
a { color: inherit; }
img, video, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sx-skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: #fff; color: #000; padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.sx-skip:focus { top: 16px; }
.wrap { width: min(var(--wrap), 100% - var(--pad) * 2); margin-inline: auto; }

/* Header: logo left; the booking pill and the round menu button right. Clear glass in every state (David 10/27: "almost
   completely transparent with a slight blur effect no defining line"): the layer under the header blurs what passes
   beneath it by 12 px under a faint dark tint, and both fade out over the bar's lower part, so no border or edge ever
   marks where the bar ends. Over the white footer js/studio.js adds .is-light: frosted white, a black logo and black
   buttons. The open menu always gets the dark look. */
.sx-top { position: fixed; inset: 0 0 auto; z-index: 70; }
/* The tint fades by its own gradient as well as by the mask, so the bar keeps a soft end even where a browser does not
   mask a backdrop blur. --sx-tint is registered so the change to the light tint eases too. */
@property --sx-tint { syntax: "<color>"; inherits: false; initial-value: rgba(0, 0, 0, .22); }
.sx-top::before { --sx-tint: rgba(0, 0, 0, .22); content: ""; position: absolute; inset: 0 0 -18px; z-index: -1; pointer-events: none; background: linear-gradient(var(--sx-tint) 50%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); -webkit-mask-image: linear-gradient(#000 52%, rgba(0, 0, 0, .55) 72%, transparent); mask-image: linear-gradient(#000 52%, rgba(0, 0, 0, .55) 72%, transparent); transition: --sx-tint .3s var(--ease); }
.sx-top .wrap { display: flex; align-items: center; justify-content: space-between; height: 90px; }
.sx-logo { display: block; }
/* A soft shade under the white logo keeps it readable over a bright photo; on black it does not show. */
.sx-logo img { width: clamp(220px, 19vw, 260px); height: auto; filter: invert(0) drop-shadow(0 1px 8px rgba(0, 0, 0, .45)); transition: filter .3s var(--ease); }
.sx-top-actions { display: flex; align-items: center; gap: 14px; }
.sx-pill { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 28px; border-radius: 999px; background: #fff; color: #000; font-size: 14px; text-decoration: none; transition: background-color .25s, color .25s; }
.sx-pill:hover { background: #e6e6e6; }
.sx-pill { white-space: nowrap; }
.sx-menu-btn { position: relative; flex: none; width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 0; cursor: pointer; transition: background-color .25s; }
.sx-menu-btn span { position: absolute; left: 50%; top: 50%; width: 20px; height: 3px; margin: -1.5px 0 0 -10px; border-radius: 3px; background: #000; transition: transform .38s var(--ease), opacity .2s var(--ease), background-color .25s; }
.sx-menu-btn span:nth-child(1) { transform: translateY(-6.5px); }
.sx-menu-btn span:nth-child(3) { transform: translateY(6.5px); }
.sx-menu-btn[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.sx-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.sx-menu-btn[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }
/* Focus over footage and photos: a dark ring inside the white one, so it shows on any picture. */
.sx-top a:focus-visible, .sx-top button:focus-visible { box-shadow: 0 0 0 3px #000; }
/* Over the white footer (never while the menu is open: its panel is black). */
:root:not(.sx-menu-open) .sx-top.is-light::before { --sx-tint: rgba(254, 255, 254, .72); }
:root:not(.sx-menu-open) .sx-top.is-light .sx-logo img { filter: invert(1) drop-shadow(0 1px 8px rgba(0, 0, 0, 0)); }
:root:not(.sx-menu-open) .sx-top.is-light .sx-pill { background: #000; color: #fff; }
:root:not(.sx-menu-open) .sx-top.is-light .sx-pill:hover { background: #2a2a2a; }
:root:not(.sx-menu-open) .sx-top.is-light .sx-menu-btn { background: #000; }
:root:not(.sx-menu-open) .sx-top.is-light .sx-menu-btn span { background: #fff; }
:root:not(.sx-menu-open) .sx-top.is-light a:focus-visible, :root:not(.sx-menu-open) .sx-top.is-light button:focus-visible { outline-color: #000; box-shadow: 0 0 0 3px #fefffe; }
/* Asked-for solidity: a visitor who turns transparency down gets a plain bar. */
@media (prefers-reduced-transparency: reduce) {
  .sx-top::before { bottom: 0; background: #000; -webkit-mask-image: none; mask-image: none; }
  :root:not(.sx-menu-open) .sx-top.is-light::before { background: #fefffe; }
}

/* The menu: a full screen of large links, the call to action and the contact line under them. */
.sx-menu { position: fixed; inset: 0; z-index: 60; background: #000; overflow-y: auto; padding: 128px var(--pad) 48px; opacity: 0; transition: opacity .32s var(--ease); }
.sx-menu.is-open { opacity: 1; }
.sx-menu[hidden] { display: none; }
.sx-menu > div { width: min(var(--wrap), 100%); min-height: 100%; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); align-items: end; gap: 48px 72px; }
.sx-menu nav ul { list-style: none; counter-reset: sx-menu; }
.sx-menu nav li { counter-increment: sx-menu; overflow: hidden; }
.sx-menu nav li a { display: inline-flex; align-items: baseline; gap: 18px; font-size: clamp(34px, 5.2vw, 72px); line-height: 1.06; letter-spacing: -.01em; text-decoration: none; padding: .04em 0 .16em; transform: translateY(105%); transition: transform .62s var(--ease), color .2s; }
.sx-menu nav li a::before { content: counter(sx-menu, decimal-leading-zero); min-width: 1.6em; font-size: 13px; letter-spacing: .08em; color: #8a8a8a; transform: translateY(-1.7em); }
/* The hover badge (David 10/27: the Patrick Kelly Wise footer's): a small white box with an arrow that swings up from
   its corner and opens beside the link; the same timing and curve as that footer. */
.sx-menu nav li a::after { content: ""; flex: none; align-self: center; width: 0; height: .42em; margin-left: .06em; border-radius: .07em; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 19'%3E%3Cpath d='M15.2 0 13.4 1.8l6.4 6.4H0v2.6h19.8l-6.4 6.4 1.8 1.8L25 9.5z'/%3E%3C/svg%3E") center / .27em auto no-repeat; transform: rotate(-90deg); transform-origin: 0 100%; transition: width .3s cubic-bezier(.16, 1, .3, 1), transform 1.5s cubic-bezier(.16, 1, .3, 1); }
.sx-menu nav li a:hover, .sx-menu nav li a:focus-visible, .sx-menu nav li a[aria-current="page"] { color: var(--soft); }
.sx-menu nav li a:hover::after, .sx-menu nav li a:focus-visible::after { width: .42em; transform: rotate(0); transition: width 1s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1); }
.sx-menu.is-open nav li a { transform: none; }
.sx-menu.is-open nav li:nth-child(2) a { transition-delay: .04s, 0s; }
.sx-menu.is-open nav li:nth-child(3) a { transition-delay: .08s, 0s; }
.sx-menu.is-open nav li:nth-child(4) a { transition-delay: .12s, 0s; }
.sx-menu.is-open nav li:nth-child(5) a { transition-delay: .16s, 0s; }
.sx-menu.is-open nav li:nth-child(6) a { transition-delay: .2s, 0s; }
.sx-menu.is-open nav li:nth-child(7) a { transition-delay: .24s, 0s; }
.sx-menu-foot { display: grid; justify-items: start; gap: 12px; padding: 32px; border-radius: 28px; background: var(--card); font-size: 15px; color: var(--soft); opacity: 0; transform: translateY(18px); transition: opacity .5s .2s var(--ease), transform .5s .2s var(--ease); }
.sx-menu.is-open .sx-menu-foot { opacity: 1; transform: none; }
.sx-menu-foot > .sx-btn { margin-bottom: 10px; }
.sx-menu-foot p a { font-size: 18px; color: #fff; text-decoration: none; overflow-wrap: anywhere; }
.sx-menu-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #8a8a8a; }
.sx-menu-label:not(:first-child) { margin-top: 10px; }
.sx-menu-foot p a:hover { text-decoration: underline; }
/* In the menu, Get pricing is an outlined pill (the white pill stays the hero's first button). */
.sx-menu-foot .sx-btn--light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.sx-menu-foot .sx-btn--light:hover { background: rgba(255, 255, 255, .08); }
.sx-menu-foot .sx-btn--light .sx-arrow { background: #fff; color: #000; }
/* The header's round button closes the menu, so the old close button in the panel stays hidden. */
.sx-menu-close { display: none; }

/* Buttons: a pill with a round arrow button at its end; the arrow turns on hover. */
.sx-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 46px; padding: 5px 5px 5px 18px; border-radius: 999px; font-size: 14px; line-height: 1.2; text-decoration: none; border: 0; cursor: pointer; transition: background-color .25s; }
.sx-btn--light { background: #fff; color: #000; }
.sx-btn--light:hover { background: #e9e9e9; }
.sx-btn--dark { background: rgba(0, 0, 0, .55); color: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.sx-btn--dark:hover { background: rgba(255, 255, 255, .08); }
.sx-btn--black { background: #000; color: #fff; }
.sx-btn--black:hover { background: #222; }
.sx-btn--outline { background: transparent; color: #000; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .28); }
.sx-btn--outline:hover { background: rgba(0, 0, 0, .05); }
.sx-arrow { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; transition: transform .35s var(--ease); }
.sx-arrow svg { width: 15px; height: 15px; }
.sx-btn--light .sx-arrow, .sx-btn--outline .sx-arrow { background: #000; color: #fff; }
.sx-btn--dark .sx-arrow, .sx-btn--black .sx-arrow { background: #fff; color: #000; }
.sx-btn:hover .sx-arrow { transform: rotate(45deg); }
.sx-actions { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* The hero, static form (phones, reduced motion, no WebGL): full-bleed video under a dark veil, the giant name, one
   line, two buttons. css/device-hero.css turns .dh--3d into the scroll stage where the video sits on a 3D device. */
.dh { position: relative; background: #000; }
.dh-sticky { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; overflow: hidden; isolation: isolate; }
.dh-media { position: absolute; inset: 0; z-index: -2; background: #000; }
.dh-poster, .dh-poster img { position: absolute; inset: 0; width: 100%; height: 100%; }
.dh-poster img { object-fit: cover; }
.dh-media.is-playing .dh-poster { visibility: hidden; }
.dh-video { position: relative; width: 100%; height: 100%; object-fit: cover; }
.dh-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .38), rgba(0, 0, 0, .58)); }
.dh-copy { position: relative; z-index: 1; padding: 120px 0 80px; }
.sx-title { font-weight: 700; font-size: clamp(44px, 7.6vw, 110px); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; }
.sx-hero-sub { margin: 16px auto 0; max-width: 40em; font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.5; text-wrap: balance; }

/* Sections: a centered headline, one line, two buttons, then the content. */
.sx-section { padding-top: clamp(96px, 11vw, 160px); text-align: center; }
.sx-h2 { font-weight: 400; font-size: clamp(34px, 3.8vw, 56px); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.sx-grad { background: linear-gradient(90deg, #fff 35%, #9d9d9d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sx-lead { max-width: 860px; margin: 18px auto 0; font-size: 16px; text-wrap: pretty; }
.sx-lead--soft { color: var(--soft); }
.sx-lead a { color: #fff; }

/* Bento: photo tiles with large corners; .b2 spans two columns, .t2 two rows. */
.sx-bento { margin-top: 46px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 26.6vw, 383px); gap: 14px; text-align: left; }
.sx-bento > * { position: relative; border-radius: 24px; overflow: hidden; background: var(--card); }
.sx-bento .b2 { grid-column: span 2; }
.sx-bento .t2 { grid-row: span 2; }
.sx-bento img, .sx-bento video { width: 100%; height: 100%; object-fit: cover; }

/* A dark card. */
.sx-card { background: var(--card); border-radius: 32px; padding: 36px; text-align: left; }

/* The logo strip: logos slide on their own; the strip itself is the control (a real button over it, aria-pressed:
   click or tap stops and starts, hover stops it on a fine pointer, the "Pause logos" chip shows on keyboard focus). */
.sx-logos { position: relative; margin-top: clamp(56px, 6vw, 88px); overflow: hidden; padding: 22px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sx-logos-track { display: flex; align-items: center; width: max-content; gap: clamp(48px, 6vw, 88px); padding-right: clamp(48px, 6vw, 88px); animation: sx-logos 48s linear infinite; }
/* The second set is in the markup for the loop: [data-sx-dup] wraps it (display: contents keeps one flex row). */
.sx-logos-track [data-sx-dup] { display: contents; }
.sx-logos-track img { height: clamp(28px, 3vw, 40px); width: auto; max-width: 180px; object-fit: contain; opacity: .82; }
@keyframes sx-logos { to { transform: translateX(-50%); } }
.sx-logos.is-paused .sx-logos-track, .sx-logos.is-off .sx-logos-track { animation-play-state: paused; }
.sx-logos-toggle { position: absolute; inset: 0; width: 100%; border: 0; background: transparent; cursor: pointer; }
.sx-logos-toggle:focus-visible { outline-offset: -3px; }
.sx-logos-chip { position: absolute; right: 12px; bottom: 6px; padding: 5px 12px; border-radius: 999px; background: #fff; color: #000; font-size: 12px; opacity: 0; pointer-events: none; }
.sx-logos-toggle:focus-visible .sx-logos-chip { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .sx-logos:hover .sx-logos-track { animation-play-state: paused; }
}

/* Numbers: dark cards, a small label over a large figure. Each [data-stat] carries data-source. */
.sx-stat-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sx-stat { min-height: 270px; border-radius: 28px; background: var(--card); display: grid; place-content: center; gap: 4px; padding: 20px; }
.sx-stat p { font-size: 14px; }
.sx-stat strong { display: block; font-size: clamp(30px, 4vw, 58px); font-weight: 400; line-height: 1.1; overflow-wrap: anywhere; }

/* Testimonials: dark cards with large corners, the name large, the business under it. */
.sx-quote-grid { margin: 60px auto 0; max-width: 1080px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sx-quote { border-radius: 48px; background: var(--card); padding: 48px 36px; display: grid; justify-items: center; align-content: start; text-align: center; overflow: hidden; }
.sx-quote h3 { font-weight: 400; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.2; }
.sx-quote > p { margin-top: 12px; font-size: 14px; color: var(--soft); }
.sx-quote blockquote { margin-top: 22px; font-size: 16px; line-height: 1.65; color: #ececec; }

/* Questions: plain rows behind hairlines, a round plus that turns into a close mark. */
.sx-faq { max-width: 864px; margin: 48px auto 0; text-align: left; border-top: 1px solid var(--line); }
.sx-faq details { border-bottom: 1px solid var(--line); }
.sx-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 4px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.4; }
.sx-faq summary::-webkit-details-marker { display: none; }
.sx-faq summary::after { content: "+"; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; font-size: 22px; line-height: 1; transition: transform .3s var(--ease); }
.sx-faq details[open] > summary::after { transform: rotate(45deg); }
.sx-faq-a { padding: 0 4px 26px; max-width: 46em; color: var(--soft); }
.sx-faq-a p + p { margin-top: 12px; }
.sx-faq-a a { color: #fff; }

/* Form fields on black. */
.sx-field { display: grid; gap: 8px; text-align: left; }
.sx-field label, .sx-field .sx-field-label { font-size: 14px; color: var(--soft); }
.sx-field input, .sx-field select, .sx-field textarea { width: 100%; min-height: 54px; padding: 14px 18px; border-radius: 16px; border: 1px solid #6e6e6e; background: var(--card); color: #fff; font-size: 16px; }
/* The field edge is #6e6e6e: 3.6:1 on the card and 4.1:1 on black (WCAG 1.4.11 asks 3:1 for an input's edge). */
.sx-field select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.sx-field textarea { min-height: 150px; resize: vertical; }
.sx-field input:focus-visible, .sx-field select:focus-visible, .sx-field textarea:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-color: transparent; }
.sx-field small { font-size: 13px; color: var(--soft); }

/* The white band at the end: the line and two buttons, the footer columns, the legal line and the giant name. */
:root { --sx-lip: clamp(28px, 4vw, 56px); }
main { position: relative; z-index: 1; background: var(--bg); padding-bottom: clamp(96px, 11vw, 160px); border-radius: 0 0 var(--sx-lip) var(--sx-lip); box-shadow: 0 34px 70px rgba(0, 0, 0, .5); }
.sx-end { position: relative; z-index: 0; margin-top: calc(-1 * var(--sx-lip)); background: #fefffe; color: #000; padding: calc(clamp(64px, 7vw, 110px) + var(--sx-lip)) 0 0; text-align: left; overflow: hidden; }
.sx-end :focus-visible { outline-color: #000; }
/* The closing call to action: the last section of every page, on black. One decision (a call), a softer one (the
   packages) and the reply promise; David's face makes it a person you are booking with, not a form. */
.sx-cta { padding-top: clamp(104px, 12vw, 176px); text-align: center; }
.sx-cta-face { width: 68px; height: 68px; margin: 0 auto 28px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px #000, 0 0 0 5px rgba(255, 255, 255, .3); }
.sx-cta-face img { width: 100%; height: 100%; object-fit: cover; }
.sx-cta h2 { max-width: 15em; margin: 0 auto; font-weight: 400; font-size: clamp(40px, 5.4vw, 80px); line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; }
.sx-cta-sub { max-width: 34em; margin: 20px auto 0; font-size: clamp(16px, 1.3vw, 18px); color: var(--soft); text-wrap: balance; }
.sx-cta .sx-actions { margin-top: 34px; }
.sx-cta .sx-btn { min-height: 56px; padding-left: 24px; font-size: 15px; }
.sx-cta .sx-arrow { width: 46px; height: 46px; }

/* The newsletter, first in the footer: one field and one button, the small print word for word (check_site.py). */
.sx-nl h2 { font-weight: 400; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.15; letter-spacing: -.01em; }
.sx-nl > p { margin-top: 10px; max-width: 30em; font-size: 15px; color: #444; }
.sx-nl form { position: relative; margin-top: 22px; max-width: 32em; }
.sx-nl-row { display: flex; align-items: flex-end; gap: 10px; }
.sx-nl-field { flex: 1 1 auto; min-width: 0; }
.sx-nl-field label { display: block; margin-bottom: 6px; font-size: 13px; color: #444; }
.sx-nl-field input { width: 100%; min-height: 50px; padding: 12px 20px; border-radius: 999px; border: 1px solid #8a8a8a; background: #fff; color: #000; font-size: 16px; }
.sx-nl-field input:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.sx-nl-field input[aria-invalid="true"] { border-color: #b3261e; }
.sx-nl-row .sx-btn { flex: none; min-height: 50px; }
.sx-nl-status { min-height: 1.4em; margin-top: 8px; font-size: 13.5px; color: #b3261e; }
.sx-nl-small { font-size: 12.5px; color: #555; }
.sx-nl-small a { color: #000; }
.sx-nl-thanks { margin-top: 22px; font-size: 16px; }
.sx-nl-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.sx-foot-cols { margin-top: clamp(72px, 8vw, 120px); padding-top: 44px; border-top: 1px solid rgba(0, 0, 0, .12); display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 32px; text-align: left; }
.sx-foot-cols h3 { font-size: 12.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #555; }
.sx-foot-cols ul { list-style: none; margin-top: 14px; display: grid; gap: 9px; font-size: 14.5px; }
.sx-foot-cols a { text-decoration: none; overflow-wrap: anywhere; }
.sx-foot-cols a:hover { text-decoration: underline; }
.sx-foot-plain { color: #444; }
.sx-foot-icons { display: flex; gap: 10px; margin-top: 4px; }
.sx-foot-icons a { width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); display: grid; place-items: center; }
.sx-foot-icons svg { width: 16px; height: 16px; }
.sx-foot { margin-top: 48px; padding: 22px 0; border-top: 1px solid rgba(0, 0, 0, .12); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; font-size: 13.5px; color: #333; text-align: left; }
.sx-foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.sx-foot-links a { text-decoration: none; }
.sx-foot-links a:hover { text-decoration: underline; }
.sx-foot-links svg { display: inline-block; vertical-align: -2px; margin-right: 6px; }
.sx-end-name { width: 100%; height: auto; margin: 10px 0 clamp(16px, 2vw, 28px); color: #000; }


/* The loading screen (only on pages with a 3D hero): black, the tree mark breathing over a thin bar. js/studio.js
   removes it the moment the page and its hero are ready; without the script it bows out by itself after 7 s. */
.sx-loader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #000; transition: opacity .45s var(--ease), visibility 0s .45s; animation: sx-loader-bail .45s 7s forwards; }
.sx-loader.is-done { opacity: 0; visibility: hidden; }
.sx-loader-mark { display: grid; justify-items: center; gap: 22px; }
.sx-loader-mark img { width: 52px; height: 52px; filter: invert(1); animation: sx-loader-breathe 1.4s ease-in-out infinite alternate; }
.sx-loader-bar { position: relative; width: 132px; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .16); }
.sx-loader-bar::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(0); animation: sx-loader-fill 2.8s cubic-bezier(.15, .7, .2, 1) forwards; }
.sx-loader.is-done .sx-loader-bar::after { animation: none; transform: scaleX(1); transition: transform .2s; }
@keyframes sx-loader-fill { to { transform: scaleX(.92); } }
@keyframes sx-loader-breathe { from { opacity: .5; } to { opacity: 1; } }
@keyframes sx-loader-bail { to { opacity: 0; visibility: hidden; } }
/* The screen is only there for the 3D hero: phones and reduced motion get the plain video hero at once. */
@media (max-width: 760px), (prefers-reduced-motion: reduce) { .sx-loader { display: none; } }

/* The scroll cue (js/studio.js adds it to every page): "Scroll" over a short line with a light running down it, at
   the bottom of the first screen and wherever the visitor stops with more below. Under it the page fades to black
   along the bottom edge (eased, so no edge shows), which keeps the word clear over a photo or text and shows the page
   goes on; it is nearly black from the middle of its height down, where the word and the line sit, and shorter at a
   stop further down (.is-rest), so less of what is being read dims. Both come in slowly and leave quickly at the next
   scroll; only the cue itself takes a click. The light rests while the cue is away, and with reduced motion it holds
   still. */
.sx-cue { position: fixed; inset: auto 0 0; z-index: 44; display: grid; justify-items: center; align-content: end; height: calc(clamp(190px, 27vh, 260px) + env(safe-area-inset-bottom, 0px)); padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .07) 12%, rgba(0, 0, 0, .22) 24%, rgba(0, 0, 0, .45) 34%, rgba(0, 0, 0, .66) 42%, rgba(0, 0, 0, .84) 49%, rgba(0, 0, 0, .9) 60%, rgba(0, 0, 0, .93)); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s; }
.sx-cue.is-on { opacity: 1; visibility: visible; transition: opacity .7s var(--ease), visibility 0s; }
.sx-cue.is-rest { height: calc(clamp(150px, 20vh, 200px) + env(safe-area-inset-bottom, 0px)); }
.sx-cue-in { display: grid; justify-items: center; gap: 14px; padding: 14px 28px 6px; cursor: pointer; pointer-events: auto; transform: translateY(14px); transition: transform .7s var(--ease); -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.sx-cue.is-on .sx-cue-in { transform: none; }
/* The negative margin takes back the tracking after the last letter, so the word sits centered over the line; the soft
   dark glow keeps faint words under the fade from showing through the letters. */
.sx-cue-label { margin-right: -.26em; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .86); text-shadow: 0 0 3px #000, 0 0 10px #000, 0 0 18px #000; transition: color .25s; }
.sx-cue-in:hover .sx-cue-label { color: #fff; }
.sx-cue-line { position: relative; width: 2px; height: 48px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .24); }
.sx-cue-line::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; transform: translateY(-100%); animation: sx-cue 2.2s cubic-bezier(.65, 0, .35, 1) infinite; }
.sx-cue:not(.is-on) .sx-cue-line::after { animation-play-state: paused; }
@keyframes sx-cue { 0% { transform: translateY(-100%); } 64%, 100% { transform: translateY(100%); } }
@media (max-width: 640px) {
  .sx-cue { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .sx-cue-in { gap: 12px; }
  .sx-cue-line { height: 40px; }
}
/* Little room under a screen's last buttons: only a short line (js/studio.js sets the fade's height to the room). */
.sx-cue.is-tight .sx-cue-in { gap: 0; padding-top: 10px; }
.sx-cue.is-tight .sx-cue-label { display: none; }
.sx-cue.is-tight .sx-cue-line { height: 28px; }
@media print { .sx-cue { display: none; } }
/* Reveals below the fold: blur and rise in once (the hero never waits on them). */
@media (prefers-reduced-motion: no-preference) {
  .sx-js .sx-rv { opacity: 0; filter: blur(12px); transform: translateY(26px); transition: opacity .9s var(--ease), filter .9s var(--ease), transform .9s var(--ease); }
  .sx-js .sx-rv.is-in { opacity: 1; filter: none; transform: none; }
  /* The closing band's content holds still (or moves slower than the page) as the page lifts off it. */
  .sx-js .sx-end > .wrap { transform: translateY(calc((1 - var(--p, 1)) * -1 * var(--sx-shift, 0px))); }
}
/* Reduced motion: nothing slides; the logos sit still in rows. */
@media (prefers-reduced-motion: reduce) {
  .sx-logos { -webkit-mask-image: none; mask-image: none; }
  .sx-logos-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 28px 44px; }
  .sx-logos-track [data-sx-dup] { display: none; }
  .sx-logos-toggle { display: none; }
  .sx-arrow, .sx-faq summary::after { transition: none; }
  .sx-menu, .sx-menu nav li a, .sx-menu nav li a::after, .sx-menu-foot, .sx-menu-btn span { transition: none; }
  .sx-menu { opacity: 1; }
  .sx-menu nav li a, .sx-menu-foot { transform: none; opacity: 1; }
  .sx-loader-mark img, .sx-loader-bar::after { animation: none; }
  .sx-loader-bar::after { transform: scaleX(.6); }
  .sx-cue, .sx-cue.is-on, .sx-cue-in { transition: none; }
  .sx-cue-in { transform: none; }
  .sx-cue-line::after { animation: none; transform: translateY(-50%); }
}

/* Wide screens: the newsletter on the left, the link columns on the right, so the whole band fits one screen and can
   sit still under the page as it lifts off (REV's layered footer). */
@media (min-width: 1081px) {
  .sx-end > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: clamp(48px, 6vw, 104px); align-items: start; }
  .sx-nl { grid-column: 1; }
  .sx-foot-cols { grid-column: 2; margin-top: 6px; padding-top: 0; border-top: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .sx-foot, .sx-end-name { grid-column: 1 / -1; }
  .sx-foot { margin-top: 56px; }
}
@media (max-width: 1080px) {
  .sx-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .sx-menu > div { grid-template-columns: 1fr; align-items: start; align-content: start; gap: 40px; }
  .sx-menu nav li a { font-size: clamp(32px, 8.4vw, 52px); }
  /* The small number rises with the link's size, so on a phone its top is never cut off by the row. */
  .sx-menu nav li a::before { transform: translateY(calc(clamp(32px, 8.4vw, 52px) * -.42)); }
  .sx-menu-foot { padding: 26px; }
}
@media (max-width: 960px) {
  .sx-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-quote-grid { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 640px) {
  .sx-top .wrap { height: 72px; }
  .sx-logo img { width: min(150px, 38vw); }
  .sx-top-actions { gap: 10px; }
  .sx-pill { height: 44px; padding: 0 16px; font-size: 13px; }
  .sx-menu-btn { width: 44px; height: 44px; }
  .sx-menu-btn span { width: 18px; margin-left: -9px; }
  .sx-menu-btn span:nth-child(1) { transform: translateY(-5.5px); }
  .sx-menu-btn span:nth-child(3) { transform: translateY(5.5px); }
  .sx-menu-btn[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
  .sx-menu-btn[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }
  .sx-menu { padding-top: 104px; }
  .dh-copy { padding: 110px 0 64px; }
  .sx-title { font-size: min(52px, calc((100vw - 2 * var(--pad)) / 6.6)); }
  .sx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 44vw; grid-auto-flow: dense; gap: 10px; }
  .sx-bento .b2 { grid-column: span 2; }
  .sx-bento .t2 { grid-row: span 1; }
  .sx-bento > * { border-radius: 18px; }
  .sx-card { padding: 26px; border-radius: 26px; }
  .sx-stat { min-height: 170px; border-radius: 22px; }
  .sx-quote { padding: 36px 22px; border-radius: 32px; }
  .sx-foot-cols { gap: 28px 20px; }
  .sx-nl-row { flex-wrap: wrap; }
  .sx-nl-row .sx-btn { width: 100%; }
}
/* The footer on phones (David 10/27: "the footer just needs to be better. Collapsible menu options and optimized for
   mobile"): tighter spacing and 44 px tap targets. js/studio.js adds .is-fold to the columns: each link column is a
   full-width row whose heading button opens its list (closed at first), and the contact column stays open below them
   as rows of its own (email, phone, Book a call). Without the script the columns keep their two-up layout. */
@media (max-width: 640px) {
  .sx-end { padding-top: calc(52px + var(--sx-lip)); }
  .sx-nl form { margin-top: 20px; }
  .sx-nl-field input, .sx-nl-row .sx-btn { min-height: 52px; }
  .sx-foot-cols.is-fold { display: block; margin-top: 44px; padding-top: 0; }
  .sx-foot-cols.is-fold > div:not(.sx-foot-reach) { display: grid; grid-template-rows: auto 0fr; border-bottom: 1px solid rgba(0, 0, 0, .12); transition: grid-template-rows .42s var(--ease); }
  .sx-foot-cols.is-fold > div.is-open { grid-template-rows: auto 1fr; }
  .sx-foot-toggle { width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0; border: 0; background: none; color: #000; font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: 0; text-transform: none; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .sx-foot-mark { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .28); transition: transform .42s var(--ease), background-color .25s, color .25s; }
  .sx-foot-mark::before, .sx-foot-mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.75px; margin: -.875px 0 0 -6px; border-radius: 2px; background: currentColor; }
  .sx-foot-mark::after { transform: rotate(90deg); }
  .sx-foot-cols.is-fold .is-open .sx-foot-mark { transform: rotate(45deg); background: #000; color: #fff; }
  /* The list folds to nothing (the row's height eases between 0fr and 1fr) and leaves the tab order once closed. */
  .sx-foot-cols.is-fold > div:not(.sx-foot-reach) > ul { min-height: 0; margin-top: 0; overflow: hidden; visibility: hidden; transition: visibility 0s .42s; }
  .sx-foot-cols.is-fold > div.is-open > ul { visibility: visible; transition-delay: 0s; }
  .sx-foot-cols.is-fold ul { gap: 0; }
  .sx-foot-cols.is-fold > div:not(.sx-foot-reach) li:last-child { margin-bottom: 12px; }
  .sx-foot-cols.is-fold li:not(.sx-foot-icons) > a { display: flex; align-items: center; min-height: 44px; font-size: 16px; }
  /* The list clips its overflow while it folds, so its links' focus rings sit inside them, with room around the words
     (the list reaches 10 px past the column and each link pads its words back into line). */
  .sx-foot-cols.is-fold > div:not(.sx-foot-reach) > ul { margin-inline: -10px; }
  .sx-foot-cols.is-fold > div:not(.sx-foot-reach) li > a { padding-inline: 10px; }
  .sx-foot-cols.is-fold > div:not(.sx-foot-reach) li > a:focus-visible { outline-offset: -2px; }
  /* Contact: open, its label over rows that go somewhere (an arrow where the other rows have a plus). */
  .sx-foot-cols.is-fold > .sx-foot-reach { padding-top: 30px; }
  .sx-foot-cols.is-fold > .sx-foot-reach ul { margin-top: 6px; }
  /* The size lets the whole email address sit on one line from 340 px up. */
  .sx-foot-cols.is-fold .sx-foot-reach li:not([class]) > a { justify-content: space-between; gap: 12px; min-height: 54px; border-bottom: 1px solid rgba(0, 0, 0, .12); font-size: clamp(14px, calc(4.6vw - 1.5px), 17px); overflow-wrap: anywhere; }
  .sx-foot-cols.is-fold .sx-foot-reach li:not([class]) > a::after { content: ""; flex: none; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .35s var(--ease); }
  .sx-foot-cols.is-fold .sx-foot-reach li:not([class]) > a:hover { text-decoration: none; }
  .sx-foot-cols.is-fold .sx-foot-reach li:not([class]) > a:hover::after { transform: rotate(45deg); }
  .sx-foot-cols.is-fold .sx-foot-plain { font-size: 14px; line-height: 1.5; }
  .sx-foot-cols.is-fold li:not([class]) + .sx-foot-plain { margin-top: 18px; }
  .sx-foot-cols.is-fold .sx-foot-icons { gap: 12px; margin-top: 14px; }
  .sx-foot-cols.is-fold .sx-foot-icons a { width: 44px; height: 44px; }
  /* The legal line: the copyright, then the links as 44 px rows. */
  .sx-foot { margin-top: 30px; padding: 18px 0 4px; gap: 4px 20px; }
  .sx-foot > p:first-child { flex-basis: 100%; }
  .sx-foot-links { gap: 0 22px; }
  .sx-foot-links a, .sx-foot-links span { display: inline-flex; align-items: center; min-height: 44px; }
  .sx-end-name { margin-top: 14px; }
}
@media (max-width: 340px) {
  .sx-foot-cols.is-fold .sx-foot-reach li:not([class]) > a::after { display: none; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .sx-foot-cols.is-fold > div:not(.sx-foot-reach), .sx-foot-cols.is-fold > div:not(.sx-foot-reach) > ul, .sx-foot-cols.is-fold > div.is-open > ul, .sx-foot-mark, .sx-foot-cols.is-fold .sx-foot-reach li:not([class]) > a::after { transition: none; }
}
/* The narrowest phones (under 360 px): a smaller logo so the logo, Book a call and the menu button share one line. */
@media (max-width: 359px) {
  .sx-logo img { width: 118px; }
  .sx-pill { padding: 0 12px; }
}