/* =========================================================
   GHANA FUGU — Homepage re-skin: "Refined Heritage" (Direction 2)
   Loads AFTER style.css. Homepage-only. Overrides palette,
   typography and key components. Content/markup unchanged.
   ========================================================= */

:root {
    /* D2 palette — calmer, warmer, lighter */
    --bg:            #F4EEE2;   /* cream ground */
    --bg-elevated:   #EBE3D2;   /* cream-2 */
    --bg-card:       #FBF7EE;   /* card */
    --bg-card-hover: #F4EEE2;
    --surface:       #EBE3D2;
    --border:        #DCD1BC;   /* line */
    --border-light:  #CFC2A9;
    --gold:          #B07A2C;   /* refined ochre-gold */
    --gold-light:    #C9923F;
    --gold-dark:     #8C5E1E;   /* gold-deep */
    --gold-muted:    rgba(176, 122, 44, 0.12);
    --text:          #2A2118;   /* warm espresso ink */
    --text-muted:    #6E6253;   /* ink-soft */
    --text-dim:      #8C8071;
    --dark:          #2A2118;
    --terra:         #A9492E;   /* clay-red secondary */
    --ink:           #241B11;   /* deep espresso for dark bands */

    --font-display:  'Cormorant Garamond', Georgia, serif;
    --font-accent:   'Cormorant Garamond', Georgia, serif;
    --font-body:     'Manrope', -apple-system, sans-serif;
}

body { background: var(--bg); color: var(--text); line-height: 1.62; }

::selection { background: var(--gold); color: #FBF4E6; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* Eyebrows / section tags */
.section-tag,
.hero-tag {
    color: var(--gold-dark);
    font-weight: 700;
    letter-spacing: 0.24em;
}

.section-title {
    font-weight: 500;
    letter-spacing: 0.005em;
}

/* ======================== BUTTONS — gold pill ======================== */
.btn {
    border-radius: 5px;
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 700;
    font-family: var(--font-body);
    font-size: 0.92rem;
    padding: 15px 30px;
}
.btn-primary { background: var(--gold); color: #FBF4E6; }
.btn-primary::before { background: var(--gold-light); }
.btn-primary:hover { box-shadow: 0 10px 28px -10px rgba(140, 94, 30, 0.55); }
.btn-ghost { border: 1.5px solid var(--border-light); color: var(--text); }
.btn-ghost:hover { border-color: var(--gold-dark); color: var(--gold-dark); background: rgba(176,122,44,0.06); }

/* ======================== NAV — cream sticky bar ======================== */
#navbar::before {
    background: rgba(244, 238, 226, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
#navbar.scrolled::before {
    background: rgba(244, 238, 226, 0.95);
    border-bottom-color: var(--border);
}
.logo-mark {
    border: none;
    border-radius: 0;
    background: url("/images/logo-mark.svg") center / contain no-repeat;
    font-size: 0;            /* no residual "GF" text */
    color: transparent;
    transition: opacity 0.25s var(--ease-out);
}
.logo-mark:hover { opacity: 0.78; }
.logo-text { letter-spacing: 0.1em; font-size: 1.2rem; white-space: nowrap; }
/* Keep the brand on one line, tighter and aligned, on small screens */
@media (max-width: 600px) {
    .logo-text { font-size: 1rem; letter-spacing: 0.04em; }
    .logo-mark { width: 36px; height: 36px; font-size: 0.85rem; }
    .nav-logo { gap: 9px; }
}
.nav-link { color: var(--text-muted); font-weight: 600; text-transform: none; letter-spacing: 0.02em; font-size: 0.92rem; }
.nav-link:hover { color: var(--gold-dark); }
.nav-link::after { background: var(--gold); }

/* ======================== HERO — new "Refined Heritage" hero (.gf-hero) ======================== */
/* Self-contained, scoped under .gf-hero so it won't collide with the page. */
.gf-hero{
  --cream:#F4EEE2; --cream-2:#EBE3D2; --card:#FBF7EE;
  --ink:#2A2118; --ink-soft:#6E6253;
  --gold:#B07A2C; --gold-deep:#8C5E1E; --gold-lt:#D8A24A;
  --terra:#A9492E; --line:#DCD1BC;
  background:var(--cream); color:var(--ink);
  font-family:'Manrope',system-ui,sans-serif; -webkit-font-smoothing:antialiased;
  overflow:hidden; position:relative;
}
/* clear the fixed navbar (overrides the legacy #hero padding) */
#hero.gf-hero{ padding: var(--nav-height) 0 0; }
.gf-hero *{box-sizing:border-box;margin:0;padding:0}
.gf-hero a{text-decoration:none;color:inherit}

.gf-hero__inner{
  max-width:1280px; margin:0 auto; padding:0 46px;
  display:grid; grid-template-columns:1.04fr 0.96fr; align-items:stretch;
  gap:0; min-height:600px;
}
.gf-hero__copy{
  display:flex; flex-direction:column; justify-content:center;
  padding:48px 56px 56px 0; max-width:600px;
}
.gf-hero__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  font-weight:700; color:var(--gold-deep); margin-bottom:26px;
}
.gf-hero__eyebrow::before{ content:""; width:30px; height:1.5px; background:var(--gold); display:inline-block; }
.gf-hero__h1{
  font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:clamp(46px,5.6vw,82px); line-height:1.02; letter-spacing:-.01em;
  color:var(--ink); margin-bottom:26px;
}
.gf-hero__h1 em{ font-style:italic; font-weight:600; color:var(--gold-deep); }
.gf-hero__sub{ font-size:17.5px; line-height:1.66; color:var(--ink-soft); max-width:470px; margin-bottom:38px; }
.gf-hero__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:46px; }
.gf-btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14.5px; letter-spacing:.02em;
  padding:16px 30px; border-radius:5px; transition:.22s ease; cursor:pointer;
}
.gf-btn--gold{ background:var(--gold); color:#2A2118; }
.gf-btn--gold:hover{ background:var(--gold-deep); color:#FBF7EE; transform:translateY(-1px); }
.gf-btn--ghost{ border:1.5px solid var(--ink); color:var(--ink); background:transparent; }
.gf-btn--ghost:hover{ background:var(--ink); color:var(--cream); }

.gf-hero__stats{ display:flex; align-items:stretch; gap:0; border-top:1px solid var(--line); padding-top:26px; }
.gf-hero__stat{ flex:1; padding-right:22px; }
.gf-hero__stat + .gf-hero__stat{ padding-left:22px; border-left:1px solid var(--line); }
.gf-hero__stat b{
  display:block; font-family:'Cormorant Garamond',serif; font-weight:600;
  font-size:30px; line-height:1; color:var(--gold-deep); margin-bottom:5px;
}
.gf-hero__stat span{ font-size:12.5px; letter-spacing:.04em; color:var(--ink-soft); font-weight:500; }

.gf-hero__media{ position:relative; align-self:stretch; }
.gf-hero__media-frame{
  position:absolute; inset:40px -46px 40px 0;   /* bleed to the right edge */
  border-radius:10px; overflow:hidden;
  background:#caa46f url("/images/hero-desktop.webp") center/cover no-repeat;
  box-shadow:0 30px 70px -34px rgba(42,33,24,.55);
}
.gf-hero__media-frame img{ display:none; }
.gf-hero__media-frame::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--cream) 0%, rgba(244,238,226,.55) 9%, rgba(244,238,226,0) 26%);
}
.gf-hero__media-frame::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 90% 12%, rgba(176,122,44,.16), transparent 55%);
  mix-blend-mode:multiply;
}
.gf-hero__badge{
  position:absolute; left:6px; bottom:64px; z-index:3;
  background:var(--card); border:1px solid var(--line);
  border-radius:8px; padding:14px 18px;
  box-shadow:0 16px 34px -20px rgba(42,33,24,.5);
  display:flex; align-items:center; gap:12px; max-width:248px;
}
.gf-hero__badge svg{ width:30px; height:30px; color:var(--gold-deep); flex:none; }
.gf-hero__badge b{ font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:600; line-height:1.1; }
.gf-hero__badge span{ display:block; font-family:'Manrope'; font-size:11.5px; color:var(--ink-soft); font-weight:500; margin-top:2px; }

/* MOBILE (<=760px) — intentional full-bleed portrait, title overlaid, copy below */
@media (max-width:760px){
  #hero.gf-hero{ padding-top:0; }
  .gf-hero__inner{ grid-template-columns:1fr; min-height:0; padding:0; }
  .gf-hero__media{ order:1; height:auto; aspect-ratio:3/4; width:100%; position:relative; }
  .gf-hero__media-frame{
    position:absolute; inset:0; border-radius:0;
    background-image:url("/images/hero-mobile.webp"); background-position:center 16%; box-shadow:none;
  }
  .gf-hero__media-frame::before{
    background:linear-gradient(180deg, rgba(42,33,24,.10) 0%, rgba(42,33,24,0) 30%, rgba(42,33,24,.40) 60%, rgba(42,33,24,.88) 100%);
  }
  .gf-hero__media-frame::after{ display:none; }
  .gf-hero__badge{ display:none; }
  .gf-hero__overlay{ position:absolute; left:0; right:0; bottom:0; z-index:4; padding:0 26px 34px; }
  .gf-hero__overlay .gf-hero__eyebrow{ color:#E8C079; margin-bottom:14px; }
  .gf-hero__overlay .gf-hero__eyebrow::before{ background:#E8C079; }
  .gf-hero__overlay .gf-hero__h1{ color:#FBF4E6; font-size:clamp(38px,11vw,52px); line-height:1.0; margin-bottom:0; text-shadow:0 1px 24px rgba(20,14,8,.45); }
  .gf-hero__overlay .gf-hero__h1 em{ color:#E8C079; }
  .gf-hero__copy{ order:2; position:relative; z-index:5; padding:42px 26px 54px; max-width:none; background:var(--cream); }
  .gf-hero__copy > .gf-hero__eyebrow, .gf-hero__copy > .gf-hero__h1{ display:none; }
  .gf-hero__sub{ font-size:16.5px; max-width:none; margin-bottom:30px; }
  .gf-hero__cta{ margin-bottom:38px; }
  .gf-btn{ flex:1; min-width:0; padding:16px 18px; }
  .gf-hero__stats{ padding-top:24px; }
  .gf-hero__stat b{ font-size:25px; }
  .gf-hero__stat span{ font-size:11.5px; }
}
@media (max-width:380px){
  .gf-hero__stats{ flex-direction:column; gap:18px; }
  .gf-hero__stat + .gf-hero__stat{ padding-left:0; border-left:none; border-top:1px solid var(--line); padding-top:18px; }
  .gf-hero__cta{ flex-direction:column; }
}
/* The .gf-hero__overlay is hidden behind the absolute image frame on desktop. */

/* ======================== MARQUEE ======================== */
.marquee-section { background: var(--bg-card); border-color: var(--border); }
.marquee-content span { color: var(--gold-dark); }
.marquee-dot { background: var(--gold) !important; }

/* ======================== SHOP / COLLECTION CARDS ======================== */
/* 3-column product grid on desktop (was 4); re-assert tablet/mobile so the
   desktop override doesn't leak past the smaller breakpoints. */
.shop-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .shop-grid { grid-template-columns: 1fr; } }

.featured-card, .shop-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.featured-card:hover, .shop-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 50px -28px rgba(42, 33, 24, 0.5);
}
.card-info { padding: 24px 24px 26px; text-align: center; }
.card-category { color: var(--text-muted); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.72rem; }
.card-name { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; margin: 4px 0 6px; color: var(--text); }
.card-price { font-family: var(--font-body); font-weight: 800; color: var(--gold-dark); font-size: 1.15rem; }
.card-badge { background: var(--ink); color: #FBF4E6; letter-spacing: 0.12em; }

/* ======================== WORLDWIDE ======================== */
.ww-stat-number { color: var(--gold-dark); font-family: var(--font-display); }
.ww-stat-label { color: var(--text-muted); }

/* ======================== ABOUT ======================== */
.about-text a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.about-text a:hover { color: var(--terra); }
.about-values .value-icon { color: var(--gold-dark); }
.about-img-caption { background: rgba(36,27,17,0.78); color: #FBF4E6; }

/* ======================== PROCESS — light, gold-ringed icons ======================== */
.section-dark { background: var(--bg-elevated); }
#process .section-title, #process .section-tag { color: var(--text); }
#process .section-tag { color: var(--gold-dark); }
.process-step .step-icon {
    width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--gold);
    border-radius: 50%;
    color: var(--gold-dark);
    margin: 0 auto 18px;
}
.process-step h3 { font-family: var(--font-display); font-weight: 600; color: var(--text); }
.process-step p { color: var(--text-muted); }

/* ======================== CONTACT ======================== */
.contact-item svg { color: var(--gold-dark); }
.social-link { border-color: var(--border); color: var(--text-muted); }
.social-link:hover { background: var(--gold); color: #FBF4E6; border-color: var(--gold); }
.contact-form .form-line { background: var(--border); }

/* ======================== FAQ ======================== */
.faq-item { border-color: var(--border); background: var(--bg-card); }
.faq-toggle { color: var(--text); font-weight: 600; }
.faq-toggle:hover { color: var(--gold-dark); }
.faq-arrow { color: var(--gold-dark); }
.faq-content a { color: var(--gold-dark); }

/* ======================== NEWSLETTER — refined light CTA ======================== */
.newsletter-section { background: var(--bg-elevated); }
.newsletter-inner h3 { font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: clamp(2rem, 4vw, 3rem); }
.newsletter-inner p { color: var(--text-muted); }
.newsletter-form input { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); }

/* ======================== FOOTER — deep espresso ======================== */
#footer { background: var(--ink); color: #C9BDA8; }
#footer .logo-text, #footer .footer-brand p { color: #E9E0CE; }
#footer .footer-brand p { color: #C9BDA8; }
#footer .logo-mark { background: url("/images/logo-mark-dark.svg") center / contain no-repeat; border: none; }
.footer-col h4 { color: #E3B873; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.78rem; font-family: var(--font-body); font-weight: 700; }
.footer-col a { color: #C9BDA8; }
.footer-col a:hover { color: #FBF4E6; }
.footer-bottom { border-top-color: rgba(255,255,255,0.12); color: #9C907C; }
.footer-legal a { color: #9C907C; }
.footer-legal a:hover { color: #E3B873; }

/* Back-to-top button on the cream ground */
.back-to-top { background: var(--bg-card); border-color: var(--border); color: var(--text); }
.back-to-top:hover { background: var(--gold); color: #FBF4E6; border-color: var(--gold); }

/* Hero responsive rules live inside the .gf-hero block above. */

/* Hide the desktop custom cursor on touch devices (left a stray ring top-left) */
@media (hover: none), (pointer: coarse) {
    .cursor-dot, .cursor-ring { display: none !important; }
}

/* ======================== FOUNDER ======================== */
.founder-section { background: var(--bg-elevated, #EBE3D2); }
.founder-grid {
    display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 56px; align-items: center;
}
.founder-photo img {
    width: 100%; height: auto; display: block; border-radius: 10px;
    box-shadow: 0 18px 44px rgba(36, 27, 17, .16);
}
.founder-body .section-tag { display: inline-block; text-align: left; }
.founder-quote {
    font-family: 'Playfair Display', Georgia, serif; font-style: italic;
    font-size: clamp(21px, 2.3vw, 29px); line-height: 1.42; color: var(--ink, #241B11);
    margin: 18px 0 26px; border: 0; padding: 0;
}
.founder-attr { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.founder-attr b { font-family: 'Manrope', system-ui, sans-serif; font-size: 16px; font-weight: 700; color: var(--ink, #241B11); }
.founder-attr span {
    font-family: 'Manrope', system-ui, sans-serif; font-size: 12.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--gold-dark, #8C5E1E);
}
@media (max-width: 820px) {
    .founder-grid { grid-template-columns: 1fr; gap: 30px; }
    .founder-photo { max-width: 380px; }
}