:root { --serif: 'Cormorant Garamond', Georgia, serif;
--sans:  'DM Sans', system-ui, sans-serif; --canvas:      #ffffff;
--cloud:       #f4f8fa;
--mist:        #eaf3f7;
--shore:       #c8e2ec; --brand:        #598c9d;
--brand-deep:   #326d81;
--brand-deeper: #225365;
--brand-bright: #759aa8;
--brand-dim:    rgba(89,140,157,0.12);
--brand-wash:   rgba(89,140,157,0.07); --gold:        #ad8e5c;
--gold-bright: #d4b87a; --ink:       #0f2028;
--ink-mid:   #3a5c6a;
--ink-light: #4e7280;
--ink-faint: #6a8f9c; --rule:      rgba(110,185,208,0.18);
--rule-mid:  rgba(110,185,208,0.30);
--rule-dark: rgba(14,32,40,0.12); --pad-x: 80px;
--pad-section: 6rem;
--grid-gap: 1px; --white:     #ffffff;
--white-dim: rgba(255,255,255,0.65);
--error: #D85A30;
} *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--sans);
font-size: 15px;
font-weight: 300;
color: var(--ink);
background: var(--canvas);
-webkit-font-smoothing: antialiased;
max-width: 1280px;
margin: 0 auto;
box-shadow: 0 0 60px rgba(14,32,40,0.08);
overflow-x: hidden;
line-height: 1.55;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button { cursor: pointer; font-family: var(--sans); }
ul { list-style: none; } .entry-content p,
.page-content p,
.page-wide p,
.article-page p,
.prose p {
font-size: 15px;
font-weight: 300;
line-height: 1.9;
color: var(--ink-light);
margin-bottom: 1.2rem;
}
.entry-content h1, .page-content h1, .page-wide h1, .article-page h1, .prose h1,
.entry-content h2, .page-content h2, .page-wide h2, .article-page h2, .prose h2,
.entry-content h3, .page-content h3, .page-wide h3, .article-page h3, .prose h3,
.entry-content h4, .page-content h4, .page-wide h4, .article-page h4, .prose h4,
.entry-content h5, .page-content h5, .page-wide h5, .article-page h5, .prose h5,
.entry-content h6, .page-content h6, .page-wide h6, .article-page h6, .prose h6 {
font-family: var(--serif);
color: var(--ink);
line-height: 1.25;
font-weight: 300;
margin-top: 2.25rem;
margin-bottom: 0.75rem;
}
.entry-content h1, .page-content h1, .page-wide h1, .article-page h1, .prose h1 { font-size: clamp(28px, 3vw, 44px); }
.entry-content h2, .page-content h2, .page-wide h2, .article-page h2, .prose h2 { font-size: clamp(22px, 2.4vw, 34px); }
.entry-content h3, .page-content h3, .page-wide h3, .article-page h3, .prose h3 { font-size: clamp(18px, 1.8vw, 26px); }
.entry-content h4, .page-content h4, .page-wide h4, .article-page h4, .prose h4 {
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-mid);
}
.entry-content h5, .page-content h5, .page-wide h5, .prose h5,
.entry-content h6, .page-content h6, .page-wide h6, .prose h6 {
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-faint);
}
.entry-content p a, .entry-content li a, .entry-content blockquote a,
.page-content p a, .page-content li a, .page-content blockquote a,
.page-wide p a, .page-wide li a, .page-wide blockquote a,
.article-page p a, .article-page li a, .article-page blockquote a,
.prose p a, .prose li a, .prose blockquote a {
color: var(--brand-deep);
text-decoration: underline;
text-underline-offset: 3px;
}
.entry-content p a:hover, .entry-content li a:hover, .entry-content blockquote a:hover,
.page-content p a:hover, .page-content li a:hover, .page-content blockquote a:hover,
.page-wide p a:hover, .page-wide li a:hover, .page-wide blockquote a:hover,
.article-page p a:hover, .article-page li a:hover, .article-page blockquote a:hover,
.prose p a:hover, .prose li a:hover, .prose blockquote a:hover { color: var(--brand-deeper); }
.entry-content ul,
.entry-content ol,
.page-content ul,
.page-content ol,
.page-wide ul,
.page-wide ol,
.article-page ul,
.article-page ol,
.prose ul,
.prose ol {
padding-left: 1.5rem;
margin-bottom: 1.2rem;
}
.entry-content ul, .page-content ul, .page-wide ul, .article-page ul, .prose ul { list-style: disc; }
.entry-content ol, .page-content ol, .page-wide ol, .article-page ol, .prose ol { list-style: decimal; }
.entry-content li, .page-content li, .page-wide li, .article-page li, .prose li {
font-size: 15px;
font-weight: 300;
line-height: 1.9;
color: var(--ink-light);
}
.entry-content blockquote,
.page-content blockquote,
.page-wide blockquote,
.prose blockquote {
border-left: 3px solid var(--brand);
margin: 2rem 0;
padding: 0.5rem 0 0.5rem 1.5rem;
font-family: var(--serif);
font-size: 1.15rem;
font-style: italic;
color: var(--ink-mid);
}
.entry-content figure,
.page-content figure,
.page-wide figure,
.prose figure {
margin: 2rem 0;
}
.entry-content figcaption,
.page-content figcaption,
.page-wide figcaption,
.prose figcaption {
font-size: 12px;
color: var(--ink-faint);
margin-top: 0.5rem;
text-align: center;
}
.entry-content strong, .page-content strong, .page-wide strong, .article-page strong, .prose strong { font-weight: 600; color: inherit; }
.entry-content em,     .page-content em,     .page-wide em,     .prose em     { font-style: italic; }
.entry-content hr,
.page-content hr,
.page-wide hr,
.prose hr {
border: none;
border-top: 1px solid var(--rule);
margin: 2.5rem 0;
} .kk-callout {
background: var(--mist);
border-left: 3px solid var(--brand-deep);
border-radius: 0 6px 6px 0;
padding: 1rem 1.4rem;
margin: 2rem 0;
}
.kk-callout--tip  { border-left-color: var(--brand);       background: var(--brand-wash); }
.kk-callout--note { border-left-color: var(--ink-faint);   background: var(--cloud); }
.kk-callout p     { margin: 0 0 0.4rem; font-size: 0.95rem; color: var(--ink-mid); line-height: 1.7; }
.kk-callout p:last-child { margin-bottom: 0; }
.kk-callout-heading {
font-family: var(--sans);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brand-deeper) !important;
margin-bottom: 0.5rem !important;
} .announce {
display: block;
background: var(--brand-deep);
color: #fff;
text-align: center;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 0.6rem 1rem;
text-decoration: none;
}
.announce:hover { background: var(--brand-deeper); color: #fff; }
.announce-cta { text-decoration: underline; text-underline-offset: 2px; } nav {
position: sticky;
top: 0;
z-index: 200;
background: rgba(255,255,255,0.96);
border-bottom: 1px solid var(--rule);
height: 72px;
display: flex;
align-items: center;
padding: 0 1rem;
gap: 2rem;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.nav-brand {
display: flex;
flex-direction: column;
line-height: 1;
margin-right: 1rem;
flex-shrink: 0;
}
.nav-logo-link {
display: block;
line-height: 0;
}
.nav-logo-img {
height: 48px;
width: auto;
display: block;
}
.nav-links {
display: flex;
align-items: stretch;
height: 100%;
flex: 1;
list-style: none;
padding: 0;
margin: 0;
}
.nav-links > li {
position: relative;
display: flex;
align-items: center;
}
.nav-links > li > a {
font-size: 12px;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-mid);
padding: 0 1.4rem;
height: 100%;
display: flex;
align-items: center;
border-right: 1px solid var(--rule);
transition: color 0.2s;
}
.nav-links > li:first-child > a { border-left: 1px solid var(--rule); }
.nav-links > li > a:hover { color: var(--brand-deep); }
.nav-links .sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: var(--canvas);
border: 1px solid var(--rule);
border-top: 2px solid var(--brand);
min-width: 220px;
z-index: 300;
padding: 0.5rem 0;
box-shadow: 0 4px 16px rgba(14,32,40,0.08);
list-style: none;
margin: 0;
}
.nav-links .menu-item-has-children:hover > .sub-menu { display: block; }
.nav-links .sub-menu li a {
display: block;
font-size: 11px;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-light);
padding: 0.6rem 1.2rem;
transition: background 0.15s, color 0.15s;
}
.nav-links .sub-menu li a:hover { background: var(--cloud); color: var(--brand-deep); } .nav-links .sub-menu .menu-item-has-children { position: relative; }
.nav-links .sub-menu .menu-item-has-children > a::after {
content: '›';
float: right;
margin-left: 0.75rem;
color: var(--ink-faint);
}
.nav-links .sub-menu .sub-menu {
display: none;
position: absolute;
top: -0.5rem;
left: 100%;
background: var(--canvas);
border: 1px solid var(--rule);
border-top: 2px solid var(--brand);
min-width: 220px;
z-index: 400;
padding: 0.5rem 0;
box-shadow: 0 4px 16px rgba(14,32,40,0.08);
list-style: none;
margin: 0;
}
.nav-links .sub-menu .menu-item-has-children:hover > .sub-menu { display: block; }
.nav-right {
margin-left: auto;
display: flex;
align-items: center;
flex-shrink: 0;
}
.nav-tel {
font-size: 11px;
letter-spacing: 0.1em;
color: var(--ink-faint);
margin-left: 1.5rem;
}
.nav-cta {
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #fff;
background: var(--brand-deep);
border: none;
padding: 0.65rem 1.5rem;
transition: background 0.2s;
margin-left: 1.5rem;
}
.nav-cta:hover { background: var(--brand-deeper); }
.nav-hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
background: none;
border: none;
padding: 6px;
margin-left: 1rem;
flex-shrink: 0;
}
.nav-hamburger span {
display: block;
width: 22px;
height: 1.5px;
background: var(--ink);
transition: transform 0.2s, opacity 0.2s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .mobile-nav {
display: none;
position: sticky;
top: 72px;
height: auto;
background: var(--canvas);
border-bottom: 1px solid var(--rule);
box-shadow: 0 4px 16px rgba(14,32,40,0.07);
z-index: 199;
flex-direction: column;
}
.mobile-nav.open { display: flex; }
.mobile-nav-items {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
width: 100%;
}
.mobile-nav-items li { list-style: none; }
.mobile-nav-items a {
display: block;
padding: 0.9rem 1.5rem;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-mid);
border-bottom: 1px solid var(--rule);
}
.mobile-nav-items a:hover { color: var(--brand-deep); background: var(--cloud); } .mobile-nav-items .sub-menu {
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.mobile-nav-items .menu-item-has-children.open > .sub-menu { display: block; }
.mobile-nav-items .sub-menu a {
font-size: 10px;
color: var(--ink-faint);
padding-left: 2.5rem;
} .mobile-nav-parent-row {
display: flex;
align-items: stretch;
border-bottom: 1px solid var(--rule);
}
.mobile-nav-parent-row > a {
flex: 1;
border-bottom: none;
}
.mobile-sub-toggle {
flex-shrink: 0;
width: 3rem;
background: none;
border: none;
border-left: 1px solid var(--rule);
cursor: pointer;
font-size: 1.2rem;
color: var(--ink-light);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: transform 0.2s;
}
.menu-item-has-children.open > .mobile-nav-parent-row .mobile-sub-toggle {
transform: rotate(90deg);
}
.mobile-nav-tel {
font-size: 11px;
color: var(--ink-faint);
padding: 0.9rem 1.5rem;
letter-spacing: 0.1em;
} .hero {
position: relative;
height: calc(100vh - 72px);
min-height: 580px;
max-height: 860px;
overflow: hidden;
background: var(--mist);
}
.hero-media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
filter: saturate(1.05) brightness(0.88);
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0) 35%,
rgba(15,32,40,0.55) 75%,
rgba(15,32,40,0.82) 100%
);
}
.hero-content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 5rem var(--pad-x);
z-index: 2;
}
.hero-eyebrow {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1.25rem;
display: flex;
align-items: center;
gap: 1rem;
}
.hero-eyebrow::before {
content: '';
display: block;
width: 36px;
height: 1px;
background: var(--gold);
}
.hero-h1 {
font-family: var(--serif);
font-size: clamp(52px, 7vw, 96px);
font-weight: 300;
line-height: 1.0;
letter-spacing: -0.01em;
color: var(--gold-bright);
margin-bottom: 1.5rem;
max-width: 780px;
}
.hero-h1 em { font-style: italic; color: var(--brand-bright); }
.hero-sub {
font-size: 17px;
font-weight: 300;
color: rgba(255,255,255,0.78);
letter-spacing: 0.03em;
margin-bottom: 2.5rem;
max-width: 440px;
line-height: 1.75;
}
.hero-cta-row {
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.hero-btn-primary, .btn-primary {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
background: var(--brand);
color: var(--ink);
border: none;
padding: 1rem 2.5rem;
transition: background 0.2s, transform 0.15s;
display: inline-block;
}
.hero-btn-primary:hover, .btn-primary:hover { background: var(--brand-bright); transform: translateY(-1px); }
a.btn-primary, a.btn-primary:hover,
.entry-content a.btn-primary, .page-content a.btn-primary, .page-wide a.btn-primary,
.article-page a.btn-primary, .prose a.btn-primary { color: var(--ink); text-decoration: none; }
.btn-cta {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
background: var(--gold);
color: var(--canvas);
border: none;
padding: 1rem 2.5rem;
transition: background 0.2s, transform 0.15s;
display: inline-block;
}
.btn-cta:hover { background: var(--gold-bright); color: var(--ink); transform: translateY(-1px); }
a.btn-cta, a.btn-cta:hover,
.entry-content a.btn-cta, .page-content a.btn-cta, .page-wide a.btn-cta,
.article-page a.btn-cta, .prose a.btn-cta { color: var(--canvas); text-decoration: none; }
a.btn-cta:hover,
.entry-content a.btn-cta:hover, .page-content a.btn-cta:hover, .page-wide a.btn-cta:hover,
.article-page a.btn-cta:hover, .prose a.btn-cta:hover { color: var(--ink); }
.hero-btn-outline, .btn-ghost {
font-size: 11px;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.72);
background: none;
border: 1px solid rgba(255,255,255,0.35);
padding: 1rem 2rem;
transition: border-color 0.2s, color 0.2s;
display: inline-block;
}
.hero-btn-outline:hover, .btn-ghost:hover { border-color: var(--brand); color: var(--brand); } .hero-badge {
position: absolute;
top: 9%;
right: 4%;
width: 240px;
height: 240px;
background: var(--gold);
clip-path: polygon(
50% 4%, 57.8% 10.75%, 67.6% 7.5%, 72.2% 16.75%,
82.55% 17.45%, 83.25% 27.8%, 92.5% 32.4%, 89.25% 42.2%,
96% 50%, 89.25% 57.8%, 92.5% 67.6%, 83.25% 72.2%,
82.55% 82.55%, 72.2% 83.25%, 67.6% 92.5%, 57.8% 89.25%,
50% 96%, 42.2% 89.25%, 32.4% 92.5%, 27.8% 83.25%,
17.45% 82.55%, 16.75% 72.2%, 7.5% 67.6%, 10.75% 57.8%,
4% 50%, 10.75% 42.2%, 7.5% 32.4%, 16.75% 27.8%,
17.45% 17.45%, 27.8% 16.75%, 32.4% 7.5%, 42.2% 10.75%
);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
gap: 6px;
z-index: 2;
}
.hero-badge-headline {
font-family: var(--serif);
font-size: 2rem;
font-weight: 400;
color: #fff;
line-height: 1.15;
}
.hero-badge-subhead {
font-family: var(--sans);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.9);
line-height: 1.4;
}
.hero-badge-cta {
font-family: var(--sans);
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.75);
text-decoration: underline;
text-underline-offset: 2px;
margin-top: 3px;
}
a.hero-badge-cta:hover { color: #fff; } .search-section {
--pad-section: 3rem;
padding: var(--pad-section) 0 0;
border-bottom: 1px solid var(--rule);
background: var(--cloud);
}
.search-header {
padding: 0 var(--pad-x);
margin-bottom: 1rem;
}
.search-section .search_wrap {
padding-left: var(--pad-x);
padding-right: var(--pad-x);
margin-bottom: 1.5rem;
}
.search-band {
background: var(--canvas);
border-bottom: 1px solid var(--rule);
padding: 0 var(--pad-x);
box-shadow: 0 2px 12px rgba(110,185,208,0.08);
}
.search-bar {
display: grid;
grid-template-columns: 1fr 1fr 1fr auto;
align-items: stretch;
}
.search-field {
padding: 1.25rem 2rem 1.25rem 0;
border-right: 1px solid var(--rule);
}
.search-field + .search-field { padding-left: 2rem; }
.sf-label {
display: block;
font-size: 9px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--brand-deep);
margin-bottom: 0.3rem;
font-weight: 500;
}
.sf-input,
.sf-select {
font-family: var(--sans);
font-size: 13px;
font-weight: 400;
color: var(--ink);
background: transparent;
border: none;
outline: none;
width: 100%;
appearance: none;
-webkit-appearance: none;
}
.sf-select::placeholder, .sf-input::placeholder { color: var(--ink-faint); }
.search-submit {
background: var(--brand-deep);
color: #fff;
border: none;
padding: 0 2.25rem;
font-family: var(--sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: background 0.2s;
margin: 8px 0 8px 2rem;
flex-shrink: 0;
}
.search-submit:hover { background: var(--brand-deeper); } .promo-strip {
display: block;
width: 100%;
padding: 0.85rem var(--pad-x);
background: var(--gold);
text-align: center;
font-family: var(--sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.93);
transition: background 0.2s;
}
a.promo-strip { cursor: pointer; }
a.promo-strip:hover { background: var(--gold-bright); } .stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-bottom: 1px solid var(--rule);
background: var(--brand-deep);
}
.stat-cell {
padding: 1.25rem var(--pad-x);
border-right: 1px solid var(--rule);
display: flex;
flex-direction: column;
gap: 6px;
}
.stat-cell:last-child { border-right: none; }
.stat-num {
font-family: var(--serif);
font-size: 44px;
font-weight: 300;
color: var(--gold-bright);
line-height: 1;
letter-spacing: -0.02em;
}
.stat-suffix { font-size: 24px; color: var(--gold-bright); }
.stat-label {
font-size: 11px;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--white-dim);
} .sec-eyebrow {
font-size: 15px;
letter-spacing: 0.24em;
text-transform: uppercase;
font-weight: 500;
color: var(--gold);
margin-bottom: 1.25rem;
display: flex;
align-items: center;
gap: 1rem;
}
.sec-eyebrow::before {
content: '';
display: block;
width: 28px;
height: 1px;
background: var(--gold);
flex-shrink: 0;
}
.sec-h2 {
font-family: var(--serif);
font-size: clamp(36px, 4vw, 58px);
font-weight: 300;
color: var(--ink);
line-height: 1.1;
letter-spacing: -0.01em;
}
.sec-h2 em { font-style: italic; color: var(--brand); }
.sec-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 0 var(--pad-x);
margin-bottom: 3rem;
}
.sec-link {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-light);
display: flex;
align-items: center;
gap: 0.6rem;
transition: color 0.2s;
}
.sec-link::after { content: '→'; font-size: 14px; font-weight: 300; }
.sec-link:hover { color: var(--brand-deep); } .intro {
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: 1px solid var(--rule);
}
.intro-img {
position: relative;
overflow: hidden;
min-height: 420px;
background: var(--shore);
}
.intro-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(0.9) brightness(0.95);
transition: transform 0.8s ease;
}
.intro-img:hover img { transform: scale(1.03); }
.intro-text {
padding: 6rem;
border-left: none;
background: var(--brand-deeper);
display: flex;
flex-direction: column;
justify-content: center;
}
.intro-text h2 {
font-family: var(--serif);
font-size: clamp(32px, 3vw, 52px);
font-weight: 300;
color: var(--gold);
line-height: 1.15;
margin-bottom: 1rem;
}
.intro-text h2 em { font-style: italic; color: var(--brand); }
.intro-text p {
font-size: 16px;
font-weight: 300;
line-height: 1.8;
color: var(--white-dim);
margin-top: 1.5rem;
margin-bottom: 2.5rem;
}
.intro-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-top: 1px solid rgba(255,255,255,0.12);
}
.intro-feat {
padding: 1.5rem 1.5rem 1.5rem 0;
border-bottom: 1px solid rgba(255,255,255,0.12);
border-right: 1px solid rgba(255,255,255,0.12);
}
.intro-feat:nth-child(even) { border-right: none; padding-left: 1.5rem; }
.intro-feat:nth-last-child(-n+2) { border-bottom: none; }
.intro-feat-title {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 0.4rem;
}
.intro-feat-text {
font-size: 13px;
font-weight: 300;
color: var(--white-dim);
line-height: 1.6;
} .props {
padding: var(--pad-section) 0;
border-bottom: 1px solid var(--rule);
background: var(--canvas);
}
.props-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 0 var(--pad-x);
margin-bottom: 3rem;
}
.filter-tabs {
padding: 0 var(--pad-x);
margin-bottom: 3rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0;
border-bottom: 1px solid var(--rule);
}
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab {
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-faint);
background: none;
border: none;
padding: 1rem 1.25rem;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.2s, border-color 0.2s;
white-space: nowrap;
flex-shrink: 0;
}
.filter-tab:hover { color: var(--ink-mid); }
.filter-tab.active { color: var(--brand-deep); border-bottom-color: var(--brand); } .kk-availability-map-link {
display: inline-block;
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brand-deep);
text-decoration: none;
border: 1px solid var(--brand);
padding: 0.45rem 1rem;
margin-bottom: 1.5rem;
transition: background 0.2s, color 0.2s;
}
.kk-availability-map-link:hover {
background: var(--brand);
color: var(--ink);
}
.prop-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
background: var(--canvas);
border-top: 1px solid var(--shore);
border-bottom: 1px solid var(--shore);
}
.prop-grid--2col { grid-template-columns: repeat(2, 1fr); }
.prop-grid--2col .prop-card:nth-child(3n) { border-right: 1px solid var(--shore); }
.prop-grid--2col .prop-card:nth-child(2n) { border-right: none; }
.prop-grid--1col { grid-template-columns: 1fr; }
.prop-card {
background: var(--canvas);
cursor: pointer;
transition: background 0.2s;
position: relative;
overflow: hidden;
border-right: 1px solid var(--shore);
border-bottom: 1px solid var(--shore);
}
.prop-card:nth-child(3n) { border-right: none; }
.prop-card:hover { background: var(--cloud); }
.prop-card-img {
aspect-ratio: 4/3;
overflow: hidden;
position: relative;
background: var(--shore);
display: block;
}
.prop-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}
.prop-card:hover .prop-card-img img { transform: scale(1.04); }
.prop-card-img::after {
content: '';
position: absolute;
inset: 0;
background: var(--brand-wash);
opacity: 0;
transition: opacity 0.4s;
pointer-events: none;
}
.prop-card:hover .prop-card-img::after { opacity: 1; } .prop-card-track {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.25s ease;
}
.prop-card-img[data-carousel] .prop-card-track { will-change: transform; touch-action: pan-y; }
.prop-card-slide {
flex: 0 0 100%;
height: 100%;
}
.prop-card-prev,
.prop-card-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
background: rgba(255,255,255,0.82);
border: none;
width: 30px;
height: 30px;
border-radius: 50%;
font-size: 1.25rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s;
backdrop-filter: blur(4px);
color: var(--ink);
padding: 0;
}
.prop-card-prev { left: 0.6rem; }
.prop-card-next { right: 0.6rem; }
.prop-card:hover .prop-card-prev,
.prop-card:hover .prop-card-next { opacity: 1; }
.prop-card-dots {
position: absolute;
bottom: 0.6rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 5px;
z-index: 2;
pointer-events: none;
}
.prop-card-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255,255,255,0.55);
transition: background 0.2s, transform 0.2s;
flex-shrink: 0;
}
.prop-card-dot.active {
background: rgba(255,255,255,0.95);
transform: scale(1.3);
}
.prop-img-tag {
position: absolute;
top: 1rem;
left: 1rem;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
background: rgba(255,255,255,0.92);
color: var(--brand-deeper);
padding: 0.3rem 0.7rem;
backdrop-filter: blur(6px);
z-index: 1;
}
.prop-fav { display: none; }
.prop-fav-x {
position: absolute;
top: 1rem;
right: 1rem;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255,255,255,0.88);
border: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: var(--ink-faint);
transition: color 0.2s;
backdrop-filter: blur(6px);
z-index: 1;
cursor: pointer;
line-height: 1;
}
.prop-card:hover .prop-fav { color: var(--brand-deep); }
.prop-body { padding: 1.5rem; }
.prop-name {
font-family: var(--serif);
font-size: 24px;
font-weight: 400;
color: var(--ink);
line-height: 1.3;
margin-bottom: 0.25rem;
letter-spacing: 0.01em;
}
.prop-name a {
color: inherit;
text-decoration: none;
}
.prop-name a:hover {
text-decoration: none;
}
.prop-loc {
font-size: 14px;
font-weight: 300;
letter-spacing: 0.12em;
color: var(--ink-faint);
text-transform: uppercase;
margin-bottom: 1.25rem;
}
.prop-rule { height: 1px; background: var(--rule); margin-bottom: 1.25rem; }
.prop-specs {
display: flex;
gap: 1.5rem;
margin-bottom: 1.25rem;
}
.prop-spec {
display: flex;
flex-direction: column;
gap: 4px;
}
.prop-spec-val {
font-size: 13px;
font-weight: 300;
color: var(--ink-light);
line-height: 1.4;
}
.prop-spec-key {
font-size: 14px;
font-weight: 400;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-faint);
}
.prop-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1.25rem;
border-top: 1px solid var(--rule);
}
.prop-rating { font-size: 13px; letter-spacing: 0.06em; color: var(--brand-deep); }
.prop-price { font-size: 15px; letter-spacing: 0.06em; color: var(--ink-light); margin-top: 3px; }
.prop-view-btn {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
background: none;
border: 1px solid var(--shore);
color: var(--ink-light);
padding: 0.5rem 1rem;
transition: border-color 0.2s, color 0.2s, background 0.2s;
font-family: var(--sans);
display: inline-block;
}
.prop-card:hover .prop-view-btn { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-dim); }
.view-all-wrap {
display: flex;
justify-content: center;
padding: 3rem var(--pad-x) 0;
}
.view-all-btn {
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
background: transparent;
color: var(--ink-mid);
border: 1px solid var(--shore);
padding: 1rem 3rem;
display: inline-block;
transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.view-all-btn:hover { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-dim); } .kk-load-more-wrap {
display: flex;
justify-content: center;
padding: 2.5rem var(--pad-x) 3rem;
}
.kk-load-more {
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
background: transparent;
color: var(--ink-mid);
border: 1px solid var(--shore);
padding: 1rem 3rem;
cursor: pointer;
transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.kk-load-more:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-dim); }
.kk-load-more:disabled { opacity: 0.5; cursor: default; }
.prop-grid-empty {
grid-column: 1 / -1;
padding: 3rem;
text-align: center;
font-size: 14px;
color: var(--ink-faint);
background: var(--canvas);
}
.kk-avail-heading {
font-size: 13px;
color: var(--brand-deep);
margin-bottom: 0.5rem;
letter-spacing: 0.03em;
} .reviews {
padding: var(--pad-section) 0;
border-bottom: 1px solid var(--rule);
background: var(--canvas);
}
.reviews-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 0 var(--pad-x);
margin-bottom: 4rem;
}
.review-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--shore);
border-top: 1px solid var(--shore);
border-bottom: 1px solid var(--shore);
margin-bottom: 4rem;
}
.review-card {
background: var(--canvas);
padding: 2.5rem;
}
.rv-stars { font-size: 14px; color: var(--brand); letter-spacing: 0.1em; margin-bottom: 1.25rem; }
.rv-text {
font-family: var(--serif);
font-size: 22px;
font-weight: 300;
color: var(--ink);
line-height: 1.6;
font-style: italic;
margin-bottom: 1.5rem;
}
.rv-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
margin-bottom: 1.25rem;
flex-shrink: 0;
}
.rv-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-rule { height: 1px; background: var(--rule); margin-bottom: 1.25rem; }
.rv-meta { display: flex; flex-direction: column; gap: 3px; }
.rv-name { font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mid); }
.rv-prop { font-size: 13px; letter-spacing: 0.06em; color: var(--brand-deep); }
.rv-date { font-size: 12px; letter-spacing: 0.08em; color: var(--ink-faint); }
.rv-expandable { cursor: pointer; }
.rv-expandable:hover { background: var(--cloud); }
.rv-expandable:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } .rv-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.rv-modal[hidden] { display: none; }
body.rv-modal-open { overflow: hidden; }
.rv-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 32, 40, 0.72);
cursor: pointer;
}
.rv-modal-panel {
position: relative;
background: var(--canvas);
max-width: 580px;
width: 100%;
padding: 2.5rem;
border-top: 3px solid var(--gold);
box-shadow: 0 24px 64px rgba(15,32,40,0.28);
max-height: 90vh;
overflow-y: auto;
}
.rv-modal-close {
position: absolute;
top: 1rem;
right: 1rem;
width: 32px;
height: 32px;
background: transparent;
border: none;
font-size: 22px;
line-height: 1;
color: var(--ink-light);
display: flex;
align-items: center;
justify-content: center;
transition: color 0.15s;
}
.rv-modal-close:hover { color: var(--ink); }
.rv-modal-stars {
font-size: 16px;
color: var(--brand);
letter-spacing: 0.1em;
margin-bottom: 1.25rem;
}
.rv-modal-text {
font-family: var(--serif);
font-size: 22px;
font-weight: 300;
font-style: italic;
color: var(--ink);
line-height: 1.65;
margin-bottom: 1.5rem;
}
.rv-modal-rule { height: 1px; background: var(--rule); margin-bottom: 1.25rem; }
.rv-modal-meta { display: flex; flex-direction: column; gap: 4px; }
.rv-modal-name { font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mid); }
.rv-modal-prop { font-size: 13px; letter-spacing: 0.06em; color: var(--brand-deep); }
.rv-modal-date { font-size: 12px; letter-spacing: 0.08em; color: var(--ink-faint); }
@media ( max-width: 560px ) {
.rv-modal { padding: 0; align-items: flex-end; }
.rv-modal-panel { max-width: 100%; border-radius: 0; max-height: 85vh; }
} .trust-bar {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--rule);
padding: 0 var(--pad-x);
background: var(--cloud);
}
.trust-item {
padding: 2rem 2rem 2rem 0;
border-right: 1px solid var(--rule);
display: flex;
flex-direction: column;
gap: 4px;
}
.trust-item + .trust-item { padding-left: 2rem; }
.trust-item:last-child { border-right: none; }
.trust-icon {
width: 72px;
height: 72px;
margin-bottom: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
}
.trust-icon img { width: 100%; height: 100%; object-fit: contain; }
.trust-icon-dot, .trust-icon-text { font-size: 20px; color: var(--brand-deep); }
.trust-title { font-size: 14px; font-weight: 500; letter-spacing: 0.08em; color: var(--ink); text-transform: uppercase; }
.trust-sub { font-size: 13px; color: var(--ink-light); font-weight: 300; } .stay-stories {
padding: var(--pad-section) 0;
border-bottom: 1px solid var(--rule);
background: var(--cloud);
}
.stay-stories-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 0 var(--pad-x);
margin-bottom: 3rem;
}
.stay-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 1px;
background: var(--shore);
border-top: 1px solid var(--shore);
border-bottom: 1px solid var(--shore);
}
.stay-item {
display: block;
position: relative;
overflow: hidden;
cursor: pointer;
text-decoration: none;
color: inherit;
}
.stay-item:first-child { min-height: 420px; }
.stay-item:not(:first-child) { aspect-ratio: 3/4; }
.stay-item img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
filter: brightness(0.72);
}
.stay-item:hover img { transform: scale(1.04); filter: brightness(0.82); }
.stay-veil {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(15,32,40,0.88) 0%, transparent 100%);
}
.stay-label {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 2rem;
z-index: 1;
}
.stay-label-cat {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--brand);
margin-bottom: 0.5rem;
}
.stay-label-title {
font-family: var(--serif);
font-size: 24px;
font-weight: 300;
color: #fff;
line-height: 1.2;
margin-bottom: 0.75rem;
}
.stay-label-link {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.65);
display: flex;
align-items: center;
gap: 0.5rem;
transition: color 0.2s;
}
.stay-label-link::after { content: '→'; font-size: 12px; }
.stay-item:hover .stay-label-link { color: var(--brand); } .why {
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: 1px solid var(--rule);
}
.why-left {
padding: var(--pad-section);
border-right: 1px solid var(--rule);
background: var(--mist);
display: flex;
flex-direction: column;
justify-content: center;
}
.why-left h2 {
font-family: var(--serif);
font-size: clamp(32px, 3vw, 52px);
font-weight: 300;
color: var(--ink);
line-height: 1.15;
margin-bottom: 1.5rem;
}
.why-left h2 em { font-style: italic; color: var(--brand-deep); }
.why-left p {
font-size: 15px;
font-weight: 300;
line-height: 1.8;
color: var(--ink-mid);
margin-top: 1.5rem;
}
.why-right { background: var(--canvas); }
.why-item {
padding: 2.5rem;
border-bottom: 1px solid var(--rule);
display: grid;
grid-template-columns: 48px 1fr;
gap: 1.5rem;
align-items: start;
transition: background 0.2s;
}
.why-item:last-child { border-bottom: none; }
.why-item:hover { background: var(--cloud); }
.why-item-num {
font-family: var(--serif);
font-size: 32px;
font-weight: 300;
color: var(--brand);
line-height: 1;
padding-top: 2px;
}
.why-item-title { font-size: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.5rem; }
.why-item-text { font-size: 16px; font-weight: 300; color: var(--ink-light); line-height: 1.65; } .concierge {
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: 1px solid var(--rule);
min-height: 540px;
}
.conc-photo {
position: relative;
overflow: hidden;
}
.conc-photo img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.75) saturate(0.85);
}
.conc-photo-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, transparent 55%, var(--brand-deeper) 100%);
opacity: 0.55;
}
.conc-text {
padding: var(--pad-section);
display: flex;
flex-direction: column;
justify-content: center;
background: var(--brand-deeper);
position: relative;
overflow: hidden;
}
.conc-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.1;
display: block;
}
.conc-text > *:not(.conc-bg) { position: relative; z-index: 1; }
.conc-text .sec-eyebrow { color: var(--brand); }
.conc-text .sec-eyebrow::before { background: var(--brand); }
.conc-text .sec-h2 { color: var(--gold); }
.conc-text .sec-h2 em { color: var(--brand); }
.conc-eyebrow {
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
font-weight: 500;
color: var(--gold);
margin-bottom: 1.2rem;
}
.conc-h2 {
font-family: var(--serif);
font-size: clamp(32px, 3vw, 52px);
font-weight: 300;
color: var(--gold);
line-height: 1.1;
margin-bottom: 1.2rem;
}
.conc-h2 em { font-style: italic; color: var(--brand); }
.conc-p {
font-size: 16px;
font-weight: 300;
line-height: 1.8;
color: rgba(255,255,255,0.7);
margin-top: 1.5rem;
margin-bottom: 3rem;
max-width: 440px;
}
.conc-features {
display: flex;
flex-direction: column;
border-top: 1px solid rgba(255,255,255,0.12);
margin-bottom: 3rem;
}
.conc-feat-list { display: contents; }
.conc-feat {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.9rem 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
font-size: 16px;
font-weight: 300;
color: var(--white-dim);
letter-spacing: 0.04em;
}
.conc-feat-tick, .conc-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--brand);
flex-shrink: 0;
}
.conc-btn {
display: inline-block;
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
background: var(--brand);
color: var(--ink);
border: none;
padding: 1rem 2.5rem;
transition: background 0.2s, transform 0.15s;
align-self: flex-start;
}
.conc-btn:hover { background: var(--brand-bright); transform: translateY(-1px); } .why-kauai {
padding: var(--pad-section) var(--pad-x);
border-bottom: 1px solid var(--rule);
display: grid;
grid-template-columns: 1fr 2fr;
gap: 6rem;
align-items: start;
background: var(--cloud);
}
.why-kauai-left {
display: flex;
flex-direction: column;
}
.why-kauai-intro {
font-size: 17px;
font-weight: 300;
color: var(--ink-mid);
line-height: 1.8;
margin-top: 1.5rem;
}
.why-kauai-pillars {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border: 1px solid var(--rule);
background: var(--shore);
}
.why-kauai-pillar {
padding: 2.5rem;
border-right: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
background: var(--canvas);
transition: background 0.2s;
}
.why-kauai-pillar:nth-child(even) { border-right: none; }
.why-kauai-pillar:nth-last-child(-n+2) { border-bottom: none; }
.why-kauai-pillar:hover { background: var(--mist); }
.why-kauai-pillar-num {
font-family: var(--serif);
font-size: 40px;
font-weight: 300;
color: var(--brand);
line-height: 1;
margin-bottom: 1.25rem;
}
.why-kauai-pillar-title { font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-deep); margin-bottom: 0.6rem; }
.why-kauai-pillar-text { font-size: 16px; font-weight: 300; color: var(--ink-light); line-height: 1.65; } .contact {
padding: var(--pad-section) var(--pad-x);
border-bottom: 1px solid var(--rule);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
align-items: center;
background: var(--brand-deeper);
}
.contact-eyebrow {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--brand);
margin-bottom: 0.4rem;
}
.contact h2 {
font-family: var(--serif);
font-size: clamp(32px, 3vw, 52px);
font-weight: 300;
color: var(--gold);
line-height: 1.1;
}
.contact-row {
display: flex;
flex-direction: column;
gap: 2rem;
}
.contact-label { font-size: 13px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand); margin-bottom: 0.4rem; }
.contact-item {
font-family: var(--serif);
font-size: 28px;
font-weight: 300;
color: var(--white-dim);
letter-spacing: -0.01em;
transition: color 0.2s;
display: block;
}
.contact-item:hover { color: var(--brand); } .newsletter {
background: var(--mist);
border-bottom: 1px solid var(--rule);
display: grid;
grid-template-columns: 1fr 1fr;
}
.nl-left {
padding: 4rem var(--pad-x);
border-right: 1px solid var(--rule);
display: flex;
flex-direction: column;
justify-content: center;
}
.nl-left h3 {
font-family: var(--serif);
font-size: 32px;
font-weight: 300;
color: var(--ink);
margin-bottom: 0.6rem;
}
.nl-left p {
font-size: 13px;
font-weight: 300;
color: var(--ink-light);
line-height: 1.7;
}
.nl-right {
padding: 4rem var(--pad-x);
display: flex;
align-items: center;
}
.nl-form {
display: flex;
width: 100%;
border: 1px solid var(--rule-mid);
background: var(--canvas);
}
.nl-input {
flex: 1;
background: transparent;
border: none;
outline: none;
padding: 1rem 1.25rem;
font-family: var(--sans);
font-size: 13px;
font-weight: 300;
color: var(--ink);
}
.nl-input::placeholder { color: var(--ink-faint); }
.nl-btn {
background: var(--brand-deep);
color: #fff;
border: none;
padding: 1rem 2rem;
font-family: var(--sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: background 0.2s;
flex-shrink: 0;
}
.nl-btn:hover { background: var(--brand-deeper); } footer {
background: var(--ink);
padding: 4rem var(--pad-x) 3rem;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 4rem;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.foot-logo {
font-family: var(--serif);
font-size: 1.1rem;
font-weight: 400;
color: var(--brand);
display: block;
margin-bottom: 0.3rem;
}
.foot-tagline {
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brand);
margin-bottom: 1.25rem;
}
.foot-brand-text {
font-size: 13px;
font-weight: 300;
color: rgba(255,255,255,0.64);
line-height: 1.7;
max-width: 280px;
margin-bottom: 1.5rem;
}
.foot-social { display: flex; gap: 0.75rem; }
.foot-social-icon {
width: 34px;
height: 34px;
border: 1px solid rgba(255,255,255,0.12);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.4);
transition: border-color 0.2s, color 0.2s;
}
.foot-social-icon:hover { border-color: var(--brand); color: var(--brand); }
.foot-col h4 {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.64);
margin-bottom: 1.5rem;
}
.foot-col { display: flex; flex-direction: column; }
.foot-col a {
font-size: 13px;
font-weight: 300;
color: rgba(255,255,255,0.80);
padding: 0.45rem 0;
transition: color 0.2s;
display: block;
}
.foot-col a:hover { color: var(--brand-bright); }
.foot-col address {
font-size: 13px;
color: rgba(255,255,255,0.35);
line-height: 2;
font-style: normal;
}
.foot-col address a { color: rgba(255,255,255,0.35); display: inline; padding: 0; }
.foot-bottom {
background: var(--ink);
border-top: 1px solid rgba(255,255,255,0.06);
padding: 1.5rem var(--pad-x);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.foot-copy { font-size: 13px; color: rgba(255,255,255,0.65); font-weight: 300; letter-spacing: 0.06em; }
.foot-badges { display: flex; gap: 0.75rem; align-items: center; }
.foot-badge { height: 28px; padding: 3px 8px; border-radius: 2px; }
.foot-privacy { font-size: 13px; color: rgba(255,255,255,0.65); font-weight: 300; text-decoration: none; transition: color 0.2s; }
.foot-privacy:hover { color: var(--brand-bright); }
.foot-col-info { font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.80); padding: 0.45rem 0; display: block; line-height: 1.7; }   .prop-gallery {
max-width: 1280px;
margin: 0 auto;
background: var(--shore);
}
.prop-gallery-grid {
display: grid;
gap: 3px;
height: 520px;
overflow: hidden;
position: relative;
}
.prop-gallery-grid--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.prop-gallery-grid--2,
.prop-gallery-grid--3 { grid-template-columns: 3fr 1fr; grid-template-rows: 1fr 1fr; }
.prop-gallery-grid--4,
.prop-gallery-grid--5 { grid-template-columns: 3fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.prop-gallery-featured { grid-row: 1 / 3; }
.prop-gallery-cell {
overflow: hidden;
position: relative;
cursor: pointer;
}
.prop-gallery-cell .prop-gallery-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.35s ease;
}
.prop-gallery-cell:hover .prop-gallery-img { transform: scale(1.03); }
.prop-gallery-all-btn {
position: absolute;
bottom: 1rem;
right: 1.25rem;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 0.45rem;
background: rgba(255,255,255,0.82);
border: none;
border-radius: 6px;
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink);
padding: 0.55rem 1rem;
cursor: pointer;
transition: background 0.2s;
box-shadow: 0 1px 6px rgba(0,0,0,0.18);
}
.prop-gallery-all-btn:hover { background: rgba(255,255,255,0.96); } .prop-overlay:not([hidden]) {
position: fixed;
inset: 0;
background: #fff;
z-index: 900;
display: flex;
flex-direction: column;
overflow: hidden;
}
.prop-overlay-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem var(--pad-x);
border-bottom: 1px solid var(--cloud);
flex-shrink: 0;
}
.prop-overlay-title {
font-family: var(--serif);
font-size: 1.5rem;
font-weight: 400;
color: var(--ink);
letter-spacing: 0.01em;
}
.prop-overlay-close {
background: none;
border: none;
font-size: 18px;
color: var(--ink-mid);
cursor: pointer;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s;
}
.prop-overlay-close:hover { color: var(--ink); }
.prop-overlay-grid {
overflow-y: auto;
flex: 1;
min-height: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3px;
padding: 3px;
align-content: start;
max-width: 1280px;
margin-inline: auto;
width: 100%;
}
.prop-overlay-thumb {
position: relative;
padding-top: 75%; cursor: pointer;
background: var(--shore);
}
.prop-overlay-thumb img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.prop-overlay-thumb:hover img { transform: scale(0.99); } .prop-lightbox:not([hidden]) {
position: fixed;
inset: 0;
background: rgba(10,18,22,0.97);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.prop-lightbox-stage {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 4rem 4.5rem;
overflow: hidden;
}
.prop-lightbox-img {
max-width: 100%;
max-height: calc(100vh - 8rem);
object-fit: contain;
display: block;
box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.prop-lightbox-prev,
.prop-lightbox-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255,255,255,0.1);
border: none;
color: #fff;
font-size: 36px;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
transition: background 0.2s;
line-height: 1;
}
.prop-lightbox-prev:hover,
.prop-lightbox-next:hover { background: rgba(255,255,255,0.2); }
.prop-lightbox-prev { left: 1.5rem; }
.prop-lightbox-next { right: 1.5rem; }
.prop-lightbox-close {
position: absolute;
top: 1.25rem;
right: 1.5rem;
background: none;
border: none;
color: rgba(255,255,255,0.75);
font-size: 22px;
cursor: pointer;
z-index: 3;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s;
}
.prop-lightbox-close:hover { color: #fff; }
.prop-lightbox-counter {
position: absolute;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
font-family: var(--sans);
font-size: 12px;
letter-spacing: 0.1em;
color: rgba(255,255,255,0.55);
} .prop-single {
display: grid;
grid-template-columns: 1fr 320px;
gap: 0;
padding: 0 var(--pad-x);
border-bottom: 1px solid var(--rule);
}
.prop-single-main {
padding: 3rem 3rem 4rem 0;
border-right: 1px solid var(--rule);
}
.prop-single-sidebar {
padding: 3rem 0 3rem 2.5rem;
} .prop-single-loc {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 0.75rem;
}
.prop-single-title {
font-family: var(--serif);
font-size: clamp(28px, 3.5vw, 48px);
font-weight: 300;
color: var(--ink);
line-height: 1.15;
margin-bottom: 2rem;
} .prop-single-specs {
display: flex;
gap: 3rem;
margin-bottom: 2rem;
}
.prop-single-spec {
display: flex;
flex-direction: column;
gap: 5px;
}
.prop-single-spec-val {
font-family: var(--serif);
font-size: 2rem;
font-weight: 300;
color: var(--ink);
line-height: 1;
}
.prop-single-spec-key {
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-faint);
}
.prop-single-rule {
height: 1px;
background: var(--rule);
margin-bottom: 2rem;
} .prop-single-description {
font-size: 15px;
font-weight: 300;
line-height: 1.9;
color: var(--ink-light);
margin-bottom: 3rem;
} .prop-single-section {
margin-bottom: 3rem;
padding-top: 2.5rem;
border-top: 1px solid var(--rule);
}
.prop-single-h2 {
font-family: var(--sans);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 1.5rem;
} .prop-sleeping {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.prop-bed {
font-size: 14px;
font-weight: 300;
color: var(--ink-light);
background: var(--cloud);
padding: 0.5rem 1rem;
} .prop-amenities {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem 3rem;
}
.prop-amenity-label {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--brand-deep);
margin-bottom: 0.75rem;
}
.prop-amenity-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.prop-amenity-list li {
font-size: 13px;
font-weight: 300;
color: var(--ink-light);
line-height: 1.5;
}
.prop-policy-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 0.5rem 2rem;
}
.prop-policy-list li {
font-size: 13px;
font-weight: 300;
color: var(--ink-light);
line-height: 1.5;
padding-left: 1em;
position: relative;
}
.prop-policy-list li::before {
content: '\2013';
position: absolute;
left: 0;
color: var(--ink-faint);
} .prop-video {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.prop-video iframe,
.prop-video embed,
.prop-video object {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
} .prop-map {
overflow: hidden;
border: 1px solid var(--rule);
} .prop-reviews { overflow: hidden; } .booking-card {
border: 1px solid var(--rule);
padding: 1.5rem;
position: sticky;
top: 88px;
}
.booking-price {
font-family: var(--serif);
font-size: 1.6rem;
color: var(--ink);
margin-bottom: 1.5rem;
}
.booking-price-from {
font-family: var(--sans);
font-size: 12px;
color: var(--ink-faint);
letter-spacing: 0.06em;
vertical-align: baseline;
margin-right: 2px;
}
.booking-btn {
display: block;
width: 100%;
background: var(--gold);
color: #fff;
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
border: none;
padding: 1rem;
text-align: center;
transition: background 0.2s;
margin-bottom: 0.75rem;
}
.booking-btn:hover { background: var(--gold-bright); color: var(--ink); }
.booking-contact {
font-size: 12px;
text-align: center;
color: var(--ink-faint);
}
.booking-contact a { color: var(--brand-deep); } .booking-bar-mobile {
display: none;
} .page-content {
max-width: 720px;
margin: 0 auto;
padding: var(--pad-section) var(--pad-x);
}
.page-wide .page-content { max-width: none; padding: 0; }
.page-wide {
max-width: 1280px;
margin: 0 auto;
padding: calc(var(--pad-section) / 3) var(--pad-x);
}
.article-page {
max-width: 1000px;
margin: 0 auto;
padding: calc(var(--pad-section) / 3) var(--pad-x);
} .entry-date {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 0.75rem;
}
.entry-header { margin-bottom: 2rem; }
.entry-title {
font-family: var(--serif);
font-size: clamp(28px, 3vw, 48px);
font-weight: 300;
line-height: 1.2;
margin-top: 0.5rem;
margin-bottom: 1.5rem;
}
.entry-hero {
margin-bottom: 2rem;
}
.entry-hero img { width: 100%; height: auto; display: block; }
.entry-content {
font-size: 15px;
font-weight: 300;
line-height: 1.9;
color: var(--ink-light);
} .entry-layout {
display: grid;
grid-template-columns: 1fr 220px;
gap: 3rem;
max-width: 1000px;
margin: 0 auto;
padding: var(--pad-section) var(--pad-x);
align-items: start;
} .entry-layout .page-content {
max-width: none;
margin: 0;
padding: 0;
} .entry-sidebar {
display: flex;
flex-direction: column;
gap: 1.5rem;
position: sticky;
top: calc(72px + 1.5rem); } .entry-sidebar-banner {
display: flex;
flex-direction: column;
gap: 0.4rem;
width: 200px;
padding: 1.25rem 1rem;
border-radius: 4px;
text-decoration: none;
color: #fff;
transition: opacity 0.2s;
}
.entry-sidebar-banner:hover { opacity: 0.88; color: #fff; }
.entry-sidebar-banner--brand {
background: linear-gradient(145deg, var(--brand-deep), var(--brand-deeper));
}
.entry-sidebar-banner--gold {
background: linear-gradient(145deg, var(--gold), #8a6d3b);
}
.entry-sidebar-banner__eyebrow {
font-size: 9px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.8;
}
.entry-sidebar-banner__heading {
font-family: var(--serif);
font-size: 18px;
font-weight: 300;
line-height: 1.2;
margin-top: 0.15rem;
}
.entry-sidebar-banner__sub {
font-size: 11px;
font-weight: 300;
line-height: 1.5;
opacity: 0.85;
margin-top: 0.25rem;
}
.entry-sidebar-banner__cta {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: 0.75rem;
opacity: 0.9;
} .entry-sidebar-img-banner {
display: block;
width: 200px;
border-radius: 4px;
overflow: hidden;
transition: opacity 0.2s;
}
.entry-sidebar-img-banner:hover { opacity: 0.88; }
.entry-sidebar-img-banner img {
display: block;
width: 200px;
height: 200px;
object-fit: cover;
}
@media (max-width: 768px) {
.entry-layout {
grid-template-columns: 1fr;
}
.entry-sidebar {
position: static;
flex-direction: row;
flex-wrap: wrap;
}
.entry-sidebar-banner { width: 100%; }
} .blog-index {
padding: var(--pad-section) 0;
}
.blog-index-header {
padding: 0 var(--pad-x);
margin-bottom: 3rem;
}
.post-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
background: var(--canvas);
border-top: 1px solid var(--shore);
border-bottom: 1px solid var(--shore);
margin-bottom: 4rem;
}
.post-card {
background: var(--canvas);
border-right: 1px solid var(--shore);
border-bottom: 1px solid var(--shore);
}
.post-card:nth-child(3n) { border-right: none; }
.post-card-img {
display: block;
aspect-ratio: 3/2;
overflow: hidden;
background: var(--mist);
}
.post-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}
.post-card:hover .post-card-img img { transform: scale(1.04); }
.post-card-img-placeholder { width: 100%; height: 100%; background: var(--mist); }
.post-card-body {
padding: 1.75rem 2rem 2rem;
}
.post-card-date {
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 0.6rem;
}
.post-card-title {
font-family: var(--serif);
font-size: clamp(18px, 1.6vw, 24px);
font-weight: 300;
line-height: 1.25;
margin-bottom: 0.75rem;
}
.post-card-title a { color: inherit; text-decoration: none; }
.post-card-title a:hover { color: var(--brand-deep); }
.post-card-excerpt {
font-size: 14px;
font-weight: 300;
line-height: 1.75;
color: var(--ink-light);
margin-bottom: 1.25rem;
}
.post-card-excerpt p { margin: 0; }
.post-card-link {
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brand-deep);
text-decoration: none;
border-bottom: 1px solid var(--brand);
padding-bottom: 2px;
}
.post-card-link:hover { color: var(--brand-deeper); border-color: var(--brand-deeper); }
.blog-pagination {
text-align: center;
padding: 0 var(--pad-x) 2rem;
}
.blog-pagination .nav-links {
display: flex;
justify-content: center;
align-items: center;
gap: 0.4rem;
}
.blog-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 0.5rem;
font-size: 13px;
color: var(--ink-mid);
border: 1px solid var(--shore);
text-decoration: none;
transition: border-color 0.2s, color 0.2s;
}
.blog-pagination .page-numbers.current {
background: var(--brand-deep);
color: #fff;
border-color: var(--brand-deep);
}
.blog-pagination .page-numbers:hover:not(.current) {
border-color: var(--brand);
color: var(--brand-deep);
}
.blog-pagination .page-numbers.dots { border: none; color: var(--ink-faint); }
.blog-index-empty {
padding: 4rem var(--pad-x);
color: var(--ink-light);
font-weight: 300;
} .wpcf7 form.wpcf7-form {
max-width: 640px;
} .wpcf7 form p {
margin: 0 0 1.5rem;
}
.wpcf7 form p:last-child {
margin-bottom: 0;
} .wpcf7 label {
display: block;
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brand-deep);
margin-bottom: 0.5rem;
}
.wpcf7 label br { display: none; }  .wpcf7 .wpcf7-form-control.wpcf7-text,
.wpcf7 .wpcf7-form-control.wpcf7-email,
.wpcf7 .wpcf7-form-control.wpcf7-textarea {
display: block;
width: 100%;
font-family: var(--sans);
font-size: 14px;
font-weight: 300;
color: var(--ink);
background: var(--canvas);
border: 1px solid var(--rule-mid);
border-radius: 0;
padding: 0.75rem 1rem;
outline: none;
transition: border-color 0.2s;
appearance: none;
-webkit-appearance: none;
}
.wpcf7 .wpcf7-form-control.wpcf7-text::placeholder,
.wpcf7 .wpcf7-form-control.wpcf7-email::placeholder,
.wpcf7 .wpcf7-form-control.wpcf7-textarea::placeholder {
color: var(--ink-faint);
}
.wpcf7 .wpcf7-form-control.wpcf7-text:focus,
.wpcf7 .wpcf7-form-control.wpcf7-email:focus,
.wpcf7 .wpcf7-form-control.wpcf7-textarea:focus {
border-color: var(--brand-deep);
}
.wpcf7 .wpcf7-form-control.wpcf7-textarea {
resize: vertical;
min-height: 160px;
} .wpcf7 .wpcf7-form-control.wpcf7-not-valid {
border-color: var(--error);
}
.wpcf7 .wpcf7-not-valid-tip {
display: block;
font-family: var(--sans);
font-size: 11px;
font-weight: 400;
color: var(--error);
margin-top: 0.3rem;
} .wpcf7 .wpcf7-form-control.wpcf7-submit {
display: inline-block;
background: var(--brand-deep);
color: #fff;
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
border: none;
padding: 0.9rem 2.5rem;
cursor: pointer;
transition: background 0.2s;
}
.wpcf7 .wpcf7-form-control.wpcf7-submit:hover {
background: var(--brand-deeper);
}
.wpcf7 .wpcf7-form-control.wpcf7-submit:disabled {
opacity: 0.55;
cursor: default;
} .wpcf7 .wpcf7-spinner {
margin-left: 0.75rem;
vertical-align: middle;
} .wpcf7 .wpcf7-response-output {
margin: 1.5rem 0 0;
padding: 0.85rem 1.1rem;
font-family: var(--sans);
font-size: 13px;
font-weight: 400;
border: none;
border-left: 3px solid transparent;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: var(--brand-deep);
background: var(--brand-wash);
color: var(--brand-deeper);
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
border-color: var(--error);
background: rgba(216,90,48,0.06);
color: var(--error);
} #mc-embedded-subscribe-form {
max-width: 640px;
}
#mc-embedded-subscribe-form p {
margin: 0 0 1.5rem;
}
#mc-embedded-subscribe-form p:last-child {
margin-bottom: 0;
}
#mc-embedded-subscribe-form label {
display: block;
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brand-deep);
margin-bottom: 0.5rem;
}
#mc-embedded-subscribe-form p > br { display: none; }
#mce-EMAIL {
display: block;
width: 100%;
font-family: var(--sans);
font-size: 14px;
font-weight: 300;
color: var(--ink);
background: var(--canvas);
border: 1px solid var(--rule-mid);
border-radius: 0;
padding: 0.75rem 1rem;
outline: none;
transition: border-color 0.2s;
appearance: none;
-webkit-appearance: none;
}
#mce-EMAIL::placeholder { color: var(--ink-faint); }
#mce-EMAIL:focus { border-color: var(--brand-deep); } #mc-embedded-subscribe-form input[tabindex="-1"] { display: none !important; } .faq-group {
border-bottom: 1px solid var(--rule-dark);
padding: 3rem 0 2rem;
}
.faq-group:first-of-type { padding-top: 0; }
.faq-group > h2 {
font-family: var(--sans);
font-size: 16px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brand-deep);
margin-bottom: 1.25rem;
} .faq-item {
border-top: 1px solid var(--rule-dark);
}
.faq-item summary.faq-q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 1.1rem 0;
font-family: var(--sans);
font-size: 15px;
font-weight: 400;
color: var(--ink);
cursor: pointer;
list-style: none; -webkit-user-select: none;
user-select: none;
transition: color 0.2s;
} .faq-item summary.faq-q::-webkit-details-marker { display: none; }
.faq-item summary.faq-q::after {
content: '';
display: block;
flex-shrink: 0;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' stroke='%23326d81' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
transition: transform 0.25s ease;
}
.faq-item[open] summary.faq-q::after {
transform: rotate(45deg);
}
.faq-item[open] summary.faq-q {
color: var(--brand-deep);
} .faq-a {
padding: 0.5rem 0 1.25rem 1.5rem;
font-family: var(--sans);
font-size: 14px;
font-weight: 300;
color: var(--ink-light);
line-height: 1.75;
}
.faq-a p { margin-bottom: 0.75rem; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a { color: var(--brand-deep); text-decoration: none; }
.faq-a a:hover { text-decoration: underline; } .faq-cta {
padding: 2rem 0 0;
font-family: var(--sans);
font-size: 14px;
font-weight: 300;
color: var(--ink-light);
}
.faq-cta a {
color: var(--brand-deep);
text-decoration: none;
}
.faq-cta a:hover { text-decoration: underline; } ul.contact-details {
list-style: none;
padding: 0;
margin: 0;
}
ul.contact-details li {
padding: 1.25rem 0;
border-bottom: 1px solid var(--rule-dark);
}
ul.contact-details li:first-child {
border-top: 1px solid var(--rule-dark);
} ul.contact-details a[href^="tel"],
ul.contact-details a[href^="mailto"] {
font-family: var(--serif);
font-size: clamp(22px, 2.5vw, 32px);
font-weight: 300;
color: var(--ink);
text-decoration: none;
letter-spacing: -0.01em;
transition: color 0.2s;
display: block;
}
ul.contact-details a[href^="tel"]:hover,
ul.contact-details a[href^="mailto"]:hover {
color: var(--brand-deep);
} ul.contact-details li:last-child {
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-faint);
} @media (max-width: 1200px) {
:root { --pad-x: 40px; }
.prop-grid { grid-template-columns: repeat(2, 1fr); }
.prop-card:nth-child(3n) { border-right: 1px solid var(--shore); }
.prop-card:nth-child(2n) { border-right: none; }
.post-grid { grid-template-columns: repeat(2, 1fr); }
.post-card:nth-child(3n) { border-right: 1px solid var(--shore); }
.post-card:nth-child(2n) { border-right: none; }
.review-grid { grid-template-columns: 1fr 1fr; }
.stats-row { grid-template-columns: repeat(2, 1fr); }
.stat-cell:nth-child(2) { border-right: none; }
}
@media (max-width: 1024px) {
:root { --pad-x: 28px; }
.nav-links { display: none; }
.nav-hamburger { display: flex; }
.hero-badge { transform: scale(0.82); transform-origin: top right; }
.intro { grid-template-columns: 1fr; }
.intro-text { padding: 3rem; border-left: none; border-top: 1px solid rgba(255,255,255,0.12); }
.why { grid-template-columns: 1fr; }
.why-left { padding: 3rem; border-right: none; border-bottom: 1px solid var(--rule); }
.concierge { grid-template-columns: 1fr; }
.conc-photo { height: 280px; }
.conc-text { padding: 3rem var(--pad-x); }
.why-kauai { grid-template-columns: 1fr; gap: 3rem; }
.contact { grid-template-columns: 1fr; gap: 3rem; }
.newsletter { grid-template-columns: 1fr; }
.nl-left { border-right: none; border-bottom: 1px solid var(--rule); }
footer { grid-template-columns: 1fr 1fr; gap: 3rem; }
.prop-single { grid-template-columns: 1fr; }
.prop-single-main { border-right: none; border-bottom: 1px solid var(--rule); padding: 2.5rem 0; }
.prop-single-sidebar { display: none; }
body.single-vacation_rentals { padding-bottom: 96px; }
.booking-bar-mobile {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-top: 1px solid var(--rule);
padding: 0.875rem var(--pad-x);
padding-bottom: calc(0.875rem + env(safe-area-inset-bottom));
z-index: 200;
box-shadow: 0 -2px 12px rgba(0,0,0,0.07);
}
.booking-bar-mobile-price {
font-family: var(--serif);
font-size: 1.35rem;
color: var(--ink);
white-space: nowrap;
}
.booking-bar-mobile-price span {
font-family: var(--sans);
font-size: 13px;
color: var(--ink-faint);
margin-left: 1px;
}
.booking-bar-mobile .booking-btn {
width: auto;
white-space: nowrap;
margin-bottom: 0;
flex-shrink: 0;
}
.prop-gallery-grid { height: 440px; }
.prop-gallery-grid--4,
.prop-gallery-grid--5 { grid-template-columns: 3fr 1fr; }
.prop-gallery-cell:nth-child(n+4) { display: none; }
.prop-gallery-all-btn { display: inline-flex; }
.prop-amenities { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
:root { --pad-x: 20px; }
body { overflow-x: hidden; }
.prop-grid { grid-template-columns: 1fr; }
.prop-card { border-right: none; margin-bottom: 0.5rem; }
.prop-card:last-child { border-bottom: none; margin-bottom: 0; }
.prop-card-prev,
.prop-card-next { display: none; }
.post-grid { grid-template-columns: 1fr; }
.post-card { border-right: none; }
.review-grid { grid-template-columns: 1fr; }
.stay-grid { grid-template-columns: 1fr; }
.stay-item:first-child { min-height: 300px; }
.stay-item:not(:first-child) { aspect-ratio: 16/9; }
.why-kauai-pillars { grid-template-columns: 1fr; }
.trust-bar { grid-template-columns: 1fr 1fr; }
.prop-gallery-grid { grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; height: auto; aspect-ratio: 4/3; }
.prop-gallery-featured { grid-row: 1; }
.prop-gallery-thumb { display: none !important; }
.prop-overlay-grid { grid-template-columns: repeat(2, 1fr); }
.prop-overlay-bar { padding: 0.875rem 1.25rem; }
.prop-lightbox-stage { padding: 2.5rem 0; }
.prop-lightbox-prev, .prop-lightbox-next { display: none; }
.prop-amenities { grid-template-columns: 1fr; }
.prop-single-specs { gap: 1.5rem; flex-wrap: wrap; }
footer { grid-template-columns: 1fr; }
.stats-row { grid-template-columns: 1fr 1fr; }
.hero-h1 { font-size: 40px; }
.hero-sub { font-size: 15px; max-width: 100%; }
.hero-badge { top: 6%; right: 2%; transform: scale(0.62); transform-origin: top right; }
.search-bar { grid-template-columns: 1fr; }
.search-submit { margin: 0 0 8px 0; }
.nav-tel { display: none; }
.nav-cta { display: none; }
.hero-content { padding: 3rem var(--pad-x); }
.foot-bottom { flex-direction: column; align-items: flex-start; }
.contact-item { font-size: 22px; }
.intro-text { padding: 2rem; }
} .guide-section {
margin-bottom: 2.5rem;
padding-bottom: 2.5rem;
border-bottom: 1px solid var(--shore);
}
.guide-section:last-of-type { border-bottom: none; }
.guide-section img {
display: block;
width: 100%;
height: auto;
border-radius: 6px;
margin-bottom: 0;
}
.guide-section ul {
list-style: none;
margin: 0;
padding: 0;
}
.guide-section li {
border-bottom: 1px solid var(--shore);
margin: 0;
padding: 0;
}
.guide-section li:last-child { border-bottom: none; }
.guide-section li a {
display: block;
padding: 0.85rem 0.25rem;
font-family: var(--serif);
font-size: 1.15rem;
font-weight: 400;
color: var(--ink);
text-decoration: none;
transition: color 0.2s, padding-left 0.2s;
}
.guide-section li a::before {
content: '▹\00a0';
color: var(--brand);
font-style: normal;
}
.guide-section li a:hover {
color: var(--brand-deep);
padding-left: 0.4rem;
}
.guide-cta {
border: 1px solid var(--shore);
border-left: 4px solid var(--brand);
border-radius: 0 8px 8px 0;
padding: 2rem 2.5rem;
margin-top: 1rem;
background: var(--cloud);
}
.guide-cta h3 { margin-top: 0; } .savings-stat {
text-align: center;
padding: 2rem 1rem;
margin: 1.5rem 0;
}
.savings-num {
display: block;
font-family: var(--serif);
font-size: 2.5rem;
font-weight: 600;
color: var(--brand-deep);
line-height: 1;
margin-bottom: 0.15rem;
}
.savings-label {
font-family: var(--sans);
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ink-mid);
}
.benefit-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin: 2rem 0;
}
.benefit-card {
background: var(--cloud);
border: 1px solid var(--shore);
border-radius: 8px;
padding: 1.5rem;
}
.benefit-card strong {
display: block;
font-family: var(--sans);
font-size: 0.95rem;
font-weight: 600;
color: var(--ink);
margin-bottom: 0.4rem;
}
.benefit-card p {
margin: 0;
font-size: 0.9rem;
color: var(--ink-mid);
line-height: 1.5;
}
@media (max-width: 600px) {
.savings-num { font-size: 2.75rem; }
.benefit-grid { grid-template-columns: 1fr; }
}