/* =========================================================
   Bloom by Sindra — Premium Editorial Website
   ========================================================= */

:root{
  /* Brand palette — derived from the Bloom by Sindra logo & shelf-talker */
  --cream:        #FBF5EC;
  --cream-soft:   #FDFAF5;
  --cream-deep:   #F3E7D8;
  --rust:         #A8542D;
  --rust-dark:    #7E3E20;
  --rust-darker:  #5C2C17;
  --gold:         #B87C32;
  --gold-light:   #D8AE72;
  --blush:        #E9BFAE;
  --blush-soft:   #F3DCD1;
  --plum:         #5C2233;
  --ink:          #2B221C;
  --ink-soft:     #6B5D52;

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --font-script: 'Tangerine', cursive;

  --container: 1240px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 28px;
  --ease: cubic-bezier(.22,.68,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:1rem; }

h1,h2,h3,h4{
  font-family:var(--font-serif);
  font-weight:500;
  color:var(--rust-darker);
  margin:0 0 .5em;
  line-height:1.12;
}
h1{ font-size:clamp(2.6rem, 5.4vw, 4.6rem); font-weight:500; }
h2{ font-size:clamp(2rem, 3.6vw, 3.1rem); }
h3{ font-size:clamp(1.3rem, 2vw, 1.7rem); }
p{ margin:0 0 1em; color:var(--ink-soft); line-height:1.75; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--rust); color:#fff;
  padding:.8em 1.2em; z-index:999; border-radius:0 0 6px 0;
}
.skip-link:focus{ left:0; }

.eyebrow{
  font-family:var(--font-sans);
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:.72rem;
  font-weight:500;
  color:var(--gold);
  margin:0 0 1em;
}
.eyebrow-light{ color:var(--gold-light); }

.script-accent{
  font-family:var(--font-script);
  font-size:2.6rem;
  color:var(--rust);
  margin:-.4em 0 .6em;
}
.script-accent-inline{
  font-family:var(--font-script);
  font-size:1.5em;
  color:var(--rust);
}

.section-head{
  max-width:680px;
  margin:0 auto 3.5rem;
  text-align:center;
}
.section-lead{ font-size:1.08rem; }
.section-body{ font-size:1rem; color:var(--ink-soft); margin-top:1.1rem; }

section{ position:relative; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:.95em 2.1em;
  border-radius:100px;
  font-size:.86rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:500;
  border:1px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background:var(--rust);
  color:#fff;
  box-shadow:0 8px 24px -8px rgba(168,84,45,.55);
}
.btn-primary:hover{ background:var(--rust-dark); transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(168,84,45,.6); }
.btn-outline{
  border-color:var(--rust);
  color:var(--rust);
  background:transparent;
}
.btn-outline:hover{ background:var(--rust); color:#fff; transform:translateY(-2px); }
.btn-outline.btn-light{ border-color:rgba(255,255,255,.7); color:#fff; }
.btn-outline.btn-light:hover{ background:#fff; color:var(--rust-darker); }
.btn-cream{ background:var(--cream); color:var(--rust-darker); }
.btn-cream:hover{ background:#fff; transform:translateY(-2px); }
.btn-small{ padding:.7em 1.5em; font-size:.75rem; }
.btn-full{ width:100%; }

/* ---------- Reveal animation ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  background:rgba(251,245,236,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(168,84,45,.1);
  transition:padding .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.scrolled{
  box-shadow:0 8px 30px -14px rgba(43,34,28,.25);
}
.header-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:1.3rem 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition:padding .35s var(--ease);
}
.site-header.scrolled .header-inner{ padding:.7rem 1.5rem; }

.brand-logo{
  height:64px; width:auto;
  transition:height .35s var(--ease);
}
.site-header.scrolled .brand-logo{ height:46px; }

.main-nav ul{ display:flex; gap:2.4rem; }
.main-nav a{
  font-size:.85rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink); font-weight:500; position:relative; padding:.3em 0;
}
.main-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--rust); transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease);
}
.main-nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

.header-actions{ display:flex; align-items:center; gap:1.2rem; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px;
}
.nav-toggle span{ width:24px; height:1.5px; background:var(--rust-darker); transition:transform .3s var(--ease), opacity .3s var(--ease); }
.nav-toggle.active span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8.5rem 1.5rem 5rem;
  overflow:hidden;
}
.hero-bg-texture{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 85% 15%, rgba(216,174,114,.28), transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(168,84,45,.12), transparent 60%),
    linear-gradient(180deg, var(--cream-soft), var(--cream));
  z-index:0;
}
.hero-inner{
  position:relative; z-index:1;
  max-width:var(--container); margin:0 auto; width:100%;
  display:grid; grid-template-columns:1.05fr .95fr; gap:4rem; align-items:center;
}
.hero-copy .eyebrow{ opacity:.9; }
.hero-copy h1{ margin-bottom:.4em; }
.hero-sub{ font-size:1.2rem; color:var(--ink); max-width:30em; }
.hero-micro{ font-family:var(--font-serif); font-style:italic; font-size:1.1rem; color:var(--rust); margin-bottom:.6em; }
.hero-location{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:2.2em;
}
.hero-location::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--gold);
  flex-shrink:0;
}
.hero-actions{ display:flex; gap:1.1rem; flex-wrap:wrap; }

.hero-visual{ position:relative; height:560px; }
.hero-frame{
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 40px 70px -30px rgba(92,44,23,.4);
}
.hero-frame img{ width:100%; height:100%; object-fit:cover; }
.hero-frame-main{ position:absolute; top:0; right:0; width:78%; height:88%; }
.hero-frame-float{
  position:absolute; left:0; bottom:0; width:46%; height:46%;
  border:6px solid var(--cream);
  animation:float 7s ease-in-out infinite;
}
.hero-ring{
  position:absolute; top:-30px; left:20%; width:120px; height:120px;
  border:1px solid var(--gold-light); border-radius:50%; opacity:.6;
}
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}

.scroll-cue{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  width:26px; height:42px; border:1px solid var(--rust); border-radius:20px;
  z-index:2;
}
.scroll-cue span{
  position:absolute; top:8px; left:50%; width:4px; height:4px; margin-left:-2px;
  background:var(--rust); border-radius:50%;
  animation:scrollcue 2s infinite;
}
@keyframes scrollcue{
  0%{ opacity:1; transform:translateY(0); }
  80%{ opacity:0; transform:translateY(14px); }
  100%{ opacity:0; }
}

/* =========================================================
   BRAND INTRO
   ========================================================= */
.intro{ padding:9rem 1.5rem; background:var(--cream); }
.intro-inner{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:.85fr 1.15fr; gap:5rem; align-items:center;
}
.intro-media{ margin:0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 30px 60px -30px rgba(92,44,23,.35); }
.intro-media img{ width:100%; height:640px; object-fit:cover; transition:transform .8s var(--ease); }
.intro-media:hover img{ transform:scale(1.05); }
.intro-copy p{ font-size:1.05rem; }

/* =========================================================
   COLLECTION
   ========================================================= */
.collection{ padding:9rem 1.5rem; background:var(--cream-deep); }
.collection-grid{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1.8rem;
}
.collection-card{
  background:var(--cream-soft);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:0 20px 40px -26px rgba(92,44,23,.3);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.collection-card:hover{ transform:translateY(-8px); box-shadow:0 30px 50px -24px rgba(92,44,23,.4); }
.card-tall{ grid-row:span 1; }
.card-media{ overflow:hidden; aspect-ratio:4/5; background:var(--cream-deep); }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.collection-card:hover .card-media img{ transform:scale(1.08); }
.card-media.full-frame img{ object-fit:contain; }
.card-body{ padding:1.8rem 1.8rem 2rem; }
.card-body h3{ margin-bottom:.35em; }
.card-body p{ font-size:.96rem; margin-bottom:1.2em; }
.card-link{
  font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; font-weight:500;
  color:var(--rust); border-bottom:1px solid transparent; transition:border-color .3s;
}
.card-link:hover{ border-color:var(--rust); }

/* =========================================================
   SIGNATURE SHOWCASE
   ========================================================= */
.signature{
  position:relative;
  min-height:82vh;
  display:flex; align-items:center;
  overflow:hidden;
}
.signature-media{ position:absolute; inset:0; margin:0; }
.signature-media img{ width:100%; height:100%; object-fit:cover; }
.signature-overlay{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(43,25,18,.82) 0%, rgba(43,25,18,.55) 42%, rgba(43,25,18,.15) 70%);
}
.signature-copy{
  position:relative; z-index:1;
  max-width:560px; padding:6rem 4vw;
  color:#fff;
}
.signature-copy h2{ color:#fff; }
.signature-copy p{ color:rgba(255,255,255,.85); font-size:1.08rem; max-width:34em; }

/* =========================================================
   FOUNDER
   ========================================================= */
.founder{ padding:9rem 1.5rem; background:var(--cream); }
.founder-inner{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:.75fr 1.25fr; gap:5rem; align-items:center;
}
.founder-media{ margin:0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 30px 60px -30px rgba(92,44,23,.35); }
.founder-media img{ width:100%; height:560px; object-fit:cover; object-position:top; }
.founder-name{ font-family:var(--font-serif); font-size:1.4rem; color:var(--rust-darker); margin-bottom:.15em; font-weight:600;}
.founder-title{ font-size:.82rem; text-transform:uppercase; letter-spacing:.14em; color:var(--gold); margin-bottom:1.4em; }
.founder-copy p{ font-size:1.05rem; }

/* =========================================================
   WHY CHOOSE
   ========================================================= */
.why{ padding:9rem 1.5rem; background:var(--cream-deep); }
.why-grid{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:repeat(5, 1fr); gap:2rem;
}
.why-card{ text-align:center; padding:1rem; }
.why-icon{
  width:76px; height:76px; margin:0 auto 1.4rem;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--gold-light); border-radius:50%;
  color:var(--rust); transition:background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.why-icon svg{ width:34px; height:34px; }
.why-card:hover .why-icon{ background:var(--rust); color:#fff; transform:translateY(-4px); }
.why-card h3{ font-size:1.2rem; margin-bottom:.4em; }
.why-card p{ font-size:.92rem; }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ padding:9rem 1.5rem; background:var(--cream-deep); }
.faq-list{ max-width:820px; margin:0 auto; }
.faq-item{
  background:var(--cream-soft);
  border:1px solid rgba(168,84,45,.14);
  border-radius:var(--radius-md);
  padding:1.5rem 1.8rem;
  margin-bottom:1rem;
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.faq-item:hover{ box-shadow:0 16px 34px -22px rgba(92,44,23,.3); border-color:rgba(168,84,45,.3); }
.faq-item summary{
  cursor:pointer;
  list-style:none;
  font-family:var(--font-serif);
  font-size:1.15rem;
  color:var(--rust-darker);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+';
  font-family:var(--font-sans);
  font-size:1.4rem;
  color:var(--gold);
  flex-shrink:0;
  transition:transform .3s var(--ease);
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ margin:1rem 0 .2rem; font-size:.98rem; }

/* =========================================================
   CTA
   ========================================================= */
.cta{
  padding:8rem 1.5rem;
  background:linear-gradient(135deg, var(--rust-darker), var(--rust) 60%, var(--plum));
  text-align:center;
}
.cta-inner{ max-width:640px; margin:0 auto; }
.cta h2{ color:#fff; }
.cta p{ color:rgba(255,255,255,.85); font-size:1.1rem; margin-bottom:2em; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact{ padding:9rem 1.5rem; background:var(--cream-deep); }
.contact-inner{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:.85fr 1.15fr; gap:5rem;
}
.contact-list{ margin-top:2rem; }
.contact-list li{
  padding:1.1rem 0; border-bottom:1px solid rgba(168,84,45,.16);
  display:flex; flex-direction:column; gap:.2rem;
}
.contact-label{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.contact-list a{ font-family:var(--font-serif); font-size:1.3rem; color:var(--rust-darker); transition:color .3s; }
.contact-plain{ font-family:var(--font-serif); font-size:1.3rem; color:var(--rust-darker); }
.contact-list a:hover{ color:var(--rust); }

.enquiry-form{
  background:var(--cream-soft);
  padding:3rem; border-radius:var(--radius-lg);
  box-shadow:0 30px 60px -30px rgba(92,44,23,.3);
}
.enquiry-form h3{ margin-bottom:1.3em; }
.form-row-hidden{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.form-row{ margin-bottom:1.4rem; display:flex; flex-direction:column; gap:.5rem; }
.form-row-split{ flex-direction:row; gap:1.2rem; }
.form-row-split > div{ flex:1; display:flex; flex-direction:column; gap:.5rem; }
label{ font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
input, select, textarea{
  border:1px solid rgba(168,84,45,.25);
  background:#fff;
  border-radius:var(--radius-sm);
  padding:.85em 1em;
  color:var(--ink);
  transition:border-color .3s, box-shadow .3s;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--rust); box-shadow:0 0 0 3px rgba(168,84,45,.12);
}
textarea{ resize:vertical; min-height:110px; }
.form-status{ margin-top:1rem; font-size:.9rem; color:var(--rust); min-height:1.2em; }
.form-status-error{ color:#b3261e; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--rust-darker); color:rgba(255,255,255,.82); }
.footer-inner{
  max-width:var(--container); margin:0 auto; padding:5rem 1.5rem 3rem;
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:3rem;
}
.footer-logo{ height:140px; width:auto; margin-bottom:1.6rem; border-radius:50%; background:var(--cream); padding:4px; box-shadow:0 14px 34px -12px rgba(0,0,0,.5); }
.footer-brand p{ color:rgba(255,255,255,.65); max-width:26em; }
.footer-nav h4, .footer-contact h4{
  font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.16em; font-size:.75rem;
  color:var(--gold-light); margin-bottom:1.3rem;
}
.footer-nav li{ margin-bottom:.7rem; }
.footer-nav a, .footer-contact a{ color:rgba(255,255,255,.82); transition:color .3s; }
.footer-nav a:hover, .footer-contact a:hover{ color:var(--gold-light); }
.footer-contact p{ margin-bottom:.6rem; color:rgba(255,255,255,.82); }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding:1.6rem 1.5rem;
  max-width:var(--container); margin:0 auto;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  font-size:.82rem; color:rgba(255,255,255,.55);
}
.powered-by a{ color:rgba(255,255,255,.75); border-bottom:1px solid rgba(255,255,255,.3); }
.powered-by a:hover{ color:var(--gold-light); border-color:var(--gold-light); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px){
  .why-grid{ grid-template-columns:repeat(3,1fr); }
  .why-card:nth-child(4), .why-card:nth-child(5){ grid-column:span 1; }
  .collection-grid{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 820px){
  .collection-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 900px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ height:420px; order:-1; }
  .intro-inner, .founder-inner, .contact-inner{ grid-template-columns:1fr; gap:3rem; }
  .intro-media img, .founder-media img{ height:420px; }
  .form-row-split{ flex-direction:column; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:span 2; }
}

@media (max-width: 720px){
  .main-nav{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw, 320px);
    background:var(--cream-soft);
    box-shadow:-20px 0 50px -20px rgba(43,34,28,.35);
    transform:translateX(100%);
    transition:transform .45s var(--ease);
    padding:7rem 2.4rem 2rem;
    z-index:400;
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav ul{ flex-direction:column; gap:1.6rem; }
  .main-nav a{ font-size:1rem; }
  .nav-toggle{ display:flex; }
  .header-actions .btn-small{ display:none; }

  .hero{ padding-top:7.5rem; }
  .hero-visual{ height:340px; }
  .hero-frame-main{ width:100%; height:80%; }
  .hero-frame-float{ width:56%; height:52%; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }

  .intro, .collection, .founder, .why, .faq, .contact, .cta{ padding:5.5rem 1.25rem; }
  .faq-item{ padding:1.2rem 1.4rem; }
  .faq-item summary{ font-size:1.05rem; }
  .collection-grid{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:repeat(2,1fr); }

  .signature{ min-height:auto; padding:5.5rem 0; }
  .signature-media{ position:relative; height:340px; }
  .signature-copy{ position:relative; padding:2.5rem 1.5rem 0; max-width:100%; }
  .signature-overlay{ background:linear-gradient(180deg, rgba(43,25,18,.15), rgba(43,25,18,.85) 70%); }

  .footer-inner{ grid-template-columns:1fr; text-align:center; }
  .footer-brand{ grid-column:span 1; display:flex; flex-direction:column; align-items:center; }
  .footer-logo{ height:110px; }
  .footer-nav, .footer-contact{ display:flex; flex-direction:column; align-items:center; }
  .footer-bottom{ flex-direction:column; text-align:center; }
}

@media (max-width: 480px){
  .why-grid{ grid-template-columns:1fr 1fr; }
  h1{ font-size:2.4rem; }
  .enquiry-form{ padding:2rem 1.4rem; }
}