/* Concierge tools section */
:root{
  --bg-panel:#ffffff;
  --text:#101010;
  --muted:#6b7280;
  --accent-amber:#C47B2A;
  --ring-amber:rgba(196,123,42,.25);
  --card:#f6f6f7;
  --radius:16px;
  --shadow-sm:0 2px 12px rgba(0,0,0,.06);
  --shadow-md:0 18px 40px rgba(0,0,0,.12);
  --hairline:rgba(16,16,16,.08);
}

.concierge{position:relative;isolation:isolate;background:#ffffff;color:var(--text)}
.concierge::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(900px 600px at 8% 20%, rgba(196,123,42,.12), rgba(196,123,42,0) 60%)}

.concierge__inner{max-width:1200px;margin:0 auto;padding:clamp(3rem,6vw,5rem) 1rem;display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center}
/* Ensure preview/content sit above decorative skull */
.concierge__inner{position:relative;z-index:1}

/* Service area section baseline (ID or class) */
#service-area, .service-area{position:relative;z-index:0}

/* Stack under 960px */
@media(max-width:959.98px){
  .concierge__inner{grid-template-columns:1fr;gap:2rem}
}

/* Left column */
.concierge__content{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease}
.concierge.is-visible .concierge__content{opacity:1;transform:none}

.concierge__content h2{font-size:clamp(1.9rem,2.8vw,2.5rem);letter-spacing:-.01em;margin:0 0 .6rem;color:var(--text)}
.concierge__content h2::after{content:"";display:block;margin-top:.55rem;height:2px;background:linear-gradient(90deg, rgba(255,192,106,.9), rgba(255,192,106,0));opacity:.65}
.concierge__lede{color:var(--muted);max-width:60ch;margin:0 0 1.15rem;line-height:1.6}

.concierge__bullets{display:grid;gap:.65rem;margin:0 0 1.2rem;padding:0;list-style:none}
.bullet{display:flex;gap:.6rem;align-items:flex-start;color:#374151}
.bullet__icon{width:14px;height:14px;margin-top:.25rem;border-radius:999px;background:linear-gradient(180deg,#FFC06A,#C47B2A);box-shadow:0 0 0 4px rgba(196,123,42,.12), 0 8px 18px rgba(0,0,0,.45)}

/* Sub-list styling for Optional add-ons */
.bullet__label{line-height:1.4}
.concierge__subbullets{list-style:none;margin:.4rem 0 0 0;padding:0;display:grid;gap:.45rem}
.concierge__subbullets .bullet{color:#374151}
.concierge__subbullets .bullet--sub .bullet__icon{width:10px;height:10px;margin-top:.35rem;box-shadow:0 0 0 3px rgba(196,123,42,.10), 0 4px 10px rgba(0,0,0,.25)}

.concierge__ctas{display:flex;gap:.75rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-radius:999px;text-decoration:none}
.btn--primary{color:#0b0d10;background:linear-gradient(180deg,#FFC06A,#C47B2A);box-shadow:0 10px 30px rgba(196,123,42,.35)}
.btn--primary:hover{filter:brightness(1.03)}
.btn--ghost{border:1px solid rgba(16,16,16,.18);color:var(--text)}
.btn--ghost:hover{background:rgba(16,16,16,.04)}
.btn:focus-visible{outline:3px solid var(--accent-amber);outline-offset:2px}

/* Keep comfortable line length in content/bullets */
.concierge__content{max-width:68ch}
@media(max-width:767.98px){
  .concierge__content{max-width:52ch}
}

/* Preview panel */
.portalPreview{background:var(--bg-panel);color:var(--text);border-radius:var(--radius);border:1px solid rgba(16,16,16,.12);box-shadow:0 12px 28px rgba(0,0,0,.15);padding:1rem;opacity:0;transform:translateY(12px);transition:opacity .6s ease .06s, transform .6s ease .06s, box-shadow .25s ease, transform .2s ease;will-change:transform}
.concierge.is-visible .portalPreview{opacity:1;transform:none}
.portalPreview:hover{transform:translateY(-6px);box-shadow:var(--shadow-md), 0 0 0 6px var(--ring-amber)}

.portalPreview__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .6rem;border-radius:999px;background:#0b0d10;color:#e5e7eb;border:1px solid rgba(255,255,255,.12)}
.badge__dot{width:8px;height:8px;border-radius:999px;background:var(--accent-amber);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%{transform:scale(.9);opacity:.8}50%{transform:scale(1.1);opacity:1}100%{transform:scale(.9);opacity:.8}}
.brandGlyph{width:22px;height:22px;background:#0b0d10;/* use logo mark as a mask to keep it crisp and black */-webkit-mask:url('/assets/img/logo.svg') no-repeat center / contain;mask:url('/assets/img/logo.svg') no-repeat center / contain;border-radius:0;box-shadow:none}

/* Tabs */
.portalPreview__tabs{display:flex;gap:.4rem;margin:.25rem 0 .9rem}
.tab{appearance:none;border:1px solid var(--hairline);background:var(--card);padding:.45rem .7rem;border-radius:999px;color:var(--text);cursor:pointer;transition:background .2s ease, transform .1s ease}
.tab.is-active{background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.08)}
.tab:active{transform:translateY(1px)}
.tab:focus-visible{outline:3px solid var(--accent-amber);outline-offset:1px}

/* Grid */
.portalPreview__grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:.6rem}
.pvCard{background:var(--card);border:1px solid var(--hairline);border-radius:12px;padding:.75rem;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.pvCard::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg, transparent, rgba(255,255,255,.12), transparent);transform:translateX(-120%);transition:transform .6s ease;pointer-events:none}
.pvCard:hover::after{transform:translateX(120%)}
.pvCard:active{transform:translateY(1px)}
.pvLabel{font-size:.78rem;color:var(--muted);margin:0 0 .35rem}
.pvValue{font-weight:600;margin:0;color:#0b0d10;display:flex;align-items:center;gap:.5rem}
.pvAvatar{width:22px;height:22px;border-radius:999px;background:linear-gradient(180deg,#d8dee9,#c5ccd8);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}

/* Ticker */
.portalPreview__ticker{margin-top:.9rem;background:var(--card);border:1px solid var(--hairline);border-radius:12px;padding:.55rem .75rem;color:#0b0d10;min-height:38px;display:flex;align-items:center}
.portalPreview__ticker .js-ticker{display:inline-block}
.portalPreview__ticker .swap{animation:tickerSwap .45s ease}
@keyframes tickerSwap{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}

/* Parallax small perspective */
.concierge .parallax{transform:translateY(0) rotateX(0) rotateY(0)}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .concierge__content,.portalPreview{opacity:1 !important;transform:none !important}
  .badge__dot{animation:none}
  .pvCard::after{transition:none}
  .portalPreview:hover{transform:none;box-shadow:var(--shadow-sm)}
}

/* Fine-tune below 960px */
@media(max-width:959.98px){
  .portalPreview{order:2}
  .concierge__content{order:1}
  .portalPreview{box-shadow:0 10px 28px rgba(0,0,0,.18)}
}

/* --- Decorative cow skull background ---------------------------------- */

/* Larger cow skull that bleeds between Concierge and Service Area */
.concierge::after{content:"";position:absolute;top:260px;right:-6vw;width:min(70vw,1100px);aspect-ratio:3/3;background-image:url('/assets/img/cow-skull.svg');background-repeat:no-repeat;background-size:contain;background-position:top right;opacity:.06;filter:grayscale(1) contrast(.9) brightness(.9);pointer-events:none;z-index:0;transform:translateY(0);-webkit-mask-image:linear-gradient(to left, #000 55%, transparent 100%);mask-image:linear-gradient(to left, #000 55%, transparent 100%)}

/* Adjust overlap for the service area to continue the bleed */
/* (Single art source) No extra element on service area */

/* Hide on mobile */
@media(max-width:767.98px){
  .concierge::after{content:none}
}

/* Optional scroll-linked parallax where supported */
@supports (animation-timeline: view()){
  @keyframes skullParallax{from{transform:translateY(-8px)}to{transform:translateY(8px)}}
  .concierge::after{animation:skullParallax 1s linear both;animation-timeline:view();animation-range:cover 0% 100%}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .concierge::after{animation:none;transform:none}
}