@charset "UTF-8";
/* ============================================================================
HKE — Premium Design Layer
Himalayan Kingdom Expedition
----------------------------------------------------------------------------
Loaded LAST, after every other theme stylesheet. This file re-skins the site
without touching the existing Litho markup: colour, typography, rhythm,
radius, shadows and the Bhutan motif language.
To roll back: delete this file and remove the 'hke_design' enqueue from
functions.php. Nothing else depends on it.
Motif language (see section 9):
Kemar — the ochre-red band with gold discs below every dzong roofline
Palbheu — the endless knot, used as divider and brand mark
Trin — the Bhutanese cloud scroll, used as a section edge
Kishuthara — woven silk motif, used as a 4–7% opacity ground
============================================================================ */
/* ============================================================
0 · TYPE POLICY
------------------------------------------------------------
The site uses its OWN two licensed faces, already self-hosted in
/fonts. No third-party font request, no Google handshake.
Vanitas-Regular - display: headings, titles, the hero H1
Brandon-Regular - text: body, nav, buttons, forms, footer
Brandon ships as a single weight. That is not a limitation to work
around, it is the constraint that makes this look expensive: the
design layer never asks for a weight above 500, so the browser
always renders the real face and never a synthesised bold.
Hierarchy therefore comes from size, letter-spacing, colour and
case - not from weight. font-synthesis is off below as a guard, so
a stray font-weight:700 in a plugin can never produce smeared
faux-bold text.
============================================================ */
html{
font-synthesis-weight:none;
font-synthesis-style:none;
}
/* ============================================================
1 · TOKENS
============================================================ */
:root{
/* Brand — kemar red. #860328 is your existing equity: unchanged. */
--hke-maroon-900:#4A0116;
--hke-maroon-800:#62021F;
--hke-maroon-700:#860328;
--hke-maroon-600:#A11333;
--hke-maroon-100:#F6E9EC;
/* Gilt — replaces #ffd700, which fails contrast at 1.4:1 on white */
--hke-gold-700:#8C6D2F;
--hke-gold-500:#B8944D;
--hke-gold-300:#D9BC7A;
--hke-gold-100:#F2E7CE;
/* Neutrals — deysho handmade-paper warmth */
--hke-ink:#1A1715;
--hke-ink-70:#4A4441;
--hke-ink-45:#7C7570;
--hke-stone:#D8D0C6;
--hke-paper:#F7F3EC;
--hke-white:#FFFFFF;
/* Mineral pigments of thangka painting — supporting only */
--hke-indigo:#1F3A5F;
--hke-pine:#2E4A3D;
--hke-saffron:#C8721F;
/* Type */
/* The theme's own faces. Both were already licensed and self-hosted;
nothing here is loaded from a third party. */
--hke-serif:'Vanitas-Regular','Iowan Old Style',Georgia,'Times New Roman',serif;
--hke-sans:'Brandon-Regular',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
--hke-fs-display:clamp(2.5rem,5.6vw,4.75rem);
--hke-fs-h1:clamp(2.125rem,4vw,3.25rem);
--hke-fs-h2:clamp(1.6rem,2.9vw,2.4rem);
--hke-fs-h3:clamp(1.2rem,1.8vw,1.6rem);
--hke-fs-lead:clamp(1.0625rem,1.3vw,1.28rem);
--hke-fs-body:1.0625rem;
--hke-fs-eyebrow:.6875rem;
/* Geometry */
--hke-r:3px;
--hke-ease:cubic-bezier(.2,.6,.2,1);
/* Motifs, inlined so no extra HTTP requests */
--hke-kishu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23860328' stroke-width='1.4'%3E%3Cpath d='M44 6 66 44 44 82 22 44Z'/%3E%3Cpath d='M44 20 56 44 44 68 32 44Z'/%3E%3Cpath d='M0 44h14M74 44h14M44 0v6M44 82v6'/%3E%3Cpath d='M6 6l10 10M82 6L72 16M6 82l10-10M82 82L72 72'/%3E%3C/g%3E%3Ccircle cx='44' cy='44' r='3' fill='%23860328'/%3E%3C/svg%3E");
--hke-kishu-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23D9BC7A' stroke-width='1.4'%3E%3Cpath d='M44 6 66 44 44 82 22 44Z'/%3E%3Cpath d='M44 20 56 44 44 68 32 44Z'/%3E%3Cpath d='M0 44h14M74 44h14M44 0v6M44 82v6'/%3E%3Cpath d='M6 6l10 10M82 6L72 16M6 82l10-10M82 82L72 72'/%3E%3C/g%3E%3Ccircle cx='44' cy='44' r='3' fill='%23D9BC7A'/%3E%3C/svg%3E");
--hke-knot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23B8944D' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M26 32h48M26 50h48M26 68h48M32 26v48M50 26v48M68 26v48'/%3E%3Cpath d='M26 32a9 9 0 0 0 0 18M74 50a9 9 0 0 1 0 18M32 26a9 9 0 0 1 18 0M50 74a9 9 0 0 0 18 0'/%3E%3Cpath d='M26 68a6 6 0 0 0 6 6M68 26a6 6 0 0 1 6 6'/%3E%3C/g%3E%3C/svg%3E");
--hke-knot-gold-300:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23D9BC7A' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M26 32h48M26 50h48M26 68h48M32 26v48M50 26v48M68 26v48'/%3E%3Cpath d='M26 32a9 9 0 0 0 0 18M74 50a9 9 0 0 1 0 18M32 26a9 9 0 0 1 18 0M50 74a9 9 0 0 0 18 0'/%3E%3Cpath d='M26 68a6 6 0 0 0 6 6M68 26a6 6 0 0 1 6 6'/%3E%3C/g%3E%3C/svg%3E");
}
/* ============================================================
2 · BASE TYPOGRAPHY
============================================================ */
body,
p, li, td, th,
.text-hke-body,
div.wpforms-container-full .wpforms-form input,
div.wpforms-container-full .wpforms-form textarea,
div.wpforms-container-full .wpforms-form select{
font-family:var(--hke-sans);
font-weight:300;
}
body{
font-size:var(--hke-fs-body);
line-height:1.75;
color:var(--hke-ink);
background-color:var(--hke-paper);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
p{ margin-bottom:1.15em; }
/* Display face — Litho routes headings through .alt-font and .title-* */
h1,h2,h3,h4,h5,h6,
.alt-font,
.title-large,.title-medium,.title-small,
.page-title-large h1,
.hke-display{
font-family:var(--hke-serif) !important;
font-weight:300;
letter-spacing:-.02em;
line-height:1.1;
font-variation-settings:'SOFT' 40,'WONK' 0;
}
h1,.title-large{ font-size:var(--hke-fs-h1); }
h2{ font-size:var(--hke-fs-h2); }
h3{ font-size:var(--hke-fs-h3); }
h4,h5{ font-size:clamp(1.1rem,1.5vw,1.35rem); line-height:1.2; }
/* Litho's .menu-font is used for nav AND for headings in the tour templates.
Keep nav in the sans; push heading-sized instances to the serif. */
.menu-font{ font-family:var(--hke-sans); }
h1.menu-font,h2.menu-font,h3.menu-font,h4.menu-font,h5.menu-font,h6.menu-font{
font-family:var(--hke-serif) !important;
letter-spacing:-.015em;
}
/* Retire the ad-hoc sizes in style.css */
.text-size55{ font-size:var(--hke-fs-h1) !important; line-height:1.1 !important; }
.text-size24{ font-size:var(--hke-fs-h3) !important; line-height:1.25 !important; }
/* Measure — long lines are the fastest way to look cheap */
.blog-content p,
.tour-hke-details p,
.hke-page-details p,
.hke-prose p{ max-width:68ch; }
/* ============================================================
3 · COLOUR CORRECTIONS
============================================================ */
/* #ffd700 was the single most damaging colour on the site. */
.text-hke-gold,
.dropdown-menu.megamenu-content li.dropdown-header{
color:var(--hke-gold-300) !important;
}
.bg-hke-gray{ background-color:var(--hke-paper) !important; }
.bg-light-gray{ background-color:var(--hke-paper) !important; }
.text-hke,
.text-extra-dark-hke,
.btn-link.text-extra-dark-hke,
a.text-extra-dark-hke-hover:hover{ color:var(--hke-maroon-700) !important; }
.bg-hke{ background:var(--hke-maroon-700) !important; }
.text-hke-body{
color:var(--hke-ink-70);
font-size:var(--hke-fs-body);
line-height:1.75;
letter-spacing:0;
text-shadow:none;
}
.text-extra-dark-gray{ color:var(--hke-ink) !important; }
.text-medium-gray,.text-light-gray{ color:var(--hke-ink-45) !important; }
/* ============================================================
4 · BUTTONS & LINKS
============================================================ */
.btn{
font-family:var(--hke-sans) !important;
font-size:.78rem !important;
font-weight:500 !important;
letter-spacing:.13em !important;
text-transform:uppercase !important;
border-radius:var(--hke-r) !important;
border-width:1px !important;
padding:1.05rem 2rem !important;
line-height:1.1 !important;
transition:all .3s var(--hke-ease) !important;
}
.btn.btn-large,.btn.btn-extra-large{ padding:1.15rem 2.4rem !important; }
.btn.btn-small{ padding:.8rem 1.5rem !important; font-size:.7rem !important; }
.btn-round-edge,.btn-round-edge-small,.btn-rounded{ border-radius:var(--hke-r) !important; }
.btn.btn-dark-hke{
background:var(--hke-maroon-700) !important;
border-color:var(--hke-maroon-700) !important;
color:#fff !important;
}
.btn.btn-dark-hke:hover,.btn.btn-dark-hke:focus{
background:var(--hke-maroon-800) !important;
border-color:var(--hke-maroon-800) !important;
color:#fff !important;
}
.btn.btn-transparent-dark-gray-hke{
background:transparent !important;
border-color:var(--hke-ink) !important;
color:var(--hke-ink) !important;
}
.btn.btn-transparent-dark-gray-hke:hover,
.btn.btn-transparent-dark-gray-hke:focus{
background:var(--hke-ink) !important;
border-color:var(--hke-ink) !important;
color:var(--hke-paper) !important;
}
/* Text link with a gold rule that draws in on hover */
.btn-link,.hke-link{
background-image:linear-gradient(var(--hke-gold-500),var(--hke-gold-500));
background-size:0% 1px;
background-repeat:no-repeat;
background-position:0 100%;
transition:background-size .4s var(--hke-ease),color .3s var(--hke-ease);
padding-bottom:.3rem;
border-bottom:0 !important;
}
.btn-link:hover,.hke-link:hover{ background-size:100% 1px; }
/* ============================================================
5 · SURFACES — sharp corners, hairlines instead of shadows
============================================================ */
.border-radius-10px,.border-radius-6px,.border-radius-5px,
.border-radius-4px,.border-radius-3px{ border-radius:var(--hke-r) !important; }
.border-radius-100,.border-radius-50,.rounded-circle{ border-radius:50% !important; }
.box-shadow-small,.box-shadow-medium,.box-shadow-large,
.box-shadow-extra-large,.box-shadow-double-large{
box-shadow:none !important;
border:1px solid var(--hke-stone) !important;
}
.box-shadow-small-hover:hover,.box-shadow-medium-hover:hover,
.box-shadow-large-hover:hover,.box-shadow-extra-large-hover:hover{
box-shadow:none !important;
border-color:var(--hke-gold-500) !important;
}
.border-color-medium-gray,.border-color-extra-light-gray,
.border-color-light-gray{ border-color:var(--hke-stone) !important; }
/* Editorial image treatment */
.blog-image img,.blog-post-image img,.tour-box img,
.grid-item img,.destination-box img{
transition:transform .8s var(--hke-ease);
will-change:transform;
}
.blog-post:hover .blog-image img,
.grid-item:hover img{ transform:scale(1.04); }
/* ============================================================
6 · SECTION RHYTHM — the biggest single lever
============================================================ */
.home .main-content > section:not(.hke-hero),
.tour-hke-details.section,
.hke-page-details.section{
padding-top:clamp(3.25rem,7vw,6.5rem) !important;
padding-bottom:clamp(3.25rem,7vw,6.5rem) !important;
}
.home .main-content > section:not(.hke-hero) > .container,
.home .main-content > section:not(.hke-hero) > .container-fluid{
max-width:1360px;
}
/* Remove the beige raster backgrounds; the motif layer replaces them */
section[style*="cloud-bg"]{ background-image:none !important; }
/* ============================================================
7 · HEADER / NAVIGATION
============================================================ */
header .navbar{
transition:background .4s var(--hke-ease),box-shadow .4s var(--hke-ease);
}
header .navbar.bg-transparent-black-light{
background:linear-gradient(180deg,rgba(15,10,8,.55),rgba(15,10,8,0)) !important;
}
header .navbar.sticky,
header .navbar.scroll-to-fixed-fixed{
background:var(--hke-paper) !important;
box-shadow:0 1px 0 var(--hke-stone) !important;
}
.navbar .navbar-nav .nav-link{
font-family:var(--hke-sans) !important;
font-size:.8rem !important;
font-weight:400 !important;
letter-spacing:.12em !important;
text-transform:uppercase !important;
position:relative;
}
.navbar .navbar-nav > li > .nav-link::after{
content:"";
position:absolute;
left:1rem; right:1rem; bottom:.2rem;
height:1px;
background:var(--hke-gold-300);
transform:scaleX(0);
transform-origin:left;
transition:transform .35s var(--hke-ease);
}
.navbar .navbar-nav > li:hover > .nav-link::after{ transform:scaleX(1); }
.dropdown-menu,.dropdown-menu.megamenu-content{ border-radius:var(--hke-r) !important; }
.dropdown-menu li a{
font-family:var(--hke-sans);
font-size:.9rem !important;
letter-spacing:.02em;
}
.dropdown-menu.megamenu-content li.dropdown-header{
font-family:var(--hke-serif) !important;
font-size:1.05rem !important;
letter-spacing:0 !important;
text-transform:none;
}
.nav-item.dropdown.megamenu .menu-back-div,
.dropdown-menu.bg-extra-dark-gray{ background:var(--hke-maroon-900) !important; }
.header-cart-icon span{
font-family:var(--hke-sans);
font-size:.8rem;
letter-spacing:.06em;
}
/* The floating Enquire tab — off-brand shopping bag, made quiet */
.theme-demos.bg-hke,.theme-demos .buy-theme.bg-hke{
background:var(--hke-maroon-700) !important;
}
.theme-demos .buy-theme{
border-radius:var(--hke-r) 0 0 var(--hke-r) !important;
}
.theme-demos .buy-theme .text-extra-large{
font-family:var(--hke-sans);
font-size:.75rem !important;
letter-spacing:.14em;
text-transform:uppercase;
}
.theme-demos .buy-theme .icon-feather-shopping-bag{ display:none !important; }
/* ============================================================
8 · FOOTER
============================================================ */
.footer-dark.bg-extra-dark-gray{
background:var(--hke-ink) !important;
position:relative;
}
/* Kemar band across the top of the footer */
.footer-dark.bg-extra-dark-gray::before{
content:"";
position:absolute; inset:0 0 auto; height:7px;
background:var(--hke-maroon-700);
}
.footer-dark.bg-extra-dark-gray::after{
content:"";
position:absolute; inset:0 0 auto; height:7px;
background-image:radial-gradient(circle at 6px 50%,var(--hke-gold-300) 0 3px,transparent 3.5px);
background-size:96px 100%;
pointer-events:none;
}
.footer-dark .footer-bottom{ position:relative; z-index:1; }
.footer-dark span.alt-font{
font-family:var(--hke-sans) !important;
font-size:.6875rem !important;
letter-spacing:.2em;
text-transform:uppercase;
color:var(--hke-gold-300) !important;
font-weight:500 !important;
}
.footer-dark a{ transition:color .3s var(--hke-ease); }
.footer-dark a:hover{ color:var(--hke-gold-300) !important; }
.footer-dark input{ border-radius:var(--hke-r) !important; }
/* ============================================================
9 · BHUTAN MOTIF LANGUAGE
One motif per screen. Always fine linework, never decoration.
============================================================ */
/* 9.1 — Kemar band. Reusable divider: */
.hke-kemar{
height:7px;
background:var(--hke-maroon-700);
position:relative;
}
.hke-kemar::after{
content:"";
position:absolute; inset:0;
background-image:radial-gradient(circle at 6px 50%,var(--hke-gold-300) 0 3px,transparent 3.5px);
background-size:96px 100%;
}
/* 9.2 — Palbheu divider: */
.hke-knot-divider{
display:flex;
align-items:center;
gap:1.5rem;
margin-block:2rem;
}
.hke-knot-divider::before,.hke-knot-divider::after{
content:"";
height:1px;
background:var(--hke-stone);
flex:1;
}
.hke-knot-divider > span{
width:30px; height:30px;
background:var(--hke-knot) center/contain no-repeat;
flex:none;
}
/* 9.3 — Kishuthara ground: add .hke-textile to any section */
.hke-textile{ position:relative; isolation:isolate; }
.hke-textile::before{
content:"";
position:absolute; inset:0; z-index:-1;
background-image:var(--hke-kishu);
background-size:88px 88px;
opacity:.04;
pointer-events:none;
}
.hke-textile.hke-on-dark::before{
background-image:var(--hke-kishu-gold);
opacity:.14;
}
/* 9.4 — Eyebrow. The cheapest premium device on the page. */
.hke-eyebrow{
display:flex;
align-items:center;
gap:.75rem;
font-family:var(--hke-sans);
font-size:var(--hke-fs-eyebrow);
font-weight:500;
letter-spacing:.2em;
text-transform:uppercase;
color:var(--hke-gold-700);
margin:0 0 1rem;
}
.hke-eyebrow::before{
content:"";
width:26px; height:1px;
background:var(--hke-gold-500);
flex:none;
}
.hke-eyebrow.hke-center{ justify-content:center; }
.hke-eyebrow.hke-light{ color:var(--hke-gold-300); }
.hke-eyebrow.hke-light::before{ background:var(--hke-gold-300); }
/* ============================================================
10 · HERO (inc/hero.php)
============================================================ */
.hke-hero{
position:relative;
min-height:100svh;
min-height:100vh;
display:flex;
align-items:flex-end;
overflow:hidden;
padding:0 !important;
margin:0;
}
.hke-hero__media{ position:absolute; inset:0; }
.hke-hero__media img{
width:100%; height:100%;
object-fit:cover;
object-position:center;
}
@keyframes hke-kenburns{ from{ transform:scale(1); } to{ transform:scale(1.08); } }
/* --- Rotating gallery ---------------------------------------------------
The original theme showed every post in the "slider" category full-bleed.
That gallery is the Bhutanese character of the page, so it stays; the
headline simply sits still on top of it instead of rotating with it.
Ken Burns runs on the ACTIVE slide only and restarts on each activation,
so the drift always begins from rest rather than jumping mid-zoom.
----------------------------------------------------------------------- */
.hke-hero__swiper{
position:absolute; inset:0;
width:100%; height:100%;
overflow:hidden;
/* Swiper's own stylesheet sets z-index:1 on .swiper-container, which would
paint the slides OVER .hke-hero__scrim and leave the headline sitting on
raw photograph. Force it back below the scrim. */
z-index:0;
}
.hke-hero__swiper .swiper-wrapper{ height:100%; }
.hke-hero__swiper .swiper-slide{
height:100%;
overflow:hidden;
background:var(--hke-ink); /* no white flash between fades */
}
.hke-hero__swiper .swiper-slide img{ transform:scale(1); }
.hke-hero__swiper .swiper-slide-active img{
animation:hke-kenburns 9s var(--hke-ease) forwards;
}
/* Pagination: hairline bars, not bubbles. Gold marks the current slide. */
.hke-hero__dots{
position:absolute; left:0; right:0; bottom:2.4rem;
z-index:3;
display:flex; justify-content:center; align-items:center; gap:.5rem;
pointer-events:auto;
}
.hke-hero__dots .swiper-pagination-bullet{
width:26px; height:2px;
border-radius:0;
background:rgba(255,255,255,.42);
opacity:1;
margin:0 !important;
transition:background .45s var(--hke-ease), width .45s var(--hke-ease);
}
.hke-hero__dots .swiper-pagination-bullet:hover{ background:rgba(255,255,255,.75); }
.hke-hero__dots .swiper-pagination-bullet-active{
background:var(--hke-gold-300);
width:40px;
}
/* The scrim exists to make text legible, not to dim the photograph. These
images ARE the Bhutanese character of the page, so the gradient is kept as
light as legibility allows: roughly 67% darkness behind the headline at
bottom-left, falling to near-clear across the upper two thirds where the
subject of each picture actually sits. Legibility is topped up by a soft
text-shadow below rather than by more black. */
.hke-hero__scrim{
position:absolute; inset:0;
z-index:1; /* above the slides, below .hke-hero__inner (2) */
pointer-events:none;
background:
/* A wash anchored to the text column itself, not to a viewport height.
This is what keeps the headline readable over the bright snowfields
while leaving the right-hand side of every photograph clear. It moves
with the copy, so it holds at any hero height. */
radial-gradient(ellipse 95% 72% at 14% 86%,
rgba(15,10,8,.78) 0%,
rgba(15,10,8,.52) 42%,
rgba(15,10,8,.18) 66%,
transparent 80%),
linear-gradient(180deg,
rgba(15,10,8,.30) 0%, /* just enough for the nav to read */
rgba(15,10,8,.02) 22%,
rgba(15,10,8,.05) 46%, /* the photograph's subject sits here: clear */
rgba(15,10,8,.22) 68%,
rgba(15,10,8,.48) 88%,
rgba(15,10,8,.58) 100%),
linear-gradient(90deg,rgba(15,10,8,.34) 0%,rgba(15,10,8,.08) 52%,transparent 76%);
}
/* Legibility without flooding the whole frame with black. The gallery runs
from bright snowfields to dark monastery interiors, so the headline cannot
rely on the photograph behind it: the shadow carries the contrast on the
bright slides, the gradient carries it on the dark ones. */
.hke-hero h1,
.hke-hero__lead,
.hke-hero .hke-eyebrow{
text-shadow:0 2px 26px rgba(10,7,5,.80), 0 1px 4px rgba(10,7,5,.65);
}
.hke-hero__inner{
position:relative; z-index:2;
width:100%;
padding-bottom:clamp(3rem,7vw,5.5rem);
}
.hke-hero h1{
font-family:var(--hke-serif) !important;
font-size:var(--hke-fs-display) !important;
font-weight:300;
line-height:1.05;
color:#fff;
max-width:15ch;
margin:0 0 1.5rem;
text-wrap:balance;
text-shadow:0 1px 24px rgba(10,6,4,.45);
}
.hke-hero__lead{
color:rgba(255,255,255,.87);
font-size:var(--hke-fs-lead);
max-width:46ch;
margin:0 0 2rem;
font-weight:300;
text-shadow:0 1px 20px rgba(10,6,4,.45);
}
.hke-hero .hke-eyebrow{ text-shadow:0 1px 20px rgba(10,6,4,.5); }
.hke-hero__cta{ display:flex; gap:1rem; flex-wrap:wrap; }
.hke-hero__cta .btn-ghost-light{
background:transparent !important;
border-color:rgba(255,255,255,.55) !important;
color:#fff !important;
}
.hke-hero__cta .btn-ghost-light:hover{
background:#fff !important;
border-color:#fff !important;
color:var(--hke-ink) !important;
}
.hke-hero__cue{
position:absolute; left:50%; bottom:1.75rem;
transform:translateX(-50%);
z-index:3;
display:grid; justify-items:center; gap:.55rem;
font-family:var(--hke-sans);
font-size:.5625rem;
letter-spacing:.28em;
text-transform:uppercase;
color:var(--hke-gold-300);
opacity:.85;
}
.hke-hero__cue i{
width:30px; height:30px;
background:var(--hke-knot-gold-300) center/contain no-repeat;
animation:hke-float 3.4s var(--hke-ease) infinite;
}
@keyframes hke-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }
/* Trust strip directly under the hero */
.hke-trust{
background:var(--hke-white);
border-bottom:1px solid var(--hke-stone);
}
.hke-trust ul{
list-style:none; margin:0; padding:1.3rem 0;
display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.25rem;
}
.hke-trust li{
font-family:var(--hke-sans);
font-size:.72rem;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--hke-ink-70);
display:flex; align-items:center; gap:.6rem;
}
.hke-trust li i{ color:var(--hke-gold-500); font-size:.9rem; }
/* ============================================================
11 · MOTION
============================================================ */
.wow{ will-change:opacity,transform; }
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
scroll-behavior:auto !important;
}
.hke-hero__media img,
.hke-hero__swiper .swiper-slide-active img{ animation:none !important; }
}
/* ============================================================
12 · ACCESSIBILITY
============================================================ */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
outline:2px solid var(--hke-gold-500) !important;
outline-offset:3px !important;
}
.hke-skip-link{
position:absolute; left:-9999px; top:0; z-index:9999;
background:var(--hke-maroon-700); color:#fff;
padding:.85rem 1.5rem;
font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
}
.hke-skip-link:focus{ left:0; }
.hke-visually-hidden{
position:absolute !important;
width:1px; height:1px;
margin:-1px; padding:0;
overflow:hidden;
clip:rect(0 0 0 0);
white-space:nowrap; border:0;
}
/* ============================================================
13 · RESPONSIVE
============================================================ */
@media (max-width:991px){
.navbar .navbar-nav .nav-link{ font-size:.95rem !important; }
.hke-hero{ min-height:88svh; min-height:88vh; }
}
@media (max-width:767px){
:root{ --hke-fs-body:1rem; }
.hke-hero__cue{ display:none; }
.hke-hero__cta .btn{ flex:1 1 auto; justify-content:center; text-align:center; }
.hke-eyebrow{ align-items:flex-start; }
.hke-eyebrow::before{ margin-top:.62em; }
.hke-trust ul{ justify-content:flex-start; gap:.85rem 1.5rem; }
.footer-dark.bg-extra-dark-gray::after{ background-size:64px 100%; }
}