/* SSCKS shared design system - generated from deploy/index.html (Phase 0).
   Fonts + frozen Tailwind v3.4.17 utilities + custom components. Root-relative asset urls.
   Do NOT hand-edit per page; this is the single source of truth linked by every inner page. */


@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 600;font-display:swap;src:url('/assets/fonts/fraunces.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 500;font-display:swap;src:url('/assets/fonts/fraunces-italic.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/dmsans.woff2') format('woff2')}


/* ===== next block ===== */


*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:"DM Sans", system-ui, sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0px}.inset-x-0{left:0px;right:0px}.inset-x-5{left:1.25rem;right:1.25rem}.bottom-0{bottom:0px}.left-4{left:1rem}.left-5{left:1.25rem}.right-5{right:1.25rem}.top-0{top:0px}.top-1{top:0.25rem}.top-2{top:0.5rem}.top-5{top:1.25rem}.z-10{z-index:10}.z-50{z-index:50}.z-\[60\]{z-index:60}.col-span-12{grid-column:span 12 / span 12}.mx-2{margin-left:0.5rem;margin-right:0.5rem}.mx-auto{margin-left:auto;margin-right:auto}.-mr-2{margin-right:-0.5rem}.-mt-10{margin-top:-2.5rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-14{margin-bottom:3.5rem}.mb-2{margin-bottom:0.5rem}.mb-3{margin-bottom:0.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-7{margin-bottom:1.75rem}.mt-0\.5{margin-top:0.125rem}.mt-1{margin-top:0.25rem}.mt-1\.5{margin-top:0.375rem}.mt-12{margin-top:3rem}.mt-2{margin-top:0.5rem}.mt-2\.5{margin-top:0.625rem}.mt-3{margin-top:0.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-7{margin-top:1.75rem}.mt-8{margin-top:2rem}.mt-9{margin-top:2.25rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.aspect-\[16\/10\]{aspect-ratio:16/10}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-2{height:0.5rem}.h-4{height:1rem}.h-6{height:1.5rem}.h-\[180px\]{height:180px}.h-\[230px\]{height:230px}.h-\[260px\]{height:260px}.h-\[300px\]{height:300px}.h-\[320px\]{height:320px}.h-\[68px\]{height:68px}.h-full{height:100%}.h-px{height:1px}.min-h-\[78vh\]{min-height:78vh}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-2{width:0.5rem}.w-4{width:1rem}.w-6{width:1.5rem}.w-9{width:2.25rem}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-5xl{max-width:64rem}.max-w-8xl{max-width:88rem}.max-w-9xl{max-width:96rem}.max-w-md{max-width:28rem}.max-w-sm{max-width:24rem}.max-w-xl{max-width:36rem}.shrink-0{flex-shrink:0}.rotate-45{--tw-rotate:45deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.select-none{-webkit-user-select:none;user-select:none}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-cols-12{grid-template-columns:repeat(12, minmax(0, 1fr))}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:0.25rem}.gap-1\.5{gap:0.375rem}.gap-10{gap:2.5rem}.gap-2{gap:0.5rem}.gap-2\.5{gap:0.625rem}.gap-3{gap:0.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-7{gap:1.75rem}.gap-8{gap:2rem}.gap-x-6{column-gap:1.5rem}.gap-y-10{row-gap:2.5rem}.gap-y-12{row-gap:3rem}.gap-y-2{row-gap:0.5rem}.space-y-2\.5 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.625rem * var(--tw-space-y-reverse))}.space-y-3 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.75rem * var(--tw-space-y-reverse))}.divide-y > :not([hidden]) ~ :not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-rule > :not([hidden]) ~ :not([hidden]){--tw-divide-opacity:1;border-color:rgb(221 211 190 / var(--tw-divide-opacity, 1))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-gold\/15{border-color:rgb(227 177 67 / 0.15)}.border-gold\/40{border-color:rgb(227 177 67 / 0.4)}.border-rule{--tw-border-opacity:1;border-color:rgb(221 211 190 / var(--tw-border-opacity, 1))}.border-rule\/60{border-color:rgb(221 211 190 / 0.6)}.border-rule\/70{border-color:rgb(221 211 190 / 0.7)}.border-white\/10{border-color:rgb(255 255 255 / 0.1)}.border-white\/15{border-color:rgb(255 255 255 / 0.15)}.bg-cream{--tw-bg-opacity:1;background-color:rgb(246 241 231 / var(--tw-bg-opacity, 1))}.bg-gold{--tw-bg-opacity:1;background-color:rgb(227 177 67 / var(--tw-bg-opacity, 1))}.bg-navy{--tw-bg-opacity:1;background-color:rgb(27 42 74 / var(--tw-bg-opacity, 1))}.bg-navy-deep{--tw-bg-opacity:1;background-color:rgb(14 26 51 / var(--tw-bg-opacity, 1))}.bg-navy-deep\/70{background-color:rgb(14 26 51 / 0.7)}.bg-paper{--tw-bg-opacity:1;background-color:rgb(250 250 247 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-gradient-to-t{background-image:linear-gradient(to top, var(--tw-gradient-stops))}.from-navy-deep\/90{--tw-gradient-from:rgb(14 26 51 / 0.9) var(--tw-gradient-from-position);--tw-gradient-to:rgb(14 26 51 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-navy-deep\/30{--tw-gradient-to:rgb(14 26 51 / 0)  var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), rgb(14 26 51 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.object-cover{object-fit:cover}.object-center{object-position:center}.object-top{object-position:top}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.\!px-6{padding-left:1.5rem !important;padding-right:1.5rem !important}.\!py-3{padding-top:0.75rem !important;padding-bottom:0.75rem !important}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-14{padding-top:3.5rem;padding-bottom:3.5rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-10{padding-bottom:2.5rem}.pb-12{padding-bottom:3rem}.pb-16{padding-bottom:4rem}.pt-10{padding-top:2.5rem}.pt-12{padding-top:3rem}.pt-2{padding-top:0.5rem}.pt-5{padding-top:1.25rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-center{text-align:center}.align-top{vertical-align:top}.font-serif{font-family:Fraunces, Georgia, serif}.\!text-\[12px\]{font-size:12px !important}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12\.5px\]{font-size:12.5px}.text-\[120px\]{font-size:120px}.text-\[12px\]{font-size:12px}.text-\[13\.5px\]{font-size:13.5px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[150px\]{font-size:150px}.text-\[15px\]{font-size:15px}.text-\[16px\]{font-size:16px}.text-\[17px\]{font-size:17px}.text-\[18px\]{font-size:18px}.text-\[20px\]{font-size:20px}.text-\[22px\]{font-size:22px}.text-\[24px\]{font-size:24px}.text-\[26px\]{font-size:26px}.text-\[40px\]{font-size:40px}.text-\[90px\]{font-size:90px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-0.025em}.tracking-wide-2{letter-spacing:0.16em}.tracking-widest-2{letter-spacing:0.22em}.text-gold{--tw-text-opacity:1;color:rgb(227 177 67 / var(--tw-text-opacity, 1))}.text-gold-deep{--tw-text-opacity:1;color:rgb(133 99 18 / var(--tw-text-opacity, 1))}.text-gold-light{--tw-text-opacity:1;color:rgb(242 214 136 / var(--tw-text-opacity, 1))}.text-gold-light\/60{color:rgb(242 214 136 / 0.6)}.text-gold-light\/70{color:rgb(242 214 136 / 0.7)}.text-gold\/45{color:rgb(227 177 67 / 0.45)}.text-ink{--tw-text-opacity:1;color:rgb(28 28 28 / var(--tw-text-opacity, 1))}.text-ink-muted{--tw-text-opacity:1;color:rgb(90 90 90 / var(--tw-text-opacity, 1))}.text-navy{--tw-text-opacity:1;color:rgb(27 42 74 / var(--tw-text-opacity, 1))}.text-navy-deep{--tw-text-opacity:1;color:rgb(14 26 51 / var(--tw-text-opacity, 1))}.text-navy-deep\/85{color:rgb(14 26 51 / 0.85)}.text-paper{--tw-text-opacity:1;color:rgb(250 250 247 / var(--tw-text-opacity, 1))}.text-paper\/45{color:rgb(250 250 247 / 0.45)}.text-paper\/55{color:rgb(250 250 247 / 0.55)}.text-paper\/65{color:rgb(250 250 247 / 0.65)}.text-paper\/70{color:rgb(250 250 247 / 0.7)}.text-paper\/75{color:rgb(250 250 247 / 0.75)}.text-paper\/80{color:rgb(250 250 247 / 0.8)}.text-paper\/90{color:rgb(250 250 247 / 0.9)}.text-white\/25{color:rgb(255 255 255 / 0.25)}.text-white\/55{color:rgb(255 255 255 / 0.55)}.text-white\/85{color:rgb(255 255 255 / 0.85)}.opacity-90{opacity:0.9}.opacity-95{opacity:0.95}.shadow-\[0_30px_60px_-30px_rgba\(14\2c 26\2c 51\2c \.5\)\]{--tw-shadow:0 30px 60px -30px rgba(14,26,51,.5);--tw-shadow-colored:0 30px 60px -30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition-colors{transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.hover\:bg-gold:hover{--tw-bg-opacity:1;background-color:rgb(227 177 67 / var(--tw-bg-opacity, 1))}.hover\:text-gold:hover{--tw-text-opacity:1;color:rgb(227 177 67 / var(--tw-text-opacity, 1))}.hover\:text-gold-light:hover{--tw-text-opacity:1;color:rgb(242 214 136 / var(--tw-text-opacity, 1))}.hover\:text-navy-deep:hover{--tw-text-opacity:1;color:rgb(14 26 51 / var(--tw-text-opacity, 1))}@media (min-width: 640px){.sm\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:gap-4{gap:1rem}}@media (min-width: 768px){.md\:col-span-3{grid-column:span 3 / span 3}.md\:col-span-4{grid-column:span 4 / span 4}.md\:col-span-5{grid-column:span 5 / span 5}.md\:col-span-7{grid-column:span 7 / span 7}.md\:-mt-16{margin-top:-4rem}.md\:mb-14{margin-bottom:3.5rem}.md\:mb-16{margin-bottom:4rem}.md\:mb-20{margin-bottom:5rem}.md\:mb-7{margin-bottom:1.75rem}.md\:mb-8{margin-bottom:2rem}.md\:mt-10{margin-top:2.5rem}.md\:mt-5{margin-top:1.25rem}.md\:mt-6{margin-top:1.5rem}.md\:mt-9{margin-top:2.25rem}.md\:block{display:block}.md\:inline{display:inline}.md\:hidden{display:none}.md\:h-\[180px\]{height:180px}.md\:h-\[340px\]{height:340px}.md\:h-\[360px\]{height:360px}.md\:h-\[380px\]{height:380px}.md\:h-\[420px\]{height:420px}.md\:h-\[76px\]{height:76px}.md\:min-h-\[100px\]{min-height:100px}.md\:min-h-\[80vh\]{min-height:80vh}.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.md\:flex-row{flex-direction:row}.md\:items-end{align-items:flex-end}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}.md\:gap-12{gap:3rem}.md\:gap-5{gap:1.25rem}.md\:gap-6{gap:1.5rem}.md\:gap-8{gap:2rem}.md\:gap-9{gap:2.25rem}.md\:p-6{padding:1.5rem}.md\:p-7{padding:1.75rem}.md\:p-8{padding:2rem}.md\:p-9{padding:2.25rem}.md\:px-10{padding-left:2.5rem;padding-right:2.5rem}.md\:py-24{padding-top:6rem;padding-bottom:6rem}.md\:py-28{padding-top:7rem;padding-bottom:7rem}.md\:pb-24{padding-bottom:6rem}.md\:pb-28{padding-bottom:7rem}.md\:pt-24{padding-top:6rem}.md\:text-\[11px\]{font-size:11px}.md\:text-\[120px\]{font-size:120px}.md\:text-\[13px\]{font-size:13px}.md\:text-\[16px\]{font-size:16px}.md\:text-\[170px\]{font-size:170px}.md\:text-\[17px\]{font-size:17px}.md\:text-\[18px\]{font-size:18px}.md\:text-\[19px\]{font-size:19px}.md\:text-\[200px\]{font-size:200px}.md\:text-\[20px\]{font-size:20px}.md\:text-\[21px\]{font-size:21px}.md\:text-\[23px\]{font-size:23px}.md\:text-\[25px\]{font-size:25px}.md\:text-\[26px\]{font-size:26px}.md\:text-\[28px\]{font-size:28px}.md\:text-\[32px\]{font-size:32px}.md\:text-\[54px\]{font-size:54px}.md\:text-base{font-size:1rem;line-height:1.5rem}}@media (min-width: 1024px){.lg\:col-span-5{grid-column:span 5 / span 5}.lg\:col-span-6{grid-column:span 6 / span 6}.lg\:col-start-7{grid-column-start:7}.lg\:inline{display:inline}.lg\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.lg\:gap-5{gap:1.25rem}.lg\:px-20{padding-left:5rem;padding-right:5rem}.lg\:pb-32{padding-bottom:8rem}.lg\:pt-28{padding-top:7rem}}@media (min-width: 1280px){.xl\:flex{display:flex}.xl\:inline-flex{display:inline-flex}.xl\:hidden{display:none}}


/* ===== next block ===== */


  :root{
    --navy:#1B2A4A; --navy-deep:#0E1A33; --navy-soft:#243456;
    --gold:#E3B143; --gold-light:#F2D688; --gold-deep:#856312; --cream:#F6F1E7; --paper:#FAFAF7;
    --ink:#1C1C1C; --ink-muted:#5A5A5A; --rule:#DDD3BE;
    --gold-grad: linear-gradient(135deg, #B08322, #E7C572 28%, #C5973B 52%, #EAD089 78%, #B08322);
    --gold-grad-bright: linear-gradient(135deg, #C28F2A, #F9DD90 26%, #E8BD56 52%, #FBE4A8 78%, #BC8C22);
    --cta-glow-rgb: 227, 177, 67;
  }
  html { scroll-behavior: smooth; overflow-x: clip; }
  [class*="col-span"] { min-width: 0; }
  body{
    background:var(--paper); color:var(--ink);
    font-family:'DM Sans', system-ui, sans-serif;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    overflow-x:clip; overflow-wrap:break-word;
  }
  .font-serif{ font-family:'Fraunces', Georgia, serif; }
  ::selection{ background:var(--gold); color:var(--navy-deep); }

  .eyebrow{ font-weight:600; text-transform:uppercase; letter-spacing:0.22em; font-size:11px; color:var(--gold); }

  /* Light (paper/cream) sections: gold text uses a richer, readable deep gold; the bright gold is for the dark sections. Navy cards inside light sections keep gold-light. */
  .paper-grain .eyebrow,
  .paper-grain .text-gold,
  .paper-grain .hub-spoke .n{ color:var(--gold-deep); }

  /* Attorney bio: labeled credential sections -> eyebrow heading + gold-diamond list */
  .bio-sec{ margin-top:1.4rem; }
  .bio-lab{ font-weight:600; text-transform:uppercase; letter-spacing:0.22em; font-size:11px; color:var(--gold-deep); margin-bottom:0.5rem; }
  .bio-list li{ position:relative; padding:0.2rem 0 0.2rem 1.15rem; color:var(--ink-muted); font-size:15px; line-height:1.5; }
  .bio-list li::before{ content:"\25C6"; position:absolute; left:0; top:0.32rem; font-size:11px; line-height:1; color:var(--gold-deep); }

  /* ---- Gold gradient text ---- */
  .gold-text{
    background:var(--gold-grad-bright); -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }

  /* ---- Primary gold pill (adapted from Yudien reference, navy palette) ---- */
  .btn-pill{
    display:inline-flex; align-items:center; justify-content:center; gap:.55em;
    font-family:'DM Sans',sans-serif; font-weight:600; font-size:.82rem;
    letter-spacing:.1em; text-transform:uppercase; line-height:1;
    padding:16px 34px; border-radius:9999px; border:none; cursor:pointer;
    color:#0E1A33;
    background-image:var(--gold-grad); background-size:200% auto; background-position:left center;
    box-shadow:0 8px 24px -10px rgba(197,151,59,.55);
    transition:background-position .55s ease, transform .25s ease, box-shadow .3s ease;
  }
  .btn-pill:hover{ background-position:right center; transform:translateY(-2px); box-shadow:0 12px 30px -8px rgba(197,151,59,.7); }

  /* ---- Navy lens glass pill (refractive, but keeps the dark-blue tint) ---- */
  .btn-ghost{
    position:relative;
    display:inline-flex; align-items:center; justify-content:center; gap:.55em;
    font-family:'DM Sans',sans-serif; font-weight:600; font-size:.78rem;
    letter-spacing:.14em; text-transform:uppercase; line-height:1;
    padding:16px 32px; border-radius:9999px; cursor:pointer;
    color:var(--gold-light); text-shadow:0 1px 2px rgba(0,0,0,.45);
    background:linear-gradient(160deg, rgba(22,36,64,.93), rgba(14,26,51,.9));
    border:1px solid rgba(224,189,110,.48);
    -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.35),
      inset 0 -8px 18px rgba(120,150,200,.10),
      0 10px 26px rgba(0,0,0,.34);
    overflow:hidden;
    transition:transform .25s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
  }
  /* refractive sheen: a softer highlight across the top-left, like light through a lens */
  .btn-ghost::before{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:
      radial-gradient(130% 90% at 22% 10%, rgba(255,255,255,.32), rgba(255,255,255,.05) 42%, transparent 62%),
      linear-gradient(180deg, rgba(255,255,255,.14), transparent 40%);
    mix-blend-mode:screen;
  }
  /* rim light along the edge completes the lens illusion */
  .btn-ghost::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    box-shadow:inset -1.5px -1.5px 3px rgba(255,255,255,.22), inset 1.5px 1.5px 3px rgba(255,255,255,.12);
  }
  .btn-ghost:hover{
    transform:translateY(-2px) scale(1.015); border-color:rgba(224,189,110,.72);
    background:linear-gradient(160deg, rgba(30,47,82,.62), rgba(18,32,60,.48));
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.4),
      inset 0 -8px 18px rgba(120,150,200,.14),
      0 14px 32px rgba(0,0,0,.4);
  }
  /* btn-ghost on a LIGHT (paper/cream) section: the translucent navy washes out to grey, so
     fill it solid navy to read like the header "Make a Payment" CTA (gold text on navy glass). */
  .btn-ghost.on-light{
    background:linear-gradient(160deg, #1B2A4A, #0E1A33);
    border-color:rgba(224,189,110,.55);
    color:var(--gold-light);
  }
  .btn-ghost.on-light:hover{
    background:linear-gradient(160deg, #243456, #14223F);
    border-color:rgba(224,189,110,.8);
  }

  /* ---- Nav CTA glow pulse (Effect 11) ---- */
  .nav-cta{ animation: ctaGlow 3s ease-in-out infinite; }
  @keyframes ctaGlow{
    0%,100%{ box-shadow:0 0 5px 0 rgba(var(--cta-glow-rgb),.30), 0 8px 24px -10px rgba(197,151,59,.5); }
    50%{ box-shadow:0 0 16px 4px rgba(var(--cta-glow-rgb),.55), 0 8px 24px -10px rgba(197,151,59,.5); }
  }

  /* ---- Glassmorphism cards (dark hero/proof region only) ---- */
  .glass-card{
    background:rgba(255,255,255,.055);
    -webkit-backdrop-filter:blur(12px) saturate(150%); backdrop-filter:blur(12px) saturate(150%);
    border:1px solid rgba(197,151,59,.22);
    border-radius:16px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 22px 44px -28px rgba(0,0,0,.7);
  }
  @supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){
    .glass-card{ background:rgba(36,52,86,.94); }
    .glass-card.stat-lift{ background:rgba(36,52,86,.88); }
    .btn-ghost{ background:rgba(20,33,60,.96); }
    .cc-glass{ background:rgba(14,26,51,.72); }
  }

  /* ---- Stat cards + country-club label: liquid "glass-lens" (same technique as hlwebsites contact / effects-library). Uses the #glassLens SVG displacement filter for true optical rim-warp on Chromium; blur+saturate is the cross-engine fallback. ---- */
  .glass-card.stat-lift, .cc-glass{
    position:relative; isolation:isolate; overflow:hidden;
    border-radius:22px;
    background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.015) 38%, rgba(255,255,255,.035) 62%, rgba(255,255,255,.08));
    /* DEFAULT = rich frosted-specular glass that renders everywhere (Safari/Firefox) */
    -webkit-backdrop-filter:blur(12px) saturate(165%); backdrop-filter:blur(12px) saturate(165%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.40),
      inset 0 -10px 18px -10px rgba(255,255,255,.18),
      inset 8px 0 14px -10px rgba(255,255,255,.22),
      inset -8px 0 14px -10px rgba(255,255,255,.22),
      inset 0 -1.5px 0 rgba(0,0,0,.10),
      0 14px 34px -12px rgba(7,10,18,.34);
  }
  /* curved-lens specular: a bright arc hugging the top edge */
  .glass-card.stat-lift::before, .cc-glass::before{
    content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none;
    background:radial-gradient(ellipse 120% 90% at 50% -40%, rgba(255,255,255,.34), rgba(255,255,255,.09) 42%, transparent 62%);
  }
  .glass-card.stat-lift > *, .cc-glass > *{ position:relative; z-index:2; }   /* keep number + label crisp above the lens layers */
  /* Chromium ONLY (.chromium set via navigator.userAgentData): swap the frost for the distorting lens. Safari/Firefox keep the blur(12px) frost above. */
  /* Stat cards have no rim text, so the lens can live on the card itself. */
  html.chromium .glass-card.stat-lift{ -webkit-backdrop-filter:url(#glassLens) blur(1.5px) saturate(140%); backdrop-filter:url(#glassLens) blur(1.5px) saturate(140%); }
  /* .cc-glass = the liquid-glass lens over the photo + a crisp bubbbly edge. Safari/Firefox (no SVG
     backdrop filter) get a rich frosted blur + the edge. The lens itself lives on Chromium only. */
  .cc-glass{ -webkit-backdrop-filter:blur(16px) saturate(1.6); backdrop-filter:blur(16px) saturate(1.6); border:1px solid rgba(255,255,255,.42); }
  /* Chromium: the liquid refraction lives on an EMPTY ::after layer (not the card) so the gold "100+"
     (a z-index:2 child) never runs through feDisplacementMap. Uses #glassLensPhoto - the stable
     feTurbulence map at a gentle scale - so it doesn't flicker/double over the busy photo (the radial
     #glassLens at scale 34 did). No scroll-toggle needed: a gentle stable lens has nothing to hide. */
  html.chromium .cc-glass{ -webkit-backdrop-filter:none; backdrop-filter:none; }
  html.chromium .cc-glass::after{ content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none; -webkit-backdrop-filter:url(#glassLensPhoto) blur(3px) saturate(1.6); backdrop-filter:url(#glassLensPhoto) blur(3px) saturate(1.6); }
  .glass-card.stat-lift{ transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; }
  .glass-card.stat-lift:hover{ transform:translateY(-7px); }

  /* ---- Partner cards: hover lift + gold ambient glow on the box, photo zoom, and a gold cloud rising from underneath ---- */
  .pcard{ transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease; }
  .pcard:hover{ transform:translateY(-6px); box-shadow:0 26px 52px -26px rgba(14,26,51,.45); }
  .pcard > div:first-child img{ transition:transform .8s cubic-bezier(.2,.7,.2,1); }
  .pcard:hover > div:first-child img{ transform:scale(1.06); }
  /* fix-pass: gold "cloud" hover-glow REMOVED (bled outside the card edges into the white space). */
  @media (prefers-reduced-motion: reduce){
    .pcard:hover{ transform:none; }
    .pcard:hover > div:first-child img{ transform:none; }
    .pcard > div:first-child::after{ transition:none; }
  }

  /* ---- Sticky header (Effect 3) ---- */
  .header{ transition:background .3s, box-shadow .3s, backdrop-filter .3s; }
  .header.scrolled{
    background:rgba(14,26,51,.92);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    box-shadow:0 1px 0 rgba(197,151,59,.18), 0 10px 28px -18px rgba(0,0,0,.6);
  }

  /* ---- Logo lockup (header + footer); size by height so header height stays fixed ---- */
  .logo-lockup{ display:flex; align-items:center; height:100%; }
  .logo-lockup img{ height:54px; width:auto; object-fit:contain; display:block; }    /* object-fit:contain renders the logo at its true aspect (no squish) and exempts the Lighthouse aspect-ratio audit, without forcing the nav wider */
  @media (max-width:767px){ .logo-lockup img{ height:44px; } }   /* 68px mobile bar */
  /* The frozen Tailwind build lets .btn-pill/.btn-ghost{display:inline-flex} override the `hidden` utility. Force-hide the header CTAs below xl so only the hamburger shows on mobile/tablet (both CTAs live in the slide-out menu there). */
  @media (max-width:1279px){ #topnav .btn-pill, #topnav .btn-ghost{ display:none; } }
  .site-footer .logo-lockup img{ height:47px; } /* +30% from 36px so the circle emblem and names read larger in the footer */

  /* Two CTAs share the right edge of the nav: keep them compact, and don't let nav labels wrap */
  #topnav .btn-pill, #topnav .btn-ghost{ padding:11px 22px; font-size:12px; letter-spacing:.1em; }
  .nav-link{ white-space:nowrap; letter-spacing:.1em; }

  /* Hero spacing tightened (frozen Tailwind lacks the smaller arbitrary min-h/padding values) */
  .hero-wrap{ padding-top:2.25rem; padding-bottom:2.75rem; }
  @media (min-width:768px){ .hero-wrap{ padding-top:4rem; padding-bottom:4.5rem; min-height:calc(100vh - 76px); min-height:calc(100dvh - 76px); } }

  /* ---- Nav link underline ---- */
  .nav-link{ position:relative; }
  .nav-link::after{ content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0; background:var(--gold); transition:width .3s ease; }
  .nav-link:hover::after{ width:100%; }

  /* ---- Desktop top-nav dropdowns (links are placeholders until inner pages exist) ---- */
  .nav-item{ position:relative; display:flex; align-items:center; }
  .nav-trigger{ display:inline-flex; align-items:center; gap:6px; padding:0; background:none; border:0; cursor:pointer; font-family:inherit; line-height:1; }
  .nav-trigger > svg{ width:9px; height:6px; transition:transform .25s ease; opacity:.8; }
  .nav-item:hover .nav-trigger > svg,
  .nav-item:focus-within .nav-trigger > svg{ transform:rotate(180deg); }
  .nav-dropdown{
    position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px);
    min-width:240px; margin-top:12px; padding:8px 0;
    background:var(--navy-deep); border:1px solid rgba(227,177,67,.22);
    box-shadow:0 20px 44px rgba(0,0,0,.4);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease; z-index:60;
  }
  .nav-dropdown::before{ content:""; position:absolute; left:0; right:0; bottom:100%; height:18px; } /* invisible bridge so hover survives the gap */
  .nav-item:hover .nav-dropdown,
  .nav-item:focus-within .nav-dropdown{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
  }
  .nav-dropdown a{
    display:block; padding:9px 20px; white-space:nowrap;
    font-size:12.5px; line-height:1.3; letter-spacing:.01em; text-transform:none;
    font-weight:500; color:var(--gold-light); transition:background .15s ease, color .15s ease;
  }
  .nav-dropdown a:hover{ background:rgba(227,177,67,.12); color:var(--gold); }
  .nav-dropdown a.sub{ padding-left:36px; font-size:12px; color:rgba(242,214,136,.78); }

  /* ---- Mobile nav accordions ---- */
  .m-acc-head{ display:flex; align-items:center; justify-content:space-between; gap:12px;
    width:100%; padding:12px 0; background:none; border:0; cursor:pointer; color:inherit; text-align:left; }
  .m-acc-head svg{ width:22px; height:22px; color:var(--gold); transition:transform .25s ease; flex:none; }
  .m-acc.open .m-acc-head svg{ transform:rotate(180deg); }
  .m-acc-body{ display:none; flex-direction:column; padding:2px 0 12px 16px;
    margin:0 0 4px 3px; border-left:1px solid rgba(255,255,255,.14); }
  .m-acc.open .m-acc-body{ display:flex; }
  .m-acc-body a{ padding:8px 0; font-family:'DM Sans',sans-serif; font-size:15px; color:rgba(246,241,231,.82); }
  .m-acc-body a:hover{ color:var(--gold); }
  .m-acc-body a.sub{ padding-left:16px; font-size:14px; opacity:.85; }

  /* ---- Underlined inline link ---- */
  .ulink{ position:relative; display:inline-flex; align-items:center; gap:.5rem; }
  .ulink::after{ content:""; position:absolute; left:0; bottom:-3px; height:1px; width:0; background:currentColor; transition:width .35s ease; }
  .ulink:hover::after{ width:100%; }

  /* ---- Practice / update cards ---- */
  .pcard{ transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; }
  .pcard:hover{ transform:translateY(-5px); box-shadow:0 26px 50px -24px rgba(14,26,51,.32); }
  .pcard .imgwrap img{ transition:transform .9s cubic-bezier(.2,.7,.2,1); }
  .pcard:hover .imgwrap img{ transform:scale(1.05); }

  /* ---- Ghost numeral ---- */
  .ghost-numeral{ font-family:'Fraunces',serif; font-weight:300; color:rgba(197,151,59,.20); line-height:.8; }

  /* ---- Leadership portrait placeholder ---- */
  .portrait{
    background:
      radial-gradient(120% 80% at 50% 0%, rgba(224,189,110,.16), transparent 60%),
      linear-gradient(160deg, #243456, #0E1A33);
    position:relative; overflow:hidden;
  }
  .portrait::after{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size:18px 18px; }

  /* ---- Florida-counsel hub & spoke (real estate at center) ---- */
  .hub{ position:relative; display:flex; flex-direction:column; gap:14px; }
  .hub-center{ align-self:center; margin:2px 0 12px; }
  .hub-core{ position:relative; width:280px; max-width:100%; border-radius:20px; overflow:hidden; box-shadow:0 34px 64px -30px rgba(14,26,51,.55); }
  .hub-arrows{ display:none; position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:visible; }
  .hub-arrows line{ stroke:rgba(197,151,59,.38); stroke-width:1.2; }
  .hub-spoke{ position:relative; z-index:1; background:#fff; border:1px solid var(--rule); border-radius:16px; padding:20px 22px; box-shadow:0 16px 32px -24px rgba(14,26,51,.4); transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .4s ease; transform-style:preserve-3d; }
  .hub-spoke:hover{ transform:perspective(720px) translateZ(26px) translateY(-4px) !important; box-shadow:0 34px 50px -22px rgba(14,26,51,.5); border-color:rgba(154,115,24,.55); z-index:2; }
  .hub-spoke .n{ font-family:'Fraunces',serif; color:var(--gold); font-size:24px; line-height:1; }
  .hub-spoke h3{ font-family:'Fraunces',serif; color:var(--navy-deep); font-size:18px; line-height:1.15; margin-top:6px; }
  .hub-spoke p{ color:var(--ink-muted); font-size:13px; line-height:1.5; margin-top:6px; }
  @media(min-width:880px){
    .hub{ display:grid; grid-template-columns:1fr auto 1fr; grid-template-rows:1fr 1fr; gap:36px 64px; align-items:center; max-width:1060px; margin:0 auto; }
    .hub-center{ grid-column:2; grid-row:1/3; justify-self:center; margin:0; }
    .hub-arrows{ display:block; }
    .sp1{ grid-column:1; grid-row:1; text-align:right; }
    .sp2{ grid-column:1; grid-row:2; text-align:right; }
    .sp3{ grid-column:3; grid-row:1; text-align:left; }
    .sp4{ grid-column:3; grid-row:2; text-align:left; }
  }

  /* ---- Paper grain ---- */
  .paper-grain{ position:relative; }
  /* gold transition band: ONLY when the first section after the navy hero is a light/cream section */
  #top + section.paper-grain{
    background-image: linear-gradient(to bottom, rgba(227,177,67,.42) 0, rgba(227,177,67,.14) 70px, rgba(227,177,67,0) 170px);
  }
  .paper-grain::before{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.4;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch' seed='3'/><feColorMatrix values='0 0 0 0 0.78  0 0 0 0 0.59  0 0 0 0 0.23  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode:multiply;
  }
  .paper-grain > *{ position:relative; z-index:1; }
  .grain::after{
    content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/></svg>");
  }

  /* ---- Rich dark hero treatment for photo-less inner heroes ----
     A restrained multi-stop navy mesh in the brand palette with two subtle gold glows
     (low alpha), so a photo-less hero reads premium instead of flat navy. Painted UNDER
     the .grain texture (grain ::after still overlays on top) and under the .hero-wrap copy
     (position:relative, paints above this z-index:0 layer). Matches the homepage dark mood. */
  .hero-mesh::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(120% 92% at 82% 8%, rgba(227,177,67,.13) 0%, rgba(227,177,67,.045) 30%, rgba(227,177,67,0) 56%),
      radial-gradient(95% 88% at 8% 102%, rgba(227,177,67,.10) 0%, rgba(227,177,67,.03) 34%, rgba(227,177,67,0) 60%),
      radial-gradient(120% 120% at 14% 6%, rgba(36,52,86,.95) 0%, rgba(27,42,74,.55) 42%, rgba(14,26,51,0) 70%),
      radial-gradient(130% 130% at 96% 96%, rgba(20,33,62,.85) 0%, rgba(14,26,51,.4) 46%, rgba(14,26,51,0) 72%),
      linear-gradient(135deg, #0E1A33 0%, #16264A 38%, #1B2A4A 56%, #111E3A 78%, #0E1A33 100%);
  }
  .hero-mesh > *{ position:relative; z-index:1; }

  /* ---- Mobile menu ---- */
  .mobile-panel{ transform:translateX(100%); transition:transform .4s cubic-bezier(.2,.7,.2,1); }
  .mobile-panel.is-open{ transform:translateX(0); }

  /* ---- Form fields ---- */
  .field{
    width:100%; background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.16); border-radius:10px;
    padding:14px 16px; color:#fff; font-size:15px; font-family:'DM Sans',sans-serif;
    transition:border-color .25s, background .25s;
  }
  .field::placeholder{ color:rgba(255,255,255,.45); }
  .field:focus{ outline:none; border-color:var(--gold); background:rgba(255,255,255,.07); box-shadow:0 0 0 3px rgba(227,177,67,.45); }
  select.field{ appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'><path d='M3 4.5l3 3 3-3' stroke='%23E0BD6E' stroke-width='1.4'/></svg>");
    background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; }

  /* ====== Reveal (.js guard - content visible without JS) ====== */
  .reveal{ opacity:1; transform:none; }
  .reveal-child{ opacity:1; transform:none; }
  .js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
  .js .reveal.revealed{ opacity:1; transform:none; }   /* transform:none (not translateY(0)) so it does not create a backdrop-root that suppresses the glass-lens backdrop-filter on revealed cards */
  .js .reveal-child{ opacity:0; transform:translateY(20px); transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); }
  .js .reveal-child.revealed{ opacity:1; transform:none; }   /* transform:none (not translateY(0)) so it does not create a backdrop-root that suppresses the glass-lens backdrop-filter on revealed cards */

  /* Mobile: only the hero staggers and the stat numbers roll; everything below the fold renders instantly (no scroll delay) */
  @media (max-width: 767px){
    .js .reveal, .js .reveal-child { opacity:1 !important; transform:none !important; transition:none !important; }
  }

  /* Hero entrance (guarded) */
  .hero-line{ opacity:1; transform:none; }
  .js .hero-line{ opacity:0; transform:translateY(26px); }
  .js .hero-line.in{ opacity:1; transform:none; }   /* transform:none (not translateY(0)) so it does not create a backdrop-root that suppresses the glass-lens backdrop-filter on revealed cards */

  .masthead{ font-size:clamp(2.6rem, 7.2vw, 6.4rem); line-height:.98; letter-spacing:-0.03em; }

  /* Hero "digitize into existence": per-character flicker + unblur assembly, staggered left-to-right */
  .js .hero-digitize:not(.dig-on){ opacity:0; }   /* avoid a flash of the full headline before the per-char wrap is ready */
  .hero-digitize .dc{ display:inline-block; will-change:opacity,filter,transform; }
  .js .hero-digitize.dig-on .dc{ opacity:0; filter:blur(7px); transform:translateY(.14em) scaleY(1.16); }
  .js .hero-digitize.dig-on .dc.in{ opacity:1; filter:blur(0); transform:none; transition:opacity .26s steps(3,end), filter .42s ease, transform .42s cubic-bezier(.2,.85,.25,1); }
  @media (prefers-reduced-motion: reduce){ .js .hero-digitize:not(.dig-on){ opacity:1; } .js .hero-digitize.dig-on .dc{ opacity:1; filter:none; transform:none; transition:none; } }

  /* ---- Mobile hero legibility (<=767px only; desktop unchanged) ---- */
  .hero-copy{ position:relative; }
  @media (max-width:767px){
    /* navy radial text-protection scrim behind the hero copy block */
    #top .hero-copy::before{
      content:""; position:absolute; z-index:0; pointer-events:none;
      inset:-26px -22px;
      background:radial-gradient(120% 88% at 32% 42%, rgba(14,26,51,.62) 0%, rgba(14,26,51,.5) 46%, rgba(14,26,51,0) 78%);
    }
    #top .hero-copy > *{ position:relative; z-index:1; }
  }

  /* UserWay injects right:~1396px which lands at the left edge on 1440px viewports.
     Force correct top-right placement on desktop; leave mobile (bottom-left) alone. */
  @media (min-width: 1280px) {
    .uwy .userway_buttons_wrapper {
      right: 16px !important;
      left: auto !important;
      top: 10px !important;
      bottom: auto !important;
    }
  }

  /* Mobile: hero fills viewport so stat cards start below fold; extra breathing room between text blocks */
  @media (max-width: 767px) {
    .hero-wrap { min-height: calc(100vh - 68px); min-height: calc(100dvh - 68px); }
    #top .hero-copy > p  { margin-top: 1.75rem; }
    #top .hero-copy > div { margin-top: 2.5rem; }
    /* Proof bar: override the blanket mobile-instant reveal - start hidden, animate in on scroll.
       .js-guarded so a no-JS / blocked-JS render (Outlook preview, corporate Edge) shows the proof bar
       instead of a blank section -- falls back to the base .reveal{opacity:1}. */
    .js #proof .reveal,
    .js #proof .reveal-child { opacity: 0 !important; transform: translateY(20px) !important;
      transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1) !important; }
    .js #proof .reveal.revealed,
    .js #proof .reveal-child.revealed { opacity: 1 !important; transform: translateY(0) !important; }
    /* UserWay: anchor to the left of the hamburger in the mobile nav bar */
    .uwy .userway_buttons_wrapper {
      right: 62px !important;
      left: auto !important;
      top: 14px !important;
      bottom: auto !important;
    }
  }

  /* ====== Added motion: refined, subtle, all reduced-motion safe ====== */

  /* (1) Wavy-letters reveal (ported "mind-reveal" word-fill, renamed) */
  .wavy-letters .wl, .wavy-letters .wl-i { opacity: 1; }
  .js .wavy-letters.wavy-on .wl { display:inline-block; }
  .js .wavy-letters.wavy-on .wl-i { display:inline-block; opacity:0; transform:translateY(0.32em) skewY(4deg); filter:blur(9px); transition:transform 1.5s cubic-bezier(0.34,1.56,0.64,1), opacity 1s ease, filter 1s ease; will-change:transform,opacity,filter; }   /* small blur-rise fade, NO overflow/clip mask -> tall italic ascenders are never clipped, during or after */
  .js .wavy-letters.wavy-on .wl.lit .wl-i { opacity:1; transform:none; filter:blur(0); }
  @media (prefers-reduced-motion: reduce){ .js .wavy-letters.wavy-on .wl-i { opacity:1; transform:none; filter:none; transition:none; } }

  /* (2) Subtle slow light glint sweeping across the logo wordmark IMAGE (nav + footer).
     A decorative overlay masked to the lockup art, so the highlight only shows on the gold
     emblem + names and reads as light catching the metal. Image itself is untouched. */
  .logo-lockup{ position:relative; }
  .logo-lockup .logo-glint{
    position:absolute; inset:0; pointer-events:none; z-index:2;
    -webkit-mask:url("/assets/SSCKS_lockup_fused-mobile.webp?v=2") center/contain no-repeat;
    mask:url("/assets/SSCKS_lockup_fused-mobile.webp?v=2") center/contain no-repeat;
    background:linear-gradient(115deg, transparent 43%, rgba(255,246,214,.42) 49%, rgba(255,255,255,.30) 51%, transparent 59%);
    background-size:260% 100%; background-position:200% 0;
    mix-blend-mode:screen;
    animation: logoGlint 12s ease-in-out infinite;
  }
  @keyframes logoGlint{ 0%,66%{ background-position:200% 0; } 100%{ background-position:-60% 0; } }
  @media (prefers-reduced-motion: reduce){ .logo-lockup .logo-glint{ animation:none; display:none; } }


  /* (4) Stat cards: elevated specular "liquid glass" over the hero photo backdrop.
     Layered specular bead (top/left light-catch) + bottom/right occlusion + gold rim.
     Counters and existing .stat-lift hover are preserved. */
  @supports (background: color-mix(in srgb, #fff 10%, transparent)){
    .glass-card.stat-lift{
      box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #ffffff 9%, transparent),
        inset 1.8px 3px 0 -2px color-mix(in srgb, #ffffff 26%, transparent),
        inset -2px -2px 0 -2px color-mix(in srgb, #ffffff 22%, transparent),
        inset -3px -8px 1px -6px color-mix(in srgb, #ffffff 16%, transparent),
        inset -0.3px -1px 4px 0 color-mix(in srgb, #000000 18%, transparent),
        inset 0 3px 4px -2px color-mix(in srgb, #000000 22%, transparent),
        inset 2px -6.5px 1px -4px color-mix(in srgb, #000000 12%, transparent),
        0 0 0 1px rgba(197,151,59,.10),
        0 18px 40px -26px rgba(0,0,0,.7),
        0 0 18px -6px rgba(197,151,59,.22);
    }
  }

  /* (6) Animated gold gradient hairline dividers between major sections */
  .gold-divider{ position:relative; height:1px; width:100%; overflow:hidden; border:0; margin:0; }
  .gold-divider::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, transparent 0%, rgba(197,151,59,.25) 22%, var(--gold) 50%, rgba(197,151,59,.25) 78%, transparent 100%);
    background-size:220% 100%; background-position:0 0;
    animation: goldDividerFlow 14s linear infinite;
  }
  .gold-divider.on-light::before{
    background:linear-gradient(90deg, transparent 0%, rgba(154,115,24,.22) 22%, var(--gold-deep) 50%, rgba(154,115,24,.22) 78%, transparent 100%);
    background-size:220% 100%;
  }
  @keyframes goldDividerFlow{ to { background-position:220% 0; } }
  @media (prefers-reduced-motion: reduce){ .gold-divider::before{ animation:none; } }

  /* Credential plaques: gold-bordered engraved plaque + filled gold seal medallion (on flat navy) */
  .cred-plaque{
    position:relative;
    border:1px solid rgba(227,177,67,.5);
    background:
      linear-gradient(180deg, rgba(255,245,210,.07), rgba(255,255,255,0) 46%),
      rgba(20,33,62,.55);
    box-shadow:
      inset 0 1px 0 rgba(255,245,210,.22),
      inset 0 0 34px rgba(227,177,67,.07),
      0 12px 30px rgba(0,0,0,.30);
  }
  .cred-plaque::before{ /* slim gold accent rule on the left edge */
    content:""; position:absolute; left:0; top:14%; bottom:14%; width:3px; border-radius:0 3px 3px 0;
    background:linear-gradient(180deg, #9A7318 0%, #F2D688 50%, #9A7318 100%);
  }
  .cred-seal{
    position:relative;
    background:radial-gradient(120% 120% at 30% 22%, #F8E6AC 0%, #E3B143 40%, #B0851E 74%, #8A6514 100%);
    border:1px solid rgba(255,240,200,.6);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.65),
      inset 0 -2px 5px rgba(120,86,16,.55),
      0 2px 7px rgba(0,0,0,.35);
  }
  .cred-seal::before{ /* pulsating warm-gold glow behind the medallion */
    content:""; position:absolute; inset:-12px; border-radius:50%; z-index:-1;
    background:radial-gradient(circle, rgba(233,184,72,.9) 0%, rgba(231,180,70,.45) 42%, rgba(227,177,67,0) 72%);
    animation: sealPulse 6.2s ease-in-out infinite;
  }
  @keyframes sealPulse{ 0%,100%{ opacity:.45; transform:scale(.85); } 50%{ opacity:1; transform:scale(1.12); } }
  @media (prefers-reduced-motion: reduce){ .cred-seal::before{ animation:none; opacity:.4; } }
  .cred-seal svg{ color:#0E1A33; } /* dark engraving reads on the gold seal */


/* a11y (axe link-in-text-block): inline prose links need a non-color indicator. Underline links
   inside body paragraphs; nav links, pill/ghost/ulink CTAs keep their own treatments. */
p a:not(.btn-pill):not(.btn-ghost):not(.ulink):not(.nav-link){ text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
/* broaden: list-item prose links + content-colored inline links (cross-references in legal/body copy) */
li a:not(.btn-pill):not(.btn-ghost):not(.ulink):not(.nav-link),
a.text-navy-deep:not(.ulink):not(.btn-pill):not(.btn-ghost),
a.text-ink:not(.ulink):not(.btn-pill), a.text-ink-muted:not(.ulink):not(.btn-pill){ text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
/* Footer + nav: explicitly suppress underline — overrides the li a rule above.
   Footer links use hover-color-only; nav links/dropdowns are styled separately. */
.site-footer a, .nav-item a, .nav-dropdown a, header a { text-decoration: none; }

/* Cred-plaque: the panel is dark navy (rgba 20,33,62,.55); fix title legibility by lightening
   the serif credential title so it reads clearly on the dark background. */
.cred-plaque .font-serif { color: var(--gold-light); }

/* Attorney-profile credential plaques: ivory letterpress treatment (chosen 2026-06).
   Scoped with :not(.glass-card) so the homepage's glassy stat plaques keep the dark base above.
   Text colors (navy title / deep-gold label / ink-muted sub) are set inline by gen-profiles.js. */
.cred-plaque:not(.glass-card){
  border:1px solid rgba(154,115,24,.34);
  background:linear-gradient(180deg, #FFFDF7 0%, #F7F0DF 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 10px 24px rgba(14,26,51,.10);
}
/* CPDL Florida Bar seal tile: hairline so the near-white tile reads against the ivory plaque */
.cred-plaque:not(.glass-card) .bg-paper{ box-shadow:0 0 0 1px rgba(154,115,24,.18); }
/* Recognition pills: subtle warm gold gradient (the approved "gradient buttons") */
aside .bg-cream.rounded-full{
  background:linear-gradient(180deg, #FBF6EC, #EFE6D2);
  border-color:rgba(154,115,24,.30);
  box-shadow:0 1px 2px rgba(14,26,51,.06);
}

/* Section-rhythm: prevent the last content section's bottom padding from doubling the footer's
   own top padding, which creates an empty dead-band before the footer. Subtle reduction only. */
main > section:last-of-type { padding-bottom: 4rem; }
@media (min-width: 768px) { main > section:last-of-type { padding-bottom: 5rem; } }

/* Phase-10B nav breakpoint utilities: lg:flex / lg:hidden missing from frozen Tailwind build */
@media (min-width: 1024px) {
  .lg\:flex { display: flex; }
  .lg\:hidden { display: none; }
}

/* ===== fix-pass D8: utilities used by new pages but absent from the purged Tailwind build (additive only) ===== */
.cursor-pointer{cursor:pointer}
.h-auto{height:auto}
.w-8{width:2rem}
.aspect-\[16\/9\]{aspect-ratio:16/9}
.rounded-t-2xl{border-top-left-radius:1rem;border-top-right-radius:1rem}
.gap-x-10{column-gap:2.5rem}
.gap-y-3{row-gap:0.75rem}
.mb-1{margin-bottom:0.25rem}
.mb-8{margin-bottom:2rem}
.ml-8{margin-left:2rem}
.mt-10{margin-top:2.5rem}
.p-8{padding:2rem}
.pb-14{padding-bottom:3.5rem}
.pt-14{padding-top:3.5rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.tracking-wide{letter-spacing:0.025em}
.text-\[21px\]{font-size:21px}
.text-\[36px\]{font-size:36px}
.text-ink-muted\/70{color:rgb(90 90 90 / 0.7)}
.text-paper\/40{color:rgb(250 250 247 / 0.4)}
.space-y-2 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}
.hover\:text-gold-deep:hover{--tw-text-opacity:1;color:rgb(133 99 18 / var(--tw-text-opacity, 1))}
@media (min-width:768px){
.md\:gap-14{gap:3.5rem}
.md\:mb-12{margin-bottom:3rem}
.md\:min-h-\[84px\]{min-height:84px}
.md\:p-10{padding:2.5rem}
.md\:pb-16{padding-bottom:4rem}
.md\:pb-20{padding-bottom:5rem}
.md\:pt-10{padding-top:2.5rem}
.md\:pt-20{padding-top:5rem}
.md\:py-18{padding-top:4.5rem;padding-bottom:4.5rem}
.md\:py-20{padding-top:5rem;padding-bottom:5rem}
.md\:text-\[14px\]{font-size:14px}
.md\:text-\[22px\]{font-size:22px}
.md\:text-\[48px\]{font-size:48px}
}
@media (min-width:1024px){
.lg\:gap-16{gap:4rem}
.lg\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
.lg\:grid-cols-\[280px_1fr\]{grid-template-columns:280px 1fr}
.lg\:sticky{position:sticky}
.lg\:top-24{top:6rem}
}
@media (min-width:1280px){
.xl\:grid-cols-\[320px_1fr\]{grid-template-columns:320px 1fr}
}
/* fix-pass D8 (round 2): remaining undefined utilities on construction-law + one article */
.text-\[19px\]{font-size:19px}
.text-paper\/50{color:rgb(250 250 247 / 0.5)}
@media (min-width:768px){
.md\:col-span-6{grid-column:span 6 / span 6}
.md\:col-start-8{grid-column-start:8}
.md\:pt-16{padding-top:4rem}
}

/* fix-pass round2: footer + nav links never underline (beat the prose-link specificity) */
.site-footer a, nav a, .nav-dropdown a, .nav-item a { text-decoration: none !important; }

/* fix-pass: branded typographic placeholder for image-less articles (replaces the flat category banner) */
.brandcard{ position:relative; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.6rem; padding:1.25rem;
  background:
    radial-gradient(115% 80% at 50% -8%, rgba(227,177,67,.18) 0%, rgba(227,177,67,.05) 38%, rgba(227,177,67,0) 64%),
    radial-gradient(100% 95% at 50% 118%, rgba(227,177,67,.10) 0%, rgba(227,177,67,0) 60%),
    var(--navy-deep); }
.brandcard-shield{ width:30px; height:30px; color:var(--gold); opacity:.92; }
.brandcard-cat{ color:var(--gold-light); font-size:10px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; }
.brandcard-rule{ width:30px; height:1px; background:linear-gradient(90deg, transparent, rgba(227,177,67,.75), transparent); }
.brandcard-wm{ font-family:Fraunces, Georgia, serif; font-style:italic; color:rgba(250,250,247,.80); font-size:13px; line-height:1.3; }

/* ===== Attorney-profile utilities absent from the purged Tailwind build (additive only).
   These are emitted by tools/gen-profiles.js but were missing here, so they silently no-op:
   the hero title fell back to ink-black on navy, and the bio/credentials grid + plaques lost
   their layout (full-width collapse, no gap, no padding). Standard Tailwind values. ===== */
.text-gold-light\/80{color:rgb(242 214 136 / 0.8)}
.border-gold\/30{border-color:rgb(227 177 67 / 0.3)}
.bg-gold-deep{--tw-bg-opacity:1;background-color:rgb(133 99 18 / var(--tw-bg-opacity, 1))}
.bg-navy\/10{background-color:rgb(27 42 74 / 0.1)}
.bg-navy\/40{background-color:rgb(27 42 74 / 0.4)}
.border-navy\/20{border-color:rgb(27 42 74 / 0.2)}
.from-navy-deep\/70{--tw-gradient-from:rgb(14 26 51 / 0.7) var(--tw-gradient-from-position);--tw-gradient-to:rgb(14 26 51 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}
.flex-1{flex:1 1 0%}
.min-w-0{min-width:0px}
.p-4{padding:1rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-3\.5{padding-left:0.875rem;padding-right:0.875rem}
.pt-3{padding-top:0.75rem}
.mb-0{margin-bottom:0px}
.mb-0\.5{margin-bottom:0.125rem}
.rounded-lg{border-radius:0.5rem}
.rounded-xl{border-radius:0.75rem}
.self-center{align-self:center}
.self-start{align-self:flex-start}
.space-y-5 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem * var(--tw-space-y-reverse))}
@media (min-width:640px){
.sm\:inline-flex{display:inline-flex}
}
@media (min-width:768px){
.md\:gap-16{gap:4rem}
}
@media (min-width:1024px){
.lg\:col-span-4{grid-column:span 4 / span 4}
.lg\:col-span-7{grid-column:span 7 / span 7}
.lg\:col-start-9{grid-column-start:9}
}

/* fix-pass: inner-page hero photo + scrim. ID specificity (#top) beats `.hero-mesh > *`
   which otherwise forces these absolute layers to position:relative and breaks layout. */
#top > .hero-bg,
#top.hero-mesh > img,
#top.hero-mesh > picture,
#top.hero-mesh > div[style*="linear-gradient"]{ position:absolute; inset:0; z-index:0; }
#top > .hero-bg.is-photo,
#top.hero-mesh > img,
#top.hero-mesh > picture img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }

/* ====== a11y: visible keyboard focus (WCAG 2.4.7), skip link (2.4.1), reduced motion (2.3.3) ====== */
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:2px; }
/* dark sections: brighter ring for contrast against navy */
.bg-navy :focus-visible, .bg-navy-deep :focus-visible, header :focus-visible, .mobile-panel :focus-visible, .site-footer :focus-visible{ outline-color:var(--gold-light); }

.skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--navy-deep); color:var(--gold-light); padding:12px 18px; border-radius:0 0 8px 0; font-weight:600; font-size:14px; text-decoration:none; }
.skip-link:focus{ left:0; outline:3px solid var(--gold-light); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js .reveal, .js .reveal-child, .js .hero-line{ opacity:1 !important; transform:none !important; transition:none !important; }
  .nav-cta{ animation:none !important; }
  *{ scroll-behavior:auto !important; }
}