/* ==========================================================================
   Site theme layer
   --------------------------------------------------------------------------
   Plain CSS (no build step). Colours/fonts come from Admin → Settings →
   Theme and are injected as CSS variables by layouts/app.blade.php.
   It re-skins the hard-coded Tailwind brand classes used on public pages,
   so any site (society, IT firm, restaurant…) can change its palette
   without touching templates or rebuilding assets.
   ========================================================================== */
:root {
    --brand-primary: #7a1d2c;
    --brand-primary-dark: #5b1420;
    --brand-accent: #e3b23c;
    --brand-ink: #1d2440;
    --brand-surface: #f8f3ea;
    --brand-heading-font: "Playfair Display", Georgia, "Times New Roman", serif;
    --brand-body-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --brand-line: color-mix(in srgb, var(--brand-ink) 12%, transparent);
    --brand-muted: color-mix(in srgb, var(--brand-ink) 68%, white);
}

body.site-themed { font-family: var(--brand-body-font); }

/* ---- Re-skin legacy brand classes on public pages --------------------- */
.site-themed .bg-\[\#0b1d33\],
.site-themed .bg-\[\#0C2340\],
.site-themed .bg-\[\#081a2e\] { background-color: var(--brand-primary-dark) !important; }
.site-themed .hover\:bg-\[\#0b1d33\]:hover,
.site-themed .hover\:bg-\[\#071628\]:hover { background-color: var(--brand-primary-dark) !important; }

.site-themed .bg-\[\#be123c\] { background-color: var(--brand-primary) !important; }
.site-themed .bg-\[\#be123c\]:hover,
.site-themed .hover\:bg-\[\#be123c\]:hover,
.site-themed .hover\:bg-rose-700:hover { background-color: var(--brand-primary-dark) !important; }

.site-themed .text-\[\#be123c\],
.site-themed .hover\:text-\[\#be123c\]:hover { color: var(--brand-primary) !important; }
.site-themed .border-\[\#be123c\] { border-color: var(--brand-primary) !important; }

.site-themed .text-\[\#0C2340\],
.site-themed .text-\[\#0c2340\],
.site-themed .text-\[\#0b1d33\],
.site-themed .hover\:text-\[\#0C2340\]:hover { color: var(--brand-ink) !important; }

.site-themed .from-\[\#0b1d33\],
.site-themed .from-\[\#0C2340\] { --tw-gradient-from: var(--brand-primary-dark) !important; }
.site-themed .via-\[\#0b1d33\] { --tw-gradient-via: var(--brand-primary-dark) !important; }
.site-themed .to-\[\#0b1d33\] { --tw-gradient-to: var(--brand-primary-dark) !important; }
.site-themed .via-\[\#0b1d33\]\/60 { --tw-gradient-via: color-mix(in srgb, var(--brand-primary-dark) 60%, transparent) !important; }
.site-themed .to-\[\#0b1d33\]\/40 { --tw-gradient-to: color-mix(in srgb, var(--brand-primary-dark) 40%, transparent) !important; }

.site-themed .text-blue-900,
.site-themed .text-blue-950 { color: var(--brand-ink) !important; }
.site-themed .hover\:text-blue-700:hover { color: var(--brand-primary) !important; }
.site-themed .bg-blue-900 { background-color: var(--brand-primary) !important; }
.site-themed .hover\:bg-blue-950:hover { background-color: var(--brand-primary-dark) !important; }
.site-themed .bg-slate-50 { background-color: var(--brand-surface); }

.site-themed main h1,
.site-themed main h2 { font-family: var(--brand-heading-font); letter-spacing: -0.01em; }

/* ---- Decorative strip (e.g. prayer flags, brand bands) ---------------- */
.site-strip { display: flex; height: 5px; width: 100%; }
.site-strip > span { flex: 1 1 0; }

/* ---- Buttons ------------------------------------------------------------ */
.btn-brand, .btn-ghost, .btn-accent, .btn-outline {
    display: inline-flex; align-items: center; gap: .55rem;
    font-weight: 700; font-size: .875rem; line-height: 1;
    padding: .9rem 1.4rem; border-radius: 999px;
    transition: background-color .2s, color .2s, border-color .2s, transform .2s;
    text-decoration: none; white-space: nowrap;
}
.btn-brand { background: var(--brand-primary); color: #fff; border: 1.5px solid var(--brand-primary); }
.btn-brand:hover { background: var(--brand-primary-dark); border-color: var(--brand-primary-dark); }
.btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.75); }
.btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn-accent { background: var(--brand-accent); color: var(--brand-ink); border: 1.5px solid var(--brand-accent); }
.btn-accent:hover { filter: brightness(1.06); }
.btn-outline { background: transparent; color: var(--brand-primary); border: 1.5px solid var(--brand-primary); }
.btn-outline:hover { background: var(--brand-primary); color: #fff; }
.btn-brand svg, .btn-ghost svg, .btn-accent svg, .btn-outline svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.btn-sm { padding: .65rem 1.05rem; font-size: .8rem; }

a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--brand-accent); outline-offset: 2px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.sh { background: #fff; position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--brand-line); }
.sh-top { background: var(--brand-primary-dark); color: rgba(255,255,255,.82); font-size: .75rem; }
.sh-top a { color: inherit; text-decoration: none; }
.sh-top a:hover { color: #fff; }
.sh-wrap { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .sh-wrap { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .sh-wrap { padding: 0 2rem; } }
.sh-top .sh-wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.25rem; }
.sh-top-left, .sh-top-right { display: flex; align-items: center; gap: 1.25rem; }
.sh-top-accent { color: var(--brand-accent) !important; font-weight: 700; }
.sh-main { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 5.25rem; }
.sh-brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; flex-shrink: 0; }
.sh-brand img { height: 3.6rem; width: auto; max-width: 240px; object-fit: contain; }
.sh-brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.sh-brand-name { font-family: var(--brand-heading-font); font-weight: 700; font-size: 1.35rem; color: var(--brand-primary); }
.sh-brand-tag { font-family: var(--brand-heading-font); font-size: .95rem; color: var(--brand-primary); opacity: .85; margin-top: .1rem; }
.sh-brand-mark { width: 3.2rem; height: 3.2rem; border-radius: 999px; background: var(--brand-primary); color: var(--brand-accent);
    display: flex; align-items: center; justify-content: center; font-family: var(--brand-heading-font); font-weight: 700; font-size: 1.15rem; }
.sh-nav { display: none; align-items: center; gap: .25rem; }
@media (min-width: 1024px) { .sh-nav { display: flex; } }
.sh-link { position: relative; display: inline-flex; align-items: center; gap: .25rem; padding: .6rem .7rem; font-size: .875rem;
    font-weight: 500; color: var(--brand-ink); text-decoration: none; background: none; border: 0; cursor: pointer; }
.sh-link:hover { color: var(--brand-primary); }
.sh-link.is-current { color: var(--brand-primary); font-weight: 700; }
.sh-link.is-current::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .2rem; height: 2px; background: var(--brand-primary); border-radius: 2px; }
.sh-drop { position: absolute; left: 0; top: 100%; min-width: 14rem; background: #fff; border: 1px solid var(--brand-line);
    border-radius: .75rem; box-shadow: 0 18px 40px -18px rgba(0,0,0,.25); padding: .4rem; z-index: 50; }
.sh-drop a { display: block; padding: .6rem .8rem; border-radius: .5rem; font-size: .82rem; color: var(--brand-ink); text-decoration: none; }
.sh-drop a:hover { background: var(--brand-surface); color: var(--brand-primary); }
.sh-actions { display: flex; align-items: center; gap: .6rem; }
.sh-signin { font-size: .8rem; font-weight: 600; color: var(--brand-ink); text-decoration: none; display: none; }
@media (min-width: 1280px) { .sh-signin { display: inline; } }
.sh-cta { display: none !important; }
@media (min-width: 640px) { .sh-cta { display: inline-flex !important; } }
.sh-burger { display: inline-flex; padding: .55rem; border-radius: .5rem; color: var(--brand-ink); background: none; border: 0; cursor: pointer; }
.sh-burger:hover { background: var(--brand-surface); }
.sh-burger svg { width: 1.4rem; height: 1.4rem; }
@media (min-width: 1024px) { .sh-burger { display: none; } }
.sh-pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 700; padding: .45rem .8rem; border-radius: 999px; text-decoration: none; }
.sh-pill-admin { background: var(--brand-accent); color: var(--brand-ink); }
.sh-pill-member { background: var(--brand-surface); color: var(--brand-primary); border: 1px solid var(--brand-line); }
.sh-mobile { border-top: 1px solid var(--brand-line); background: #fff; padding: .5rem 1rem 1.5rem; }
.sh-mobile a, .sh-mobile button.sh-mlink { display: flex; width: 100%; justify-content: space-between; padding: .75rem .5rem; font-size: .92rem;
    font-weight: 600; color: var(--brand-ink); text-decoration: none; border: 0; background: none; border-bottom: 1px solid var(--brand-line); text-align: left; cursor: pointer; }
.sh-mobile .sh-msub a { padding-left: 1.25rem; font-size: .85rem; font-weight: 500; }
.sh-mobile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding-top: 1rem; }
.sh-mobile-actions a { justify-content: center; border-bottom: 0 !important; }

/* ==========================================================================
   Footer
   ========================================================================== */
.sf { background: var(--brand-primary-dark); color: rgba(255,255,255,.78); font-size: .85rem; }
.sf a { color: inherit; text-decoration: none; }
.sf a:hover { color: #fff; }
.sf-grid { display: grid; gap: 2.5rem; padding: 3.5rem 0 2.5rem; }
@media (min-width: 768px) { .sf-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
@media (min-width: 1024px) { .sf-grid { grid-template-columns: 1.4fr 1.3fr 1.2fr 1.3fr; } .sf-grid[style*="--cols:5"] { grid-template-columns: 1.4fr 1.2fr 1fr 1.1fr 1.3fr; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.sf-brand { display: flex; align-items: center; gap: .8rem; }
.sf-brand img { height: 3.6rem; width: auto; max-width: 220px; object-fit: contain; }
.sf-brand-name { font-family: var(--brand-heading-font); font-size: 1.25rem; font-weight: 700; color: #fff; line-height: 1.1; }
.sf-brand-tag { font-family: var(--brand-heading-font); color: rgba(255,255,255,.8); }
.sf-desc { margin-top: 1rem; line-height: 1.65; max-width: 22rem; color: rgba(255,255,255,.7); }
.sf h4 { font-family: var(--brand-body-font); font-size: .85rem; font-weight: 700; color: var(--brand-accent); margin: 0 0 1rem; }
.sf-links { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.sf-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.sf-contact li { display: flex; gap: .65rem; align-items: flex-start; }
.sf-contact svg { width: 1rem; height: 1rem; color: var(--brand-accent); flex-shrink: 0; margin-top: .15rem; }
.sf-social { display: flex; gap: .55rem; margin-bottom: 1.1rem; }
.sf-social a { width: 2.1rem; height: 2.1rem; border-radius: 999px; background: rgba(255,255,255,.1); display: inline-flex; align-items: center; justify-content: center; }
.sf-social a:hover { background: var(--brand-accent); color: var(--brand-ink); }
.sf-social svg { width: 1rem; height: 1rem; }
.sf-sub { display: flex; background: #fff; border-radius: .5rem; overflow: hidden; max-width: 22rem; }
.sf-sub input { flex: 1; min-width: 0; border: 0; padding: .7rem .85rem; font-size: .8rem; color: var(--brand-ink); background: #fff; }
.sf-sub input:focus { outline: none; box-shadow: none; }
.sf-sub button { background: var(--brand-primary); color: #fff; font-weight: 700; font-size: .78rem; padding: 0 1rem; border: 0; cursor: pointer; }
.sf-sub button:hover { background: var(--brand-ink); }
.sf-note { font-size: .75rem; color: rgba(255,255,255,.6); margin-top: .5rem; }
.sf-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 1.25rem 0; display: flex; flex-direction: column; gap: .75rem;
    align-items: center; justify-content: space-between; font-size: .78rem; color: rgba(255,255,255,.6); }
@media (min-width: 640px) { .sf-bottom { flex-direction: row; } }
.sf-legal { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; align-items: center; }
.sf-legal .sep { color: var(--brand-accent); font-size: .6rem; }

/* ==========================================================================
   Home page
   ========================================================================== */
.hp { background: var(--brand-surface); color: var(--brand-ink); }
.hp-wrap { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .hp-wrap { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .hp-wrap { padding: 0 2rem; } }
.hp-serif { font-family: var(--brand-heading-font); }
.hp-kicker { font-size: .8rem; font-weight: 700; color: var(--brand-primary); margin: 0 0 .45rem; letter-spacing: .02em; }
.hp-h2 { font-family: var(--brand-heading-font); font-size: clamp(1.7rem, 3vw, 2.35rem); line-height: 1.15; font-weight: 700; color: var(--brand-ink); margin: 0; }
.hp-lead { font-size: .95rem; line-height: 1.75; color: var(--brand-muted); }
.hp-sec { padding: 4.5rem 0; }
.hp-sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.hp-more { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 700; color: var(--brand-primary); text-decoration: none; }
.hp-more:hover { text-decoration: underline; text-underline-offset: 4px; }
.hp-more svg { width: 1rem; height: 1rem; }

/* Hero */
.hp-hero { position: relative; overflow: hidden; color: #fff; background: var(--brand-primary-dark); }
.hp-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hp-hero-shade { position: absolute; inset: 0; }
.hp-hero-inner { position: relative; padding: 6rem 0 6.5rem; min-height: 30rem; display: flex; align-items: center; }
@media (min-width: 1024px) { .hp-hero-inner { min-height: 36rem; } }
.hp-hero-copy { max-width: 36rem; }
.hp-hero h1 { font-family: var(--brand-heading-font); font-weight: 700; font-size: clamp(2.4rem, 5.4vw, 4rem); line-height: 1.08; margin: 0; text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.hp-hero h1 .l2 { display: block; color: var(--brand-accent); }
.hp-hero p { font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.6; margin: 1.4rem 0 0; color: rgba(255,255,255,.94); max-width: 30rem; }
.hp-hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.1rem; }
.hp-hero-search { margin-top: 1.6rem; display: flex; background: #fff; border-radius: 999px; padding: .3rem; max-width: 30rem; }
.hp-hero-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: .6rem 1rem; font-size: .9rem; color: var(--brand-ink); }
.hp-hero-search input:focus { outline: none; box-shadow: none; }

/* Welcome + pillars */
.hp-welcome { background: #fff; border-bottom: 1px solid var(--brand-line); }
.hp-welcome-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .hp-welcome-grid { grid-template-columns: 5fr 7fr; } }
.hp-welcome .hp-h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.hp-welcome .hp-lead { margin: 1.2rem 0 1.8rem; max-width: 32rem; }
.hp-stats { display: flex; flex-wrap: wrap; gap: 1.75rem; margin: -0.4rem 0 1.8rem; }
.hp-stat b { display: block; font-family: var(--brand-heading-font); font-size: 1.7rem; color: var(--brand-primary); line-height: 1; }
.hp-stat span { font-size: .78rem; color: var(--brand-muted); }
.hp-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .hp-pillars.n4, .hp-pillars.n8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hp-pillars.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hp-pillar { text-align: center; padding: 1.4rem 1.1rem; text-decoration: none; color: inherit; border-left: 1px solid var(--brand-line); }
.hp-pillars > .hp-pillar:first-child { border-left: 0; }
@media (max-width: 767px) { .hp-pillar:nth-child(odd) { border-left: 0; } .hp-pillar:nth-child(n+3) { border-top: 1px solid var(--brand-line); } }
.hp-pillar-icon { height: 3.4rem; display: flex; align-items: center; justify-content: center; margin-bottom: .9rem; }
.hp-pillar-icon svg { width: 3.1rem !important; height: 3.1rem !important; color: var(--pillar-color, var(--brand-primary)) !important; }
.hp-pillar h3 { font-size: .98rem; font-weight: 700; margin: 0 0 .45rem; color: var(--brand-ink); }
.hp-pillar p { font-size: .82rem; line-height: 1.6; color: var(--brand-muted); margin: 0; }
.hp-pillar:hover h3 { color: var(--brand-primary); }

/* Cards (events + news) */
.hp-cards { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
.hp-card { background: #fff; border-radius: .6rem; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column;
    border: 1px solid var(--brand-line); transition: box-shadow .25s, transform .25s; }
.hp-card:hover { box-shadow: 0 22px 40px -26px rgba(0,0,0,.35); transform: translateY(-2px); }
.hp-card-img { position: relative; aspect-ratio: 16 / 10; background: var(--brand-surface); overflow: hidden; }
.hp-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-date { position: absolute; left: .9rem; bottom: -1px; background: var(--brand-primary); color: #fff; text-align: center;
    padding: .45rem .7rem .4rem; border-radius: .35rem .35rem 0 0; min-width: 3.3rem; }
.hp-date b { display: block; font-size: 1.35rem; line-height: 1; font-weight: 800; }
.hp-date span { display: block; font-size: .65rem; font-weight: 700; margin-top: .2rem; letter-spacing: .06em; }
.hp-card-body { padding: 1.1rem 1.15rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.hp-card-body h3 { font-size: 1rem; font-weight: 700; line-height: 1.35; margin: 0; color: var(--brand-ink); }
.hp-card:hover h3 { color: var(--brand-primary); }
.hp-meta { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .4rem; font-size: .78rem; color: var(--brand-muted); }
.hp-meta li { display: flex; gap: .45rem; align-items: center; }
.hp-meta svg { width: .95rem; height: .95rem; color: var(--brand-primary); flex-shrink: 0; }
.hp-card-foot { margin-top: auto; padding-top: .9rem; display: flex; justify-content: flex-end; }
.hp-go { width: 1.7rem; height: 1.7rem; border-radius: 999px; border: 1.5px solid var(--brand-primary); color: var(--brand-primary);
    display: inline-flex; align-items: center; justify-content: center; }
.hp-card:hover .hp-go { background: var(--brand-primary); color: #fff; }
.hp-go svg { width: .9rem; height: .9rem; }
.hp-news-date { font-size: .74rem; font-weight: 600; color: var(--brand-primary); margin-bottom: .4rem; }
.hp-news-ex { font-size: .82rem; line-height: 1.6; color: var(--brand-muted); margin: .55rem 0 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hp-events { background: var(--brand-surface); }

/* Spotlight (image + story) */
.hp-spot { display: grid; background: #fff; overflow: hidden; position: relative; }
@media (min-width: 1024px) { .hp-spot { grid-template-columns: 1fr 1fr; min-height: 26rem; } }
.hp-spot-img { min-height: 18rem; background-size: cover; background-position: center; }
.hp-spot-copy { position: relative; padding: 3.5rem 1.5rem; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 1024px) { .hp-spot-copy { padding: 3.5rem 4rem; } }
.hp-spot-copy > * { position: relative; max-width: 34rem; }
.hp-spot-copy .hp-lead { margin: 1.2rem 0 1.8rem; }
.hp-spot-art { position: absolute !important; right: 0; bottom: 0; width: 55%; max-width: none !important; opacity: .55; pointer-events: none; color: var(--brand-accent); }

/* News */
.hp-news { background: #fff; border-top: 1px solid var(--brand-line); }

/* Gallery + join band */
.hp-band { display: grid; color: #fff; }
@media (min-width: 1024px) { .hp-band.two { grid-template-columns: 61fr 39fr; } }
.hp-band-gal { background: var(--brand-primary-dark); padding: 2.6rem 1.5rem; position: relative; overflow: hidden; }
@media (min-width: 1024px) { .hp-band-gal { padding: 2.6rem 2.5rem 2.6rem max(2rem, calc((100vw - 80rem) / 2 + 2rem)); } }
.hp-band-join { background: var(--brand-primary); padding: 2.6rem 1.5rem; position: relative; overflow: hidden; }
@media (min-width: 1024px) { .hp-band-join { padding: 2.6rem max(2rem, calc((100vw - 80rem) / 2 + 2rem)) 2.6rem 2.5rem; } }
.hp-band .hp-kicker { color: var(--brand-accent); }
.hp-band h2 { font-family: var(--brand-heading-font); font-weight: 700; font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.2; margin: 0; color: #fff; }
.hp-band p { font-size: .9rem; line-height: 1.65; color: rgba(255,255,255,.85); margin: .8rem 0 1.3rem; max-width: 26rem; }
.hp-gal-row { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.2rem; }
.hp-gal-strip { display: flex; gap: 2px; border-radius: .3rem; overflow: hidden; flex: 1 1 22rem; max-width: 34rem; }
.hp-gal-strip a { flex: 1 1 0; aspect-ratio: 1 / 1; overflow: hidden; display: block; }
.hp-gal-strip img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.hp-gal-strip a:hover img { transform: scale(1.06); }
.hp-knot { position: absolute; right: -2.5rem; bottom: -2.5rem; width: 10rem; height: 10rem; color: var(--brand-accent); opacity: .18; pointer-events: none; }

/* Directory + plans on themed home */
.hp-biz-logo { position: absolute; left: .8rem; bottom: .8rem; width: 3rem; height: 3rem; border-radius: .5rem; background: #fff; padding: .2rem; box-shadow: 0 4px 10px rgba(0,0,0,.15); }
.hp-biz-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: .35rem; }
.hp-tag { font-size: .72rem; font-weight: 700; color: var(--brand-primary); margin-bottom: .3rem; }
.hp-plans { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.hp-plan { background: #fff; border: 1px solid var(--brand-line); border-radius: .75rem; padding: 1.8rem; display: flex; flex-direction: column; }
.hp-plan.pop { border: 2px solid var(--brand-primary); }
.hp-plan-badge { align-self: flex-start; font-size: .7rem; font-weight: 700; background: var(--brand-accent); color: var(--brand-ink); border-radius: 999px; padding: .25rem .65rem; margin-bottom: .8rem; }
.hp-plan h3 { font-family: var(--brand-heading-font); font-size: 1.35rem; margin: 0; }
.hp-plan-price { font-size: 2.2rem; font-weight: 800; color: var(--brand-primary); margin: 1rem 0 .2rem; }
.hp-plan-price small { font-size: .8rem; font-weight: 600; color: var(--brand-muted); }
.hp-plan ul { list-style: none; padding: 0; margin: 1rem 0 1.5rem; display: grid; gap: .5rem; font-size: .85rem; color: var(--brand-muted); }
.hp-plan li { display: flex; gap: .5rem; }
.hp-plan li::before { content: ""; width: .45rem; height: .45rem; border-radius: 999px; background: var(--brand-accent); margin-top: .45rem; flex-shrink: 0; }
.hp-plan .btn-brand, .hp-plan .btn-outline { margin-top: auto; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
    .hp-card, .hp-gal-strip img, .btn-brand, .btn-ghost, .btn-accent, .btn-outline { transition: none; }
    .hp-card:hover { transform: none; }
}

/* Mobile: hero copy sits over the busiest part of the photo, so darken evenly */
@media (max-width: 767px) {
    .hp-hero-shade { background: rgba(18, 14, 28, .62) !important; }
    .hp-hero-inner { padding: 4.5rem 0; min-height: 0; }
}
/* Keep light strip colours (e.g. white) visible against a white header */
.site-strip { box-shadow: inset 0 -1px 0 rgba(0,0,0,.06); }