@font-face{font-family:'Besley';src:url('/fonts/besley-latin-wght.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}@font-face{font-family:'Figtree';src:url('/fonts/figtree-latin-wght.woff2') format('woff2');font-weight:300 900;font-style:normal;font-display:swap}
:root{--sbx-color-bg:#ffffff;--sbx-color-surface:var(--sbx-color-bg);--sbx-color-surface-alt:#ffd79c;--sbx-color-text:#17244f;--sbx-color-text-muted:#17244f;--sbx-color-accent:#f29c4f;--sbx-color-accent-alt:#ffd79c;--sbx-color-on-accent:#17244f;--sbx-color-border:color-mix(in srgb, var(--sbx-color-text) 15%, transparent);--sbx-color-overlay:rgb(0 0 0 / 0.5);--sbx-tone-default-bg:var(--sbx-color-bg);--sbx-tone-default-fg:var(--sbx-color-text);--sbx-tone-muted-bg:var(--sbx-color-surface-alt);--sbx-tone-muted-fg:var(--sbx-color-text);--sbx-tone-accent-bg:var(--sbx-color-accent);--sbx-tone-accent-fg:var(--sbx-color-on-accent);--sbx-tone-inverse-bg:var(--sbx-color-text);--sbx-tone-inverse-fg:var(--sbx-color-bg);--sbx-tone-default-muted:var(--sbx-color-text-muted);--sbx-tone-muted-muted:var(--sbx-color-text-muted);--sbx-tone-accent-muted:color-mix(in srgb, var(--sbx-tone-accent-fg) 80%, var(--sbx-tone-accent-bg));--sbx-tone-inverse-muted:#ffffff;--sbx-tone-muted-border-width:0;--sbx-color-kicker:currentColor;--sbx-color-text-soft:var(--sbx-color-text);--sbx-color-number:var(--sbx-color-accent);--sbx-color-nav:currentColor;--sbx-color-header-bg:color-mix(in srgb, var(--sbx-color-bg) 80%, transparent);--sbx-color-panel:transparent;--sbx-color-embed-bg:var(--sbx-color-text);--sbx-color-ghost-bg:transparent;--sbx-color-ghost-fg:var(--sbx-color-accent);--sbx-color-ghost-border:var(--sbx-color-accent);--sbx-color-hero-glow-a:transparent;--sbx-color-hero-glow-b:transparent;--sbx-color-hero-dots:transparent;--sbx-color-media-shade:transparent;--sbx-color-section-glow:transparent;--sbx-space-1:0.25rem;--sbx-space-2:0.5rem;--sbx-space-3:0.75rem;--sbx-space-4:1rem;--sbx-space-5:1.5rem;--sbx-space-6:2rem;--sbx-space-7:3rem;--sbx-space-8:6rem;--sbx-radius-sm:4px;--sbx-radius-md:4px;--sbx-radius-lg:1.5rem;--sbx-radius-map:4px;--sbx-radius-pill:999px;--sbx-border-width:1px;--sbx-border-width-strong:2px;--sbx-border-width-accent:var(--sbx-border-width-strong);--sbx-shadow-sm:0 1px 2px rgb(0 0 0 / 0.08);--sbx-shadow-md:0 4px 12px rgb(0 0 0 / 0.12);--sbx-shadow-lg:0 12px 32px rgb(0 0 0 / 0.2);--sbx-shadow-hover:var(--sbx-shadow-md);--sbx-shadow-glow:none;--sbx-angle-tilt:3deg;--sbx-angle-stamp:0deg;--sbx-duration-fast:150ms;--sbx-size-container-sm:40rem;--sbx-size-container-md:52rem;--sbx-size-container-lg:1240px;--sbx-size-header-height:4.5rem;--sbx-grid-min:16rem;--sbx-gutter:clamp(16px, 4vw, 56px);--sbx-size-control-height:0;--sbx-button-padding-inline:var(--sbx-space-5);--sbx-lift:var(--sbx-space-1);--sbx-blur-header:var(--sbx-space-2);--sbx-hero-min-height:0;--sbx-hero-padding-top:var(--sbx-section-padding);--sbx-hero-padding-bottom:var(--sbx-section-padding);--sbx-hero-media-ratio:auto;--sbx-embed-ratio:16 / 9;--sbx-gap-hero:var(--sbx-space-6);--sbx-gap-feature:var(--sbx-space-5);--sbx-gap-location:var(--sbx-space-6);--sbx-gap-cards:var(--sbx-space-5);--sbx-gap-nav:var(--sbx-space-4);--sbx-card-padding:var(--sbx-space-3);--sbx-map-min-height:0;--sbx-size-lead-max:100%;--sbx-size-hero-copy-max:100%;--sbx-size-note-max:100%;--sbx-size-quote-max:100%;--sbx-size-dots-a:96px;--sbx-size-dots-b:128px;--sbx-radius-bar:var(--sbx-radius-pill);--sbx-font-size-h1:clamp(2.75rem, 6.2vw, 5.25rem);--sbx-font-size-h2:clamp(2rem, 4.4vw, 3.5rem);--sbx-font-size-h3:1.375rem;--sbx-font-size-h4:1.1rem;--sbx-font-size-small:0.9rem;--sbx-letter-spacing-caps:0.08em;--sbx-letter-spacing-heading:-0.01em;--sbx-letter-spacing-meta:0;--sbx-letter-spacing-brand:0;--sbx-heading-transform:none;--sbx-font-size-kicker:var(--sbx-font-size-small);--sbx-font-size-lead:clamp(1.125rem, 1.6vw, 1.3125rem);--sbx-font-size-hero-body:clamp(1.0625rem, 1.7vw, 1.3125rem);--sbx-font-size-display:var(--sbx-font-size-h1);--sbx-font-size-numeral:var(--sbx-font-size-h2);--sbx-font-size-name:1rem;--sbx-font-size-meta:var(--sbx-font-size-small);--sbx-font-size-nav:var(--sbx-font-size-small);--sbx-font-size-brand:var(--sbx-font-size-h4);--sbx-font-size-stamp:1rem;--sbx-font-size-stars:1.25rem;--sbx-letter-spacing-stars:0.1em;--sbx-line-height-tight:1.08;--sbx-line-height-body:1.6;--sbx-line-height-number:1;--sbx-font-weight-strong:800;--sbx-font-weight-brand:var(--sbx-font-weight-strong);--sbx-opacity-muted:0.7;--sbx-z-sticky:10;--sbx-z-overlay:20;--sbx-section-padding:clamp(64px, 9vw, 128px);--sbx-font-heading:'Besley', 'Noto Serif Thai', Georgia, serif;--sbx-font-body:'Figtree', 'Anuphan', system-ui, sans-serif;--app-thatch:#2e1f14;--app-wood:#65452f;--app-siding:#f8f7f2;--app-board-line:#e3e1d6;--app-footer-line:rgba(255, 255, 255, 0.2);--app-pane-edge:#d8d6ca;--app-glass:#1d2c29;--app-glass-fine:#e8e6dc;--app-glass-streak:rgba(255, 255, 255, 0.07);--app-glass-streak-soft:rgba(255, 255, 255, 0.04);--app-hero-shade:rgba(23, 36, 79, 0.86);--app-hero-shade-mid:rgba(23, 36, 79, 0.5);--app-hero-shade-clear:rgba(23, 36, 79, 0);--app-video-bg:#0d1633;--app-sky:#71b3b0;--app-board-height:42px;--app-wind-frame-height:230px;--app-board-gap:2px;--app-thatch-height:clamp(84px, 9vw, 120px);--app-thatch-tile:1200px;--app-badge-size:clamp(84px, 10vw, 132px);--app-roof-height:clamp(60px, 5vw, 72px);--app-roof-gap:clamp(12px, 2.4vw, 40px);--app-roof-link-gap:clamp(10px, 1.7vw, 24px);--app-vinyl-tilt:-0.35deg;--app-vinyl-tilt-alt:0.3deg;--app-hero-min-height:min(90vh, 860px);--app-hero-text-top:180px;--app-hero-text-bottom:clamp(36px, 6vw, 72px);--app-head-gap:clamp(32px, 5vw, 56px);--app-split-gap:clamp(32px, 6vw, 88px);--app-photo-gap:clamp(12px, 1.6vw, 20px);--app-trio-offset:clamp(0px, 7vw, 96px);--app-glass-padding:clamp(20px, 3vw, 36px);--app-font-size-pane:clamp(1.5rem, 2.5vw, 2rem);--app-font-size-vinyl:clamp(1.125rem, 1.8vw, 1.375rem);--app-letter-spacing-vinyl:0.03em;--app-rule:3px;--app-cta-clearance:76px;--app-slide-fade:2400ms}

:root {
	--sbx-motion-duration: 700ms;
	--sbx-motion-distance: 24px;
	--sbx-motion-stagger: 90ms;
	--sbx-motion-hover: 200ms;
	--sbx-motion-lift: 3px;
	--sbx-motion-zoom: 1.04;
	--sbx-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
	--sbx-lift: var(--sbx-motion-lift);
	--sbx-duration-fast: var(--sbx-motion-hover);
}
@keyframes sbx-rise { from { opacity: 0; transform: translateY(var(--sbx-motion-distance)); } }
@media screen and (prefers-reduced-motion: no-preference) {
	.btn { transition: transform var(--sbx-motion-hover) var(--sbx-motion-easing), background-color var(--sbx-motion-hover) var(--sbx-motion-easing), color var(--sbx-motion-hover) var(--sbx-motion-easing); }
	.btn:active { transform: scale(0.97); }
	[data-sbx-lift] { transition: transform var(--sbx-motion-hover) var(--sbx-motion-easing), box-shadow var(--sbx-motion-hover) var(--sbx-motion-easing); }
	[data-sbx-zoom] { overflow: hidden; border-radius: var(--sbx-radius-md); }
	[data-sbx-zoom] img { transition: transform var(--sbx-motion-duration) var(--sbx-motion-easing); }
	[data-sbx-reveal] { transition: opacity var(--sbx-motion-duration) var(--sbx-motion-easing) calc(var(--sbx-motion-step, 0) * var(--sbx-motion-stagger)), transform var(--sbx-motion-duration) var(--sbx-motion-easing) calc(var(--sbx-motion-step, 0) * var(--sbx-motion-stagger)); }
	[data-sbx-reveal]:nth-child(3n + 2) { --sbx-motion-step: 1; }
	[data-sbx-reveal]:nth-child(3n) { --sbx-motion-step: 2; }
	[data-sbx-reveal="hidden"] { opacity: 0; transform: translateY(var(--sbx-motion-distance)); }
	main > :first-child h1 { animation: sbx-rise var(--sbx-motion-duration) var(--sbx-motion-easing) both; }
	main > :first-child h1 ~ * { animation: sbx-rise var(--sbx-motion-duration) var(--sbx-motion-easing) var(--sbx-motion-stagger) both; }
	main > :first-child h1 ~ * ~ * { animation-delay: calc(2 * var(--sbx-motion-stagger)); }
	@media (hover: hover) {
		header nav a:any-link, footer nav a:any-link { background: linear-gradient(var(--sbx-color-accent), var(--sbx-color-accent)) 0 100% / 0 var(--sbx-border-width-strong) no-repeat; transition: background-size var(--sbx-motion-hover) var(--sbx-motion-easing), color var(--sbx-motion-hover) var(--sbx-motion-easing); }
		:is(header, footer) nav a:any-link:is(:hover, :focus-visible) { background-size: 100% var(--sbx-border-width-strong); }
		.btn:hover:not(:active) { transform: translateY(calc(-1 * var(--sbx-motion-lift))); }
		[data-sbx-lift]:hover { transform: translateY(calc(-1 * var(--sbx-motion-lift))); box-shadow: var(--sbx-shadow-hover); }
		[data-sbx-zoom]:hover img, a:hover [data-sbx-zoom] img { transform: scale(var(--sbx-motion-zoom)); }
	}
}