
/* FINAL UI/UX POLISH */
:root{
  --focus:rgba(215,165,45,.32);
  --gold-deep:#FFF700;
}
html{scroll-padding-top:92px}
body{overflow-x:hidden}
::selection{background:var(--gold);color:#090806}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.site-header{box-shadow:0 10px 35px rgba(0,0,0,.12)}
.nav-links a.active:after{bottom:-10px}
.gold-btn,.nav-cta,.ghost-btn,.chip,.side-btn,.tab-buttons button,.thumb,.mobile-toggle{transition:.2s ease}
.gold-btn:hover,.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(215,165,45,.2)}
.ghost-btn:hover{border-color:var(--gold);color:var(--gold)}
.section-head h2{letter-spacing:-.025em}
.card-body h3,.category-copy h3{letter-spacing:-.01em}
.product-card{height:100%}
.product-card>a{height:100%;display:flex;flex-direction:column}
.product-card .card-body{display:flex;flex-direction:column;flex:1}
.product-card .card-bottom{margin-top:auto}
.product-photo{background:radial-gradient(circle at 50% 42%,#171717 0%,#090909 62%,#050505 100%)}
.product-photo img{object-fit:contain;padding:8px}
.product-card:hover .product-photo{box-shadow:inset 0 0 0 1px rgba(215,165,45,.12)}
.category img{background:#090909}
.inner-hero img{background:#090909}
.footer{background:#070707}
.footer-inner{align-items:center}
.footer-brand{display:flex;align-items:center;gap:14px}
.footer-brand img{width:145px}
.footer-copy{color:#ffffff}
.socials{display:flex;align-items:center;gap:8px}
.socials a{
  width:34px;height:34px;border:1px solid #302e28;border-radius:50%;
  display:grid;place-items:center;color:#aaa79f;font-size:14px;font-weight:800;
  transition:.2s ease
}
.socials a:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.socials a[aria-disabled="true"]{opacity:.65}
.footer-links{display:flex;gap:16px;flex-wrap:wrap}
.footer-links a{color:#ffffff;font-size:10px;text-transform:uppercase;letter-spacing:.07em}
.footer-links a:hover{color:var(--gold)}
.footer-bottom{border-top:1px solid #aaa79f;margin-top:24px;padding-top:18px;display:flex;justify-content:space-between;gap:20px;color:#5f5d57;font-size:10px}
.back-top{
  position:fixed;right:20px;bottom:20px;width:40px;height:40px;border:1px solid #514725;
  background:rgba(8,8,8,.92);color:var(--gold);border-radius:50%;display:grid;place-items:center;
  opacity:0;pointer-events:none;transform:translateY(8px);transition:.25s;z-index:45
}
.back-top.show{opacity:1;pointer-events:auto;transform:none}
.skip-link{position:fixed;left:12px;top:12px;z-index:100;background:var(--gold);color:#080704;padding:10px 13px;border-radius:8px;transform:translateY(-150%);font-weight:800;font-size:12px}
.skip-link:focus{transform:none}
.cookie-note{font-size:10px;color:#aaa79f}
@media(max-width:760px){
 .footer-bottom{flex-direction:column}
 .footer-brand{align-items:flex-start;flex-direction:column}
 .socials a{width:38px;height:38px}
 .back-top{right:14px;bottom:14px}
}


/* V8 HERO + TYPOGRAPHY SYSTEM */
:root{
  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-ui:"Manrope",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --gold:#FFF700;
  --gold-bright:#E6E600;
}
body{font-family:var(--font-ui);font-size:15px;letter-spacing:.005em}
h1,h2,h3,.hero-copy h1,.inner-copy h1,.feature-copy h2,.enquiry-box h2,.section-head h2,.contact-panel h2{font-family:var(--font-display);font-weight:600;letter-spacing:-.025em}
.nav-links a,.nav-cta,.gold-btn,.ghost-btn,.eyebrow,.text-link,.chip,.side-btn,.form-field label{font-family:var(--font-ui)}
.hero--carousel{min-height:clamp(650px,84vh,880px);border-bottom:1px solid var(--line);background:#050505}
.hero-slides,.hero-slide{position:absolute;inset:0}
.hero-slide{opacity:0;visibility:hidden;transition:opacity .8s cubic-bezier(.22,.61,.36,1),visibility .8s}
.hero-slide.is-active{opacity:1;visibility:visible}
.hero-slide .hero-bg{opacity:1;transform:scale(1.015);transition:transform 8s linear;object-position:center center}
.hero-slide.is-active .hero-bg{transform:scale(1.055)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,4,4,.91) 0%,rgba(4,4,4,.70) 30%,rgba(4,4,4,.20) 65%,rgba(4,4,4,.16) 100%),linear-gradient(0deg,rgba(0,0,0,.48),transparent 44%)}
.hero-slide--light .hero-overlay{background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.77) 30%,rgba(255,255,255,.14) 68%,rgba(255,255,255,.08) 100%),linear-gradient(0deg,rgba(255,255,255,.28),transparent 48%)}
.hero-slide--light{color:#111}
.hero-slide--light .hero-copy p{color:#3e3c38}
.hero-slide--light .ghost-btn{color:#111;border-color:rgba(17,17,17,.38);background:rgba(255,255,255,.10)}
.hero-slide--light .ghost-btn:hover{color:#111;border-color:#111}
.hero-slide--light .hero-stats{border-color:rgba(17,17,17,.16)}
.hero-slide--light .hero-stats span{color:#57534b}
.hero-slide--light .hero-stats strong{color:#a77610}
.hero-content{position:relative;z-index:2;min-height:inherit;display:flex;align-items:center}
.hero-copy{max-width:620px;padding:90px 0 115px}
.hero-copy p{font-size:16px;line-height:1.8;max-width:555px}
.hero-copy h1{font-size:clamp(56px,6.7vw,94px);line-height:.9;margin:18px 0 22px}
.hero-copy h1 span{color:var(--gold-bright)}
.hero-slide--light .hero-copy h1 span{color:#a77610}
.hero-actions .gold-btn,.hero-actions .ghost-btn{min-height:48px;display:inline-flex;align-items:center;gap:8px}
.hero-controls{position:absolute;z-index:5;left:50%;bottom:28px;transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;gap:18px}
.hero-dots{display:flex;gap:7px}
.hero-dot{width:34px;height:3px;border:0;padding:0;background:rgba(255,255,255,.34);cursor:pointer}
.hero-dot.is-active{background:#fff}
.hero-control-right{display:flex;align-items:center;gap:8px;color:#fff}
.hero-counter{font-size:10px;letter-spacing:.14em;margin-right:4px}.hero-counter b{font-size:12px}
.hero-arrow,.hero-pause{width:38px;height:38px;border:1px solid rgba(255,255,255,.32);background:rgba(0,0,0,.18);color:#fff;display:grid;place-items:center;cursor:pointer}
.hero-arrow:hover,.hero-pause:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.58)}
.inner-hero--photo{min-height:470px}
.inner-hero--photo .inner-copy h1{font-size:clamp(54px,6.3vw,86px);line-height:.92}
.inner-hero--photo .inner-copy p{font-size:15px;line-height:1.75}
.catalog-hero--photo{min-height:390px}
.catalog-hero--photo img{opacity:.84}
.product-collection-banner{position:relative;height:180px;overflow:hidden;border-bottom:1px solid var(--line)}
.product-collection-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%}
.product-banner-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,4,4,.88),rgba(4,4,4,.35) 62%,rgba(4,4,4,.20))}
.product-banner-copy{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;gap:5px}.product-banner-copy span{color:var(--gold);font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.product-banner-copy strong{font-family:var(--font-display);font-size:38px;font-weight:600}
.socials a svg{width:17px;height:17px;display:block}.socials a svg path{fill:currentColor}.socials a svg rect,.socials a svg circle{stroke:currentColor}
.socials a[data-social="instagram"]{color:#b7b3aa}.socials a[data-social="facebook"]{color:#b7b3aa}.socials a:hover{color:var(--gold)}
.footer-copy{font-family:var(--font-ui);font-size:10px;letter-spacing:.05em}
@media(max-width:760px){
  .hero--carousel,.hero--carousel .hero-content{min-height:720px}
  .hero-slide .hero-bg{object-position:58% center}
  .hero-overlay{background:linear-gradient(0deg,rgba(4,4,4,.91) 6%,rgba(4,4,4,.57) 45%,rgba(4,4,4,.08) 79%)}
  .hero-slide--light .hero-overlay{background:linear-gradient(0deg,rgba(255,255,255,.94) 6%,rgba(255,255,255,.60) 46%,rgba(255,255,255,.08) 79%)}
  .hero-copy{padding:60px 0 105px;max-width:100%}.hero-copy h1{font-size:clamp(50px,14vw,68px)}.hero-copy p{font-size:14px;line-height:1.7}
  .hero-controls{width:calc(100% - 28px);bottom:18px}.hero-arrow{display:none}.hero-pause{width:36px;height:36px}.hero-dot{width:26px}
  .hero-control-right{margin-left:auto}.hero-counter{margin-right:3px}
  .inner-hero--photo,.inner-hero--photo .container{min-height:420px}.inner-hero--photo img{object-position:58% center}.inner-hero--photo .inner-copy{padding:50px 0 65px}.inner-hero--photo .inner-copy h1{font-size:50px}
  .product-collection-banner{height:150px}.product-banner-copy strong{font-size:30px}
}
@media(prefers-reduced-motion:reduce){.hero-slide,.hero-slide .hero-bg{transition:none}}

/* V9 — SINGLE-IMAGE HERO / REFINED TYPE SYSTEM */
.hero--static{
  min-height:clamp(650px,84vh,880px);
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:#050505;
}
.hero--static .hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  opacity:1;
  transform:scale(1.025);
}
.hero--static .hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(4,4,4,.93) 0%,rgba(4,4,4,.72) 30%,rgba(4,4,4,.22) 67%,rgba(4,4,4,.10) 100%),
    linear-gradient(0deg,rgba(0,0,0,.52),transparent 48%);
}
.hero--static .hero-content{
  position:relative;
  z-index:2;
  min-height:inherit;
  display:flex;
  align-items:center;
}
.hero--static .hero-copy{
  max-width:620px;
  padding:90px 0 105px;
}
.hero--static .hero-copy h1{
  font-family:var(--font-display);
  font-size:clamp(56px,6.5vw,92px);
  line-height:.92;
  font-weight:600;
  letter-spacing:-.025em;
  margin:18px 0 22px;
  max-width:680px;
}
.hero--static .hero-copy h1 span{color:var(--gold-bright)}
.hero--static .hero-copy p{font-size:16px;line-height:1.78;max-width:555px}
.hero--static .hero-actions{margin-top:28px}
.hero--static .hero-stats{margin-top:46px}

/* Keep editorial display type limited to headings; use Manrope everywhere else for clarity. */
body{font-family:var(--font-ui);font-weight:500}
.nav-links a,.nav-cta,.gold-btn,.ghost-btn,.eyebrow,.text-link,.chip,.side-btn,.form-field label{font-weight:600}
.section-head p,.feature-copy p,.category-copy p,.card-desc,.inner-copy p,.contact-panel p,.partner-card p,.quality-card p{font-weight:500}

@media(max-width:760px){
  .hero--static,.hero--static .hero-content{min-height:720px}
  .hero--static .hero-bg{object-position:58% center}
  .hero--static .hero-overlay{
    background:linear-gradient(0deg,rgba(4,4,4,.92) 7%,rgba(4,4,4,.58) 45%,rgba(4,4,4,.08) 80%);
  }
  .hero--static .hero-copy{padding:60px 0 92px;max-width:100%}
  .hero--static .hero-copy h1{font-size:clamp(50px,14vw,68px);line-height:.9}
  .hero--static .hero-copy p{font-size:14px;line-height:1.7}
  .hero--static .hero-stats{gap:18px;margin-top:34px}
}
@media(prefers-reduced-motion:reduce){.hero--static .hero-bg{transform:none}}
.hero--static:after{display:none}

/* Mobile navigation: accessible, tactile and consistent across every page. */
@media(max-width:760px){
  body.menu-open{overflow:hidden}
  .mobile-toggle{
    width:46px;height:46px;display:grid;place-items:center;
    padding:0;border:1px solid rgba(215,165,45,.35);border-radius:10px;
    background:rgba(255,255,255,.04);color:#fff;cursor:pointer;
    position:relative;z-index:70;-webkit-tap-highlight-color:transparent;
  }
  .mobile-toggle:hover{border-color:var(--gold);background:rgba(215,165,45,.08)}
  .mobile-toggle:active{transform:scale(.96)}
  .menu-icon{width:20px;height:16px;display:flex;flex-direction:column;justify-content:space-between}
  .menu-icon i{display:block;width:100%;height:2px;border-radius:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
  .mobile-toggle.is-open .menu-icon i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .mobile-toggle.is-open .menu-icon i:nth-child(2){opacity:0}
  .mobile-toggle.is-open .menu-icon i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .nav-links.open{
    display:flex !important;
    z-index:65;
    box-shadow:0 18px 40px rgba(0,0,0,.42);
  }
  .nav-links.open a{
    width:100%;padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.07);
    font-size:12px;line-height:1.2;
  }
  .nav-links.open .nav-cta{margin-top:8px;text-align:center;border-bottom:0;width:100%;padding:13px 17px}
}

/* =========================================================
   Ophir Blaque header logo sizing — v13
   Keep the supplied full square logo completely visible inside
   the header at every breakpoint. The image is never cropped.
   ========================================================= */
.site-header .nav{
  min-height:92px;
  height:92px;
}
.site-header .brand{
  width:auto;
  height:92px;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  overflow:visible;
}
.site-header .brand img{
  display:block;
  width:auto !important;
  height:82px !important;
  max-width:150px;
  max-height:82px;
  aspect-ratio:1 / 1;
  object-fit:contain;
  object-position:center;
  flex:0 0 auto;
}

@media (max-width:1050px){
  .site-header .nav{min-height:88px;height:88px}
  .site-header .brand{height:88px}
  .site-header .brand img{
    height:76px !important;
    max-height:76px;
    max-width:140px;
  }
}

@media (max-width:760px){
  .site-header .nav{min-height:72px;height:72px}
  .site-header .brand{height:72px}
  .site-header .brand img{
    height:58px !important;
    max-height:58px;
    max-width:58px;
  }
  .nav-links.open{top:72px}
}

@media (max-width:430px){
  .site-header .nav{min-height:68px;height:68px}
  .site-header .brand{height:68px}
  .site-header .brand img{
    height:54px !important;
    max-height:54px;
    max-width:54px;
  }
  .nav-links.open{top:68px}
}
