.sprite-sheet {position: absolute;
     width: 0;
     height: 0;
     overflow: hidden;}
.logo-invert {filter: brightness(0) invert(1);}
:root {--ink: #0d2440;
     --blue-deep: #0a1f33;
     --blue-base: #0d2440;
     --blue-glow: #fff;
     --red-base: #9b1228;
     --red-soft: #c03a4d;
     --red-bar: #8a1226;
     --white: #fff;
     --paper: #f3f5f9;
     --navy-pastel-1: #f7f8fa;
     --navy-pastel-2: #e3e6eb;
     --red-pastel-1: #fdf3f5;
     --line-dark: rgba(13, 36, 64, 0.14);
     --shadow-md: 0 18px 48px rgba(0, 0, 0, 0.24);
     --font-display: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
     --font-tagline: "Merriweather Sans", "Montserrat", system-ui, sans-serif;
     --font-body: "Merriweather Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
     --font-accent: "Montserrat", system-ui, sans-serif;
     --hero-img: url("../media/page1-bg.jpg");
     --service-img: url("../media/page2-bg.jpg");
     --booking-img: url("../media/page3-bg.jpg");
     --safe-top: env(safe-area-inset-top, 0px);
     --topbar-h: 84px;
     --brand-bar-h: 48px;
     --panel-bg-blur: 3px;
     --hero-bg-scale: 1.04;
     --service-bg-scale: 1.035;
     --noise-opacity: .035}
*, *::before, *::after {box-sizing: border-box}
* {margin: 0;
     padding: 0}
html {height: 100%;
     scroll-behavior: smooth;
     scroll-padding-top: var(--topbar-h);
     background: var(--blue-deep);
     -webkit-text-size-adjust: 100%;
     text-size-adjust: 100%}
body {min-height: 100%;
     font-family: var(--font-body);
     color: var(--white);
     line-height: 1.6;
     background: radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.16), transparent 28rem), radial-gradient(circle at 88% 15%, rgba(155, 18, 40, 0.14), transparent 24rem), linear-gradient(135deg, #060f1c 0, var(--blue-deep) 48%, var(--blue-base) 100%);
     background-attachment: scroll;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale}
body::after {content: "";
     position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: 100;
     opacity: var(--noise-opacity);
     mix-blend-mode: overlay;
     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
a {color: inherit;
     text-decoration: none}
button, input, select, textarea {font: inherit;
     color: inherit}
img, svg {display: block;
     max-width: 100%}
:focus-visible {outline: 2px solid var(--red-soft);
     outline-offset: 3px}
.skip-link {position: absolute;
     left: -9999px;
     top: 0;
     z-index: 9999;
     padding: .75rem 1rem;
     background: var(--white);
     color: var(--ink);
     font-weight: 700;
     letter-spacing: .08em;
     text-transform: uppercase;
     font-size: .75rem}
.skip-link:focus {left: .5rem;
     top: .5rem}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {animation-duration: .001ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: .001ms !important;
         scroll-behavior: auto !important}
}
.site-frame {width: min(100vw, 1720px);
     margin: 0 auto;
     background: rgba(10, 31, 51, 0.78);
     position: relative}
.snap-shell {height: 100dvh;
     overflow-y: auto;
     overflow-x: hidden;
     scroll-behavior: smooth;
     scroll-padding-top: 0;
     scroll-snap-type: y proximity;
     overscroll-behavior-y: contain;
     scrollbar-width: none;
     -webkit-overflow-scrolling: touch}
.snap-shell::-webkit-scrollbar {display: none}
.panel {scroll-snap-align: start}
.panel {min-height: 100dvh;
     display: grid;
     place-items: stretch;
     padding: 0;
     position: relative;
     isolation: isolate}
.panel-inner {position: relative;
     width: 100%;
     min-height: 100dvh;
     overflow: hidden;
     animation: panelIn 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both}
@keyframes panelIn {from {
         opacity: 0;
         transform: translateY(14px)
    }
     to {
         opacity: 1;
         transform: translateY(0)
    }}
.topbar {position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 30;
     width: 100%;
     min-height: var(--topbar-h);
     display: grid;
     grid-template-columns: minmax(0, auto) 1fr auto;
     align-items: center;
     gap: clamp(1rem, 3vw, 2.5rem);
     padding-left: clamp(1rem, 2.5vw, 2rem);
     padding-right: clamp(1rem, 2.5vw, 2rem);
     padding-top: max(0.85rem, var(--safe-top));
     padding-bottom: .85rem;
     background: rgba(10, 31, 51, 0.86);
     backdrop-filter: blur(18px) saturate(140%);
     -webkit-backdrop-filter: blur(18px) saturate(140%);
     border-bottom: 1px solid rgba(255, 255, 255, 0.08)}
.topbar::after {content: "";
     position: absolute;
     left: 0;
     right: 0;
     bottom: -1px;
     height: 1px;
     background: linear-gradient(90deg, transparent 0, rgba(155, 18, 40, 0) 18%, rgba(155, 18, 40, 0.5) 50%, rgba(155, 18, 40, 0) 82%, transparent 100%);
     pointer-events: none}
.brand {display: inline-flex;
     align-items: center;
     gap: 1rem;
     min-width: 0}
.brand-mark {width: 54px;
     height: 54px;
     flex: 0 0 auto;
     display: grid;
     place-items: center;
     transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1)}
.brand-mark img {width: 100%;
     height: 100%;
     object-fit: contain}
.brand:hover .brand-mark {transform: rotate(-6deg) scale(1.05)}
.brand-text {display: inline-flex;
     flex-direction: column;
     min-width: 0;
     line-height: 1}
.brand-text strong {font-family: var(--font-display);
     font-weight: 800;
     font-size: 1.2rem;
     letter-spacing: .08em;
     color: var(--white);
     text-transform: uppercase;
     white-space: nowrap}
.brand-text small {font-family: var(--font-tagline);
     font-size: .7rem;
     font-weight: 400;
     letter-spacing: .06em;
     color: rgba(255, 255, 255, 0.78);
     margin-top: .35rem;
     white-space: nowrap}
.nav {display: flex;
     justify-content: center;
     gap: clamp(1.5rem, 3vw, 3rem);
     font-family: var(--font-display);
     font-size: .78rem;
     font-weight: 600;
     letter-spacing: .2em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.78)}
.nav a {position: relative;
     padding: .35rem 0;
     transition: color 220ms ease}
.nav a:hover, .nav a.active {color: var(--white)}
.nav a::after {content: "";
     position: absolute;
     left: 0;
     bottom: -0.25rem;
     width: 100%;
     height: 2px;
     background: var(--red-soft);
     transform: scaleX(0);
     transform-origin: right;
     transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1)}
.nav a:hover::after, .nav a.active::after {transform: scaleX(1);
     transform-origin: left}
.top-actions {display: flex;
     justify-content: flex-end;
     align-items: center;
     gap: .65rem}
.pill-link {display: inline-flex;
     justify-content: center;
     align-items: center;
     gap: .55rem;
     min-height: 46px;
     padding: .8rem 1.2rem;
     border: 1.5px solid rgba(255, 255, 255, 0.32);
     background: transparent;
     color: var(--white);
     font-family: var(--font-display);
     font-size: .74rem;
     font-weight: 700;
     letter-spacing: .14em;
     text-transform: uppercase;
     white-space: nowrap;
     cursor: pointer;
     transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), background 240ms ease, border-color 240ms ease, box-shadow 240ms ease}
.pill-link:hover {transform: translateY(-2px);
     background: rgba(255, 255, 255, 0.08);
     border-color: rgba(255, 255, 255, 0.55)}
.pill-link:active {transform: translateY(0)}
.pill-link.primary, .submit-btn {border: 1.5px solid transparent;
     background: var(--red-base);
     color: var(--white);
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 14px 30px rgba(98, 9, 24, 0.32)}
.pill-link.primary:hover, .submit-btn:hover {background: var(--red-soft);
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 18px 40px rgba(98, 9, 24, 0.42)}
.pill-icon {width: 16px;
     height: 16px;
     flex: 0 0 auto;
     stroke: currentColor;
     stroke-width: 1.8;
     fill: none}
.eyebrow {display: inline-flex;
     align-items: center;
     gap: .85rem;
     color: rgba(255, 255, 255, 0.85);
     font-family: var(--font-display);
     font-size: .7rem;
     font-weight: 600;
     letter-spacing: .22em;
     text-transform: uppercase}
.eyebrow::before {content: "";
     width: 38px;
     height: 1.5px;
     background: var(--red-soft)}
h1, h2 {font-family: var(--font-display);
     font-weight: 900;
     letter-spacing: -0.02em;
     line-height: .94;
     text-transform: uppercase}
.brand-bar {grid-column: 1 / -1;
     min-height: var(--brand-bar-h);
     background: var(--red-bar);
     display: grid;
     place-items: center;
     padding: .9rem 1.5rem;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.18)}
.brand-bar p {font-family: var(--font-display);
     font-size: clamp(0.74rem, 0.95vw, 0.88rem);
     font-weight: 600;
     letter-spacing: .38em;
     color: var(--white);
     text-transform: uppercase;
     text-align: center}
.hero .panel-inner {display: grid;
     grid-template-columns: minmax(0, 1.15fr) minmax(380px, 0.85fr);
     grid-template-rows: 1fr auto;
     background: var(--blue-deep)}
.hero-copy {grid-column: 1;
     grid-row: 1;
     position: relative;
     z-index: 2;
     overflow: hidden;
     padding: calc(var(--topbar-h) + 2rem) clamp(2rem, 5vw, 4.5rem) 2.5rem clamp(2rem, 5vw, 4.5rem);
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: clamp(1.5rem, 3vw, 2.25rem);
     background: transparent}
.hero-copy::before {content: "";
     position: absolute;
     inset: -18px;
     background: var(--hero-img) center/cover no-repeat;
     filter: blur(var(--panel-bg-blur));
     transform: scale(var(--hero-bg-scale));
     z-index: 0}
.hero-copy::after {content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, rgba(5, 12, 18, 0.88) 0, rgba(10, 31, 51, 0.68) 55%, rgba(10, 31, 51, 0.42) 100%);
     z-index: 0}
.hero-copy>* {position: relative;
     z-index: 1}
.wordmark {display: grid;
     gap: 0;
     line-height: .82}
.wordmark .word-salt {font-family: var(--font-display);
     font-weight: 900;
     font-size: clamp(4.2rem, 9.5vw, 9rem);
     letter-spacing: -0.03em;
     color: var(--white);
     text-transform: uppercase}
.wordmark .word-spray {font-family: var(--font-accent);
     font-style: normal;
     font-weight: 900;
     font-size: clamp(3.75rem, 8.6vw, 7.9rem);
     letter-spacing: -0.045em;
     line-height: .92;
     margin-top: .08em;
     text-transform: uppercase}
.wordmark-rule {display: flex;
     align-items: center;
     gap: 1rem;
     margin-top: 1rem;
     margin-bottom: .15rem}
.wordmark-rule::before, .wordmark-rule::after {content: "";
     flex: 1;
     height: 1.5px;
     background: var(--red-soft)}
.wordmark-rule::before {max-width: 50px}
.wordmark-tagline {font-family: var(--font-tagline);
     font-size: clamp(0.72rem, 0.95vw, 0.9rem);
     font-weight: 400;
     letter-spacing: .42em;
     color: var(--white);
     text-transform: uppercase;
     white-space: nowrap}
.hero-lead {max-width: 540px;
     color: rgba(255, 255, 255, 0.86);
     font-size: clamp(0.95rem, 1.05vw, 1.05rem);
     line-height: 1.65}
.hero-location {display: flex;
     align-items: center;
     gap: 1.1rem;
     padding-top: 1.2rem;
     border-top: 1px solid rgba(255, 255, 255, 0.18);
     max-width: 540px}
.hero-location .location-mark {width: 60px;
     height: 60px;
     flex: 0 0 auto;
     border-radius: 50%;
     background: var(--red-base);
     display: grid;
     place-items: center;
     box-shadow: 0 8px 22px rgba(98, 9, 24, 0.35)}
.hero-location-text {font-family: var(--font-display);
     font-size: .78rem;
     font-weight: 600;
     letter-spacing: .2em;
     color: rgba(255, 255, 255, 0.92);
     text-transform: uppercase;
     line-height: 1.55}
.hero-side {grid-column: 2;
     grid-row: 1;
     position: relative;
     z-index: 2;
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: clamp(1.5rem, 2.5vw, 2.25rem);
     padding: calc(var(--topbar-h) + 2rem) clamp(2rem, 4vw, 3.25rem) 2.5rem;
     background: rgba(10, 31, 51, 0.55);
     border-left: 1px solid rgba(255, 255, 255, 0.08);
     backdrop-filter: blur(5px);
     -webkit-backdrop-filter: blur(5px)}
.side-header h3 {font-family: var(--font-display);
     font-weight: 900;
     font-size: clamp(1.2rem, 1.5vw, 1.45rem);
     letter-spacing: .02em;
     line-height: 1.15;
     text-transform: uppercase;
     color: var(--white)}
.side-header h3 .accent {display: block;
     color: var(--red-soft);
     margin-top: .15em}
.side-header p {margin-top: 1rem;
     color: rgba(255, 255, 255, 0.82);
     font-size: .94rem;
     line-height: 1.65;
     max-width: 38ch}
.side-actions {display: grid;
     gap: .65rem}
.side-actions .pill-link {width: 100%;
     min-height: 54px;
     font-size: .76rem;
     letter-spacing: .14em}
.service-icons {display: grid;
     grid-template-columns: repeat(3, 1fr);
     border-top: 1px solid rgba(255, 255, 255, 0.18);
     padding-top: 1.4rem}
.service-icons>div {display: flex;
     flex-direction: column;
     align-items: center;
     gap: .65rem;
     padding: 0 .5rem;
     text-align: center}
.service-icons>div+div {border-left: 1px solid rgba(255, 255, 255, 0.14)}
.service-icons svg {width: 36px;
     height: 36px;
     stroke: var(--white);
     stroke-width: 1.4;
     fill: none;
     stroke-linecap: round;
     stroke-linejoin: round}
.service-icons strong {font-family: var(--font-display);
     font-size: .78rem;
     font-weight: 800;
     letter-spacing: .18em;
     color: var(--white);
     text-transform: uppercase}
.service-icons span {display: block;
     font-family: var(--font-tagline);
     font-size: .7rem;
     font-weight: 400;
     color: rgba(255, 255, 255, 0.7);
     line-height: 1.5}
.services .panel-inner {display: grid;
     grid-template-columns: 36% 64%;
     grid-template-rows: 1fr auto;
     background: var(--paper)}
.services-aside {grid-row: 1;
     grid-column: 1;
     position: relative;
     z-index: 2;
     overflow: hidden;
     display: grid;
     align-content: space-between;
     gap: 1.4rem;
     padding: calc(var(--topbar-h) + 2rem) clamp(1.5rem, 3vw, 2.6rem) 2rem;
     border-right: 1px solid rgba(255, 255, 255, 0.16);
     background: transparent;
     color: var(--white)}
.services-aside::before {content: "";
     position: absolute;
     inset: -18px;
     background: var(--service-img) center/cover no-repeat;
     filter: blur(var(--panel-bg-blur));
     transform: scale(var(--service-bg-scale));
     z-index: 0}
.services-aside::after {content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, rgba(10, 31, 51, 0.24), rgba(10, 31, 51, 0.74));
     z-index: 0}
.services-aside>* {position: relative;
     z-index: 1}
.services-aside h2 {max-width: 520px;
     font-size: clamp(2.4rem, 5.6vw, 5.8rem);
     font-weight: 900;
     letter-spacing: -0.02em;
     line-height: .96}
.services-aside h2 em {display: block;
     font-family: var(--font-accent);
     font-style: normal;
     font-weight: 900;
     color: var(--blue-glow);
     letter-spacing: -0.04em;
     text-transform: uppercase;
     text-shadow: none;
     margin: .04em 0}
.aside-note {max-width: 420px;
     color: rgba(255, 255, 255, 0.86);
     line-height: 1.65;
     font-size: .94rem}
.aside-stat {display: grid;
     grid-template-columns: auto 1fr;
     gap: 1rem;
     align-items: center;
     padding: 1.1rem 0 0;
     border-top: 1px solid rgba(255, 255, 255, 0.18);
     max-width: 420px}
.aside-stat strong {font-family: var(--font-display);
     font-size: 2.4rem;
     font-weight: 900;
     color: var(--white);
     line-height: 1;
     letter-spacing: -0.02em}
.aside-stat span {font-family: var(--font-tagline);
     font-size: .82rem;
     color: rgba(255, 255, 255, 0.78);
     line-height: 1.45}
.services-main {grid-row: 1;
     grid-column: 2;
     min-width: 0;
     padding: calc(var(--topbar-h) + 2rem) clamp(1.5rem, 2.8vw, 2.9rem) 2.6rem;
     display: grid;
     grid-template-rows: auto minmax(0, 1fr);
     gap: clamp(1.35rem, 2vw, 2rem);
     color: var(--ink);
     overflow: hidden}
.section-heading {display: grid;
     grid-template-columns: 1fr minmax(250px, 360px);
     gap: 1.5rem;
     align-items: end;
     border-bottom: 1px solid var(--line-dark);
     padding-bottom: 1rem}
.section-heading h2 {color: var(--ink);
     font-size: clamp(2rem, 4.2vw, 4.4rem);
     font-weight: 900;
     letter-spacing: -0.02em}
.section-heading p {color: rgba(13, 36, 64, 0.72);
     font-size: .92rem;
     line-height: 1.6}
.service-grid {display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: clamp(0.9rem, 1.2vw, 1.15rem);
     min-height: 0;
     height: 100%;
     align-self: stretch;
     align-items: stretch}
.service-card {position: relative;
     display: grid;
     grid-template-rows: auto auto 1fr auto;
     align-content: start;
     gap: clamp(0.8rem, 1.05vw, 1rem);
     min-height: 0;
     padding: clamp(1.35rem, 2vw, 2rem);
     border: 1px solid var(--navy-pastel-2);
     background: var(--white);
     overflow: hidden;
     transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), background 320ms ease, box-shadow 320ms ease, border-color 320ms ease}
.service-card::before {content: attr(data-num);
     position: absolute;
     top: .7rem;
     right: 1rem;
     font-family: var(--font-accent);
     font-style: normal;
     font-weight: 900;
     font-size: clamp(2.6rem, 4.1vw, 4.25rem);
     letter-spacing: -0.08em;
     line-height: 1;
     color: rgba(155, 18, 40, 0.1);
     transition: color 320ms ease}
.service-card:hover {transform: translateY(-5px);
     background: var(--red-pastel-1);
     border-color: rgba(155, 18, 40, 0.28);
     box-shadow: 0 22px 55px rgba(13, 36, 64, 0.18)}
.service-card:hover::before {color: rgba(155, 18, 40, 0.22)}
.service-card-icon {width: 34px;
     height: 34px;
     stroke: var(--red-base);
     stroke-width: 1.4;
     fill: none;
     stroke-linecap: round;
     stroke-linejoin: round}
.service-card h3 {position: relative;
     max-width: 240px;
     font-family: var(--font-display);
     font-weight: 900;
     font-size: clamp(1.1rem, 1.55vw, 1.45rem);
     line-height: 1.05;
     letter-spacing: -0.01em;
     text-transform: uppercase}
.service-card p {position: relative;
     color: rgba(13, 36, 64, 0.74);
     font-size: clamp(0.86rem, 0.96vw, 0.98rem);
     line-height: 1.62;
     max-width: 32ch}
.service-card ul {position: relative;
     display: grid;
     gap: .5rem;
     list-style: none;
     color: rgba(13, 36, 64, 0.74);
     font-family: var(--font-display);
     font-size: clamp(0.64rem, 0.74vw, 0.76rem);
     font-weight: 700;
     letter-spacing: .12em;
     text-transform: uppercase;
     margin-top: auto;
     padding-top: 1.15rem;
     border-top: 1px solid rgba(13, 36, 64, 0.1)}
.service-card li {display: flex;
     align-items: center;
     gap: .55rem}
.service-card li::before {content: "";
     width: 6px;
     height: 6px;
     background: var(--red-base);
     transform: rotate(45deg);
     flex: 0 0 auto}
.book .panel-inner {background: linear-gradient(90deg, rgba(5, 12, 18, 0.92), rgba(10, 31, 51, 0.78) 48%, rgba(10, 31, 51, 0.5)), var(--booking-img) center/cover no-repeat;
     align-items: stretch}
.contact-side {grid-row: 1;
     grid-column: 2;
     z-index: 2;
     display: grid;
     align-content: start;
     gap: .9rem;
     padding: calc(var(--topbar-h) + 2rem) clamp(1.4rem, 2.4vw, 2.4rem) 2rem;
     border-left: 1px solid rgba(255, 255, 255, 0.14);
     background: linear-gradient(180deg, rgba(10, 31, 51, 0.5), rgba(10, 31, 51, 0.78));
     backdrop-filter: blur(14px);
     -webkit-backdrop-filter: blur(14px)}
.form-panel {padding: clamp(1.25rem, 2vw, 1.75rem);
     border: 1px solid rgba(255, 255, 255, 0.22);
     background: var(--white);
     color: var(--ink);
     box-shadow: var(--shadow-md)}
.form-panel h3 {font-family: var(--font-display);
     font-weight: 900;
     font-size: clamp(1.45rem, 2vw, 1.95rem);
     line-height: 1;
     letter-spacing: 0;
     text-transform: uppercase}
.form-panel>p {margin-top: .65rem;
     color: rgba(13, 36, 64, 0.72);
     font-size: .85rem;
     line-height: 1.6}
.contact-form {display: grid;
     gap: .8rem;
     margin-top: 1.1rem}
.input-row {display: grid;
     grid-template-columns: 1fr 1fr;
     gap: .7rem}
.field {display: grid;
     gap: .35rem}
.field label {color: rgba(13, 36, 64, 0.62);
     font-family: var(--font-display);
     font-size: .62rem;
     font-weight: 700;
     letter-spacing: .14em;
     text-transform: uppercase}
.field input, .field select, .field textarea {width: 100%;
     border: 1px solid rgba(13, 36, 64, 0.18);
     background: var(--navy-pastel-1);
     color: var(--ink);
     padding: .9rem 1rem;
     font-size: .95rem;
     outline: 0;
     transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease}
.field textarea {min-height: 96px;
     resize: vertical}
.field input:focus, .field select:focus, .field textarea:focus {border-color: var(--red-base);
     background: var(--white);
     box-shadow: 0 0 0 4px rgba(155, 18, 40, 0.12)}
.submit-row {display: grid;
     gap: .65rem;
     margin-top: .35rem}
.submit-btn {padding: 1.05rem 1.25rem;
     font-family: var(--font-display);
     font-size: .76rem;
     font-weight: 700;
     letter-spacing: .16em;
     text-transform: uppercase;
     cursor: pointer;
     transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 240ms ease, background 240ms ease}
.submit-btn:hover {transform: translateY(-2px)}
.submit-btn:active {transform: translateY(0)}
.form-note {color: rgba(13, 36, 64, 0.62);
     font-size: .72rem;
     line-height: 1.5;
     text-align: center}
.status {display: none;
     margin-top: .65rem;
     padding: .85rem;
     border: 1px solid rgba(13, 36, 64, 0.18);
     background: rgba(13, 36, 64, 0.06);
     color: var(--ink);
     font-size: .82rem;
     line-height: 1.5}
.status.visible {display: block}
.status.success {border-color: rgba(13, 36, 64, 0.22);
     background: rgba(13, 36, 64, 0.08);
     color: var(--ink)}
.status.error {border-color: rgba(155, 18, 40, 0.24);
     background: rgba(155, 18, 40, 0.08);
     color: var(--red-base)}
.service-card, .form-panel {contain: layout paint}
.brand-bar {grid-column: 1 / -1;
     height: var(--brand-bar-h);
     min-height: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0 clamp(1rem, 3vw, 1.5rem)}
.brand-bar p {max-width: min(92vw, 980px);
     margin: 0 auto;
     line-height: 1.35;
     text-wrap: balance}
@media (min-width:1181px) {
  .snap-shell {height: 100svh;
         overflow-y: auto;
         overflow-x: hidden;
         scroll-snap-type: y mandatory;
         overscroll-behavior-y: contain}
  .panel {height: 100svh;
         min-height: 100svh;
         scroll-snap-align: start;
         scroll-snap-stop: always}
  .panel-inner {height: 100svh;
         min-height: 0;
         overflow: hidden}
  .hero .panel-inner, .services .panel-inner, .book .panel-inner {grid-template-rows: minmax(0, 1fr) var(--brand-bar-h)}
}
@media (min-width:1181px) and (max-height:780px) {
  :root {--topbar-h: 74px;
         --brand-bar-h: 42px}
  .topbar {min-height: var(--topbar-h);
         padding-top: max(0.55rem, var(--safe-top));
         padding-bottom: .55rem}
  .brand-mark {width: 44px;
         height: 44px}
  .brand-text strong {font-size: 1rem}
  .brand-text small {font-size: .6rem}
  .pill-link {min-height: 42px;
         padding: .65rem 1rem}
  .hero-copy, .hero-side, .services-aside, .services-main, .contact-side {padding-top: calc(var(--topbar-h) + 1rem);
         padding-bottom: 1rem}
  .wordmark .word-salt {font-size: clamp(3rem, 7.2vw, 5.8rem)}
  .wordmark .word-spray {font-size: clamp(2.7rem, 6.6vw, 5rem)}
  .wordmark-rule {margin-top: .65rem}
  .wordmark-tagline {font-size: .66rem;
         letter-spacing: .34em}
  .hero-lead {font-size: .86rem;
         line-height: 1.5;
         max-width: 500px}
  .hero-location {padding-top: .8rem}
  .hero-location .location-mark {width: 46px;
         height: 46px}
  .hero-location-text {font-size: .66rem}
  .side-header h3 {font-size: 1.05rem}
  .side-header p {font-size: .82rem;
         line-height: 1.45}
  .side-actions .pill-link {min-height: 46px}
  .service-icons {padding-top: 1rem}
  .service-icons svg {width: 28px;
         height: 28px}
  .service-icons strong {font-size: .65rem}
  .service-icons span {font-size: .62rem}
  .services-aside h2 {font-size: clamp(2rem, 4.2vw, 4rem)}
  .aside-note {font-size: .8rem;
         line-height: 1.45}
  .aside-stat {padding-top: .75rem}
  .aside-stat strong {font-size: 1.9rem}
  .aside-stat span {font-size: .72rem}
  .services-main {gap: .8rem}
  .section-heading {gap: .8rem;
         padding-bottom: .7rem}
  .section-heading h2 {font-size: clamp(2rem, 3.5vw, 3.3rem)}
  .section-heading p {font-size: .78rem;
         line-height: 1.45}
  .service-grid {gap: .8rem}
  .service-card {padding: 1rem;
         gap: .55rem}
  .service-card::before {font-size: clamp(2.8rem, 4vw, 3.7rem)}
  .service-card h3 {font-size: 1rem}
  .service-card p {font-size: .76rem;
         line-height: 1.42}
  .service-card ul {font-size: .56rem;
         gap: .25rem;
         padding-top: .55rem}
  .contact-side {gap: .65rem}
  .form-panel {padding: 1rem}
  .form-panel h3 {font-size: 1.25rem}
  .form-panel>p {font-size: .72rem;
         line-height: 1.4;
         margin-top: .45rem}
  .contact-form {gap: .5rem;
         margin-top: .65rem}
  .field label {font-size: .52rem}
  .field input, .field select, .field textarea {padding: .6rem .7rem;
         font-size: .8rem}
  .field textarea {min-height: 64px}
  .submit-btn {padding: .75rem 1rem}
  .form-note {font-size: .62rem}
}
@media (max-width:1180px) {
  :root {--topbar-h: 74px;
         --brand-bar-h: 56px}
  html {scroll-padding-top: var(--topbar-h);
         scroll-snap-type: y proximity}
  body {overflow-x: hidden}
  .site-frame {width: 100%;
         max-width: none;
         margin: 0}
  .topbar {position: sticky;
         top: 0;
         min-height: var(--topbar-h);
         grid-template-columns: minmax(0, 1fr) auto;
         gap: 1rem;
         padding-left: clamp(1rem, 2.5vw, 1.5rem);
         padding-right: clamp(1rem, 2.5vw, 1.5rem);
         padding-top: max(0.65rem, var(--safe-top));
         padding-bottom: .65rem}
  .nav {display: none}
  .snap-shell {height: auto;
         min-height: 100svh;
         overflow: visible;
         scroll-snap-type: none;
         overscroll-behavior-y: auto;
         scrollbar-width: auto}
  .snap-shell::-webkit-scrollbar {display: initial}
  .panel {display: block;
         min-height: auto;
         scroll-snap-align: start;
         scroll-margin-top: var(--topbar-h)}
  .panel-inner {min-height: auto;
         overflow: visible;
         animation: none}
  .hero .panel-inner {display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: minmax(calc(100svh - var(--topbar-h) - var(--brand-bar-h)), auto) var(--brand-bar-h)}
  .hero-copy {min-height: calc(100svh - var(--topbar-h) - var(--brand-bar-h));
         padding: clamp(1.4rem, 4vw, 2.5rem) clamp(1.4rem, 5vw, 3rem);
         justify-content: center;
         background: linear-gradient(180deg, rgba(5, 12, 18, 0.48) 0, rgba(10, 31, 51, 0.7) 52%, rgba(5, 12, 18, 0.92) 100%), var(--hero-img) center/cover no-repeat}
  .hero-side {display: none}
  .services .panel-inner, .book .panel-inner {display: grid;
         grid-template-columns: 1fr !important;
         grid-template-rows: auto auto var(--brand-bar-h) !important}
  .services-aside, .services-main, .contact-side {grid-column: 1 !important;
         grid-row: auto !important}
  .services-aside {min-height: auto;
         padding: clamp(1.4rem, 4vw, 2.4rem) clamp(1.4rem, 5vw, 3rem);
         border-right: 0;
         border-bottom: 1px solid rgba(255, 255, 255, 0.16)}
  .services-aside {display: grid;
         grid-template-columns: minmax(0, 1fr) minmax(240px, 380px);
         align-items: end;
         gap: 1.5rem}
  .services-aside .aside-note, .services-aside .aside-stat {max-width: none}
  .services-main {overflow: visible;
         padding: clamp(1.4rem, 4vw, 2.4rem) clamp(1.4rem, 5vw, 3rem);
         grid-template-rows: auto auto}
  .section-heading {grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
         align-items: end}
  .service-grid {height: auto;
         grid-template-columns: repeat(3, minmax(0, 1fr));
         align-items: stretch}
  .service-card {min-height: 0;
         padding: clamp(1.1rem, 2vw, 1.55rem)}
  .book .panel-inner {background: linear-gradient(180deg, rgba(5, 12, 18, 0.92), rgba(10, 31, 51, 0.78) 50%, rgba(10, 31, 51, 0.58)), var(--booking-img) center/cover no-repeat}
  .contact-side {justify-items: center;
         padding: clamp(1.4rem, 4vw, 2.4rem) clamp(1.4rem, 5vw, 3rem);
         border-left: 0;
         border-top: 1px solid rgba(255, 255, 255, 0.14);
         background: linear-gradient(180deg, rgba(10, 31, 51, 0.42), rgba(10, 31, 51, 0.74))}
  .form-panel {width: 100%;
         max-width: 760px}
}
@media (max-width:900px) {
  :root {--topbar-h: 68px;
         --brand-bar-h: 54px}
  .brand-mark {width: 42px;
         height: 42px}
  .brand-text strong {font-size: .98rem}
  .brand-text small {font-size: .6rem}
  .pill-link {min-height: 42px;
         padding: .6rem .9rem;
         font-size: .66rem}
  .hero .panel-inner {grid-template-rows: minmax(calc(100svh - var(--topbar-h) - var(--brand-bar-h)), auto) var(--brand-bar-h)}
  .hero-copy {min-height: calc(100svh - var(--topbar-h) - var(--brand-bar-h));
         gap: clamp(0.9rem, 2svh, 1.3rem)}
  .wordmark .word-salt {font-size: clamp(3.3rem, 13vw, 6rem)}
  .wordmark .word-spray {font-size: clamp(2.9rem, 11vw, 5.2rem)}
  .hero-lead {font-size: .9rem;
         line-height: 1.55}
  .services-aside {grid-template-columns: 1fr;
         gap: 1rem}
  .section-heading {grid-template-columns: 1fr;
         align-items: start}
  .service-grid {grid-template-columns: 1fr}
}
@media (max-width:620px) {
  :root {--topbar-h: 64px;
         --brand-bar-h: 58px}
  html {scroll-snap-type: none}
  .topbar {min-height: var(--topbar-h);
         padding-left: .8rem;
         padding-right: .8rem;
         padding-top: max(0.5rem, var(--safe-top));
         padding-bottom: .5rem;
         gap: .6rem}
  .brand {gap: .55rem}
  .brand-mark {width: 34px;
         height: 34px}
  .brand-text strong {font-size: .78rem;
         letter-spacing: .06em}
  .brand-text small {font-size: .5rem;
         margin-top: .2rem}
  .top-actions .ghost {display: none}
  .pill-link {min-height: 38px;
         padding: .55rem .75rem;
         font-size: .58rem;
         letter-spacing: .11em}
  .brand-bar {height: var(--brand-bar-h);
         padding: 0 .9rem}
  .brand-bar p {max-width: 92vw;
         font-size: .58rem;
         letter-spacing: .2em;
         line-height: 1.45}
  .hero-copy {padding: clamp(1rem, 4vw, 1.25rem);
         gap: clamp(0.75rem, 2svh, 1rem)}
  .wordmark .word-salt {font-size: clamp(3rem, 16vw, 4.4rem)}
  .wordmark .word-spray {font-size: clamp(2.55rem, 13.4vw, 3.8rem);
         letter-spacing: -0.055em}
  .wordmark-rule {gap: .6rem;
         margin-top: .65rem}
  .wordmark-rule::before {max-width: 26px}
  .wordmark-tagline {font-size: .54rem;
         letter-spacing: .25em;
         white-space: nowrap}
  .hero-lead {font-size: .82rem;
         line-height: 1.48}
  .hero-location {gap: .7rem;
         padding-top: .7rem}
  .hero-location .location-mark {width: 40px;
         height: 40px}
  .hero-location-text {font-size: .56rem;
         letter-spacing: .12em}
  .services-aside, .services-main, .contact-side {padding: 1rem}
  .services-aside h2 {font-size: clamp(2rem, 13vw, 3rem)}
  .aside-note {font-size: .8rem;
         line-height: 1.5}
  .aside-stat strong {font-size: 1.8rem}
  .aside-stat span {font-size: .72rem}
  .section-heading h2 {font-size: clamp(1.8rem, 10vw, 2.6rem)}
  .section-heading p {font-size: .8rem}
  .service-card {padding: 1rem;
         gap: .7rem}
  .service-card::before {font-size: clamp(2.4rem, 12vw, 3.3rem)}
  .service-card p {font-size: .84rem}
  .contact-side {justify-items: stretch}
  .form-panel {padding: 1rem}
  .form-panel h3 {font-size: clamp(1.25rem, 6.5vw, 1.8rem)}
  .form-panel>p {font-size: .78rem}
  .input-row {grid-template-columns: 1fr}
  .field input, .field select, .field textarea {font-size: 16px;
         padding: .8rem .9rem}
  .field textarea {min-height: 78px}
}
@media (max-width:420px) {
  .brand-text small {display: none}
  .wordmark .word-salt {font-size: clamp(2.65rem, 16vw, 3.8rem)}
  .wordmark .word-spray {font-size: clamp(2.25rem, 13vw, 3.3rem)}
  .wordmark-tagline {font-size: .5rem;
         letter-spacing: .2em}
}
@media print {
  body {background: white;
         color: black}
  .topbar, body::after {display: none}
  .panel-inner {box-shadow: none}
}
.book .panel-inner {display: grid;
     grid-template-rows: minmax(0, 1fr) var(--brand-bar-h);
     grid-template-columns: 1fr;
     min-height: 100dvh}
.estimate-page {min-height: 0;
     display: grid;
     grid-template-columns: minmax(340px, 0.82fr) minmax(560px, 0.98fr);
     grid-template-rows: minmax(0, 1fr) auto;
     gap: clamp(1rem, 2vw, 2rem);
     align-items: center;
     padding: calc(var(--topbar-h) + clamp(1rem, 2vw, 1.65rem)) clamp(1.5rem, 3.2vw, 3.5rem) clamp(0.85rem, 1.6vw, 1.25rem);
     overflow: hidden}
.estimate-intro {min-width: 0;
     display: grid;
     gap: clamp(0.9rem, 1.4vw, 1.2rem);
     align-content: center}
.estimate-intro h2 {max-width: 760px;
     font-size: clamp(2.55rem, 5.2vw, 5.2rem);
     line-height: .94;
     color: var(--white)}
.estimate-intro h2 .accent {display: block;
     color: var(--blue-glow)}
.estimate-intro>p {max-width: 66ch;
     color: rgba(255, 255, 255, 0.84);
     font-size: clamp(0.9rem, 1vw, 1rem);
     line-height: 1.62}
.book .estimate-contact {grid-column: auto;
     grid-row: auto;
     width: 100%;
     max-width: 720px;
     justify-self: center;
     align-content: center;
     gap: .75rem;
     padding: 0;
     border-left: 0;
     background: transparent;
     backdrop-filter: none;
     -webkit-backdrop-filter: none}
.book .estimate-contact .form-panel {padding: clamp(1.05rem, 1.6vw, 1.45rem)}
.book .estimate-contact .form-panel h3 {font-size: clamp(1.55rem, 2.4vw, 2.35rem);
     letter-spacing: -0.02em}
.book .estimate-contact .form-panel>p {max-width: 66ch;
     font-size: .84rem;
     line-height: 1.5}
.book .estimate-contact .contact-form {gap: .68rem;
     margin-top: .9rem}
.book .estimate-contact .field input, .book .estimate-contact .field select, .book .estimate-contact .field textarea {padding: .72rem .85rem;
     font-size: .9rem}
.book .estimate-contact .field textarea {min-height: 76px}
@media (min-width:1181px) and (max-height:820px) {
  .estimate-page {padding-top: calc(var(--topbar-h) + .65rem);
         padding-bottom: .7rem;
         gap: .9rem 1.2rem}
  .estimate-intro {gap: .75rem}
  .estimate-intro h2 {font-size: clamp(2.4rem, 4.5vw, 4.35rem)}
  .estimate-intro>p {font-size: .84rem;
         line-height: 1.48}
  .book .estimate-contact {max-width: 660px;
         gap: .55rem}
  .book .estimate-contact .form-panel {padding: .85rem .95rem}
  .book .estimate-contact .form-panel h3 {font-size: clamp(1.35rem, 2vw, 1.9rem)}
  .book .estimate-contact .form-panel>p {margin-top: .45rem;
         font-size: .76rem;
         line-height: 1.4}
  .book .estimate-contact .contact-form {gap: .52rem;
         margin-top: .7rem}
  .book .estimate-contact .field label {font-size: .55rem}
  .book .estimate-contact .field input, .book .estimate-contact .field select, .book .estimate-contact .field textarea {padding: .52rem .65rem;
         font-size: .8rem}
  .book .estimate-contact .field textarea {min-height: 52px}
  .book .estimate-contact .submit-btn {padding: .76rem .95rem}
  .book .estimate-contact .form-note {font-size: .62rem}
}
@media (max-width:1180px) {
  .book .panel-inner {grid-template-rows: auto var(--brand-bar-h) !important}
  .estimate-page {min-height: auto;
         overflow: visible;
         grid-template-columns: 1fr;
         grid-template-rows: auto auto auto;
         padding: calc(var(--topbar-h) + 1.4rem) clamp(1.4rem, 5vw, 3rem) clamp(1.4rem, 5vw, 2.4rem)}
  .book .estimate-contact {max-width: 820px;
         justify-self: stretch}
}
@media (max-width:760px) {
  .estimate-page {padding: calc(var(--topbar-h) + 1rem) 1rem 1.1rem;
         gap: 1rem}
  .estimate-intro h2 {font-size: clamp(2rem, 12vw, 3.2rem)}
  .book .estimate-contact .input-row {grid-template-columns: 1fr}
  .book .estimate-contact .form-panel {padding: 1rem}
}
@media (max-width:1180px) {
  .book .estimate-contact {max-width: none;
         justify-self: stretch}
  .book .estimate-contact .form-panel {min-height: auto;
         align-content: start}
}
.hero-location .location-mark .location-globe {width: 72%;
     height: 72%;
     fill: none;
     stroke: var(--white);
     stroke-width: 1.45;
     stroke-linecap: round;
     stroke-linejoin: round}
.hero-title-lockup {display: grid;
     grid-template-columns: clamp(165px, 18.5vw, 292px) minmax(0, auto);
     align-items: center;
     gap: clamp(1.35rem, 2.65vw, 2.6rem);
     width: min(100%, 1010px)}
.hero-title-logo {width: clamp(165px, 18.5vw, 292px);
     aspect-ratio: 1 / 1;
     display: grid;
     place-items: center;
     align-self: center}
.hero-title-logo img {width: 100%;
     height: 100%;
     object-fit: contain;
     filter: brightness(0) invert(1)}
.hero-title-words {display: grid;
     gap: 0;
     min-width: 0;
     line-height: .82}
.wordmark .hero-title-words .word-salt {display: block;
     font-family: var(--font-display);
     font-weight: 600 !important;
     font-size: clamp(3.65rem, 7.65vw, 7.35rem) !important;
     line-height: .82;
     color: var(--white) !important}
.wordmark .hero-title-words .word-spray {display: block;
     font-family: var(--font-display);
     font-weight: 600 !important;
     font-size: clamp(3.16rem, 6.95vw, 6.55rem) !important;
     line-height: .88;
     margin-top: .06em;
     color: var(--white) !important;
     text-shadow: none !important;
     white-space: nowrap}
@media (min-width:1181px) and (max-height:820px) {
  .hero-title-lockup {grid-template-columns: clamp(128px, 15.5vw, 222px) minmax(0, auto);
         gap: clamp(1rem, 2.1vw, 2rem)}
  .hero-title-logo {width: clamp(128px, 15.5vw, 222px)}
  .wordmark .hero-title-words .word-salt {font-size: clamp(2.9rem, 6vw, 5.65rem) !important}
  .wordmark .hero-title-words .word-spray {font-size: clamp(2.5rem, 5.48vw, 5.05rem) !important}
}
@media (max-width:1180px) {
  .hero-title-lockup {grid-template-columns: clamp(108px, 20.5vw, 198px) minmax(0, auto);
         gap: clamp(0.95rem, 2.8vw, 1.9rem);
         width: min(100%, 840px)}
  .hero-title-logo {width: clamp(108px, 20.5vw, 198px)}
  .wordmark .hero-title-words .word-salt {font-size: clamp(3rem, 10.7vw, 5.75rem) !important}
  .wordmark .hero-title-words .word-spray {font-size: clamp(2.55rem, 9.3vw, 5rem) !important}
}
@media (max-width:620px) {
  .hero-title-lockup {grid-template-columns: clamp(74px, 24vw, 112px) minmax(0, auto);
         gap: clamp(0.65rem, 2.8vw, 0.95rem);
         width: 100%}
  .hero-title-logo {width: clamp(74px, 24vw, 112px)}
  .wordmark .hero-title-words .word-salt {font-size: clamp(2.05rem, 10.8vw, 3.38rem) !important}
  .wordmark .hero-title-words .word-spray {font-size: clamp(1.78rem, 9.45vw, 2.95rem) !important;
         letter-spacing: -0.045em}
}
@media (max-width:420px) {
  .hero-title-lockup {grid-template-columns: clamp(62px, 23vw, 88px) minmax(0, auto);
         gap: .58rem}
  .hero-title-logo {width: clamp(62px, 23vw, 88px)}
  .wordmark .hero-title-words .word-salt {font-size: clamp(1.78rem, 10.25vw, 2.78rem) !important}
  .wordmark .hero-title-words .word-spray {font-size: clamp(1.52rem, 9.15vw, 2.42rem) !important}
}
.pill-link.portfolio-link {border-color: rgba(255, 255, 255, 0.24);
     background: var(--blue-base);
     color: var(--white);
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 30px rgba(4, 16, 28, 0.28)}
.pill-link.portfolio-link:hover {background: #14365e;
     border-color: rgba(255, 255, 255, 0.42);
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 18px 40px rgba(4, 16, 28, 0.38)}
.portfolio-overlay {position: fixed;
     inset: 0;
     z-index: 200;
     color: var(--white);
     background: radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.08), transparent 26rem), linear-gradient(120deg, rgba(5, 12, 18, 0.985), rgba(10, 31, 51, 0.985) 48%, rgba(13, 36, 64, 0.985));
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     transform: translateY(18px) scale(0.985);
     transition: opacity 360ms ease, visibility 360ms ease, transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1)}
.portfolio-overlay[hidden] {display: none !important}
.portfolio-overlay.is-open {opacity: 1;
     visibility: visible;
     pointer-events: auto;
     transform: translateY(0) scale(1)}
body.portfolio-lock {overflow: hidden}
.portfolio-dialog {height: 100dvh;
     display: grid;
     grid-template-rows: var(--topbar-h) minmax(0, 1fr);
     overflow: hidden}
.portfolio-fake-header {position: relative;
     z-index: 3;
     min-height: var(--topbar-h);
     display: grid;
     grid-template-columns: auto auto minmax(0, 1fr);
     align-items: center;
     gap: clamp(0.75rem, 2vw, 1.4rem);
     padding-left: clamp(0.85rem, 2vw, 1.6rem);
     padding-right: clamp(0.85rem, 2vw, 1.6rem);
     padding-top: max(0.75rem, var(--safe-top));
     padding-bottom: .75rem;
     background: rgba(10, 31, 51, 0.96);
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
     backdrop-filter: blur(18px) saturate(140%);
     -webkit-backdrop-filter: blur(18px) saturate(140%)}
.portfolio-back {min-height: 44px;
     padding: .78rem 1rem;
     border: 1.5px solid rgba(255, 255, 255, 0.2);
     background: var(--red-base);
     color: var(--white);
     font-family: var(--font-display);
     font-size: .68rem;
     font-weight: 600;
     letter-spacing: .16em;
     text-transform: uppercase;
     cursor: pointer;
     transition: transform 220ms ease, background 220ms ease, box-shadow 220ms ease}
.portfolio-back:hover {transform: translateY(-2px);
     background: var(--red-soft);
     box-shadow: 0 16px 32px rgba(98, 9, 24, 0.36)}
.portfolio-brand {justify-self: start;
     display: inline-flex;
     align-items: center;
     gap: .8rem;
     min-width: 0}
.portfolio-brand .brand-mark {width: 44px;
     height: 44px}
.portfolio-estimate {justify-self: end}
.portfolio-scroll {min-height: 0;
     overflow-y: auto;
     overflow-x: hidden;
     overscroll-behavior: contain;
     scrollbar-width: thin}
.google-g-letter {display: inline-block;
     font-family: Arial, Helvetica, sans-serif;
     font-weight: 700;
     line-height: 1;
     background: conic-gradient(from 320deg, #4285f4 0deg 88deg, #34a853 88deg 170deg, #fbbc05 170deg 250deg, #ea4335 250deg 360deg);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent}
.portfolio-bottom-bar {min-height: var(--brand-bar-h);
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0 clamp(1rem, 3vw, 1.5rem);
     background: var(--red-bar);
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.18)}
.portfolio-bottom-bar p {max-width: min(92vw, 980px);
     color: var(--white);
     font-family: var(--font-display);
     font-size: clamp(0.74rem, 0.95vw, 0.88rem);
     font-weight: 600;
     letter-spacing: .38em;
     line-height: 1.35;
     text-align: center;
     text-transform: uppercase;
     text-wrap: balance}
@media (max-width:1180px) {
  .portfolio-dialog {grid-template-rows: auto minmax(0, 1fr)}
}
@media (max-width:760px) {
  .portfolio-fake-header {grid-template-columns: auto 1fr}
  .portfolio-brand {justify-self: start}
  .portfolio-estimate {display: none}
  .portfolio-back {min-height: 40px;
         padding: .65rem .85rem;
         font-size: .58rem}
  .portfolio-brand .brand-mark {width: 34px;
         height: 34px}
}
h1, h2, h3, .brand-text strong, .nav, .pill-link, .submit-btn, .eyebrow, .side-header h3, .service-icons strong, .services-aside h2, .services-aside h2 em, .aside-stat strong, .section-heading h2, .service-card h3, .service-card::before, .estimate-intro h2, .form-panel h3, .field label, .portfolio-back, strong, b {font-weight: 600 !important}
.brand-text small, .wordmark-tagline, .hero-lead, .aside-note, .section-heading p, .service-card p, .estimate-intro>p, .form-panel>p {font-weight: 400 !important}
.service-card ul, .brand-bar p, .portfolio-bottom-bar p, .hero-location-text {font-weight: 500 !important}
.wordmark .hero-title-words .word-salt, .wordmark .hero-title-words .word-spray {font-weight: 600 !important}
.topbar {z-index: 160;
     background: rgba(10, 31, 51, 0.96) !important}
.portfolio-overlay {z-index: 320}
@media (max-width:620px) {
  :root {--topbar-h: 58px}
  .topbar {min-height: var(--topbar-h);
         grid-template-columns: minmax(0, auto) auto;
         gap: .45rem;
         padding-left: .55rem;
         padding-right: .55rem;
         padding-top: max(0.38rem, var(--safe-top));
         padding-bottom: .38rem;
         background: #0a1f33 !important;
         border-top: 0;
         overflow: visible;
         box-shadow: 0 -28px 0 #0a1f33, 0 10px 28px rgba(0, 0, 0, 0.18)}
  .topbar::before {content: "";
         position: absolute;
         left: 0;
         right: 0;
         top: -32px;
         height: 32px;
         background: #0a1f33;
         pointer-events: none}
  .topbar::after {bottom: -1px}
  .brand {gap: .42rem;
         min-width: 0}
  .brand-mark {width: 30px;
         height: 30px}
  .brand-text strong {font-size: .68rem;
         letter-spacing: .055em}
  .brand-text small {font-size: .43rem;
         letter-spacing: .035em;
         margin-top: .16rem}
  .top-actions {gap: .42rem}
  .top-actions .ghost {display: none !important}
  .top-actions .pill-link {min-height: 34px;
         padding: .46rem .58rem;
         border-width: 1.25px;
         font-size: .5rem;
         letter-spacing: .085em}
  .top-actions .pill-link.primary {padding-inline: .64rem}
  .top-actions .pill-link.portfolio-link {padding-inline: .58rem}
  .pill-icon {width: 13px;
         height: 13px}
}
@media (max-width:420px) {
  :root {--topbar-h: 54px}
  .topbar {gap: .32rem;
         padding-left: .42rem;
         padding-right: .42rem;
         padding-top: max(0.34rem, var(--safe-top));
         padding-bottom: .34rem}
  .brand {gap: .34rem}
  .brand-mark {width: 27px;
         height: 27px}
  .brand-text strong {font-size: .6rem;
         letter-spacing: .045em}
  .brand-text small {display: none}
  .top-actions {gap: .3rem}
  .top-actions .pill-link {min-height: 32px;
         padding: .42rem .46rem;
         font-size: .46rem;
         letter-spacing: .07em}
  .top-actions .pill-link.primary {padding-inline: .5rem}
  .top-actions .pill-link.portfolio-link {padding-inline: .46rem}
}
.services-aside h2 em, .estimate-intro h2 .accent {color: var(--white) !important;
     text-shadow: none !important}
.field input, .field select, .field textarea {background: #f7f8fa}
.field input:focus, .field select:focus, .field textarea:focus {background: var(--white)}
.submit-btn:disabled {cursor: wait;
     opacity: .72;
     transform: none}
:root {--weight-title: 560;
     --weight-heading: 600;
     --weight-strong: 560;
     --weight-ui: 560}
.wordmark .word-salt, .wordmark .word-spray, .hero-title-words .word-salt, .hero-title-words .word-spray {font-weight: var(--weight-title) !important}
h1, h2, .services-aside h2, .section-heading h2, .estimate-intro h2, .service-card h3, .form-panel h3, .side-header h3 {font-weight: var(--weight-heading) !important}
strong, b, .brand-text strong, .service-icons strong {font-weight: var(--weight-strong) !important}
.nav, .pill-link, .submit-btn, .field label, .service-card ul, .brand-bar p, .portfolio-back {font-weight: var(--weight-ui) !important}
.submit-btn.is-sent {background: var(--blue-base);
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 14px 30px rgba(4, 16, 28, 0.28)}
.status.success {border-color: rgba(13, 36, 64, 0.18);
     background: rgba(13, 36, 64, 0.08);
     color: var(--blue-base)}
.status.error {border-color: rgba(155, 18, 40, 0.22);
     background: rgba(155, 18, 40, 0.08);
     color: var(--red-base)}
.services-aside h2 em, .estimate-intro h2 .accent {color: var(--white) !important;
     text-shadow: none !important}
@media (max-width:900px) {
  html, body {width: 100%;
         max-width: 100%;
         overflow-x: hidden;
         -webkit-text-size-adjust: 100%;
         text-size-adjust: 100%}
  input, select, textarea, .field input, .field select, .field textarea, .book .estimate-contact .field input, .book .estimate-contact .field select, .book .estimate-contact .field textarea {font-size: 16px !important;
         line-height: 1.35 !important;
         transform: none !important}
  .topbar {left: 0 !important;
         right: 0 !important;
         width: 100% !important;
         max-width: 100% !important;
         background: #0a1f33 !important;
         background-color: #0a1f33 !important;
         overflow: hidden}
  .top-actions .pill-link {transform: none}
  .top-actions .pill-link:hover {transform: none}
}
.netlify-hidden-field {position: absolute !important;
     width: 1px !important;
     height: 1px !important;
     padding: 0 !important;
     margin: -1px !important;
     overflow: hidden !important;
     clip: rect(0, 0, 0, 0) !important;
     white-space: nowrap !important;
     border: 0 !important}
.mobile-form-call-btn {display: none}
@media (max-width:760px) {
  .mobile-form-call-btn {width: 100%;
         min-height: 42px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         padding: .72rem 1rem;
         border: 1.5px solid rgba(13, 36, 64, 0.16);
         background: var(--blue-base);
         color: var(--white);
         font-family: var(--font-display);
         font-size: .68rem;
         font-weight: 500;
         letter-spacing: .14em;
         line-height: 1;
         text-transform: uppercase;
         text-align: center;
         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 24px rgba(4, 16, 28, 0.2);
         transition: transform 220ms ease, background 220ms ease, box-shadow 220ms ease}
  .mobile-form-call-btn:hover, .mobile-form-call-btn:focus-visible {background: #14365e;
         transform: translateY(-1px);
         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 14px 30px rgba(4, 16, 28, 0.28)}
}
.service-card h3 {max-width: none !important;
     white-space: nowrap}
@media (max-width:420px) {
  .service-card h3 {white-space: normal}
}
.submit-action-row {display: grid;
     grid-template-columns: 52px minmax(0, 1fr);
     gap: .7rem;
     align-items: stretch}
.submit-action-row .submit-btn {width: 100%}
.book .estimate-contact .form-panel {position: relative;
     overflow: hidden}
.book .estimate-contact {display: grid;
     gap: .5rem}
.book .estimate-contact .status {width: 100%;
     min-height: 38px;
     margin-top: 0;
     padding: .45rem .75rem;
     display: flex;
     align-items: center;
     border-width: 1px;
     border-style: solid;
     background: rgba(255, 255, 255, 0.94);
     box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
     font-family: var(--font-body);
     font-size: clamp(0.68rem, 0.78vw, 0.76rem);
     line-height: 1.25;
     visibility: hidden;
     opacity: 0;
     transform: translateY(-4px);
     pointer-events: none;
     transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease, border-color 180ms ease, background 180ms ease}
.book .estimate-contact .status.visible {visibility: visible;
     opacity: 1;
     transform: translateY(0)}
.book .estimate-contact .status.success {border-color: rgba(42, 126, 70, 0.34);
     background: rgba(42, 126, 70, 0.075);
     color: #1f6b3a}
.book .estimate-contact .status.error {border-color: rgba(155, 18, 40, 0.3);
     background: rgba(155, 18, 40, 0.075);
     color: var(--red-base)}
.book .estimate-contact .form-panel {transition: border-color 180ms ease, box-shadow 180ms ease}
.book .estimate-contact .form-panel.status-success {border-color: rgba(42, 126, 70, 0.46);
     box-shadow: var(--shadow-md), 0 0 0 2px rgba(42, 126, 70, 0.1), 0 0 26px rgba(42, 126, 70, 0.18)}
.book .estimate-contact .form-panel.status-success input, .book .estimate-contact .form-panel.status-success select, .book .estimate-contact .form-panel.status-success textarea {border-color: rgba(42, 126, 70, 0.32)}
.book .estimate-contact .form-panel.status-error {border-color: rgba(155, 18, 40, 0.42);
     box-shadow: var(--shadow-md), 0 0 0 2px rgba(155, 18, 40, 0.1), 0 0 26px rgba(155, 18, 40, 0.18)}
.book .estimate-contact .form-panel.status-error input, .book .estimate-contact .form-panel.status-error select, .book .estimate-contact .form-panel.status-error textarea {border-color: rgba(155, 18, 40, 0.32)}
.book .estimate-contact .form-panel.status-neutral {border-color: rgba(13, 36, 64, 0.24);
     box-shadow: var(--shadow-md), 0 0 0 2px rgba(13, 36, 64, 0.07), 0 0 22px rgba(13, 36, 64, 0.14)}
.project-notes-field {position: static}
@media (max-width:620px) {
  .submit-action-row {grid-template-columns: 46px minmax(0, 1fr);
         gap: .55rem}
}
.book .estimate-contact {position: relative}
.book .estimate-contact .status {position: absolute;
     left: 0;
     right: 0;
     top: calc(100% + .38rem);
     z-index: 10;
     min-height: 28px;
     padding: .34rem .65rem;
     font-size: clamp(0.58rem, 0.66vw, 0.68rem);
     line-height: 1.2;
     border-radius: 0;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12)}
@media (min-width:1181px) {
  .estimate-page {overflow: visible}
  .book .estimate-contact {gap: 0;
         align-self: center}
  .book .estimate-contact .form-panel {min-height: 0;
         height: auto;
         align-content: start;
         padding: clamp(1rem, 1.45vw, 1.45rem)}
  .book .estimate-contact .form-panel h3 {font-size: clamp(1.5rem, 2.2vw, 2.45rem);
         line-height: 1.08;
         margin: 0;
         padding: 0}
  .book .estimate-contact .form-panel>p {margin-top: .32rem;
         font-size: clamp(0.66rem, 0.75vw, 0.76rem);
         line-height: 1.38}
  .book .estimate-contact .contact-form {gap: clamp(0.42rem, 0.75vw, 0.58rem);
         margin-top: clamp(0.55rem, 0.85vw, 0.75rem)}
  .book .estimate-contact .input-row {gap: .55rem}
  .book .estimate-contact .field {gap: .2rem}
  .book .estimate-contact .field label {font-size: .48rem;
         letter-spacing: .12em}
  .book .estimate-contact .field input, .book .estimate-contact .field select, .book .estimate-contact .field textarea {padding: clamp(0.48rem, 0.7vw, 0.62rem) clamp(0.58rem, 0.85vw, 0.75rem);
         font-size: clamp(0.72rem, 0.78vw, 0.82rem)}
  .book .estimate-contact .field textarea {min-height: clamp(58px, 8dvh, 78px)}
  .book .estimate-contact .submit-row {gap: .35rem;
         margin-top: .1rem}
  .book .estimate-contact .submit-action-row {grid-template-columns: 42px minmax(0, 1fr);
         gap: .5rem}
  .book .estimate-contact .submit-btn {min-height: 42px;
         padding: .62rem .95rem;
         font-size: .62rem}
  .book .estimate-contact .form-note {font-size: clamp(0.52rem, 0.62vw, 0.62rem);
         line-height: 1.2;
         max-height: 1.35em;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis}
}
@media (max-width:1180px) {
  .book .estimate-contact .status {position: relative;
         top: auto;
         min-height: 30px;
         margin-top: .45rem}
}
:root {--green-base: #2f6f4e;
     --green-soft: #3f8a63;
     --green-pastel: #eef8f2}
.book .estimate-contact .field textarea {resize: none !important;
     height: clamp(74px, 10dvh, 104px);
     min-height: clamp(74px, 10dvh, 104px) !important;
     max-height: clamp(74px, 10dvh, 104px);
     overflow-y: auto;
     overscroll-behavior: contain}
.book .estimate-contact .field textarea::-webkit-scrollbar {width: 9px}
.book .estimate-contact .field textarea::-webkit-scrollbar-thumb {background: rgba(13, 36, 64, 0.16);
     border-radius: 999px;
     border: 2px solid transparent;
     background-clip: padding-box}
.submit-action-row {grid-template-columns: 1fr !important}
.submit-btn.is-sent, .book .estimate-contact .submit-btn.is-sent {background: var(--green-base) !important;
     color: var(--white) !important;
     border-color: transparent !important;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 14px 30px rgba(31, 107, 58, 0.24) !important}
.submit-btn.is-sent:hover, .book .estimate-contact .submit-btn.is-sent:hover {background: var(--green-soft) !important}
.project-notes-field::after {content: "Example: kitchen cabinets, exterior trim, limewash wall, damaged stucco, timeline, access notes.";
     display: block;
     margin-top: .35rem;
     color: rgba(13, 36, 64, 0.48);
     font-size: .62rem;
     line-height: 1.35}
@media (min-width:1181px) {
  .book .estimate-contact .form-panel {overflow: hidden}
  .book .estimate-contact .contact-form {gap: clamp(0.48rem, 0.72vw, 0.64rem)}
}
@media (max-width:620px) {
  .project-notes-field::after {font-size: .58rem}
}
@media (min-width:1181px) {
  .book .estimate-contact .form-panel {overflow: hidden !important;
         padding: clamp(0.9rem, 1.25vw, 1.25rem) !important}
  .book .estimate-contact .form-panel h3 {font-size: clamp(1.45rem, 2vw, 2.25rem) !important;
         line-height: 1 !important}
  .book .estimate-contact .form-panel>p {margin-top: .28rem !important;
         font-size: clamp(0.62rem, 0.7vw, 0.72rem) !important;
         line-height: 1.32 !important}
  .book .estimate-contact .contact-form {gap: clamp(0.34rem, 0.56vw, 0.48rem) !important;
         margin-top: clamp(0.42rem, 0.62vw, 0.58rem) !important}
  .book .estimate-contact .input-row {gap: .5rem !important}
  .book .estimate-contact .field {gap: .16rem !important}
  .book .estimate-contact .field label {font-size: .46rem !important;
         letter-spacing: .11em !important}
  .book .estimate-contact .field input, .book .estimate-contact .field select, .book .estimate-contact .field textarea {padding: .48rem .62rem !important;
         font-size: clamp(0.7rem, 0.74vw, 0.78rem) !important}
  .book .estimate-contact .field textarea {height: clamp(50px, 6.6dvh, 68px) !important;
         min-height: clamp(50px, 6.6dvh, 68px) !important;
         max-height: clamp(50px, 6.6dvh, 68px) !important;
         overflow-y: auto !important;
         resize: none !important}
  .project-notes-field::after {display: none !important}
  .book .estimate-contact .submit-row {gap: .22rem !important;
         margin-top: .05rem !important}
  .book .estimate-contact .submit-btn {min-height: 40px !important;
         padding: .55rem .9rem !important;
         font-size: .58rem !important;
         letter-spacing: .14em !important}
  .book .estimate-contact .form-note {font-size: clamp(0.48rem, 0.56vw, 0.56rem) !important;
         line-height: 1.1 !important;
         max-height: 1.2em !important;
         overflow: hidden !important;
         white-space: nowrap !important;
         text-overflow: ellipsis !important}
}
@keyframes scheduleNeedInputPulse {0%, 100% {
         box-shadow: 0 0 0 0 rgba(155, 18, 40, 0);
         border-color: rgba(155, 18, 40, 0.28)
    }
     42% {
         box-shadow: 0 0 0 3px rgba(155, 18, 40, 0.14), 0 0 28px rgba(155, 18, 40, 0.24);
         border-color: rgba(155, 18, 40, 0.72)
    }}
:root {--radius-sm: 10px;
     --radius-md: 14px;
     --radius-lg: 18px;
     --field-focus: rgba(47, 111, 78, 0.13)}
.pill-link, .submit-btn, .form-panel, .service-card {border-radius: var(--radius-md)}
.brand-bar, .portfolio-bottom-bar {border-radius: 0}
.field label {display: flex;
     align-items: center;
     justify-content: space-between;
     gap: .55rem}
.required-mark, .optional-mark {display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: .15rem .36rem;
     border-radius: 999px;
     font-family: var(--font-display);
     font-size: .46rem;
     font-weight: 600;
     letter-spacing: .08em;
     line-height: 1;
     text-transform: uppercase;
     white-space: nowrap}
.required-mark {border: 1px solid rgba(155, 18, 40, 0.18);
     background: rgba(155, 18, 40, 0.06);
     color: var(--red-base)}
.optional-mark {border: 1px solid rgba(13, 36, 64, 0.12);
     background: rgba(13, 36, 64, 0.045);
     color: rgba(13, 36, 64, 0.58)}
.field input, .field select, .field textarea {border-radius: var(--radius-sm)}
.field input:focus, .field select:focus, .field textarea:focus {border-color: var(--green-base) !important;
     box-shadow: 0 0 0 4px var(--field-focus) !important}
.service-card {isolation: isolate}
.portfolio-overlay .pill-link.primary, .portfolio-estimate {border-radius: 999px}
:root {--radius-sm: 5px;
     --radius-md: 7px;
     --radius-lg: 9px}
.pill-link, .submit-btn, .portfolio-back, .portfolio-estimate, .mobile-form-call-btn, .required-mark, .optional-mark {border-radius: var(--radius-sm) !important}
.form-panel, .service-card, .field input, .field select, .field textarea {border-radius: var(--radius-md) !important}
.hero-location .location-mark {border-radius: var(--radius-lg) !important}
.brand-bar, .portfolio-bottom-bar {border-radius: 0 !important}
.hero-location {gap: clamp(0.72rem, 1.05vw, 0.95rem) !important;
     align-items: center !important;
     max-width: 540px !important}
.hero-location .location-mark {width: clamp(32px, 2.65vw, 42px) !important;
     height: clamp(32px, 2.65vw, 42px) !important;
     flex: 0 0 clamp(32px, 2.65vw, 42px) !important;
     display: grid !important;
     place-items: center !important;
     border: 0 !important;
     border-radius: 0 !important;
     background: transparent !important;
     box-shadow: none !important}
.hero-location .location-mark .location-globe {width: 100% !important;
     height: 100% !important;
     stroke: rgba(255, 255, 255, 0.94) !important;
     stroke-width: 1.55 !important}
.hero-location-text {font-size: clamp(0.68rem, 0.9vw, 0.86rem) !important;
     letter-spacing: clamp(0.16em, 0.34vw, 0.32em) !important;
     line-height: 1.2 !important;
     transform: translateX(-0.05rem)}
@media (min-width:1181px) and (max-height:820px) {
  .hero-location .location-mark {width: 34px !important;
         height: 34px !important;
         flex-basis: 34px !important}
  .hero-location-text {font-size: .62rem !important;
         letter-spacing: .22em !important}
}
@media (max-width:620px) {
  .hero-location {gap: .62rem !important}
  .hero-location .location-mark {width: 28px !important;
         height: 28px !important;
         flex-basis: 28px !important}
  .hero-location-text {font-size: .54rem !important;
         letter-spacing: .14em !important}
}
@media (min-width:901px) {
  .service-grid .service-card:nth-child(3) ul {margin-bottom: clamp(0.55rem, 0.75vw, 0.85rem)}
}
:root {--radius-sm: 3px;
     --radius-md: 4px;
     --radius-lg: 5px}
.pill-link, .submit-btn, .portfolio-back, .portfolio-estimate, .mobile-form-call-btn, .required-mark, .optional-mark {border-radius: var(--radius-sm) !important}
.form-panel, .service-card, .field input, .field select, .field textarea, .hero-location .location-mark {border-radius: var(--radius-md) !important}
.required-mark, .optional-mark {display: none !important;
     border-radius: var(--radius-sm) !important}
.field.field-error .required-mark {display: inline-flex !important;
     border-color: rgba(155, 18, 40, 0.26);
     background: rgba(155, 18, 40, 0.075)}
.field.field-error label {color: var(--red-base) !important}
.optional-mark {visibility: hidden !important}
.book .estimate-contact .form-panel>p {max-width: 70ch}
.book .estimate-contact .form-note {margin-top: .1rem;
     color: rgba(13, 36, 64, 0.58)}
.book .estimate-contact .field textarea {height: clamp(58px, 7.4dvh, 82px) !important;
     min-height: clamp(58px, 7.4dvh, 82px) !important;
     max-height: clamp(58px, 7.4dvh, 82px) !important}
@media (min-width:1181px) {
  .book .estimate-contact .form-panel {padding: clamp(0.95rem, 1.35vw, 1.32rem) !important}
  .book .estimate-contact .contact-form {gap: clamp(0.38rem, 0.62vw, 0.52rem) !important}
  .book .estimate-contact .field input, .book .estimate-contact .field select, .book .estimate-contact .field textarea {border-radius: var(--radius-md) !important}
}
.book .estimate-contact .form-panel.scheduler-expanded {position: relative;
     z-index: 70}
@media (min-width:1181px) {
  .book .estimate-contact .form-panel.scheduler-expanded {overflow: visible !important}
}
@media (min-width:1181px) {
  .book .panel-inner {display: grid !important;
         grid-template-columns: 1fr !important;
         grid-template-rows: 1fr !important;
         place-items: stretch !important;
         overflow: visible !important;
         background: radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.08), transparent 26rem), linear-gradient(90deg, rgba(5, 12, 18, 0.94), rgba(10, 31, 51, 0.78) 52%, rgba(10, 31, 51, 0.62)), var(--booking-img) center/cover no-repeat !important}
  .estimate-page {width: min(100%, 1180px) !important;
         min-height: 0 !important;
         margin-inline: auto !important;
         display: grid !important;
         grid-template-columns: 1fr !important;
         grid-template-rows: auto auto !important;
         justify-items: center !important;
         align-content: center !important;
         gap: clamp(1rem, 1.8vw, 1.5rem) !important;
         padding: calc(var(--topbar-h) + clamp(1rem, 2vh, 1.6rem)) clamp(2rem, 4vw, 4.5rem) clamp(1rem, 2vh, 1.5rem) !important;
         overflow: visible !important}
  .estimate-intro {width: min(100%, 760px) !important;
         max-width: 760px !important;
         display: grid !important;
         justify-items: center !important;
         text-align: center !important;
         gap: .8rem !important}
  .estimate-intro .eyebrow {justify-content: center !important}
  .estimate-intro h2 {max-width: none !important;
         font-size: clamp(3.1rem, 6vw, 6.2rem) !important;
         line-height: .9 !important}
  .estimate-intro>p {max-width: 62ch !important;
         font-size: clamp(0.88rem, 1vw, 1rem) !important;
         line-height: 1.55 !important}
  .book .estimate-contact {width: min(100%, 840px) !important;
         max-width: 840px !important;
         justify-self: center !important;
         align-self: center !important;
         padding: 0 !important;
         contain: none !important}
  .book .estimate-contact .form-panel {width: 100% !important;
         min-height: 0 !important;
         padding: clamp(1.25rem, 1.7vw, 1.75rem) !important;
         overflow: visible !important;
         contain: none !important;
         background: rgba(255, 255, 255, 0.985) !important;
         box-shadow: 0 28px 72px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important}
  .book .estimate-contact .form-panel h3 {font-size: clamp(1.95rem, 2.8vw, 3rem) !important;
         line-height: .96 !important}
  .book .estimate-contact .form-panel>p {max-width: 68ch !important;
         font-size: clamp(0.76rem, 0.84vw, 0.88rem) !important;
         line-height: 1.45 !important}
  .book .estimate-contact .contact-form {gap: clamp(0.6rem, 0.9vw, 0.78rem) !important;
         margin-top: clamp(0.8rem, 1vw, 1rem) !important}
  .book .estimate-contact .field input, .book .estimate-contact .field select, .book .estimate-contact .field textarea {padding: .78rem .9rem !important;
         font-size: .9rem !important}
  .book .estimate-contact .field textarea {height: clamp(76px, 9dvh, 100px) !important;
         min-height: clamp(76px, 9dvh, 100px) !important;
         max-height: clamp(76px, 9dvh, 100px) !important}
}
@media (max-width:1180px) {
  .estimate-page {width: min(100%, 920px) !important;
         margin-inline: auto !important;
         grid-template-columns: 1fr !important;
         justify-items: center !important;
         gap: 1rem !important}
  .estimate-intro {text-align: center !important;
         justify-items: center !important}
  .book .estimate-contact {width: 100% !important;
         max-width: 820px !important;
         justify-self: center !important;
         contain: none !important}
  .book .estimate-contact .form-panel {overflow: visible !important;
         contain: none !important}
}
.book .estimate-contact, .book .estimate-contact .form-panel {contain: none !important}
.submit-action-row {grid-template-columns: 1fr !important}
.book .panel-inner {display: grid !important;
     grid-template-columns: 1fr !important;
     grid-template-rows: minmax(0, 1fr) !important;
     min-height: 100dvh !important;
     place-items: stretch !important;
     overflow: visible !important}
.book .estimate-page {width: min(100%, 1280px) !important;
     min-height: 100% !important;
     margin-inline: auto !important;
     display: grid !important;
     grid-template-columns: 1fr !important;
     grid-template-rows: auto auto !important;
     align-content: center !important;
     justify-items: center !important;
     gap: clamp(1.1rem, 2vh, 1.65rem) !important;
     padding: calc(var(--topbar-h) + clamp(0.85rem, 1.8vh, 1.35rem)) clamp(1.25rem, 4vw, 4rem) clamp(1.25rem, 3vh, 2rem) !important;
     overflow: visible !important}
.book .estimate-intro {width: min(100%, 880px) !important;
     max-width: 880px !important;
     text-align: center !important;
     justify-items: center !important;
     gap: clamp(0.55rem, 1.15vh, 0.85rem) !important}
.book .estimate-intro .eyebrow {justify-content: center !important}
.book .estimate-intro h2 {font-size: clamp(3.25rem, 6vw, 6.8rem) !important;
     line-height: .88 !important;
     margin: 0 !important}
.book .estimate-intro>p {max-width: 68ch !important;
     margin-inline: auto !important;
     font-size: clamp(0.9rem, 1vw, 1.02rem) !important;
     line-height: 1.48 !important}
.book .estimate-contact {width: min(100%, 980px) !important;
     max-width: 980px !important;
     justify-self: center !important;
     align-self: center !important;
     padding: 0 !important}
.book .estimate-contact .form-panel {width: 100% !important;
     padding: clamp(1.35rem, 2vw, 2rem) !important;
     overflow: visible !important;
     background: rgba(255, 255, 255, 0.988) !important;
     box-shadow: 0 30px 76px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important}
.book .estimate-contact .form-panel h3 {font-size: clamp(2.05rem, 3vw, 3.25rem) !important;
     line-height: .95 !important}
.book .estimate-contact .form-panel>p {max-width: 78ch !important;
     font-size: clamp(0.8rem, 0.9vw, 0.92rem) !important;
     line-height: 1.45 !important}
.book .estimate-contact .contact-form {gap: clamp(0.65rem, 0.95vw, 0.85rem) !important;
     margin-top: clamp(0.85rem, 1.1vw, 1.1rem) !important}
.book .estimate-contact .input-row {gap: clamp(0.65rem, 1vw, 0.9rem) !important}
.book .estimate-contact .field textarea {height: clamp(84px, 10dvh, 120px) !important;
     min-height: clamp(84px, 10dvh, 120px) !important;
     max-height: clamp(84px, 10dvh, 120px) !important}
@media (min-width:1181px) and (max-height:820px) {
  .book .estimate-page {gap: .9rem !important;
         padding-top: calc(var(--topbar-h) + .75rem) !important;
         padding-bottom: 1rem !important}
  .book .estimate-intro h2 {font-size: clamp(2.8rem, 5.3vw, 5.45rem) !important}
  .book .estimate-intro>p {max-width: 66ch !important;
         font-size: .86rem !important;
         line-height: 1.38 !important}
  .book .estimate-contact {width: min(100%, 930px) !important}
  .book .estimate-contact .form-panel {padding: 1.05rem 1.25rem !important}
  .book .estimate-contact .form-panel h3 {font-size: clamp(1.65rem, 2.45vw, 2.55rem) !important}
  .book .estimate-contact .form-panel>p {font-size: .74rem !important;
         line-height: 1.32 !important;
         margin-top: .28rem !important}
  .book .estimate-contact .contact-form {gap: .46rem !important;
         margin-top: .56rem !important}
  .book .estimate-contact .field input, .book .estimate-contact .field select, .book .estimate-contact .field textarea {padding: .58rem .72rem !important;
         font-size: .8rem !important}
  .book .estimate-contact .field textarea {height: clamp(58px, 7.4dvh, 78px) !important;
         min-height: clamp(58px, 7.4dvh, 78px) !important;
         max-height: clamp(58px, 7.4dvh, 78px) !important}
  .book .estimate-contact .submit-btn {min-height: 42px !important}
}
@media (max-width:1180px) {
  .book .panel-inner {min-height: auto !important;
         place-items: stretch center !important}
  .book .estimate-page {width: min(100%, 980px) !important;
         min-height: auto !important;
         padding: calc(var(--topbar-h) + 1.25rem) clamp(1rem, 5vw, 2.25rem) clamp(1.25rem, 5vw, 2.25rem) !important}
  .book .estimate-contact {width: 100% !important;
         max-width: 900px !important}
}
@media (max-width:620px) {
  .book .estimate-page {padding: calc(var(--topbar-h) + 1rem) 1rem 1.15rem !important;
         gap: 1rem !important}
  .book .estimate-intro h2 {font-size: clamp(2.45rem, 15vw, 4rem) !important}
  .book .estimate-contact .form-panel {padding: 1rem !important}
}
@media (min-width:1181px) {
  .book .estimate-page {width: min(100%, 1160px) !important;
         gap: clamp(0.72rem, 1.35vh, 1.1rem) !important;
         padding: calc(var(--topbar-h) + clamp(0.55rem, 1.15vh, 0.95rem)) clamp(1.25rem, 3.4vw, 3.25rem) clamp(0.85rem, 2vh, 1.35rem) !important}
  .book .estimate-intro {width: min(100%, 800px) !important;
         gap: clamp(0.38rem, 0.8vh, 0.62rem) !important}
  .book .estimate-intro h2 {font-size: clamp(2.7rem, 5.05vw, 5.85rem) !important;
         line-height: .88 !important}
  .book .estimate-intro>p {max-width: 66ch !important;
         font-size: clamp(0.82rem, 0.88vw, 0.94rem) !important;
         line-height: 1.4 !important}
  .book .estimate-contact {width: min(100%, 900px) !important;
         max-width: 900px !important}
  .book .estimate-contact .form-panel {padding: clamp(1rem, 1.45vw, 1.45rem) !important;
         box-shadow: 0 24px 62px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important}
  .book .estimate-contact .form-panel h3 {font-size: clamp(1.72rem, 2.55vw, 2.75rem) !important;
         line-height: .98 !important}
  .book .estimate-contact .form-panel>p {max-width: 74ch !important;
         margin-top: .42rem !important;
         font-size: clamp(0.74rem, 0.82vw, 0.86rem) !important;
         line-height: 1.38 !important}
  .book .estimate-contact .contact-form {gap: clamp(0.48rem, 0.72vw, 0.66rem) !important;
         margin-top: clamp(0.62rem, 0.9vw, 0.86rem) !important}
  .book .estimate-contact .input-row {gap: clamp(0.5rem, 0.82vw, 0.72rem) !important}
  .book .estimate-contact .field {gap: .18rem !important}
  .book .estimate-contact .field label {font-size: .46rem !important}
  .book .estimate-contact .field input, .book .estimate-contact .field select, .book .estimate-contact .field textarea {padding: clamp(0.56rem, 0.76vw, 0.72rem) clamp(0.68rem, 0.9vw, 0.86rem) !important;
         font-size: clamp(0.76rem, 0.82vw, 0.88rem) !important}
  .book .estimate-contact .field textarea {height: clamp(66px, 8.4dvh, 92px) !important;
         min-height: clamp(66px, 8.4dvh, 92px) !important;
         max-height: clamp(66px, 8.4dvh, 92px) !important}
  .book .estimate-contact .submit-row {gap: .28rem !important;
         margin-top: .05rem !important}
  .book .estimate-contact .submit-btn {min-height: 42px !important;
         padding: .66rem 1rem !important;
         font-size: .58rem !important}
  .book .estimate-contact .form-note {font-size: .54rem !important;
         line-height: 1.15 !important}
}
@media (min-width:1181px) and (max-height:820px) {
  .book .estimate-page {width: min(100%, 1080px) !important;
         gap: .58rem !important;
         padding-top: calc(var(--topbar-h) + .42rem) !important;
         padding-bottom: .65rem !important}
  .book .estimate-intro h2 {font-size: clamp(2.35rem, 4.65vw, 4.85rem) !important}
  .book .estimate-intro>p {max-width: 62ch !important;
         font-size: .78rem !important;
         line-height: 1.3 !important}
  .book .estimate-contact {width: min(100%, 840px) !important;
         max-width: 840px !important}
  .book .estimate-contact .form-panel {padding: .82rem 1rem !important}
  .book .estimate-contact .form-panel h3 {font-size: clamp(1.42rem, 2.15vw, 2.15rem) !important}
  .book .estimate-contact .form-panel>p {font-size: .68rem !important;
         line-height: 1.25 !important;
         margin-top: .22rem !important}
  .book .estimate-contact .contact-form {gap: .34rem !important;
         margin-top: .44rem !important}
  .book .estimate-contact .field input, .book .estimate-contact .field select, .book .estimate-contact .field textarea {padding: .5rem .64rem !important;
         font-size: .76rem !important}
  .book .estimate-contact .field textarea {height: clamp(50px, 6.8dvh, 66px) !important;
         min-height: clamp(50px, 6.8dvh, 66px) !important;
         max-height: clamp(50px, 6.8dvh, 66px) !important}
  .book .estimate-contact .submit-btn {min-height: 38px !important;
         padding: .52rem .85rem !important}
}
@media (max-width:1180px) {
  .book .estimate-page {width: min(100%, 920px) !important;
         gap: clamp(0.8rem, 2vw, 1.15rem) !important}
  .book .estimate-contact {max-width: 840px !important}
  .book .estimate-intro h2 {font-size: clamp(2.55rem, 10vw, 5rem) !important}
}
@media (max-width:620px) {
  .book .estimate-page {padding: calc(var(--topbar-h) + .85rem) .85rem 1rem !important;
         gap: .85rem !important}
  .book .estimate-intro h2 {font-size: clamp(2.2rem, 13.8vw, 3.55rem) !important}
  .book .estimate-intro>p {font-size: .82rem !important;
         line-height: 1.42 !important}
  .book .estimate-contact .form-panel {padding: .88rem !important}
  .book .estimate-contact .form-panel h3 {font-size: clamp(1.5rem, 9vw, 2.2rem) !important}
}
@media (min-width:901px) {
  .book .estimate-contact .form-panel.scheduler-expanded {z-index: 520 !important}
}
.portfolio-library-column {min-width: 0;
     min-height: 0;
     display: grid;
     grid-template-rows: auto minmax(0, 1fr);
     gap: .75rem;
     padding: clamp(0.85rem, 1.2vw, 1.15rem);
     border: 1px solid rgba(255, 255, 255, 0.14);
     border-radius: var(--radius-md) !important;
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
     box-shadow: 0 28px 70px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.07);
     overflow: hidden;}
.portfolio-video-library {min-height: 0;
     display: grid;
     grid-auto-flow: column;
     grid-auto-columns: clamp(230px, 27vw, 360px);
     gap: clamp(0.85rem, 1.5vw, 1.25rem);
     align-items: stretch;
     overflow-x: auto;
     overflow-y: hidden;
     padding: .3rem clamp(0.85rem, 1.5vw, 1.4rem) .95rem;
     scroll-snap-type: x mandatory;
     scroll-padding-inline: clamp(0.85rem, 1.5vw, 1.4rem);
     scrollbar-width: thin;
     perspective: 1200px;
     overscroll-behavior-x: contain;}
.portfolio-video-library::-webkit-scrollbar {height: 10px;}
.portfolio-video-library::-webkit-scrollbar-thumb {background: rgba(255, 255, 255, 0.18);
     border-radius: 999px;
     border: 2px solid transparent;
     background-clip: padding-box;}
.portfolio-video-card {position: relative;
     min-height: clamp(390px, 56vh, 590px);
     overflow: hidden;
     display: grid;
     align-items: end;
     scroll-snap-align: center;
     border: 1px solid rgba(255, 255, 255, 0.16);
     border-radius: var(--radius-md) !important;
     background: #050b12;
     box-shadow: 0 24px 58px rgba(0, 0, 0, 0.3);
     transform: rotateY(-8deg) scale(0.94);
     transform-origin: center;
     opacity: .72;
     transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 260ms ease, border-color 260ms ease, box-shadow 260ms ease, filter 260ms ease;}
.portfolio-video-card.is-focused, .portfolio-video-card:hover, .portfolio-video-card:focus-visible, .portfolio-video-card.is-playing {transform: rotateY(0) scale(1);
     opacity: 1;
     border-color: rgba(255, 255, 255, 0.34);
     box-shadow: 0 32px 78px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.06);
     z-index: 2;}
.portfolio-video-card:nth-child(even) {transform: rotateY(8deg) scale(0.94);}
.portfolio-video-card:nth-child(even).is-focused, .portfolio-video-card:nth-child(even):hover, .portfolio-video-card:nth-child(even):focus-visible, .portfolio-video-card:nth-child(even).is-playing {transform: rotateY(0) scale(1);}
.portfolio-video-card video {position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     background: #050505;
     filter: saturate(0.94) contrast(1.04);
     transform: scale(1.02);
     transition: filter 260ms ease, transform 320ms ease;}
.portfolio-video-card:hover video, .portfolio-video-card:focus-visible video, .portfolio-video-card.is-playing video {filter: saturate(1.04) contrast(1.08);
     transform: scale(1.055);}
.portfolio-video-card::before {content: "";
     position: absolute;
     inset: 0;
     z-index: 1;
     background: linear-gradient(180deg, rgba(5, 12, 18, 0.02), rgba(5, 12, 18, 0.18) 48%, rgba(5, 12, 18, 0.86)), linear-gradient(90deg, rgba(10, 31, 51, 0.34), rgba(155, 18, 40, 0.08));
     pointer-events: none;}
.portfolio-video-card::after {content: "Hover";
     position: absolute;
     top: .75rem;
     right: .75rem;
     z-index: 2;
     padding: .32rem .46rem;
     border: 1px solid rgba(255, 255, 255, 0.18);
     border-radius: var(--radius-sm) !important;
     background: rgba(5, 12, 18, 0.62);
     color: rgba(255, 255, 255, 0.86);
     font-family: var(--font-display);
     font-size: .5rem;
     font-weight: var(--weight-ui) !important;
     letter-spacing: .14em;
     line-height: 1;
     text-transform: uppercase;
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);}
.portfolio-video-card.has-talk::after {content: "Sound";
     background: rgba(155, 18, 40, 0.72);}
.portfolio-video-card.is-playing::after {content: "Playing";
     background: rgba(47, 111, 78, 0.78);}
@media (min-width:1181px) and (max-height:820px) {
  .portfolio-video-card {min-height: clamp(320px, 48vh, 480px);}
}
@media (max-width:1180px) {
  .portfolio-library-column {width: 100%;}
  .portfolio-video-library {grid-auto-columns: clamp(245px, 48vw, 360px);}
  .portfolio-video-card {min-height: min(68svh, 620px);}
}
@media (max-width:760px) {
  .portfolio-video-library {grid-auto-columns: minmax(245px, 82vw);
         padding-inline: .2rem;
         scroll-padding-inline: .2rem;}
  .portfolio-video-card {min-height: min(66svh, 560px);}
}
.portfolio-library-column {position: relative !important;
     width: 100% !important;
     max-width: 1240px !important;
     min-height: clamp(420px, 58svh, 670px) !important;
     display: grid !important;
     grid-template-rows: minmax(0, 1fr) !important;
     align-items: stretch !important;
     padding: clamp(0.9rem, 1.5vw, 1.35rem) clamp(1rem, 1.7vw, 1.55rem) !important;
     border-color: rgba(255, 255, 255, 0.18) !important;
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.032)) !important;
     box-shadow: 0 30px 76px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.075) !important;}
.portfolio-video-library {height: 100% !important;
     min-height: 0 !important;
     grid-auto-columns: clamp(255px, 23.5vw, 360px) !important;
     align-items: stretch !important;
     padding: clamp(0.35rem, 0.8vw, 0.75rem) clamp(2.2rem, 4vw, 4.4rem) clamp(0.6rem, 1vw, 1rem) !important;
     gap: clamp(0.85rem, 1.35vw, 1.25rem) !important;
     scrollbar-width: thin !important;}
.portfolio-video-card {min-height: clamp(390px, 55svh, 620px) !important;
     align-items: stretch !important;
     border-color: rgba(255, 255, 255, 0.16) !important;
     background: #050b12 !important;}
.portfolio-video-card::after {display: none !important;
     content: none !important;}
.portfolio-video-card::before {background: linear-gradient(180deg, rgba(5, 12, 18, 0.03), rgba(5, 12, 18, 0.1) 48%, rgba(5, 12, 18, 0.28)) !important;}
.portfolio-video-card:hover::before, .portfolio-video-card:focus-visible::before, .portfolio-video-card.is-playing::before {opacity: 0.45 !important;}
.portfolio-carousel-btn {position: absolute;
     top: 50%;
     z-index: 6;
     width: clamp(38px, 3.3vw, 48px);
     height: clamp(56px, 6.2vh, 72px);
     display: grid;
     place-items: center;
     border: 1px solid rgba(255, 255, 255, 0.18);
     border-radius: var(--radius-sm) !important;
     background: rgba(5, 12, 18, 0.62);
     color: var(--white);
     font-family: var(--font-display);
     font-size: clamp(1.7rem, 2.8vw, 2.4rem);
     font-weight: 400 !important;
     line-height: 1;
     cursor: pointer;
     transform: translateY(-50%);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);
     transition: transform 200ms ease, background 200ms ease, border-color 200ms ease, opacity 200ms ease;}
.portfolio-carousel-btn:hover, .portfolio-carousel-btn:focus-visible {transform: translateY(-50%) scale(1.04);
     background: rgba(155, 18, 40, 0.86);
     border-color: rgba(255, 255, 255, 0.32);}
.portfolio-carousel-btn.is-prev {left: clamp(0.65rem, 1.25vw, 1.05rem);}
.portfolio-carousel-btn.is-next {right: clamp(0.65rem, 1.25vw, 1.05rem);}
.portfolio-bottom-bar p {letter-spacing: clamp(0.2em, 0.45vw, 0.38em) !important;}
@media (min-width:1181px) and (max-height:820px) {
  .portfolio-library-column {min-height: clamp(350px, 55svh, 545px) !important;}
  .portfolio-video-card {min-height: clamp(320px, 50svh, 500px) !important;}
}
@media (max-width:1180px) {
  .portfolio-library-column {min-height: auto !important;}
  .portfolio-video-library {grid-auto-columns: clamp(260px, 48vw, 380px) !important;
         padding-inline: clamp(1.75rem, 5vw, 3.25rem) !important;}
  .portfolio-video-card {min-height: min(66svh, 620px) !important;}
}
@media (max-width:760px) {
  .portfolio-library-column {padding: 0.75rem !important;}
  .portfolio-video-library {grid-auto-columns: minmax(250px, 82vw) !important;
         padding-inline: 1.7rem !important;}
  .portfolio-video-card {min-height: min(64svh, 560px) !important;}
  .portfolio-carousel-btn {width: 34px;
         height: 54px;
         font-size: 1.6rem;}
  .portfolio-carousel-btn.is-prev {left: 0.55rem;}
  .portfolio-carousel-btn.is-next {right: 0.55rem;}
}
.portfolio-overlay.is-open {height: 100dvh !important;
     overflow: hidden !important;}
body.portfolio-lock {overflow: hidden !important;}
.portfolio-dialog {height: 100dvh !important;
     max-height: 100dvh !important;
     grid-template-rows: var(--topbar-h) minmax(0, 1fr) !important;
     overflow: hidden !important;}
.portfolio-scroll {height: 100% !important;
     min-height: 0 !important;
     overflow: hidden !important;}
.portfolio-library-column {width: 100% !important;
     max-width: 1120px !important;
     height: clamp(350px, 52svh, 545px) !important;
     min-height: 0 !important;
     max-height: 100% !important;
     align-self: center !important;
     padding: clamp(0.65rem, 1vw, 1rem) clamp(0.8rem, 1.45vw, 1.25rem) !important;
     overflow: hidden !important;}
.portfolio-video-library {height: 100% !important;
     min-height: 0 !important;
     grid-auto-columns: clamp(218px, 20.8vw, 306px) !important;
     gap: clamp(0.7rem, 1.05vw, 1rem) !important;
     align-items: stretch !important;
     padding: clamp(0.25rem, 0.6vw, 0.5rem) clamp(2rem, 3.6vw, 4rem) clamp(0.38rem, 0.75vw, 0.68rem) !important;}
.portfolio-video-card {min-height: 0 !important;
     height: 100% !important;}
.portfolio-carousel-btn {opacity: 0.86 !important;}
.portfolio-bottom-bar {height: var(--brand-bar-h) !important;
     min-height: var(--brand-bar-h) !important;
     flex: 0 0 var(--brand-bar-h) !important;
     overflow: hidden !important;}
.portfolio-bottom-bar p {font-size: clamp(0.58rem, 0.78vw, 0.76rem) !important;
     letter-spacing: clamp(0.18em, 0.38vw, 0.34em) !important;
     line-height: 1.25 !important;}
@media (min-width: 1181px) and (max-height: 820px) {
  .portfolio-library-column {height: clamp(310px, 49svh, 475px) !important;}
}
@media (max-width: 1180px) {
  .portfolio-scroll {overflow-y: auto !important;}
  .portfolio-library-column {height: min(62svh, 600px) !important;}
  .portfolio-video-library {grid-auto-columns: clamp(250px, 48vw, 360px) !important;}
}
@media (max-width: 760px) {
  .portfolio-library-column {height: min(60svh, 540px) !important;
         padding: 0.68rem !important;}
}
.portfolio-library-column {--portfolio-panel-pad-x: clamp(0.82rem, 1.28vw, 1.08rem);
     width: min(100%, 1080px) !important;
     max-width: 1080px !important;
     height: clamp(332px, 48svh, 500px) !important;
     grid-template-rows: minmax(0, 1fr) 46px !important;
     gap: 0 !important;
     padding: var(--portfolio-panel-pad-x) var(--portfolio-panel-pad-x) 0 !important;
     align-self: center !important;}
.portfolio-video-library {height: 100% !important;
     padding: clamp(0.2rem, 0.45vw, 0.42rem) clamp(2rem, 3.4vw, 3.75rem) clamp(0.45rem, 0.8vw, 0.72rem) !important;
     scrollbar-width: none !important;
     -ms-overflow-style: none !important;}
.portfolio-video-library::-webkit-scrollbar {display: none !important;}
.portfolio-link-row {min-height: 46px;
     display: grid;
     grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
     align-items: stretch;
     margin: 0 calc(var(--portfolio-panel-pad-x) * -1);
     border-top: 1px solid rgba(255, 255, 255, 0.14);
     background: rgba(5, 12, 18, 0.28);}
.portfolio-link-slit {width: 1px;
     height: 100%;
     background: rgba(255, 255, 255, 0.18);}
.portfolio-panel-link {min-width: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0.75rem 1rem;
     color: var(--white);
     font-family: var(--font-display);
     font-size: clamp(0.58rem, 0.68vw, 0.72rem);
     font-weight: var(--weight-ui) !important;
     letter-spacing: 0.18em;
     line-height: 1;
     text-transform: uppercase;
     text-align: center;
     transition: background 200ms ease, letter-spacing 200ms ease;}
.portfolio-panel-link.is-google {background: rgba(255, 255, 255, 0.07);}
.portfolio-panel-link.is-tiktok {background: rgba(0, 0, 0, 0.18);}
.portfolio-panel-link:hover, .portfolio-panel-link:focus-visible {background: rgba(255, 255, 255, 0.12);
     letter-spacing: 0.2em;}
@media (min-width: 1181px) and (max-height: 820px) {
  .portfolio-library-column {height: clamp(302px, 46svh, 455px) !important;
         grid-template-rows: minmax(0, 1fr) 42px !important;}
  .portfolio-link-row {min-height: 42px;}
}
@media (max-width: 1180px) {
  .portfolio-library-column {height: min(64svh, 620px) !important;
         grid-template-rows: minmax(0, 1fr) 46px !important;}
}
@media (max-width: 760px) {
  .portfolio-library-column {--portfolio-panel-pad-x: 0.68rem;
         height: min(60svh, 540px) !important;
         grid-template-rows: minmax(0, 1fr) 44px !important;}
  .portfolio-link-row {min-height: 44px;}
  .portfolio-panel-link {font-size: 0.56rem;
         letter-spacing: 0.14em;}
}
.portfolio-library-column {width: min(100%, 1090px) !important;
     max-width: 1090px !important;
     height: clamp(370px, 54svh, 565px) !important;
     grid-template-rows: minmax(0, 1fr) 52px !important;
     padding: var(--portfolio-panel-pad-x) var(--portfolio-panel-pad-x) 0 !important;}
.portfolio-video-library {padding-top: clamp(0.42rem, 0.8vw, 0.75rem) !important;
     padding-bottom: clamp(0.58rem, 0.9vw, 0.82rem) !important;}
.portfolio-link-row {min-height: 52px !important;
     background: rgba(5, 12, 18, 0.4) !important;
     border-top: 1px solid rgba(255, 255, 255, 0.18) !important;}
.portfolio-link-slit {background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.28), transparent) !important;}
.portfolio-panel-link {gap: 0.62rem !important;
     letter-spacing: 0.16em !important;
     overflow: hidden !important;}
.portfolio-panel-link.is-google {background: linear-gradient(180deg, #ffffff, #f4f6f8) !important;
     color: #202124 !important;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;}
.portfolio-panel-link.is-google:hover, .portfolio-panel-link.is-google:focus-visible {background: #ffffff !important;
     color: #111827 !important;}
.portfolio-panel-link.is-tiktok {background: radial-gradient(circle at 30% 20%, rgba(37, 244, 238, 0.16), transparent 32%), radial-gradient(circle at 70% 80%, rgba(254, 44, 85, 0.16), transparent 34%), #050505 !important;
     color: #ffffff !important;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;}
.portfolio-panel-link.is-tiktok:hover, .portfolio-panel-link.is-tiktok:focus-visible {background: radial-gradient(circle at 30% 20%, rgba(37, 244, 238, 0.24), transparent 34%), radial-gradient(circle at 70% 80%, rgba(254, 44, 85, 0.24), transparent 36%), #060606 !important;
     color: #ffffff !important;}
.portfolio-brand-icon {width: 22px;
     height: 22px;
     display: inline-grid;
     place-items: center;
     flex: 0 0 22px;
     border-radius: 999px !important;}
.portfolio-brand-icon.google {background: #ffffff;
     box-shadow: inset 0 0 0 1px rgba(32, 33, 36, 0.1), 0 5px 14px rgba(32, 33, 36, 0.12);}
.portfolio-brand-icon.google .google-g-letter {font-size: 0.95rem;
     line-height: 1;}
.portfolio-brand-icon.tiktok {position: relative;
     background: #000000;
     box-shadow: -2px 0 0 rgba(37, 244, 238, 0.75), 2px 0 0 rgba(254, 44, 85, 0.75), 0 8px 16px rgba(0, 0, 0, 0.24);}
.portfolio-brand-icon.tiktok svg {width: 14px;
     height: 14px;
     fill: #ffffff;
     filter: drop-shadow(-1px 0 0 rgba(37, 244, 238, 0.9)) drop-shadow(1px 0 0 rgba(254, 44, 85, 0.9));}
.portfolio-bottom-bar p {letter-spacing: clamp(0.18em, 0.32vw, 0.3em) !important;}
@media (min-width: 1181px) and (max-height: 820px) {
  .portfolio-library-column {height: clamp(350px, 51svh, 510px) !important;
         grid-template-rows: minmax(0, 1fr) 48px !important;}
  .portfolio-link-row {min-height: 48px !important;}
}
@media (max-width: 1180px) {
  .portfolio-library-column {height: min(66svh, 650px) !important;}
}
@media (max-width: 760px) {
  .portfolio-library-column {height: min(62svh, 560px) !important;
         grid-template-rows: minmax(0, 1fr) 46px !important;}
  .portfolio-link-row {min-height: 46px !important;}
  .portfolio-brand-icon {width: 19px;
         height: 19px;
         flex-basis: 19px;}
}
.portfolio-fake-header {box-sizing: border-box !important;}
.portfolio-bottom-bar p {text-transform: uppercase !important;}
@media (min-width: 1181px) {
  .portfolio-library-column {height: clamp(380px, 55svh, 585px) !important;}
}
@media (min-width: 761px) and (max-width: 1180px) {
  .portfolio-dialog {grid-template-rows: auto minmax(0, 1fr) !important;}
  .portfolio-fake-header {min-height: 70px !important;
         grid-template-columns: auto minmax(0, 1fr) auto !important;
         gap: 1rem !important;
         padding: max(0.65rem, var(--safe-top)) clamp(1rem, 2.6vw, 1.75rem) 0.7rem !important;}
  .portfolio-back {min-height: 42px !important;
         padding: 0.62rem 0.9rem !important;
         font-size: 0.62rem !important;
         letter-spacing: 0.14em !important;}
  .portfolio-brand .brand-mark {width: 38px !important;
         height: 38px !important;}
  .portfolio-brand .brand-text strong {font-size: 0.92rem !important;}
  .portfolio-brand .brand-text small {font-size: 0.56rem !important;}
  .portfolio-estimate {min-height: 42px !important;
         padding: 0.62rem 0.9rem !important;
         font-size: 0.58rem !important;}
  .portfolio-library-column {width: min(100%, 980px) !important;
         height: min(61svh, 610px) !important;}
  .portfolio-video-library {grid-auto-columns: clamp(250px, 35vw, 340px) !important;}
}
@media (max-width: 760px) {
  :root {--portfolio-mobile-header-h: 72px;}
  .portfolio-dialog {grid-template-rows: auto minmax(0, 1fr) !important;}
  .portfolio-fake-header {min-height: var(--portfolio-mobile-header-h) !important;
         grid-template-columns: auto minmax(0, 1fr) !important;
         gap: 0.72rem !important;
         align-items: center !important;
         padding: max(0.52rem, var(--safe-top)) 0.9rem 0.58rem !important;}
  .portfolio-back {min-height: 40px !important;
         padding: 0.56rem 0.78rem !important;
         border-width: 1px !important;
         font-size: 0.56rem !important;
         letter-spacing: 0.14em !important;
         line-height: 1 !important;
         box-shadow: 0 8px 18px rgba(98, 9, 24, 0.2) !important;}
  .portfolio-brand {gap: 0.62rem !important;
         min-width: 0 !important;}
  .portfolio-brand .brand-mark {width: 34px !important;
         height: 34px !important;
         flex-basis: 34px !important;}
  .portfolio-brand .brand-text strong {font-size: 0.78rem !important;
         letter-spacing: 0.07em !important;
         white-space: nowrap !important;}
  .portfolio-brand .brand-text small {display: none !important;}
  .portfolio-scroll {overflow-y: auto !important;
         overflow-x: hidden !important;
         -webkit-overflow-scrolling: touch !important;}
  .portfolio-library-column {--portfolio-panel-pad-x: 0.62rem !important;
         width: 100% !important;
         height: min(58svh, 560px) !important;
         min-height: 390px !important;
         grid-template-rows: minmax(0, 1fr) 46px !important;
         padding: var(--portfolio-panel-pad-x) var(--portfolio-panel-pad-x) 0 !important;}
  .portfolio-video-library {grid-auto-columns: minmax(242px, 78vw) !important;
         gap: 0.72rem !important;
         padding: 0.48rem 1.55rem 0.62rem !important;}
  .portfolio-carousel-btn {width: 32px !important;
         height: 48px !important;
         font-size: 1.45rem !important;
         background: rgba(5, 12, 18, 0.54) !important;}
  .portfolio-carousel-btn.is-prev {left: 0.55rem !important;}
  .portfolio-carousel-btn.is-next {right: 0.55rem !important;}
  .portfolio-link-row {min-height: 46px !important;}
  .portfolio-panel-link {gap: 0.44rem !important;
         padding: 0.65rem 0.45rem !important;
         font-size: 0.5rem !important;
         letter-spacing: 0.12em !important;}
  .portfolio-brand-icon {width: 18px !important;
         height: 18px !important;
         flex-basis: 18px !important;}
  .portfolio-brand-icon.google .google-g-letter {font-size: 0.78rem !important;}
  .portfolio-brand-icon.tiktok svg {width: 12px !important;
         height: 12px !important;}
  .portfolio-bottom-bar {min-height: var(--brand-bar-h) !important;
         height: var(--brand-bar-h) !important;}
  .portfolio-bottom-bar p {max-width: 92vw !important;
         font-size: clamp(0.52rem, 2.2vw, 0.62rem) !important;
         letter-spacing: 0.18em !important;
         line-height: 1.22 !important;}
}
@media (max-width: 420px) {
  :root {--portfolio-mobile-header-h: 66px;}
  .portfolio-fake-header {gap: 0.56rem !important;
         padding-inline: 0.7rem !important;}
  .portfolio-back {min-height: 36px !important;
         padding: 0.5rem 0.68rem !important;
         font-size: 0.5rem !important;
         letter-spacing: 0.12em !important;}
  .portfolio-brand .brand-mark {width: 30px !important;
         height: 30px !important;
         flex-basis: 30px !important;}
  .portfolio-brand .brand-text strong {font-size: 0.68rem !important;}
  .portfolio-library-column {min-height: 365px !important;
         height: min(56svh, 515px) !important;}
  .portfolio-video-library {grid-auto-columns: minmax(225px, 76vw) !important;
         padding-inline: 1.42rem !important;}
  .portfolio-panel-link span:last-child {white-space: nowrap !important;}
}
.portfolio-overlay.is-open {background: radial-gradient(circle at 50% 6%, rgba(255, 255, 255, 0.09), transparent 30rem), radial-gradient(circle at 92% 8%, rgba(155, 18, 40, 0.12), transparent 28rem), linear-gradient(120deg, rgba(5, 12, 18, 0.995), rgba(10, 31, 51, 0.98) 48%, rgba(13, 36, 64, 0.995)) !important;}
.portfolio-library-column {--portfolio-panel-pad-x: clamp(1rem, 1.45vw, 1.35rem) !important;
     width: min(100%, 1280px) !important;
     max-width: 1280px !important;
     height: clamp(430px, 58svh, 650px) !important;
     grid-template-rows: minmax(0, 1fr) 28px 60px !important;
     padding: var(--portfolio-panel-pad-x) var(--portfolio-panel-pad-x) 0 !important;
     border: 1px solid rgba(255, 255, 255, 0.18) !important;
     border-radius: 14px !important;
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.03)) !important;
     box-shadow: 0 30px 82px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
     overflow: hidden !important;}
.portfolio-video-library {display: grid !important;
     grid-auto-flow: column !important;
     grid-auto-columns: clamp(170px, 18vw, 300px) !important;
     gap: clamp(0.85rem, 1.35vw, 1.35rem) !important;
     height: 100% !important;
     min-height: 0 !important;
     align-items: center !important;
     padding: clamp(0.5rem, 1vw, 0.85rem) clamp(2.65rem, 5.3vw, 5.2rem) clamp(0.35rem, 0.7vw, 0.62rem) !important;
     scroll-padding-inline: clamp(2.65rem, 5.3vw, 5.2rem) !important;
     scrollbar-width: none !important;
     perspective: 1600px !important;
     overflow-x: auto !important;
     overflow-y: hidden !important;}
.portfolio-video-library::-webkit-scrollbar {display: none !important;}
.portfolio-video-card {height: clamp(300px, 48svh, 540px) !important;
     min-height: 0 !important;
     align-self: center !important;
     border-radius: 12px !important;
     transform: rotateY(-13deg) scale(0.82) translateY(10px) !important;
     opacity: 0.68 !important;
     filter: saturate(0.88) contrast(1.02) brightness(0.88) !important;
     box-shadow: 0 22px 54px rgba(0, 0, 0, 0.3) !important;}
.portfolio-video-card:nth-child(even) {transform: rotateY(13deg) scale(0.82) translateY(10px) !important;}
.portfolio-video-card.is-focused, .portfolio-video-card.is-playing, .portfolio-video-card:hover, .portfolio-video-card:focus-visible, .portfolio-video-card:nth-child(even).is-focused, .portfolio-video-card:nth-child(even).is-playing, .portfolio-video-card:nth-child(even):hover, .portfolio-video-card:nth-child(even):focus-visible {transform: rotateY(0) scale(1.08) translateY(0) !important;
     opacity: 1 !important;
     filter: saturate(1.05) contrast(1.05) brightness(1) !important;
     border-color: rgba(255, 255, 255, 0.48) !important;
     box-shadow: 0 34px 84px rgba(0, 0, 0, 0.44), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 32px rgba(39, 125, 210, 0.22) !important;
     z-index: 4 !important;}
.portfolio-video-card::before {background: linear-gradient(180deg, rgba(5, 12, 18, 0.02), rgba(5, 12, 18, 0.06) 45%, rgba(5, 12, 18, 0.5)), linear-gradient(90deg, rgba(10, 31, 51, 0.22), rgba(155, 18, 40, 0.05)) !important;}
.portfolio-video-card::after {content: "" !important;
     top: 50% !important;
     left: 50% !important;
     right: auto !important;
     width: clamp(54px, 5vw, 76px) !important;
     height: clamp(54px, 5vw, 76px) !important;
     padding: 0 !important;
     border-radius: 999px !important;
     border: 2px solid rgba(255, 255, 255, 0.86) !important;
     background: rgba(5, 12, 18, 0.24) !important;
     transform: translate(-50%, -50%) scale(0.84) !important;
     opacity: 0 !important;
     box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
     transition: opacity 220ms ease, transform 220ms ease, background 220ms ease !important;}
.portfolio-video-card.is-focused::after, .portfolio-video-card.is-playing::after, .portfolio-video-card:hover::after, .portfolio-video-card:focus-visible::after {opacity: 1 !important;
     transform: translate(-50%, -50%) scale(1) !important;}
.portfolio-video-card video {border-radius: inherit !important;
     filter: saturate(0.98) contrast(1.03) !important;}
.portfolio-link-row {min-height: 60px !important;
     grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;
     margin: 0 calc(var(--portfolio-panel-pad-x) * -1) !important;
     background: transparent !important;
     border-top: 1px solid rgba(255, 255, 255, 0.16) !important;}
.portfolio-panel-link {min-height: 60px !important;
     gap: 0.78rem !important;
     font-size: clamp(0.62rem, 0.76vw, 0.82rem) !important;
     letter-spacing: 0.18em !important;}
.portfolio-panel-link.is-google {background: linear-gradient(180deg, #ffffff, #f4f6f8) !important;
     color: #202124 !important;}
.portfolio-panel-link.is-tiktok {background: radial-gradient(circle at 30% 20%, rgba(37, 244, 238, 0.18), transparent 34%), radial-gradient(circle at 70% 80%, rgba(254, 44, 85, 0.18), transparent 38%), #050505 !important;
     color: #ffffff !important;}
.portfolio-link-slit {background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.32), transparent) !important;}
.portfolio-carousel-btn {width: clamp(44px, 4vw, 56px) !important;
     height: clamp(58px, 5.5vw, 72px) !important;
     border-radius: 9px !important;
     background: rgba(5, 12, 18, 0.58) !important;
     border: 1px solid rgba(255, 255, 255, 0.18) !important;
     box-shadow: 0 20px 44px rgba(0, 0, 0, 0.24) !important;
     backdrop-filter: blur(12px) !important;
     -webkit-backdrop-filter: blur(12px) !important;}
.portfolio-carousel-btn.is-prev {left: clamp(0.65rem, 1.35vw, 1.1rem) !important;}
.portfolio-carousel-btn.is-next {right: clamp(0.65rem, 1.35vw, 1.1rem) !important;}
.portfolio-bottom-bar {background: linear-gradient(90deg, #8a1226, #a6122c 50%, #8a1226) !important;}
@media (min-width: 1181px) and (max-height: 820px) {
  .portfolio-library-column {height: clamp(360px, 53svh, 540px) !important;}
  .portfolio-video-card {height: clamp(278px, 44svh, 470px) !important;}
}
@media (min-width: 761px) and (max-width: 1180px) {
  .portfolio-library-column {width: min(100%, 1040px) !important;
         height: min(64svh, 650px) !important;
         grid-template-rows: minmax(0, 1fr) 26px 54px !important;}
  .portfolio-video-library {grid-auto-columns: clamp(180px, 32vw, 315px) !important;
         padding-inline: clamp(2.1rem, 5vw, 4rem) !important;}
}
@media (max-width: 760px) {
  .portfolio-library-column {--portfolio-panel-pad-x: 0.62rem !important;
         height: min(60svh, 560px) !important;
         min-height: 390px !important;
         grid-template-rows: minmax(0, 1fr) 22px 92px !important;
         border-radius: 8px !important;}
  .portfolio-video-library {grid-auto-columns: minmax(220px, 74vw) !important;
         gap: 0.72rem !important;
         padding: 0.46rem 1.42rem 0.4rem !important;
         scroll-padding-inline: 1.42rem !important;}
  .portfolio-video-card {height: 100% !important;
         transform: rotateY(-8deg) scale(0.9) translateY(6px) !important;}
  .portfolio-video-card:nth-child(even) {transform: rotateY(8deg) scale(0.9) translateY(6px) !important;}
  .portfolio-video-card.is-focused, .portfolio-video-card.is-playing, .portfolio-video-card:hover, .portfolio-video-card:focus-visible, .portfolio-video-card:nth-child(even).is-focused, .portfolio-video-card:nth-child(even).is-playing, .portfolio-video-card:nth-child(even):hover, .portfolio-video-card:nth-child(even):focus-visible {transform: rotateY(0) scale(1) translateY(0) !important;}
  .portfolio-link-row {min-height: 92px !important;
         grid-template-columns: 1fr !important;
         grid-template-rows: 46px 46px !important;}
  .portfolio-link-slit {display: none !important;}
  .portfolio-panel-link {min-height: 46px !important;
         font-size: 0.54rem !important;
         letter-spacing: 0.14em !important;}
  .portfolio-carousel-btn {width: 34px !important;
         height: 48px !important;
         font-size: 1.5rem !important;}
  .portfolio-carousel-btn.is-prev {left: 0.58rem !important;}
  .portfolio-carousel-btn.is-next {right: 0.58rem !important;}
}
@media (max-width: 420px) {
  .portfolio-fake-header {min-height: 62px !important;}
  .portfolio-back {min-height: 34px !important;
         padding: 0.48rem 0.62rem !important;
         font-size: 0.48rem !important;}
  .portfolio-brand .brand-mark {width: 28px !important;
         height: 28px !important;
         flex-basis: 28px !important;}
  .portfolio-brand .brand-text strong {font-size: 0.64rem !important;}
  .portfolio-library-column {min-height: 365px !important;
         height: min(58svh, 520px) !important;}
  .portfolio-video-library {grid-auto-columns: minmax(210px, 73vw) !important;
         padding-inline: 1.32rem !important;}
}
.portfolio-scroll {overflow-y: auto !important;
     overflow-x: hidden !important;
     scrollbar-width: thin !important;
     scroll-behavior: smooth !important;}
.portfolio-compare-section {display: grid;
     gap: clamp(1.2rem, 2.6vw, 2rem);
     padding: clamp(1.4rem, 3.2vw, 3rem) clamp(1rem, 3vw, 3rem) clamp(1.8rem, 3.5vw, 3.4rem);
     background: radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.075), transparent 28rem), linear-gradient(180deg, rgba(7, 20, 34, 0.98), rgba(10, 31, 51, 0.96));
     border-top: 1px solid rgba(255, 255, 255, 0.1);}
.portfolio-compare-heading {width: min(100%, 1180px);
     margin-inline: auto;
     display: grid;
     justify-items: center;
     gap: 0.55rem;
     text-align: center;}
.portfolio-compare-heading h2 {color: var(--white);
     font-family: var(--font-display);
     font-size: clamp(2rem, 4.6vw, 4.8rem);
     font-weight: 600;
     line-height: 0.92;
     letter-spacing: -0.04em;
     text-transform: uppercase;}
.portfolio-compare-heading p {max-width: 66ch;
     color: rgba(255, 255, 255, 0.72);
     font-size: clamp(0.78rem, 0.95vw, 0.98rem);
     line-height: 1.55;}
.portfolio-compare-panel {width: min(100%, 1260px);
     margin-inline: auto;
     display: grid;
     grid-template-rows: auto minmax(0, 1fr);
     gap: clamp(0.85rem, 1.5vw, 1.2rem);
     padding: clamp(0.85rem, 1.6vw, 1.25rem);
     border: 1px solid rgba(255, 255, 255, 0.16);
     border-radius: 10px;
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.028));
     box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.07);
     overflow: hidden;}
.portfolio-compare-panel.is-stains {background: radial-gradient(circle at 18% 0, rgba(143, 97, 42, 0.2), transparent 22rem), linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.028));}
.portfolio-compare-panel.is-painting {background: radial-gradient(circle at 82% 0, rgba(55, 126, 205, 0.16), transparent 24rem), linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.028));}
.portfolio-compare-panel-head {display: grid;
     grid-template-columns: minmax(0, 1fr) auto;
     gap: 1rem;
     align-items: end;
     padding: 0.2rem 0.15rem 0;}
.portfolio-compare-panel-head span {color: var(--red-soft);
     font-family: var(--font-display);
     font-size: clamp(0.56rem, 0.72vw, 0.68rem);
     font-weight: 600;
     letter-spacing: 0.18em;
     text-transform: uppercase;}
.portfolio-compare-panel-head h3 {margin-top: 0.25rem;
     color: var(--white);
     font-family: var(--font-display);
     font-size: clamp(1.5rem, 3vw, 3rem);
     font-weight: 600;
     line-height: 0.95;
     letter-spacing: -0.03em;
     text-transform: uppercase;}
.portfolio-compare-panel-head p {max-width: 68ch;
     margin-top: 0.4rem;
     color: rgba(255, 255, 255, 0.7);
     font-size: clamp(0.75rem, 0.88vw, 0.9rem);
     line-height: 1.5;}
.portfolio-compare-actions {display: flex;
     align-items: end;
     gap: 0.55rem;}
.ba-scroll-btn {width: 38px;
     height: 38px;
     display: grid;
     place-items: center;
     border: 1px solid rgba(255, 255, 255, 0.16);
     border-radius: 5px;
     background: rgba(5, 12, 18, 0.5);
     color: var(--white);
     font-size: 1.35rem;
     line-height: 1;
     cursor: pointer;
     transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;}
.ba-scroll-btn:hover, .ba-scroll-btn:focus-visible {transform: translateY(-2px);
     background: rgba(155, 18, 40, 0.78);
     border-color: rgba(255, 255, 255, 0.28);}
.before-after-rail {display: grid;
     grid-auto-flow: column;
     grid-auto-columns: clamp(245px, 23.5vw, 330px);
     gap: clamp(0.78rem, 1.2vw, 1rem);
     overflow-x: auto;
     overflow-y: hidden;
     scroll-snap-type: x mandatory;
     scroll-padding-inline: 0.1rem;
     padding: 0.1rem 0.1rem 0.6rem;
     scrollbar-width: thin;}
.before-after-rail::-webkit-scrollbar {height: 8px;}
.before-after-rail::-webkit-scrollbar-track {background: rgba(255, 255, 255, 0.08);
     border-radius: 999px;}
.before-after-rail::-webkit-scrollbar-thumb {background: rgba(255, 255, 255, 0.26);
     border-radius: 999px;}
.ba-card {min-width: 0;
     display: grid;
     gap: 0.7rem;
     scroll-snap-align: start;}
.ba-stage {--ba-pos: 50%;
     position: relative;
     aspect-ratio: 4 / 5;
     min-height: 310px;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.16);
     border-radius: 8px;
     background: #071523;
     box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
     isolation: isolate;}
.ba-image {position: absolute;
     inset: 0;
     display: grid;
     place-items: center;
     padding: 1.1rem;
     text-align: center;}
.ba-image::before {content: "";
     position: absolute;
     inset: 0;
     background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.055) 0 9px, transparent 9px 18px);
     opacity: 0.8;}
.ba-image.before {background: linear-gradient(145deg, rgba(11, 25, 38, 0.96), rgba(42, 45, 49, 0.95));
     filter: saturate(0.72) contrast(0.96);}
.ba-image.after {clip-path: inset(0 0 0 var(--ba-pos));
     background: radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.2), transparent 15rem), linear-gradient(145deg, rgba(16, 52, 85, 0.98), rgba(47, 111, 78, 0.72));}
.portfolio-compare-panel.is-stains .ba-image.after {background: radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.17), transparent 15rem), linear-gradient(145deg, rgba(123, 69, 28, 0.95), rgba(193, 130, 64, 0.72));}
.ba-image b {position: relative;
     z-index: 1;
     display: grid;
     gap: 0.35rem;
     color: rgba(255, 255, 255, 0.86);
     font-family: var(--font-display);
     font-size: clamp(0.72rem, 0.9vw, 0.9rem);
     font-weight: 600;
     letter-spacing: 0.12em;
     line-height: 1.35;
     text-transform: uppercase;}
.ba-label {position: absolute;
     top: 0.7rem;
     z-index: 3;
     padding: 0.28rem 0.44rem;
     border: 1px solid rgba(255, 255, 255, 0.16);
     border-radius: 4px;
     background: rgba(5, 12, 18, 0.62);
     color: rgba(255, 255, 255, 0.86);
     font-family: var(--font-display);
     font-size: 0.52rem;
     font-weight: 600;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);}
.ba-label.before {left: 0.7rem;}
.ba-label.after {right: 0.7rem;}
.ba-divider {position: absolute;
     top: 0;
     bottom: 0;
     left: var(--ba-pos);
     z-index: 4;
     width: 2px;
     transform: translateX(-50%);
     background: rgba(255, 255, 255, 0.95);
     box-shadow: 0 0 0 1px rgba(5, 12, 18, 0.24), 0 0 18px rgba(255, 255, 255, 0.28);
     pointer-events: none;}
.ba-divider::after {content: "↔";
     position: absolute;
     top: 50%;
     left: 50%;
     width: 42px;
     height: 42px;
     display: grid;
     place-items: center;
     transform: translate(-50%, -50%);
     border: 1px solid rgba(255, 255, 255, 0.4);
     border-radius: 999px;
     background: rgba(5, 12, 18, 0.7);
     color: var(--white);
     font-family: var(--font-display);
     font-size: 0.9rem;
     line-height: 1;
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);}
.ba-range {position: absolute;
     inset: 0;
     z-index: 5;
     width: 100%;
     height: 100%;
     opacity: 0;
     cursor: ew-resize;}
.ba-caption {display: grid;
     gap: 0.18rem;
     padding-inline: 0.12rem;}
.ba-caption span {color: var(--red-soft);
     font-family: var(--font-display);
     font-size: 0.56rem;
     font-weight: 600;
     letter-spacing: 0.16em;
     text-transform: uppercase;}
.ba-caption strong {color: rgba(255, 255, 255, 0.9);
     font-family: var(--font-display);
     font-size: clamp(0.82rem, 1vw, 1rem);
     font-weight: 600;
     letter-spacing: 0.04em;
     line-height: 1.2;
     text-transform: uppercase;}
@media (max-width: 1180px) {
  .portfolio-compare-section {padding-inline: clamp(0.9rem, 4vw, 2rem);}
  .portfolio-compare-panel-head {grid-template-columns: 1fr;}
  .portfolio-compare-actions {justify-content: space-between;}
  .before-after-rail {grid-auto-columns: clamp(238px, 38vw, 320px);}
}
@media (max-width: 760px) {
  .portfolio-compare-section {gap: 1rem;
         padding: 1.15rem 0.86rem 1.35rem;}
  .portfolio-compare-heading h2 {font-size: clamp(1.9rem, 10vw, 3rem);}
  .portfolio-compare-heading p {max-width: 36ch;
         font-size: 0.78rem;
         line-height: 1.42;}
  .portfolio-compare-panel {padding: 0.78rem;
         border-radius: 8px;}
  .portfolio-compare-panel-head h3 {font-size: clamp(1.45rem, 8vw, 2.45rem);}
  .portfolio-compare-actions {align-items: center;}
  .ba-scroll-btn {width: 34px;
         height: 34px;}
  .before-after-rail {grid-auto-columns: minmax(230px, 82vw);
         gap: 0.72rem;}
  .ba-stage {min-height: 290px;}
}
:root {--radius-sm: 2px;
     --radius-md: 3px;
     --radius-lg: 4px;}
.portfolio-overlay.is-open {overflow: hidden !important;}
.portfolio-dialog {height: 100dvh !important;
     grid-template-rows: var(--topbar-h) minmax(0, 1fr) !important;
     overflow: hidden !important;}
.portfolio-scroll {height: 100% !important;
     min-height: 0 !important;
     overflow-y: auto !important;
     overflow-x: hidden !important;
     scrollbar-width: thin !important;
     scroll-behavior: smooth !important;}
.portfolio-library-column {--portfolio-panel-pad-x: clamp(0.9rem, 1.45vw, 1.25rem) !important;
     width: min(100%, 1260px) !important;
     max-width: 1260px !important;
     height: auto !important;
     min-height: 0 !important;
     display: grid !important;
     grid-template-rows: auto minmax(0, auto) 26px 58px !important;
     gap: clamp(0.8rem, 1.35vw, 1.1rem) !important;
     padding: var(--portfolio-panel-pad-x) var(--portfolio-panel-pad-x) 0 !important;
     border: 1px solid rgba(255,255,255,0.17) !important;
     border-radius: 4px !important;
     background: radial-gradient(circle at 50% 0, rgba(255,255,255,0.055), transparent 24rem), linear-gradient(180deg, rgba(255,255,255,0.062), rgba(255,255,255,0.028)) !important;
     box-shadow: 0 24px 64px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.07) !important;
     overflow: hidden !important;}
.portfolio-video-panel-head {display: grid !important;
     grid-template-columns: minmax(0, 1fr) auto !important;
     gap: 1rem !important;
     align-items: end !important;
     padding: 0.1rem 0.1rem 0 !important;}
.portfolio-video-panel-head span {color: var(--red-soft) !important;
     font-family: var(--font-display) !important;
     font-size: clamp(0.54rem, 0.7vw, 0.66rem) !important;
     font-weight: var(--weight-ui) !important;
     letter-spacing: 0.18em !important;
     text-transform: uppercase !important;}
.portfolio-video-panel-head h3 {margin-top: 0.26rem !important;
     color: var(--white) !important;
     font-family: var(--font-display) !important;
     font-size: clamp(1.45rem, 2.6vw, 2.85rem) !important;
     font-weight: var(--weight-heading) !important;
     line-height: 0.95 !important;
     letter-spacing: -0.03em !important;
     text-transform: uppercase !important;}
.portfolio-video-panel-head p {max-width: 70ch !important;
     margin-top: 0.42rem !important;
     color: rgba(255,255,255,0.7) !important;
     font-size: clamp(0.74rem, 0.86vw, 0.9rem) !important;
     line-height: 1.5 !important;}
.portfolio-video-panel-head strong {min-height: 38px !important;
     display: inline-flex !important;
     align-items: center !important;
     justify-content: center !important;
     padding: 0.62rem 0.78rem !important;
     border: 1px solid rgba(255,255,255,0.14) !important;
     border-radius: 3px !important;
     background: rgba(5,12,18,0.46) !important;
     color: rgba(255,255,255,0.82) !important;
     font-family: var(--font-display) !important;
     font-size: clamp(0.5rem, 0.64vw, 0.64rem) !important;
     font-weight: var(--weight-ui) !important;
     letter-spacing: 0.13em !important;
     text-transform: uppercase !important;
     white-space: nowrap !important;}
.portfolio-video-library {display: grid !important;
     grid-auto-flow: column !important;
     grid-auto-columns: clamp(230px, 23vw, 330px) !important;
     gap: clamp(0.78rem, 1.2vw, 1rem) !important;
     height: auto !important;
     min-height: clamp(345px, 48svh, 540px) !important;
     align-items: stretch !important;
     padding: 0.1rem clamp(2.1rem, 4.8vw, 4.6rem) 0.35rem !important;
     overflow-x: auto !important;
     overflow-y: hidden !important;
     scroll-snap-type: x mandatory !important;
     scroll-padding-inline: clamp(2.1rem, 4.8vw, 4.6rem) !important;
     scrollbar-width: none !important;
     perspective: 1200px !important;
     overscroll-behavior-x: contain !important;}
.portfolio-video-library::-webkit-scrollbar {display: none !important;}
.portfolio-video-card {height: auto !important;
     min-height: clamp(345px, 48svh, 540px) !important;
     align-self: stretch !important;
     scroll-snap-align: center !important;
     border: 1px solid rgba(255,255,255,0.16) !important;
     border-radius: 4px !important;
     background: #050b12 !important;
     overflow: hidden !important;
     transform: rotateY(-7deg) scale(0.92) translateY(6px) !important;
     opacity: 0.72 !important;
     filter: saturate(0.9) contrast(1.02) brightness(0.9) !important;
     box-shadow: 0 18px 48px rgba(0,0,0,0.26) !important;
     transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 220ms ease, border-color 220ms ease, box-shadow 220ms ease, filter 220ms ease !important;}
.portfolio-video-card:nth-child(even) {transform: rotateY(7deg) scale(0.92) translateY(6px) !important;}
.portfolio-video-card.is-focused, .portfolio-video-card.is-playing, .portfolio-video-card:hover, .portfolio-video-card:focus-visible, .portfolio-video-card:nth-child(even).is-focused, .portfolio-video-card:nth-child(even).is-playing, .portfolio-video-card:nth-child(even):hover, .portfolio-video-card:nth-child(even):focus-visible {transform: rotateY(0) scale(1.02) translateY(0) !important;
     opacity: 1 !important;
     filter: saturate(1.04) contrast(1.05) brightness(1) !important;
     border-color: rgba(255,255,255,0.38) !important;
     box-shadow: 0 28px 68px rgba(0,0,0,0.36), 0 0 0 1px rgba(255,255,255,0.06) !important;
     z-index: 4 !important;}
.portfolio-video-card video {position: absolute !important;
     inset: 0 !important;
     width: 100% !important;
     height: 100% !important;
     object-fit: cover !important;
     border-radius: inherit !important;
     background: #050505 !important;}
.portfolio-video-card::before {content: "" !important;
     position: absolute !important;
     inset: 0 !important;
     z-index: 1 !important;
     pointer-events: none !important;
     background: linear-gradient(180deg, rgba(5,12,18,0.02), rgba(5,12,18,0.06) 46%, rgba(5,12,18,0.42)), linear-gradient(90deg, rgba(10,31,51,0.2), rgba(155,18,40,0.06)) !important;}
.portfolio-video-card::after {content: "" !important;
     position: absolute !important;
     top: 50% !important;
     left: 50% !important;
     right: auto !important;
     z-index: 3 !important;
     width: clamp(46px, 4.6vw, 66px) !important;
     height: clamp(46px, 4.6vw, 66px) !important;
     padding: 0 !important;
     border-radius: 50% !important;
     border: 2px solid rgba(255,255,255,0.84) !important;
     background: rgba(5,12,18,0.22) !important;
     transform: translate(-50%, -50%) scale(0.88) !important;
     opacity: 0 !important;
     box-shadow: 0 14px 34px rgba(0,0,0,0.24), inset 0 0 0 1px rgba(255,255,255,0.08) !important;
     transition: opacity 180ms ease, transform 180ms ease !important;}
.portfolio-video-card.is-focused::after, .portfolio-video-card.is-playing::after, .portfolio-video-card:hover::after, .portfolio-video-card:focus-visible::after {opacity: 1 !important;
     transform: translate(-50%, -50%) scale(1) !important;}
.portfolio-link-row {min-height: 58px !important;
     display: grid !important;
     grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr) !important;
     align-items: stretch !important;
     margin: 0 calc(var(--portfolio-panel-pad-x) * -1) !important;
     border-top: 1px solid rgba(255,255,255,0.16) !important;
     background: transparent !important;}
.portfolio-link-slit {display: block !important;
     width: 1px !important;
     height: 100% !important;
     background: linear-gradient(180deg, transparent, rgba(255,255,255,0.32), transparent) !important;}
.portfolio-panel-link {min-height: 58px !important;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
     gap: 0.72rem !important;
     padding: 0.8rem 1rem !important;
     border-radius: 0 !important;
     font-family: var(--font-display) !important;
     font-size: clamp(0.58rem, 0.72vw, 0.78rem) !important;
     font-weight: var(--weight-ui) !important;
     letter-spacing: 0.17em !important;
     line-height: 1 !important;
     text-transform: uppercase !important;
     text-align: center !important;
     transition: filter 180ms ease, background 180ms ease, letter-spacing 180ms ease !important;}
.portfolio-panel-link.is-google {background: linear-gradient(180deg, #ffffff, #f4f6f8) !important;
     color: #202124 !important;}
.portfolio-panel-link.is-tiktok {background: radial-gradient(circle at 30% 20%, rgba(37,244,238,0.18), transparent 34%), radial-gradient(circle at 70% 80%, rgba(254,44,85,0.18), transparent 38%), #050505 !important;
     color: #ffffff !important;}
.portfolio-panel-link:hover, .portfolio-panel-link:focus-visible {filter: brightness(1.05) !important;
     letter-spacing: 0.19em !important;}
.portfolio-brand-icon {width: 22px !important;
     height: 22px !important;
     flex: 0 0 22px !important;
     display: inline-grid !important;
     place-items: center !important;
     border-radius: 2px !important;
     background: #ffffff !important;}
.portfolio-brand-icon.google .google-g-letter {font-size: 0.95rem !important;}
.portfolio-brand-icon.tiktok {background: #050505 !important;}
.portfolio-brand-icon.tiktok svg {width: 14px !important;
     height: 14px !important;
     fill: #ffffff !important;
     filter: drop-shadow(-1px 0 0 rgba(37,244,238,0.9)) drop-shadow(1px 0 0 rgba(254,44,85,0.9)) !important;}
.portfolio-carousel-btn {width: clamp(38px, 3.4vw, 48px) !important;
     height: clamp(52px, 5vw, 64px) !important;
     border-radius: 3px !important;
     background: rgba(5,12,18,0.58) !important;
     border: 1px solid rgba(255,255,255,0.18) !important;
     box-shadow: 0 18px 38px rgba(0,0,0,0.24) !important;
     backdrop-filter: blur(10px) !important;
     -webkit-backdrop-filter: blur(10px) !important;}
.portfolio-carousel-btn.is-prev {left: clamp(0.6rem, 1.2vw, 1rem) !important;}
.portfolio-carousel-btn.is-next {right: clamp(0.6rem, 1.2vw, 1rem) !important;}
.portfolio-compare-section {padding-top: clamp(1.4rem, 3vw, 2.6rem) !important;}
.portfolio-compare-panel, .portfolio-library-column, .ba-stage, .ba-scroll-btn, .portfolio-video-panel-head strong, .portfolio-fake-header, .portfolio-back, .portfolio-estimate, .portfolio-video-card, .portfolio-carousel-btn, .form-panel, .service-card, .field input, .field select, .field textarea {border-radius: 4px !important;}
.portfolio-back, .portfolio-estimate, .ba-scroll-btn, .portfolio-video-panel-head strong, .submit-btn, .pill-link {border-radius: 3px !important;}
@media (min-width: 1181px) and (max-height: 820px) {
  .portfolio-video-library, .portfolio-video-card {min-height: clamp(292px, 44svh, 456px) !important;}
}
@media (min-width: 761px) and (max-width: 1180px) {
  .portfolio-library-column {width: min(100%, 1040px) !important;}
  .portfolio-video-library {grid-auto-columns: clamp(220px, 34vw, 315px) !important;
         min-height: min(52svh, 520px) !important;}
  .portfolio-video-card {min-height: min(52svh, 520px) !important;}
}
@media (max-width: 760px) {
  .portfolio-library-column {--portfolio-panel-pad-x: 0.68rem !important;
         grid-template-rows: auto minmax(0, auto) 22px 92px !important;
         gap: 0.7rem !important;
         padding: var(--portfolio-panel-pad-x) var(--portfolio-panel-pad-x) 0 !important;}
  .portfolio-video-panel-head {grid-template-columns: 1fr !important;
         gap: 0.55rem !important;}
  .portfolio-video-panel-head h3 {font-size: clamp(1.55rem, 8vw, 2.2rem) !important;}
  .portfolio-video-panel-head p {font-size: 0.72rem !important;
         line-height: 1.4 !important;}
  .portfolio-video-panel-head strong {width: fit-content !important;
         min-height: 32px !important;
         padding: 0.52rem 0.62rem !important;
         font-size: 0.52rem !important;}
  .portfolio-video-library {grid-auto-columns: minmax(220px, 74vw) !important;
         min-height: min(47svh, 465px) !important;
         gap: 0.72rem !important;
         padding: 0.1rem 1.42rem 0.25rem !important;
         scroll-padding-inline: 1.42rem !important;}
  .portfolio-video-card {min-height: min(47svh, 465px) !important;
         transform: rotateY(-5deg) scale(0.94) translateY(4px) !important;}
  .portfolio-video-card:nth-child(even) {transform: rotateY(5deg) scale(0.94) translateY(4px) !important;}
  .portfolio-video-card.is-focused, .portfolio-video-card.is-playing, .portfolio-video-card:hover, .portfolio-video-card:focus-visible, .portfolio-video-card:nth-child(even).is-focused, .portfolio-video-card:nth-child(even).is-playing, .portfolio-video-card:nth-child(even):hover, .portfolio-video-card:nth-child(even):focus-visible {transform: rotateY(0) scale(1) translateY(0) !important;}
  .portfolio-link-row {min-height: 92px !important;
         grid-template-columns: 1fr !important;
         grid-template-rows: 46px 46px !important;}
  .portfolio-link-slit {display: none !important;}
  .portfolio-panel-link {min-height: 46px !important;
         gap: 0.44rem !important;
         padding: 0.65rem 0.45rem !important;
         font-size: 0.52rem !important;
         letter-spacing: 0.12em !important;}
  .portfolio-brand-icon {width: 18px !important;
         height: 18px !important;
         flex-basis: 18px !important;}
  .portfolio-carousel-btn {width: 32px !important;
         height: 48px !important;
         font-size: 1.45rem !important;}
}
@media (max-width: 420px) {
  .portfolio-video-library {grid-auto-columns: minmax(208px, 72vw) !important;
         min-height: min(45svh, 430px) !important;
         padding-inline: 1.28rem !important;}
  .portfolio-video-card {min-height: min(45svh, 430px) !important;}
}
.portfolio-video-panel-head {grid-template-columns: 1fr !important;}
.portfolio-compare-actions {align-items: end !important;}
.ba-card {gap: 0 !important;}
.ba-stage {border-radius: 3px !important;}
.ba-image {padding: 0 !important;
     overflow: hidden !important;}
.ba-image::before {display: none !important;}
.ba-image img {position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     user-select: none;
     -webkit-user-drag: none;}
.ba-image b {display: none !important;}
.ba-image.is-missing {display: grid;
     place-items: center;
     padding: 1.1rem !important;}
.ba-image.is-missing::before {display: block !important;}
.ba-image.is-missing img {display: none !important;}
.ba-image.is-missing b {display: grid !important;}
.ba-caption {display: none !important;}
.portfolio-compare-panel, .portfolio-library-column, .portfolio-video-card, .ba-stage, .portfolio-panel-link, .ba-scroll-btn {border-radius: 3px !important;}
.portfolio-overlay {--portfolio-edge: 2px;
     --portfolio-panel-width: min(100%, 1260px);}
.portfolio-scroll {background: radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.055), transparent 28rem), linear-gradient(135deg, #050d18 0%, #081b2d 46%, #0d2440 100%) !important;
     scroll-behavior: smooth;}
.portfolio-library-column {width: var(--portfolio-panel-width) !important;
     max-width: var(--portfolio-panel-width) !important;
     display: grid !important;
     grid-template-rows: auto minmax(0, auto) 26px 58px !important;
     gap: clamp(0.8rem, 1.25vw, 1.05rem) !important;
     padding: clamp(1.05rem, 1.55vw, 1.45rem) clamp(1.05rem, 1.55vw, 1.45rem) 0 !important;
     border-radius: var(--portfolio-edge) !important;
     border-color: rgba(255, 255, 255, 0.18) !important;
     background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.026) 58%, rgba(255,255,255,0.035)) !important;
     box-shadow: 0 26px 70px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.075) !important;}
.portfolio-video-panel-head {grid-template-columns: minmax(0, 1fr) !important;
     padding: 0 !important;}
.portfolio-video-panel-head span, .portfolio-compare-panel-head span {display: none !important;}
.portfolio-video-panel-head h3 {margin-top: 0 !important;
     font-size: clamp(1.75rem, 2.65vw, 3rem) !important;
     letter-spacing: -0.035em !important;}
.portfolio-video-panel-head p {max-width: 74ch !important;
     margin-top: 0.4rem !important;
     color: rgba(255,255,255,0.68) !important;
     font-size: clamp(0.78rem, 0.88vw, 0.92rem) !important;
     line-height: 1.48 !important;}
.portfolio-video-library {grid-auto-columns: clamp(240px, 23.2vw, 335px) !important;
     min-height: clamp(350px, 47svh, 535px) !important;
     gap: clamp(0.75rem, 1.12vw, 1rem) !important;
     padding: 0.2rem clamp(2rem, 5vw, 4.8rem) 0.25rem !important;
     scroll-padding-inline: clamp(2rem, 5vw, 4.8rem) !important;
     perspective: none !important;}
.portfolio-video-card, .portfolio-video-card:nth-child(even) {min-height: clamp(350px, 47svh, 535px) !important;
     border-radius: var(--portfolio-edge) !important;
     transform: scale(0.94) translateY(8px) !important;
     opacity: 0.58 !important;
     filter: saturate(0.9) contrast(1.02) brightness(0.82) !important;
     box-shadow: 0 16px 42px rgba(0,0,0,0.24) !important;}
.portfolio-video-card.is-focused, .portfolio-video-card.is-playing, .portfolio-video-card:hover, .portfolio-video-card:focus-visible, .portfolio-video-card:nth-child(even).is-focused, .portfolio-video-card:nth-child(even).is-playing, .portfolio-video-card:nth-child(even):hover, .portfolio-video-card:nth-child(even):focus-visible {transform: scale(1.01) translateY(0) !important;
     opacity: 1 !important;
     filter: saturate(1.03) contrast(1.04) brightness(1) !important;
     border-color: rgba(255,255,255,0.34) !important;
     box-shadow: 0 30px 72px rgba(0,0,0,0.34), 0 0 0 1px rgba(255,255,255,0.055) !important;}
.portfolio-video-card::after {width: clamp(42px, 4.2vw, 58px) !important;
     height: clamp(42px, 4.2vw, 58px) !important;
     border-radius: 999px !important;
     border-width: 1.5px !important;
     background: rgba(5, 12, 18, 0.28) !important;}
.portfolio-carousel-btn {border-radius: var(--portfolio-edge) !important;
     background: rgba(5, 12, 18, 0.58) !important;
     border-color: rgba(255,255,255,0.16) !important;
     box-shadow: 0 16px 34px rgba(0,0,0,0.25) !important;}
.portfolio-link-row {border-top: 1px solid rgba(255,255,255,0.14) !important;
     min-height: 58px !important;}
.portfolio-panel-link {min-height: 58px !important;
     border-radius: 0 !important;
     letter-spacing: 0.16em !important;
     font-size: clamp(0.62rem, 0.72vw, 0.78rem) !important;
     justify-content: center !important;}
.portfolio-panel-link.is-google {background: #ffffff !important;
     color: #202124 !important;
     border-color: transparent !important;}
.portfolio-panel-link.is-tiktok {background: radial-gradient(circle at 32% 22%, rgba(37,244,238,0.18), transparent 32%), radial-gradient(circle at 72% 78%, rgba(254,44,85,0.18), transparent 34%), #030507 !important;
     color: #ffffff !important;
     border-color: transparent !important;}
.portfolio-panel-link:hover, .portfolio-panel-link:focus-visible {transform: none !important;
     filter: brightness(1.05) !important;}
.portfolio-brand-icon {border-radius: 2px !important;
     width: 24px !important;
     height: 24px !important;}
.portfolio-link-slit {width: 1px !important;
     background: rgba(255,255,255,0.22) !important;}
.portfolio-compare-section {width: min(100%, 1360px) !important;
     margin: 0 auto !important;
     padding: clamp(2.2rem, 4.8vw, 4rem) clamp(1rem, 3vw, 3rem) clamp(2.3rem, 5vw, 4.25rem) !important;
     display: grid !important;
     gap: clamp(1.2rem, 2.25vw, 2rem) !important;
     border-top: 1px solid rgba(255,255,255,0.1) !important;
     background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.006)) !important;}
.portfolio-compare-heading {width: min(100%, 900px) !important;
     margin-inline: auto !important;
     gap: clamp(0.45rem, 0.9vw, 0.75rem) !important;}
.portfolio-compare-heading h2 {font-size: clamp(2.2rem, 4.8vw, 4.9rem) !important;
     line-height: 0.9 !important;
     letter-spacing: -0.045em !important;}
.portfolio-compare-heading h2::after {content: "";
     display: block;
     width: clamp(44px, 4vw, 72px);
     height: 2px;
     margin: clamp(0.5rem, 0.9vw, 0.8rem) auto 0;
     background: var(--red-soft);}
.portfolio-compare-heading p {max-width: 64ch !important;
     color: rgba(255,255,255,0.72) !important;
     font-size: clamp(0.82rem, 0.92vw, 0.98rem) !important;
     line-height: 1.48 !important;}
.portfolio-compare-panel {width: var(--portfolio-panel-width) !important;
     margin-inline: auto !important;
     padding: clamp(1.05rem, 1.65vw, 1.45rem) !important;
     border-radius: var(--portfolio-edge) !important;
     border-color: rgba(255,255,255,0.18) !important;
     background: linear-gradient(135deg, rgba(255,255,255,0.064), rgba(255,255,255,0.028) 58%, rgba(255,255,255,0.034)) !important;
     box-shadow: 0 24px 66px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.07) !important;}
.portfolio-compare-panel + .portfolio-compare-panel {margin-top: clamp(0.45rem, 1vw, 0.9rem) !important;}
.portfolio-compare-panel-head {grid-template-columns: minmax(0, 1fr) auto !important;
     align-items: end !important;
     gap: 1rem !important;
     margin-bottom: clamp(0.85rem, 1.35vw, 1.15rem) !important;}
.portfolio-compare-panel-head h3 {font-size: clamp(1.9rem, 3.4vw, 3.6rem) !important;
     line-height: 0.92 !important;
     letter-spacing: -0.035em !important;}
.portfolio-compare-panel-head p {max-width: 72ch !important;
     margin-top: 0.48rem !important;
     color: rgba(255,255,255,0.7) !important;
     font-size: clamp(0.78rem, 0.88vw, 0.92rem) !important;
     line-height: 1.45 !important;}
.before-after-rail {grid-auto-columns: clamp(260px, 24vw, 336px) !important;
     gap: clamp(0.75rem, 1.1vw, 1rem) !important;
     padding-bottom: 0.1rem !important;
     scrollbar-width: none !important;}
.before-after-rail::-webkit-scrollbar {display: none !important;}
.ba-stage {min-height: clamp(310px, 37svh, 460px) !important;
     border-radius: var(--portfolio-edge) !important;
     border-color: rgba(255,255,255,0.12) !important;}
.ba-label {border-radius: 2px !important;
     background: rgba(5,12,18,0.66) !important;
     font-size: 0.5rem !important;}
.ba-divider::after, .ba-scroll-btn, .portfolio-panel-link, .portfolio-library-column, .portfolio-compare-panel, .portfolio-video-card, .ba-stage, .portfolio-back, .portfolio-estimate {border-radius: var(--portfolio-edge) !important;}
.ba-scroll-btn {width: 42px !important;
     height: 42px !important;
     background: rgba(5,12,18,0.5) !important;}
.portfolio-bottom-bar p {letter-spacing: 0.22em !important;}
@media (max-width: 1180px) {
  .portfolio-library-column {grid-template-rows: auto minmax(0, auto) 24px auto !important;}
  .portfolio-link-row {grid-template-columns: 1fr 1px 1fr !important;}
  .portfolio-compare-section {padding-inline: clamp(1rem, 4vw, 2rem) !important;}
}
@media (max-width: 720px) {
  .portfolio-library-column {padding: 0.85rem 0.85rem 0 !important;
         gap: 0.7rem !important;}
  .portfolio-video-panel-head h3 {font-size: clamp(1.45rem, 8vw, 2.15rem) !important;}
  .portfolio-video-panel-head p {font-size: 0.76rem !important;}
  .portfolio-video-library {grid-auto-columns: minmax(226px, 76vw) !important;
         min-height: min(48svh, 440px) !important;
         padding-inline: 1.15rem !important;
         scroll-padding-inline: 1.15rem !important;}
  .portfolio-video-card, .portfolio-video-card:nth-child(even) {min-height: min(48svh, 440px) !important;}
  .portfolio-link-row {grid-template-columns: 1fr !important;
         min-height: auto !important;}
  .portfolio-link-slit {display: none !important;}
  .portfolio-panel-link {min-height: 48px !important;
         border-top: 1px solid rgba(255,255,255,0.12) !important;}
  .portfolio-compare-section {padding: 1.7rem 0.85rem 2rem !important;}
  .portfolio-compare-heading h2 {font-size: clamp(2rem, 11vw, 3.25rem) !important;}
  .portfolio-compare-heading p {font-size: 0.8rem !important;
         max-width: 36ch !important;}
  .portfolio-compare-panel {padding: 0.85rem !important;}
  .portfolio-compare-panel-head {grid-template-columns: 1fr !important;
         gap: 0.65rem !important;}
  .portfolio-compare-actions {justify-self: end !important;}
  .before-after-rail {grid-auto-columns: minmax(245px, 82vw) !important;}
  .ba-stage {min-height: min(44svh, 390px) !important;}
}
.portfolio-dialog {grid-template-rows: var(--topbar-h) auto minmax(0, 1fr) !important;}
.portfolio-compare-section {display: grid !important;
     gap: clamp(1rem, 2vw, 1.5rem) !important;
     padding: clamp(1.15rem, 2.5vw, 2.3rem) clamp(1rem, 3vw, 3rem) clamp(2rem, 4vw, 3.6rem) !important;
     background: linear-gradient(180deg, rgba(5, 12, 18, .82), rgba(10, 31, 51, .9)) !important;}
.portfolio-compare-heading {width: min(100%, 920px) !important;
     margin: 0 auto clamp(.25rem, 1vw, .65rem) !important;
     text-align: center !important;}
.portfolio-compare-heading h2 {font-size: clamp(2.15rem, 4.4vw, 4.45rem) !important;
     line-height: .92 !important;
     letter-spacing: -.025em !important;}
.portfolio-compare-heading p {max-width: 58ch !important;
     margin: .5rem auto 0 !important;
     color: rgba(255, 255, 255, .72) !important;
     font-size: clamp(.84rem, .92vw, .96rem) !important;
     line-height: 1.5 !important;}
.portfolio-compare-panel, .portfolio-library-column.portfolio-compare-panel {width: min(100%, 1180px) !important;
     margin-inline: auto !important;
     padding: clamp(1.05rem, 1.8vw, 1.55rem) !important;
     border: 1px solid rgba(255, 255, 255, .16) !important;
     border-radius: 2px !important;
     background: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)), rgba(13, 36, 64, .56) !important;
     box-shadow: 0 22px 58px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
     overflow: hidden !important;}
.portfolio-video-panel-head, .portfolio-compare-panel-head {display: flex !important;
     align-items: end !important;
     justify-content: space-between !important;
     gap: 1rem !important;
     margin-bottom: clamp(.8rem, 1.4vw, 1.15rem) !important;
     padding: 0 !important;
     border: 0 !important;}
.portfolio-video-panel-head h3, .portfolio-compare-panel-head h3 {margin: 0 !important;
     color: var(--white) !important;
     font-family: var(--font-display) !important;
     font-size: clamp(1.55rem, 2.7vw, 2.8rem) !important;
     line-height: .95 !important;
     letter-spacing: -.02em !important;
     text-transform: uppercase !important;}
.portfolio-video-panel-head p, .portfolio-compare-panel-head p {max-width: 64ch !important;
     margin: .42rem 0 0 !important;
     color: rgba(255, 255, 255, .76) !important;
     font-size: clamp(.78rem, .88vw, .9rem) !important;
     line-height: 1.5 !important;}
.portfolio-video-panel-head span {display: none !important;}
.portfolio-video-library {display: grid !important;
     grid-auto-flow: column !important;
     grid-auto-columns: clamp(215px, 21vw, 290px) !important;
     gap: clamp(.7rem, 1.2vw, 1rem) !important;
     width: 100% !important;
     min-height: 0 !important;
     height: auto !important;
     padding: .2rem 0 .65rem !important;
     overflow-x: auto !important;
     overflow-y: hidden !important;
     scroll-snap-type: x mandatory !important;
     scroll-padding-inline: 0 !important;
     transform: none !important;
     scrollbar-width: thin !important;}
.portfolio-video-card, .portfolio-video-card:nth-child(even) {position: relative !important;
     height: clamp(340px, 47vh, 520px) !important;
     min-height: clamp(340px, 47vh, 520px) !important;
     width: auto !important;
     min-width: 0 !important;
     scroll-snap-align: start !important;
     border: 1px solid rgba(255, 255, 255, .12) !important;
     border-radius: 2px !important;
     background: #050b12 !important;
     box-shadow: 0 14px 34px rgba(0, 0, 0, .22) !important;
     transform: none !important;
     opacity: 1 !important;
     overflow: hidden !important;}
.portfolio-video-card.is-focused, .portfolio-video-card.is-playing, .portfolio-video-card:hover, .portfolio-video-card:focus-visible, .portfolio-video-card:nth-child(even).is-focused, .portfolio-video-card:nth-child(even).is-playing, .portfolio-video-card:nth-child(even):hover, .portfolio-video-card:nth-child(even):focus-visible {transform: none !important;
     opacity: 1 !important;
     border-color: rgba(255, 255, 255, .28) !important;
     box-shadow: 0 18px 42px rgba(0, 0, 0, .3) !important;}
.portfolio-video-card video {width: 100% !important;
     height: 100% !important;
     object-fit: contain !important;
     background: #050b12 !important;
     transform: none !important;
     filter: none !important;}
.portfolio-video-card::before, .portfolio-video-card::after {display: none !important;}
.portfolio-carousel-btn, .ba-scroll-btn {border-radius: 2px !important;
     border: 1px solid rgba(255, 255, 255, .16) !important;
     background: rgba(5, 12, 18, .44) !important;
     color: var(--white) !important;
     box-shadow: none !important;}
.before-after-rail {padding-bottom: .3rem !important;}
.portfolio-bottom-bar p {letter-spacing: .28em !important;}
@media (max-width: 1180px) {
  .portfolio-dialog {grid-template-rows: auto auto minmax(0, 1fr) !important;}
}
@media (max-width: 760px) {
  .portfolio-compare-section {padding: 1rem !important;
         gap: .95rem !important;}
  .portfolio-compare-heading h2 {font-size: clamp(1.95rem, 9vw, 3rem) !important;}
  .portfolio-compare-heading p {font-size: .76rem !important;}
  .portfolio-video-panel-head, .portfolio-compare-panel-head {display: grid !important;
         align-items: start !important;}
  .portfolio-video-panel-head h3, .portfolio-compare-panel-head h3 {font-size: clamp(1.35rem, 8vw, 2.25rem) !important;}
  .portfolio-video-panel-head p, .portfolio-compare-panel-head p {font-size: .74rem !important;}
  .portfolio-video-library {grid-auto-columns: minmax(210px, 72vw) !important;}
  .portfolio-video-card, .portfolio-video-card:nth-child(even) {height: min(62vh, 500px) !important;
         min-height: 360px !important;}
}
@media (max-width: 420px) {
  .portfolio-video-library {grid-auto-columns: minmax(200px, 78vw) !important;}
}
.portfolio-dialog {grid-template-rows: auto minmax(0, 1fr) !important;}
.portfolio-fake-header {min-height: var(--topbar-h) !important;
     grid-template-columns: auto auto minmax(280px, 520px) auto !important;
     justify-content: stretch !important;
     gap: clamp(0.85rem, 1.7vw, 1.55rem) !important;
     padding-left: clamp(1rem, 2.2vw, 1.75rem) !important;
     padding-right: clamp(1rem, 2.2vw, 1.75rem) !important;}
.portfolio-brand {justify-self: start !important;}
.portfolio-compare-section {gap: clamp(1rem, 2vw, 1.55rem) !important;
     padding-top: clamp(1.35rem, 2.7vw, 2.35rem) !important;}
.portfolio-compare-heading {gap: 0.38rem !important;
     margin-bottom: clamp(0.1rem, 0.7vw, 0.35rem) !important;}
.portfolio-compare-heading h2 {font-size: clamp(2rem, 4vw, 4rem) !important;
     line-height: 0.92 !important;
     letter-spacing: -0.04em !important;}
.portfolio-compare-heading h2::after {content: "";
     display: block;
     width: clamp(44px, 4vw, 66px);
     height: 2px;
     margin: 0.62rem auto 0;
     background: var(--red-soft);}
.portfolio-compare-heading p {font-size: clamp(0.74rem, 0.9vw, 0.94rem) !important;
     line-height: 1.42 !important;}
.portfolio-library-column.portfolio-compare-panel {width: min(100%, 1260px) !important;
     max-width: 1260px !important;
     height: auto !important;
     min-height: 0 !important;
     display: grid !important;
     grid-template-rows: auto minmax(0, auto) !important;
     gap: clamp(0.75rem, 1.25vw, 1rem) !important;
     padding: clamp(0.85rem, 1.6vw, 1.25rem) !important;
     border-radius: 4px !important;
     background: radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.075), transparent 24rem), linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.028)) !important;
     overflow: hidden !important;}
.portfolio-video-panel-head {padding: 0.15rem 0.15rem 0 !important;}
.portfolio-video-panel-head h3 {font-size: clamp(1.55rem, 3vw, 3rem) !important;
     line-height: 0.96 !important;
     letter-spacing: -0.035em !important;}
.portfolio-video-panel-head p {max-width: 62ch !important;
     margin-top: 0.42rem !important;
     font-size: clamp(0.74rem, 0.88vw, 0.9rem) !important;
     line-height: 1.42 !important;
     color: rgba(255, 255, 255, 0.68) !important;}
.portfolio-video-library {display: grid !important;
     grid-auto-flow: column !important;
     grid-auto-columns: clamp(210px, 17vw, 265px) !important;
     gap: clamp(0.78rem, 1.25vw, 1rem) !important;
     height: auto !important;
     min-height: 0 !important;
     align-items: stretch !important;
     padding: 0.15rem 0.15rem 0.65rem !important;
     scroll-padding-inline: 0.15rem !important;
     perspective: none !important;
     overflow-x: auto !important;
     overflow-y: hidden !important;
     scrollbar-width: thin !important;}
.portfolio-video-library::-webkit-scrollbar {display: initial !important;
     height: 8px !important;}
.portfolio-video-library::-webkit-scrollbar-track {background: rgba(255, 255, 255, 0.08) !important;}
.portfolio-video-library::-webkit-scrollbar-thumb {background: rgba(255, 255, 255, 0.25) !important;
     border-radius: 999px !important;}
.portfolio-video-card, .portfolio-video-card:nth-child(even), .portfolio-video-card.is-focused, .portfolio-video-card.is-playing, .portfolio-video-card:hover, .portfolio-video-card:focus-visible, .portfolio-video-card:nth-child(even).is-focused, .portfolio-video-card:nth-child(even).is-playing, .portfolio-video-card:nth-child(even):hover, .portfolio-video-card:nth-child(even):focus-visible {position: relative !important;
     width: auto !important;
     height: auto !important;
     min-height: 0 !important;
     aspect-ratio: 9 / 16 !important;
     transform: none !important;
     opacity: 1 !important;
     filter: none !important;
     border-radius: 3px !important;
     border: 1px solid rgba(255, 255, 255, 0.15) !important;
     background: #06111d !important;
     box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22) !important;
     overflow: hidden !important;}
.portfolio-video-card:hover, .portfolio-video-card:focus-visible, .portfolio-video-card.is-focused, .portfolio-video-card.is-playing {border-color: rgba(255, 255, 255, 0.32) !important;
     box-shadow: 0 22px 54px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;}
.portfolio-video-card.has-talk {order: -1 !important;
     border-color: rgba(255, 255, 255, 0.42) !important;
     box-shadow: 0 22px 58px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(254, 44, 85, 0.42), 0 0 28px rgba(37, 244, 238, 0.16), 0 0 38px rgba(254, 44, 85, 0.14) !important;}
.portfolio-video-card.has-talk::before {background: linear-gradient(180deg, rgba(5, 12, 18, 0), rgba(5, 12, 18, 0.10) 58%, rgba(5, 12, 18, 0.38)), radial-gradient(circle at 50% 40%, rgba(37, 244, 238, 0.06), transparent 32rem) !important;}
.portfolio-video-card.has-talk.is-focused, .portfolio-video-card.has-talk.is-playing, .portfolio-video-card.has-talk:hover, .portfolio-video-card.has-talk:focus-visible {box-shadow: 0 28px 68px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 30px rgba(37, 244, 238, 0.22), 0 0 46px rgba(254, 44, 85, 0.22) !important;}
.portfolio-video-card video {position: absolute !important;
     inset: 0 !important;
     width: 100% !important;
     height: 100% !important;
     object-fit: cover !important;
     object-position: center !important;
     border-radius: inherit !important;
     background: transparent !important;}
.portfolio-video-card::after {width: clamp(44px, 4vw, 62px) !important;
     height: clamp(44px, 4vw, 62px) !important;
     border-radius: 999px !important;}
.portfolio-carousel-btn {width: 38px !important;
     height: 48px !important;
     border-radius: 3px !important;
     background: rgba(5, 12, 18, 0.55) !important;}
.portfolio-carousel-btn.is-prev {left: clamp(0.6rem, 1.2vw, 0.95rem) !important;}
.portfolio-carousel-btn.is-next {right: clamp(0.6rem, 1.2vw, 0.95rem) !important;}
.portfolio-link-row {display: none !important;}
.portfolio-compare-panel, .ba-stage, .ba-scroll-btn {border-radius: 3px !important;}
@media (max-width: 1180px) {
  .portfolio-fake-header {grid-template-columns: auto auto minmax(220px, 1fr) !important;}
  .portfolio-estimate {display: none !important;}
  .portfolio-video-library {grid-auto-columns: clamp(210px, 27vw, 270px) !important;}
}
@media (max-width: 760px) {
  .portfolio-fake-header {grid-template-columns: auto minmax(0, 1fr) !important;
         gap: 0.62rem !important;
         padding: max(0.52rem, var(--safe-top)) 0.72rem 0.62rem !important;}
  .portfolio-brand-icon {width: 18px !important;
         height: 18px !important;
         flex-basis: 18px !important;}
  .portfolio-compare-section {padding: 1rem 0.78rem 1.2rem !important;
         gap: 1rem !important;}
  .portfolio-compare-heading h2 {font-size: clamp(2rem, 11vw, 3.05rem) !important;}
  .portfolio-library-column.portfolio-compare-panel, .portfolio-compare-panel {padding: 0.82rem !important;}
  .portfolio-video-library {grid-auto-columns: minmax(205px, 72vw) !important;
         gap: 0.72rem !important;
         padding-bottom: 0.6rem !important;}
  .portfolio-video-panel-head h3, .portfolio-compare-panel-head h3 {font-size: clamp(1.6rem, 9vw, 2.5rem) !important;}
}
@media (max-width: 420px) {
  .portfolio-video-library {grid-auto-columns: minmax(195px, 70vw) !important;}
}
.portfolio-dialog {grid-template-rows: var(--topbar-h) minmax(0, 1fr) !important;}
.portfolio-fake-header {grid-template-columns: auto minmax(0, 1fr) auto !important;
     min-height: var(--topbar-h) !important;}
.portfolio-compare-section {width: 100% !important;
     max-width: none !important;
     display: grid !important;
     justify-items: center !important;
     gap: clamp(1.2rem, 2.1vw, 1.8rem) !important;
     padding: clamp(1.9rem, 3.8vw, 3.45rem) clamp(1rem, 3vw, 3rem) clamp(1.8rem, 3.5vw, 3.2rem) !important;
     background: transparent !important;
     border-top: 0 !important;
     box-shadow: none !important;}
.portfolio-compare-heading {width: min(100%, 1100px) !important;
     margin-inline: auto !important;
     margin-bottom: clamp(0.15rem, 0.8vw, 0.45rem) !important;
     display: grid !important;
     justify-items: center !important;
     text-align: center !important;
     gap: clamp(0.5rem, 0.9vw, 0.75rem) !important;}
.portfolio-compare-heading h2 {color: var(--white) !important;
     font-family: var(--font-display) !important;
     font-size: clamp(2.65rem, 6vw, 6.35rem) !important;
     font-weight: var(--weight-heading) !important;
     line-height: 0.88 !important;
     letter-spacing: -0.055em !important;
     text-transform: uppercase !important;
     text-align: center !important;}
.portfolio-compare-heading h2::after {content: "" !important;
     display: block !important;
     width: clamp(48px, 4.5vw, 78px) !important;
     height: 2px !important;
     margin: clamp(0.58rem, 0.9vw, 0.82rem) auto 0 !important;
     background: var(--red-soft) !important;}
.portfolio-compare-heading p {max-width: 72ch !important;
     color: rgba(255,255,255,0.72) !important;
     font-size: clamp(0.82rem, 0.95vw, 1rem) !important;
     line-height: 1.45 !important;}
.portfolio-library-column.portfolio-compare-panel, .portfolio-compare-panel {width: min(100%, 1260px) !important;
     max-width: 1260px !important;
     margin-inline: auto !important;
     border-radius: 2px !important;
     background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.028) 58%, rgba(255,255,255,0.034)) !important;
     box-shadow: 0 24px 66px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.07) !important;}
.portfolio-library-column.portfolio-compare-panel {display: grid !important;
     grid-template-rows: auto minmax(0, auto) auto !important;
     gap: clamp(0.8rem, 1.25vw, 1.05rem) !important;
     padding: clamp(0.95rem, 1.6vw, 1.25rem) clamp(0.95rem, 1.6vw, 1.25rem) 0 !important;
     overflow: hidden !important;}
.portfolio-video-library {grid-auto-columns: clamp(220px, 18vw, 286px) !important;
     gap: clamp(0.78rem, 1.25vw, 1rem) !important;
     padding: 0.1rem 0.1rem 0.7rem !important;
     scrollbar-width: none !important;}
.portfolio-video-library::-webkit-scrollbar {display: none !important;}
.portfolio-video-card, .portfolio-video-card:nth-child(even), .portfolio-video-card.is-focused, .portfolio-video-card.is-playing, .portfolio-video-card:hover, .portfolio-video-card:focus-visible {aspect-ratio: 9 / 16 !important;
     border-radius: 2px !important;}
.portfolio-video-card.has-talk {border-color: rgba(255, 255, 255, 0.42) !important;
     box-shadow: 0 22px 58px rgba(0,0,0,0.34), 0 0 0 1px rgba(254,44,85,0.42), 0 0 28px rgba(37,244,238,0.16), 0 0 38px rgba(254,44,85,0.14) !important;}
.portfolio-link-row.portfolio-links-below-video {width: calc(100% + (clamp(0.95rem, 1.6vw, 1.25rem) * 2)) !important;
     min-height: 56px !important;
     display: grid !important;
     grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;
     gap: 0 !important;
     margin: 0 calc(clamp(0.95rem, 1.6vw, 1.25rem) * -1) !important;
     border: 0 !important;
     border-top: 1px solid rgba(255,255,255,0.14) !important;
     border-radius: 0 !important;
     overflow: hidden !important;
     background: rgba(5, 12, 18, 0.45) !important;
     box-shadow: none !important;}
.portfolio-link-row.portfolio-links-below-video .portfolio-panel-link {min-height: 56px !important;
     border: 0 !important;
     border-radius: 0 !important;
     display: inline-flex !important;
     align-items: center !important;
     justify-content: center !important;
     gap: 0.72rem !important;
     padding: 0.85rem 1rem !important;
     font-size: clamp(0.6rem, 0.72vw, 0.74rem) !important;
     letter-spacing: 0.16em !important;
     text-transform: uppercase !important;
     box-shadow: none !important;}
.portfolio-link-row.portfolio-links-below-video .portfolio-panel-link.is-google {background: linear-gradient(180deg, #ffffff, #f5f7f9) !important;
     color: #202124 !important;}
.portfolio-link-row.portfolio-links-below-video .portfolio-panel-link.is-tiktok {background: radial-gradient(circle at 30% 20%, rgba(37,244,238,0.16), transparent 34%), radial-gradient(circle at 70% 80%, rgba(254,44,85,0.18), transparent 38%), #050505 !important;
     color: #fff !important;}
.portfolio-link-row.portfolio-links-below-video .portfolio-brand-icon {width: 24px !important;
     height: 24px !important;
     flex: 0 0 24px !important;
     border-radius: 2px !important;}
.portfolio-link-row.portfolio-links-below-video .portfolio-link-slit {display: block !important;
     width: 1px !important;
     height: 100% !important;
     background: linear-gradient(180deg, transparent, rgba(255,255,255,0.28), transparent) !important;}
.portfolio-library-column + .portfolio-compare-panel {margin-top: clamp(0.5rem, 1.1vw, 0.9rem) !important;}
.portfolio-compare-panel-head p {max-width: 68ch !important;}
@media (max-width: 1180px) {
  .portfolio-dialog {grid-template-rows: auto minmax(0, 1fr) !important;}
  .portfolio-fake-header {grid-template-columns: auto minmax(0, 1fr) auto !important;}
  .portfolio-compare-heading h2 {font-size: clamp(2.45rem, 8vw, 5rem) !important;}
  .portfolio-video-library {grid-auto-columns: clamp(210px, 27vw, 280px) !important;}
}
@media (max-width: 760px) {
  .portfolio-fake-header {grid-template-columns: auto minmax(0, 1fr) !important;}
  .portfolio-estimate {display: none !important;}
  .portfolio-compare-section {padding: 1.35rem 0.8rem 1.4rem !important;
         gap: 1rem !important;}
  .portfolio-compare-heading h2 {font-size: clamp(2.35rem, 12vw, 3.8rem) !important;
         line-height: 0.9 !important;}
  .portfolio-compare-heading p {font-size: 0.78rem !important;
         max-width: 36ch !important;}
  .portfolio-library-column.portfolio-compare-panel {padding: 0.82rem 0.82rem 0 !important;}
  .portfolio-video-library {grid-auto-columns: minmax(205px, 72vw) !important;}
  .portfolio-link-row.portfolio-links-below-video {width: calc(100% + 1.64rem) !important;
         margin-inline: -0.82rem !important;
         grid-template-columns: 1fr !important;}
  .portfolio-link-row.portfolio-links-below-video .portfolio-link-slit {display: none !important;}
  .portfolio-link-row.portfolio-links-below-video .portfolio-panel-link {min-height: 48px !important;
         font-size: 0.56rem !important;
         border-top: 1px solid rgba(255,255,255,0.1) !important;}
}
.portfolio-fake-header {grid-template-columns: auto minmax(0, 1fr) auto !important;}
.portfolio-estimate {display: inline-flex !important;
     justify-self: end !important;}
.portfolio-library-column.portfolio-compare-panel.is-footage {grid-template-rows: auto minmax(0, auto) auto !important;
     padding-bottom: 0 !important;
     overflow: visible !important;}
.portfolio-video-panel-head {display: grid !important;
     grid-template-columns: minmax(0, 1fr) auto !important;
     align-items: end !important;
     gap: 1rem !important;
     padding-bottom: .15rem !important;}
.portfolio-video-panel-head h3 {font-size: clamp(2rem, 3.2vw, 3.2rem) !important;
     line-height: .92 !important;
     letter-spacing: -.035em !important;}
.portfolio-video-panel-head p {max-width: 64ch !important;
     margin-top: .38rem !important;
     font-size: clamp(.78rem, .88vw, .92rem) !important;
     line-height: 1.42 !important;}
.portfolio-video-library {grid-auto-columns: clamp(210px, 18vw, 280px) !important;
     align-items: stretch !important;
     min-height: 0 !important;
     height: auto !important;
     padding: .45rem .1rem .75rem !important;
     overflow-x: auto !important;
     overflow-y: hidden !important;}
.portfolio-video-card, .portfolio-video-card:nth-child(even), .portfolio-video-card.is-focused, .portfolio-video-card.is-playing, .portfolio-video-card:hover, .portfolio-video-card:focus-visible {height: clamp(310px, 42vh, 480px) !important;
     min-height: clamp(310px, 42vh, 480px) !important;
     aspect-ratio: 9 / 16 !important;
     display: block !important;
     opacity: 1 !important;
     visibility: visible !important;
     overflow: hidden !important;}
.portfolio-video-card video {display: block !important;
     width: 100% !important;
     height: 100% !important;
     object-fit: cover !important;
     background: #050b12 !important;}
.portfolio-video-card.has-talk::before {content: "TALK CLIP" !important;
     position: absolute !important;
     top: .55rem !important;
     right: .55rem !important;
     z-index: 3 !important;
     display: inline-flex !important;
     align-items: center !important;
     min-height: 22px !important;
     padding: .28rem .44rem !important;
     border: 1px solid rgba(255,255,255,.18) !important;
     background: rgba(5,12,18,.68) !important;
     color: #fff !important;
     font-family: var(--font-display) !important;
     font-size: .48rem !important;
     font-weight: 600 !important;
     letter-spacing: .13em !important;
     line-height: 1 !important;
     text-transform: uppercase !important;
     border-radius: 2px !important;}
.portfolio-video-card.has-talk {border-color: rgba(255,255,255,.46) !important;
     box-shadow: 0 20px 50px rgba(0,0,0,.32), 0 0 0 1px rgba(254,44,85,.36), 0 0 30px rgba(37,244,238,.13) !important;}
.portfolio-link-row.portfolio-links-below-video {display: grid !important;
     grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;
     width: calc(100% + (clamp(0.95rem, 1.6vw, 1.25rem) * 2)) !important;
     margin: .1rem calc(clamp(0.95rem, 1.6vw, 1.25rem) * -1) 0 !important;
     min-height: 54px !important;
     border-top: 1px solid rgba(255,255,255,.14) !important;
     background: rgba(5,12,18,.5) !important;
     overflow: hidden !important;
     visibility: visible !important;
     opacity: 1 !important;}
.portfolio-link-row.portfolio-links-below-video .portfolio-panel-link {display: inline-flex !important;
     min-height: 54px !important;
     border: 0 !important;
     border-radius: 0 !important;}
.portfolio-link-row.portfolio-links-below-video .portfolio-link-slit {display: block !important;}
@media (max-width: 760px) {
  .portfolio-fake-header {grid-template-columns: auto minmax(0, 1fr) auto !important;
         min-height: calc(var(--topbar-h) + 8px) !important;
         gap: .55rem !important;
         padding-left: .7rem !important;
         padding-right: .7rem !important;}
  .portfolio-back {min-height: 34px !important;
         padding: .48rem .62rem !important;
         font-size: .52rem !important;
         letter-spacing: .1em !important;}
  .portfolio-brand {gap: .5rem !important;
         min-width: 0 !important;}
  .portfolio-brand .brand-mark {width: 32px !important;
         height: 32px !important;}
  .portfolio-brand .brand-text strong {font-size: .76rem !important;
         letter-spacing: .055em !important;
         white-space: nowrap !important;}
  .portfolio-brand .brand-text small {display: none !important;}
  .portfolio-estimate {min-height: 34px !important;
         padding: .48rem .58rem !important;
         font-size: .46rem !important;
         letter-spacing: .075em !important;
         white-space: nowrap !important;
         display: inline-flex !important;}
  .portfolio-compare-section {padding: 1.1rem .8rem 1.35rem !important;
         gap: 1rem !important;}
  .portfolio-compare-heading h2 {font-size: clamp(2.35rem, 11.5vw, 3.6rem) !important;}
  .portfolio-library-column.portfolio-compare-panel.is-footage {padding: .78rem .78rem 0 !important;}
  .portfolio-video-panel-head h3 {font-size: clamp(1.55rem, 8.3vw, 2.3rem) !important;
         line-height: .96 !important;
         max-width: 10ch !important;}
  .portfolio-video-panel-head p {font-size: .72rem !important;
         line-height: 1.34 !important;
         max-width: 32ch !important;}
  .portfolio-video-library {grid-auto-columns: minmax(164px, 47vw) !important;
         gap: .62rem !important;
         padding: .35rem .05rem .62rem !important;}
  .portfolio-video-card, .portfolio-video-card:nth-child(even), .portfolio-video-card.is-focused, .portfolio-video-card.is-playing, .portfolio-video-card:hover, .portfolio-video-card:focus-visible {height: clamp(245px, 42svh, 370px) !important;
         min-height: clamp(245px, 42svh, 370px) !important;}
  .portfolio-carousel-btn {width: 38px !important;
         height: 54px !important;
         top: 55% !important;}
  .portfolio-link-row.portfolio-links-below-video {width: calc(100% + 1.56rem) !important;
         margin: .05rem -.78rem 0 !important;
         grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;
         min-height: 44px !important;}
  .portfolio-link-row.portfolio-links-below-video .portfolio-link-slit {display: block !important;}
  .portfolio-link-row.portfolio-links-below-video .portfolio-panel-link {min-height: 44px !important;
         padding: .62rem .45rem !important;
         gap: .42rem !important;
         font-size: .47rem !important;
         letter-spacing: .085em !important;
         white-space: nowrap !important;}
  .portfolio-link-row.portfolio-links-below-video .portfolio-brand-icon {width: 18px !important;
         height: 18px !important;
         flex-basis: 18px !important;}
}
@media (max-width: 390px) {
  .portfolio-estimate {font-size: .42rem !important;
         padding-inline: .46rem !important;}
  .portfolio-brand .brand-text strong {font-size: .68rem !important;}
  .portfolio-video-library {grid-auto-columns: minmax(150px, 49vw) !important;}
}
.portfolio-library-column.portfolio-compare-panel.is-footage {height: clamp(430px, 56svh, 620px) !important;
     grid-template-rows: auto minmax(0, 1fr) auto !important;
     gap: clamp(0.72rem, 1vw, 0.95rem) !important;}
.portfolio-video-panel-head {margin-bottom: 0 !important;}
.portfolio-video-library {display: flex !important;
     align-items: center !important;
     gap: 0 !important;
     height: 100% !important;
     min-height: 0 !important;
     overflow-x: auto !important;
     overflow-y: hidden !important;
     padding: clamp(0.5rem, 1vw, 0.75rem) clamp(3.2rem, 6vw, 6.25rem) clamp(0.7rem, 1vw, 0.9rem) !important;
     scroll-padding-inline: clamp(3.2rem, 6vw, 6.25rem) !important;
     scroll-snap-type: x mandatory !important;
     scrollbar-width: none !important;
     perspective: 1500px !important;}
.portfolio-video-library::-webkit-scrollbar {display: none !important;}
.portfolio-video-card, .portfolio-video-card:nth-child(even), .portfolio-video-card.has-talk, .portfolio-video-card.has-talk.is-focused, .portfolio-video-card.has-talk.is-playing, .portfolio-video-card.has-talk:hover, .portfolio-video-card.has-talk:focus-visible {flex: 0 0 clamp(185px, 18.5vw, 286px) !important;
     width: auto !important;
     height: clamp(315px, 45svh, 520px) !important;
     min-height: 0 !important;
     aspect-ratio: 9 / 16 !important;
     margin-right: clamp(-4.6rem, -4.2vw, -2.1rem) !important;
     scroll-snap-align: center !important;
     opacity: .72 !important;
     filter: saturate(.92) contrast(1.02) brightness(.86) !important;
     border: 1px solid rgba(255,255,255,.14) !important;
     border-radius: 3px !important;
     background: #050b12 !important;
     box-shadow: 0 20px 48px rgba(0,0,0,.28) !important;
     transform: rotateY(-15deg) scale(.88) translateY(8px) !important;
     transform-origin: center !important;
     overflow: hidden !important;
     transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease, filter 220ms ease, border-color 220ms ease, box-shadow 220ms ease !important;}
.portfolio-video-card:nth-child(even) {transform: rotateY(15deg) scale(.88) translateY(8px) !important;}
.portfolio-video-card:last-child {margin-right: 0 !important;}
.portfolio-video-card.is-focused, .portfolio-video-card.is-playing, .portfolio-video-card:hover, .portfolio-video-card:focus-visible, .portfolio-video-card:nth-child(even).is-focused, .portfolio-video-card:nth-child(even).is-playing, .portfolio-video-card:nth-child(even):hover, .portfolio-video-card:nth-child(even):focus-visible {transform: rotateY(0) scale(1.08) translateY(0) !important;
     opacity: 1 !important;
     filter: saturate(1.05) contrast(1.06) brightness(1) !important;
     border-color: rgba(255,255,255,.34) !important;
     box-shadow: 0 32px 76px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.06) !important;
     z-index: 6 !important;}
.portfolio-video-card.has-talk, .portfolio-video-card.has-talk.is-focused, .portfolio-video-card.has-talk.is-playing, .portfolio-video-card.has-talk:hover, .portfolio-video-card.has-talk:focus-visible {order: -1 !important;
     border-color: rgba(255,255,255,.14) !important;
     box-shadow: 0 20px 48px rgba(0,0,0,.28) !important;}
.portfolio-video-card.has-talk.is-focused, .portfolio-video-card.has-talk.is-playing, .portfolio-video-card.has-talk:hover, .portfolio-video-card.has-talk:focus-visible {border-color: rgba(255,255,255,.34) !important;
     box-shadow: 0 32px 76px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.06) !important;}
.portfolio-video-card::before, .portfolio-video-card.has-talk::before {content: "" !important;
     position: absolute !important;
     inset: 0 !important;
     z-index: 1 !important;
     display: block !important;
     width: auto !important;
     height: auto !important;
     min-height: 0 !important;
     padding: 0 !important;
     border: 0 !important;
     border-radius: inherit !important;
     background: linear-gradient(180deg, rgba(5,12,18,.01), rgba(5,12,18,.08) 55%, rgba(5,12,18,.42)) !important;
     box-shadow: none !important;
     color: transparent !important;
     pointer-events: none !important;
     text-indent: -9999px !important;}
.portfolio-video-card::after, .portfolio-video-card.has-talk::after, .portfolio-video-card.is-playing::after {content: "" !important;
     top: 50% !important;
     left: 50% !important;
     right: auto !important;
     width: clamp(42px, 4.2vw, 60px) !important;
     height: clamp(42px, 4.2vw, 60px) !important;
     padding: 0 !important;
     border-radius: 999px !important;
     border: 1.5px solid rgba(255,255,255,.84) !important;
     background: rgba(5,12,18,.24) !important;
     transform: translate(-50%, -50%) scale(.86) !important;
     opacity: 0 !important;
     box-shadow: 0 14px 34px rgba(0,0,0,.25) !important;}
.portfolio-video-card.is-focused::after, .portfolio-video-card.is-playing::after, .portfolio-video-card:hover::after, .portfolio-video-card:focus-visible::after {opacity: 1 !important;
     transform: translate(-50%, -50%) scale(1) !important;}
.portfolio-video-card video {position: absolute !important;
     inset: 0 !important;
     width: 100% !important;
     height: 100% !important;
     object-fit: cover !important;
     object-position: center !important;
     display: block !important;
     border-radius: inherit !important;
     background: #050b12 !important;
     transform: none !important;}
.portfolio-video-card:hover video, .portfolio-video-card:focus-visible video, .portfolio-video-card.is-playing video {transform: none !important;}
@media (max-width: 1180px) {
  .portfolio-video-library {padding-inline: clamp(2rem, 4vw, 3rem) !important;
         scroll-padding-inline: clamp(2rem, 4vw, 3rem) !important;}
  .portfolio-video-card, .portfolio-video-card:nth-child(even), .portfolio-video-card.has-talk {flex-basis: clamp(175px, 24vw, 260px) !important;
         margin-right: clamp(-3rem, -3vw, -1.4rem) !important;}
}
@media (max-width: 760px) {
  .portfolio-library-column.portfolio-compare-panel.is-footage {height: auto !important;
         min-height: 0 !important;
         padding: 1rem 1rem 0 !important;}
  .portfolio-video-library {min-height: 360px !important;
         height: 360px !important;
         padding: .35rem 2.25rem .65rem !important;
         scroll-padding-inline: 2.25rem !important;}
  .portfolio-video-card, .portfolio-video-card:nth-child(even), .portfolio-video-card.has-talk {flex: 0 0 min(54vw, 210px) !important;
         height: 315px !important;
         margin-right: -2.1rem !important;
         transform: rotateY(-12deg) scale(.88) translateY(6px) !important;}
  .portfolio-video-card:nth-child(even) {transform: rotateY(12deg) scale(.88) translateY(6px) !important;}
  .portfolio-video-card.is-focused, .portfolio-video-card.is-playing, .portfolio-video-card:hover, .portfolio-video-card:focus-visible, .portfolio-video-card:nth-child(even).is-focused, .portfolio-video-card:nth-child(even).is-playing, .portfolio-video-card:nth-child(even):hover, .portfolio-video-card:nth-child(even):focus-visible {transform: rotateY(0) scale(1.04) translateY(0) !important;}
}
@media (max-width: 420px) {
  .portfolio-video-library {height: 330px !important;
         min-height: 330px !important;
         padding-inline: 1.8rem !important;
         scroll-padding-inline: 1.8rem !important;}
  .portfolio-video-card, .portfolio-video-card:nth-child(even), .portfolio-video-card.has-talk {flex-basis: min(58vw, 190px) !important;
         height: 292px !important;
         margin-right: -1.75rem !important;}
}
.portfolio-library-column.portfolio-compare-panel.is-footage {min-height: clamp(640px, 74svh, 900px) !important;
     height: auto !important;
     grid-template-rows: auto minmax(0, 1fr) auto !important;
     gap: clamp(0.9rem, 1.35vw, 1.2rem) !important;
     padding: clamp(1.05rem, 1.55vw, 1.45rem) clamp(1.05rem, 1.55vw, 1.45rem) 0 !important;
     overflow: hidden !important;}
.portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-library {display: grid !important;
     grid-auto-flow: column !important;
     grid-auto-columns: clamp(230px, 22vw, 335px) !important;
     align-items: stretch !important;
     gap: clamp(0.8rem, 1.25vw, 1.15rem) !important;
     width: 100% !important;
     height: clamp(500px, 62svh, 720px) !important;
     min-height: clamp(500px, 62svh, 720px) !important;
     overflow-x: auto !important;
     overflow-y: hidden !important;
     padding: 0.35rem clamp(2.7rem, 5.6vw, 5.6rem) 0.75rem !important;
     scroll-padding-inline: clamp(2.7rem, 5.6vw, 5.6rem) !important;
     scroll-snap-type: x mandatory !important;
     overscroll-behavior-x: contain !important;
     perspective: none !important;
     scrollbar-width: thin !important;}
.portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-library::-webkit-scrollbar {display: initial !important;
     height: 8px !important;}
.portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-library::-webkit-scrollbar-track {background: rgba(255, 255, 255, 0.08) !important;
     border-radius: 999px !important;}
.portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-library::-webkit-scrollbar-thumb {background: rgba(255, 255, 255, 0.24) !important;
     border: 2px solid transparent !important;
     border-radius: 999px !important;
     background-clip: padding-box !important;}
.portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card, .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card:nth-child(even), .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card.has-talk {width: auto !important;
     height: 100% !important;
     min-height: 0 !important;
     max-height: none !important;
     flex: none !important;
     aspect-ratio: 9 / 16 !important;
     margin-right: 0 !important;
     scroll-snap-align: center !important;
     transform: none !important;
     opacity: 0.78 !important;
     filter: saturate(0.94) contrast(1.03) brightness(0.86) !important;
     border-color: rgba(255, 255, 255, 0.14) !important;
     box-shadow: 0 18px 46px rgba(0, 0, 0, 0.26) !important;
     transition: opacity 220ms ease, filter 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease !important;}
.portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card.is-focused, .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card.is-playing, .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card:hover, .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card:focus-visible, .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card:nth-child(even).is-focused, .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card:nth-child(even).is-playing, .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card:nth-child(even):hover, .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card:nth-child(even):focus-visible {transform: translateY(-3px) scale(1.012) !important;
     opacity: 1 !important;
     filter: saturate(1.05) contrast(1.06) brightness(1) !important;
     border-color: rgba(255, 255, 255, 0.34) !important;
     box-shadow: 0 28px 68px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
     z-index: 3 !important;}
.portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card.has-talk, .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card.has-talk.is-focused, .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card.has-talk.is-playing, .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card.has-talk:hover, .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card.has-talk:focus-visible {order: initial !important;}
.portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card video {width: 100% !important;
     height: 100% !important;
     object-fit: cover !important;
     object-position: center !important;
     transform: none !important;
     filter: none !important;}
.portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card::before {background: linear-gradient(180deg, rgba(5, 12, 18, 0.015), rgba(5, 12, 18, 0.08) 56%, rgba(5, 12, 18, 0.36)) !important;}
.portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card::after {opacity: 0 !important;}
.portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card.is-focused::after, .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card.is-playing::after, .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card:hover::after, .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card:focus-visible::after {opacity: 0.92 !important;}
.portfolio-compare-panel.is-faux {background: radial-gradient(circle at 18% 0, rgba(225, 222, 210, 0.12), transparent 22rem), radial-gradient(circle at 88% 18%, rgba(155, 18, 40, 0.1), transparent 24rem), linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.028)) !important;}
@media (max-width: 1180px) {
  .portfolio-library-column.portfolio-compare-panel.is-footage {min-height: clamp(560px, 76svh, 820px) !important;}
  .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-library {grid-auto-columns: clamp(215px, 30vw, 310px) !important;
         height: clamp(470px, 66svh, 670px) !important;
         min-height: clamp(470px, 66svh, 670px) !important;
         padding-inline: clamp(2rem, 4vw, 3rem) !important;
         scroll-padding-inline: clamp(2rem, 4vw, 3rem) !important;}
}
@media (max-width: 760px) {
  .portfolio-library-column.portfolio-compare-panel.is-footage {min-height: 0 !important;
         height: auto !important;
         padding: 1rem 1rem 0 !important;}
  .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-library {grid-auto-columns: minmax(205px, 74vw) !important;
         height: min(68svh, 560px) !important;
         min-height: 420px !important;
         padding: 0.25rem 1.1rem 0.8rem !important;
         scroll-padding-inline: 1.1rem !important;
         gap: 0.75rem !important;}
  .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card, .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card:nth-child(even) {transform: none !important;}
  .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card.is-focused, .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card.is-playing, .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card:hover, .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card:focus-visible, .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card:nth-child(even).is-focused, .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card:nth-child(even).is-playing, .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card:nth-child(even):hover, .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card:nth-child(even):focus-visible {transform: none !important;}
}
@media (max-width: 420px) {
  .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-library {grid-auto-columns: minmax(190px, 76vw) !important;
         height: min(66svh, 520px) !important;
         min-height: 390px !important;}
}
@media (max-width:760px) {
  .portfolio-library-column.portfolio-compare-panel.is-footage {height:auto!important;
        min-height:0!important;
        padding:1rem 1rem 0!important;}
  .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-library {display:grid!important;
        grid-auto-flow:column!important;
        grid-auto-columns:minmax(250px,86vw)!important;
        height:min(68svh,570px)!important;
        min-height:420px!important;
        gap:.85rem!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        scroll-snap-type:x mandatory!important;
        scroll-padding-inline:.5rem!important;
        padding:.25rem .5rem .65rem!important;}
  .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card, .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card:nth-child(even) {height:100%!important;
        min-height:0!important;
        aspect-ratio:9/16!important;
        scroll-snap-align:center!important;
        opacity:1!important;
        transform:none!important;
        filter:none!important;}
  .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card video {width:100%!important;
        height:100%!important;
        object-fit:cover!important;
        object-position:center!important;}
  .portfolio-library-column.portfolio-compare-panel.is-footage + * {margin-bottom:0!important;}
}
@media (max-width:420px) {
  .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-library {grid-auto-columns:minmax(235px,88vw)!important;
        height:min(65svh,520px)!important;
        min-height:390px!important;}
}
.portfolio-panel-count {width: fit-content !important;
     display: inline-grid !important;
     grid-template-columns: auto auto !important;
     align-items: baseline !important;
     gap: .55rem !important;
     margin-top: .68rem !important;
     padding: .45rem .62rem !important;
     border-left: 2px solid var(--red-soft) !important;
     background: rgba(255,255,255,.055) !important;
     color: var(--white) !important;
     font-family: var(--font-display) !important;
     line-height: 1 !important;
     border-radius: 2px !important;}
.portfolio-panel-count strong {color: var(--white) !important;
     font-size: clamp(1.15rem, 1.75vw, 1.65rem) !important;
     font-weight: 600 !important;
     letter-spacing: -.03em !important;}
.portfolio-panel-count span {color: rgba(255,255,255,.66) !important;
     font-size: clamp(.52rem, .62vw, .66rem) !important;
     font-weight: 600 !important;
     letter-spacing: .14em !important;
     text-transform: uppercase !important;
     white-space: nowrap !important;}
.portfolio-video-panel-head > div, .portfolio-compare-panel-head > div:first-child {min-width: 0 !important;}
.portfolio-compare-panel-head {align-items: start !important;}
.portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card.has-talk::before {content: "AUDIO" !important;
     inset: auto .55rem .55rem auto !important;
     width: auto !important;
     height: auto !important;
     min-height: 22px !important;
     display: inline-flex !important;
     align-items: center !important;
     padding: .3rem .44rem !important;
     border: 1px solid rgba(255,255,255,.18) !important;
     background: rgba(5,12,18,.62) !important;
     color: #fff !important;
     font-family: var(--font-display) !important;
     font-size: .48rem !important;
     font-weight: 600 !important;
     letter-spacing: .13em !important;
     text-indent: 0 !important;
     line-height: 1 !important;
     border-radius: 2px !important;}
.portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card.has-talk.is-playing::before {content: "AUDIO ON" !important;}
@media (min-width: 761px) and (max-width: 1180px) {
  .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-library {grid-auto-columns: minmax(230px, 34vw) !important;
         height: clamp(460px, 64svh, 680px) !important;
         min-height: clamp(460px, 64svh, 680px) !important;}
  .before-after-rail {grid-auto-columns: minmax(280px, 43vw) !important;}
}
@media (max-width: 760px) {
  .portfolio-dialog {grid-template-rows: auto minmax(0, 1fr) !important;}
  .portfolio-scroll {overflow-y: auto !important;
         -webkit-overflow-scrolling: touch !important;}
  .portfolio-compare-section {padding: .95rem .72rem 1.25rem !important;
         gap: .9rem !important;}
  .portfolio-compare-heading {gap: .42rem !important;
         margin-bottom: .05rem !important;}
  .portfolio-compare-heading h2 {font-size: clamp(2rem, 10.8vw, 3.2rem) !important;
         line-height: .9 !important;}
  .portfolio-compare-heading p {max-width: 38ch !important;
         font-size: .74rem !important;
         line-height: 1.38 !important;}
  .portfolio-library-column.portfolio-compare-panel, .portfolio-compare-panel {width: 100% !important;
         padding: .78rem !important;
         overflow: hidden !important;}
  .portfolio-library-column.portfolio-compare-panel.is-footage {padding: .78rem .78rem 0 !important;
         min-height: 0 !important;
         gap: .68rem !important;}
  .portfolio-video-panel-head, .portfolio-compare-panel-head {display: grid !important;
         grid-template-columns: 1fr auto !important;
         align-items: start !important;
         gap: .6rem !important;
         margin-bottom: .55rem !important;}
  .portfolio-video-panel-head h3, .portfolio-compare-panel-head h3 {max-width: none !important;
         font-size: clamp(1.45rem, 7.7vw, 2.15rem) !important;
         line-height: .96 !important;}
  .portfolio-video-panel-head p, .portfolio-compare-panel-head p {max-width: 36ch !important;
         margin-top: .28rem !important;
         font-size: .7rem !important;
         line-height: 1.34 !important;}
  .portfolio-panel-count {grid-template-columns: auto auto !important;
         gap: .42rem !important;
         margin-top: .48rem !important;
         padding: .36rem .46rem !important;}
  .portfolio-panel-count strong {font-size: 1.05rem !important;}
  .portfolio-panel-count span {font-size: .48rem !important;
         letter-spacing: .1em !important;}
  .portfolio-compare-actions {align-self: start !important;
         display: inline-flex !important;
         gap: .35rem !important;}
  .ba-scroll-btn {width: 34px !important;
         height: 34px !important;
         font-size: 1.05rem !important;}
  .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-library {display: grid !important;
         grid-auto-flow: column !important;
         grid-auto-columns: 100% !important;
         gap: .85rem !important;
         width: 100% !important;
         height: auto !important;
         min-height: 0 !important;
         padding: .18rem 0 .68rem !important;
         scroll-padding-inline: 0 !important;
         scroll-snap-type: x mandatory !important;
         overflow-x: auto !important;
         overflow-y: hidden !important;
         scrollbar-width: none !important;}
  .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card, .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card:nth-child(even), .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card.has-talk {width: 100% !important;
         height: auto !important;
         min-height: 0 !important;
         aspect-ratio: 9 / 16 !important;
         scroll-snap-align: center !important;
         transform: none !important;
         opacity: 1 !important;
         filter: none !important;
         margin: 0 !important;}
  .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card video {object-fit: contain !important;
         background: #050b12 !important;}
  .portfolio-carousel-btn {width: 34px !important;
         height: 46px !important;
         top: calc(50% + 2.2rem) !important;
         background: rgba(5,12,18,.5) !important;}
  .portfolio-carousel-btn.is-prev {left: .55rem !important;}
  .portfolio-carousel-btn.is-next {right: .55rem !important;}
  .portfolio-link-row.portfolio-links-below-video {width: calc(100% + 1.56rem) !important;
         margin: .02rem -.78rem 0 !important;
         min-height: 44px !important;
         grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;}
  .portfolio-link-row.portfolio-links-below-video .portfolio-panel-link {min-height: 44px !important;
         padding: .56rem .4rem !important;
         font-size: .47rem !important;
         letter-spacing: .08em !important;
         white-space: nowrap !important;}
  .before-after-rail {grid-auto-columns: 100% !important;
         gap: .8rem !important;
         padding: .05rem 0 .45rem !important;
         scroll-padding-inline: 0 !important;}
  .ba-stage {min-height: 0 !important;
         aspect-ratio: 4 / 5 !important;}
}
@media (max-width: 420px) {
  .portfolio-fake-header {padding-left: .52rem !important;
         padding-right: .52rem !important;
         gap: .42rem !important;}
  .portfolio-brand .brand-mark {width: 28px !important;
         height: 28px !important;}
  .portfolio-brand .brand-text strong {font-size: .62rem !important;}
  .portfolio-estimate, .portfolio-back {min-height: 32px !important;
         padding: .44rem .48rem !important;
         font-size: .42rem !important;
         letter-spacing: .065em !important;}
  .portfolio-video-panel-head, .portfolio-compare-panel-head {grid-template-columns: 1fr !important;}
  .portfolio-compare-actions {justify-self: start !important;}
}
@media (max-width: 760px) {
  .portfolio-library-column.portfolio-compare-panel.is-footage {display: flex !important;
         flex-direction: column !important;
         align-items: stretch !important;
         justify-content: flex-start !important;
         width: 100% !important;
         height: auto !important;
         min-height: 0 !important;
         max-height: none !important;
         padding: .78rem .78rem .78rem !important;
         gap: .58rem !important;
         overflow: hidden !important;
         grid-template-rows: none !important;}
  .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-panel-head {flex: 0 0 auto !important;
         margin: 0 !important;
         padding: 0 !important;}
  .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-library {flex: 0 0 auto !important;
         display: grid !important;
         grid-auto-flow: column !important;
         grid-auto-columns: 100% !important;
         width: 100% !important;
         height: auto !important;
         min-height: 0 !important;
         max-height: none !important;
         gap: .72rem !important;
         padding: .12rem 0 .36rem !important;
         margin: 0 !important;
         overflow-x: auto !important;
         overflow-y: hidden !important;
         scroll-snap-type: x mandatory !important;
         scroll-padding-inline: 0 !important;
         scrollbar-width: none !important;}
  .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-library::-webkit-scrollbar {display: none !important;}
  .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card, .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card:nth-child(even), .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card.has-talk {width: 100% !important;
         height: auto !important;
         min-height: 0 !important;
         max-height: none !important;
         aspect-ratio: 9 / 16 !important;
         scroll-snap-align: center !important;
         margin: 0 !important;
         transform: none !important;
         opacity: 1 !important;
         filter: none !important;}
  .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-card video {width: 100% !important;
         height: 100% !important;
         object-fit: cover !important;
         object-position: center !important;}
  .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-link-row.portfolio-links-below-video {flex: 0 0 auto !important;
         width: calc(100% + 1.56rem) !important;
         min-height: 46px !important;
         margin: 0 -.78rem -.78rem !important;
         padding: 0 !important;
         display: grid !important;
         grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;
         align-items: stretch !important;}
  .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-link-row.portfolio-links-below-video .portfolio-panel-link {min-height: 46px !important;
         padding: .56rem .4rem !important;}
  .portfolio-library-column.portfolio-compare-panel.is-footage + .portfolio-compare-panel {margin-top: .9rem !important;}
}
@media (max-width: 420px) {
  .portfolio-library-column.portfolio-compare-panel.is-footage {padding: .68rem .68rem .68rem !important;
         gap: .5rem !important;}
  .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-video-library {padding-bottom: .3rem !important;}
  .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-link-row.portfolio-links-below-video {width: calc(100% + 1.36rem) !important;
         margin: 0 -.68rem -.68rem !important;
         min-height: 44px !important;}
  .portfolio-library-column.portfolio-compare-panel.is-footage .portfolio-link-row.portfolio-links-below-video .portfolio-panel-link {min-height: 44px !important;}
}
.portfolio-library-column.portfolio-compare-panel, .portfolio-compare-panel {position:relative!important;}
.portfolio-video-panel-head, .portfolio-compare-panel-head {padding-right:clamp(3.2rem,5vw,4.4rem)!important;}
.portfolio-compare-panel-head {position:relative!important;}
.portfolio-panel-count {position:absolute!important;
     top:clamp(.72rem,1.05vw,1rem)!important;
     right:clamp(.72rem,1.05vw,1rem)!important;
     z-index:6!important;
     width:auto!important;
     min-width:34px!important;
     height:34px!important;
     margin:0!important;
     padding:0!important;
     display:grid!important;
     place-items:center!important;
     border:1px solid rgba(255,255,255,.14)!important;
     border-left:1px solid rgba(255,255,255,.14)!important;
     background:rgba(255,255,255,.075)!important;
     color:var(--white)!important;
     box-shadow:0 10px 24px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.08)!important;
     backdrop-filter:blur(8px)!important;
     -webkit-backdrop-filter:blur(8px)!important;
     border-radius:var(--radius-md,4px)!important;
     line-height:1!important;}
.portfolio-panel-count strong {display:block!important;
     color:var(--white)!important;
     font-family:var(--font-display)!important;
     font-size:clamp(.9rem,1.05vw,1.08rem)!important;
     font-weight:600!important;
     letter-spacing:-.02em!important;
     line-height:1!important;}
.portfolio-panel-count span {position:absolute!important;
     width:1px!important;
     height:1px!important;
     margin:-1px!important;
     padding:0!important;
     overflow:hidden!important;
     clip:rect(0 0 0 0)!important;
     white-space:nowrap!important;
     border:0!important;}
@media (max-width:760px) {
  .portfolio-video-panel-head, .portfolio-compare-panel-head {padding-right:2.95rem!important;}
  .portfolio-panel-count {top:.68rem!important;
         right:.68rem!important;
         min-width:30px!important;
         height:30px!important;}
  .portfolio-panel-count strong {font-size:.82rem!important;}
}
@media (max-width:420px) {
  .portfolio-video-panel-head, .portfolio-compare-panel-head {padding-right:2.55rem!important;}
  .portfolio-panel-count {top:.58rem!important;
         right:.58rem!important;
         min-width:27px!important;
         height:27px!important;}
  .portfolio-panel-count strong {font-size:.76rem!important;}
}
.portfolio-panel-count {position:absolute!important;
     top:clamp(.72rem,1.05vw,1rem)!important;
     right:clamp(.78rem,1.15vw,1.1rem)!important;
     z-index:8!important;
     min-width:0!important;
     width:auto!important;
     height:auto!important;
     padding:0!important;
     margin:0!important;
     display:block!important;
     border:0!important;
     background:transparent!important;
     box-shadow:none!important;
     backdrop-filter:none!important;
     -webkit-backdrop-filter:none!important;
     border-radius:0!important;
     color:#fff!important;
     line-height:1!important;
     pointer-events:none!important;}
.portfolio-panel-count strong {display:block!important;
     color:#fff!important;
     font-family:var(--font-display)!important;
     font-size:clamp(.95rem,1.12vw,1.14rem)!important;
     font-weight:600!important;
     letter-spacing:-.02em!important;
     line-height:1!important;
     text-shadow:0 2px 10px rgba(0,0,0,.28)!important;}
.portfolio-panel-count span {position:absolute!important;
     width:1px!important;
     height:1px!important;
     margin:-1px!important;
     padding:0!important;
     overflow:hidden!important;
     clip:rect(0 0 0 0)!important;
     white-space:nowrap!important;
     border:0!important;}
@media (max-width:760px) {
  .portfolio-video-panel-head, .portfolio-compare-panel-head {padding-right:2.35rem!important;}
  .portfolio-panel-count {top:.66rem!important;
        right:.74rem!important;}
  .portfolio-panel-count strong {font-size:.88rem!important;}
}
@media (max-width:420px) {
  .portfolio-video-panel-head, .portfolio-compare-panel-head {padding-right:2rem!important;}
  .portfolio-panel-count {top:.58rem!important;
        right:.62rem!important;}
  .portfolio-panel-count strong {font-size:.8rem!important;}
}
.book .panel-inner {--booking-img: none;
    background: rgba(10, 31, 51, 0.86) !important;}
.book .estimate-contact .form-panel {overflow: visible !important;}
.walkthrough-field {gap: .45rem !important;}
.walkthrough-card {display: grid;
    gap: 0;
    padding: 0;
    border: 1px solid rgba(13, 36, 64, .12);
    background: linear-gradient(180deg, #ffffff, #f7f8fa);
    color: var(--ink);
    box-shadow: 0 10px 24px rgba(13, 36, 64, .08);
    overflow: hidden;}
.walkthrough-option-head {display: flex;
    align-items: start;
    justify-content: space-between;
    gap: .8rem;}
.walkthrough-option-head strong {display: block;
    color: var(--blue-base);
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.12;
    text-transform: uppercase;}
.walkthrough-toggle {width: 100%;
    min-height: 58px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
    border: 0;
    background: transparent;
    color: var(--ink);
    padding: .72rem .78rem;
    text-align: left;
    cursor: pointer;
    list-style: none;}
.walkthrough-toggle::-webkit-details-marker {display: none;}
.walkthrough-toggle strong {display: block;
    color: var(--blue-base);
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.12;
    text-transform: uppercase;}
.walkthrough-toggle small {display: block;
    margin-top: .2rem;
    color: rgba(13, 36, 64, .58);
    font-size: .7rem;
    line-height: 1.35;}
.walkthrough-toggle:hover, .walkthrough-toggle:focus-visible {background: rgba(13, 36, 64, .035);}
.walkthrough-toggle-meta {display: inline-flex;
    align-items: center;
    gap: .42rem;}
.walkthrough-count {flex: 0 0 auto;
    min-width: max-content;
    padding: .32rem .48rem;
    border: 1px solid rgba(47, 111, 78, .18);
    background: rgba(238, 248, 242, .78);
    color: var(--green-base);
    font-family: var(--font-display);
    font-size: .52rem;
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1;
    text-transform: uppercase;}
.walkthrough-chevron {width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(13, 36, 64, .14);
    background: #fff;
    color: var(--blue-base);
    font-family: var(--font-display);
    font-size: .92rem;
    font-weight: 800;
    line-height: 1;}
.walkthrough-dropdown-body {display: grid;
    gap: .66rem;
    padding: 0 .78rem .78rem;
    border-top: 1px solid rgba(13, 36, 64, .08);}
.walkthrough-options {display: grid;
    gap: .58rem;}
.walkthrough-option {display: grid;
    gap: .48rem;
    padding: .62rem;
    border: 1px solid rgba(13, 36, 64, .1);
    background: #fff;}
.walkthrough-option[hidden] {display: none !important;}
.walkthrough-option-head button, .walkthrough-add-btn {border: 1px solid rgba(13, 36, 64, .16);
    background: #fff;
    color: var(--blue-base);
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;}
.walkthrough-option-head button {padding: .26rem .42rem;
    font-size: .48rem;}
.walkthrough-row {display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    gap: .5rem;}
.walkthrough-option label {color: rgba(13, 36, 64, .56);
    font-family: var(--font-display);
    font-size: .48rem;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1;
    text-transform: uppercase;}
.walkthrough-option input, .walkthrough-option select {width: 100%;
    min-height: 40px;
    margin-top: .28rem;
    border: 1px solid rgba(13, 36, 64, .16);
    background: var(--navy-pastel-1);
    color: var(--ink);
    padding: .6rem .68rem;
    font-size: .78rem;
    outline: 0;}
.walkthrough-option input:focus, .walkthrough-option select:focus {border-color: var(--red-base);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(155, 18, 40, .1);}
.walkthrough-add-btn {min-height: 42px;
    padding: .62rem .8rem;
    font-size: .56rem;}
.walkthrough-add-btn:hover, .walkthrough-add-btn:focus-visible, .walkthrough-option-head button:hover, .walkthrough-option-head button:focus-visible {border-color: rgba(155, 18, 40, .28);
    color: var(--red-base);}
.walkthrough-field.field-error .walkthrough-card {border-color: rgba(155, 18, 40, .4);
    box-shadow: 0 0 0 3px rgba(155, 18, 40, .08);}
@media (max-width: 620px) {
  .walkthrough-toggle {padding: .66rem;
        grid-template-columns: 1fr;
        gap: .5rem;}
  .walkthrough-toggle-meta {justify-content: space-between;}
  .walkthrough-dropdown-body {padding: 0 .66rem .66rem;}
  .walkthrough-row {grid-template-columns: 1fr;}
}
.portfolio-library-column {width: min(100%, 1240px) !important;
    max-width: 1240px !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, auto) auto !important;
    gap: clamp(1rem, 1.8vw, 1.4rem) !important;
    padding: clamp(1rem, 2vw, 1.55rem) !important;
    overflow: hidden !important;}
.portfolio-video-panel-head {display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 1rem !important;}
.portfolio-video-panel-head .portfolio-panel-count, .portfolio-video-panel-head strong {justify-self: end !important;}
.portfolio-video-library {display: flex !important;
    gap: clamp(1.25rem, 2.4vw, 2.25rem) !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 clamp(2.5rem, 5vw, 5.25rem) clamp(0.8rem, 1.5vw, 1.1rem) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
    scroll-padding-inline: clamp(2.5rem, 5vw, 5.25rem) !important;
    scrollbar-width: thin !important;
    perspective: none !important;
    overscroll-behavior-x: contain !important;}
.portfolio-video-library::before, .portfolio-video-library::after {content: "" !important;
    flex: 0 0 clamp(0.35rem, 2.5vw, 2rem) !important;}
.portfolio-video-library::-webkit-scrollbar {display: block !important;
    height: 8px !important;}
.portfolio-video-library::-webkit-scrollbar-thumb {background: rgba(255,255,255,0.24) !important;
    border-radius: 999px !important;}
.portfolio-video-card, .portfolio-video-card:nth-child(even) {position: relative !important;
    flex: 0 0 clamp(250px, 24vw, 330px) !important;
    width: clamp(250px, 24vw, 330px) !important;
    aspect-ratio: 9 / 16 !important;
    min-height: 0 !important;
    height: auto !important;
    scroll-snap-align: center !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 4px !important;
    background: #050b12 !important;
    box-shadow: 0 18px 44px rgba(0,0,0,0.28) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;}
.portfolio-video-card:hover, .portfolio-video-card:focus-visible, .portfolio-video-card.is-focused, .portfolio-video-card.is-playing, .portfolio-video-card:nth-child(even):hover, .portfolio-video-card:nth-child(even):focus-visible, .portfolio-video-card:nth-child(even).is-focused, .portfolio-video-card:nth-child(even).is-playing {transform: translateY(-2px) !important;
    opacity: 1 !important;
    filter: none !important;
    border-color: rgba(255,255,255,0.42) !important;
    box-shadow: 0 24px 58px rgba(0,0,0,0.36) !important;
    z-index: 2 !important;}
.portfolio-video-card video {position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    background: #050505 !important;}
.portfolio-video-card::before {content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(5,12,18,0.05), rgba(5,12,18,0.18) 62%, rgba(5,12,18,0.52)) !important;}
.portfolio-video-card::after {content: "Click to Play" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    z-index: 3 !important;
    width: auto !important;
    height: auto !important;
    min-width: 112px !important;
    padding: 0.7rem 0.9rem !important;
    border: 1px solid rgba(255,255,255,0.72) !important;
    border-radius: 999px !important;
    background: rgba(5,12,18,0.58) !important;
    color: #fff !important;
    font-family: var(--font-display) !important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    line-height: 1 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    opacity: 0.92 !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    box-shadow: 0 14px 34px rgba(0,0,0,0.3) !important;}
.portfolio-video-card.is-playing::before, .portfolio-video-card.is-playing::after {opacity: 0 !important;}
.portfolio-carousel-btn {top: 58% !important;
    transform: translateY(-50%) !important;}
.portfolio-carousel-btn.is-prev {left: clamp(0.75rem, 1.6vw, 1.35rem) !important;}
.portfolio-carousel-btn.is-next {right: clamp(0.75rem, 1.6vw, 1.35rem) !important;}
@media (min-width: 761px) and (max-width: 1180px) {
  .portfolio-video-library {gap: clamp(1.1rem, 3vw, 1.8rem) !important;
        padding-inline: clamp(2rem, 5vw, 4rem) !important;
        scroll-padding-inline: clamp(2rem, 5vw, 4rem) !important;}
  .portfolio-video-card, .portfolio-video-card:nth-child(even) {flex-basis: clamp(240px, 35vw, 320px) !important;
        width: clamp(240px, 35vw, 320px) !important;}
}
@media (max-width: 760px) {
  .portfolio-library-column {padding: 0.85rem !important;
        gap: 0.85rem !important;}
  .portfolio-video-panel-head {grid-template-columns: 1fr auto !important;}
  .portfolio-video-library {gap: 1rem !important;
        padding-inline: 2.6rem !important;
        scroll-padding-inline: 2.6rem !important;}
  .portfolio-video-library::before, .portfolio-video-library::after {flex-basis: 0.65rem !important;}
  .portfolio-video-card, .portfolio-video-card:nth-child(even) {flex-basis: min(74vw, 300px) !important;
        width: min(74vw, 300px) !important;}
  .portfolio-carousel-btn {width: 36px !important;
        height: 52px !important;}
  .portfolio-carousel-btn.is-prev {left: 0.72rem !important;}
  .portfolio-carousel-btn.is-next {right: 0.72rem !important;}
}