/* ============================================================
   HAIM ART · Design System (v6 · Vintage · Bona Nova + Felipa)
   ============================================================ */
@font-face{font-family:"Bona Nova SC";src:url("../fonts/BonaNovaSC-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Bona Nova SC";src:url("../fonts/BonaNovaSC-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Felipa";src:url("../fonts/Felipa-Regular.ttf") format("truetype");font-weight:400;font-display:swap}

:root{
  /* aged parchment + walnut */
  --c-parch:#F3E6C7;
  --c-parch-2:#E8D4A8;
  --c-card:#FBF4E0;
  --c-ink:#2A1D0F;
  --c-wood:#43301C;        /* dark wood / lead frame */
  --c-wood-2:#6A4A2B;
  /* aged jewel tones */
  --c-gold:#B4842A;
  --c-gold-lt:#D8AC50;
  --c-amber:#CB7A20;
  --c-teal:#1C6E70;
  --c-teal-dk:#114c4e;
  --c-ruby:#9C2A2E;
  --c-cobalt:#274F8A;
  --c-wa:#25D366;
  --c-wa-dk:#1da851;

  --f-head:"Bona Nova SC",Georgia,serif;         /* vintage Hebrew+Latin serif (attached) */
  --f-display:"Felipa","Bona Nova SC",serif;     /* decorative brand wordmark (attached) */
  --f-body:"Assistant",system-ui,-apple-system,"Segoe UI",sans-serif;
  --c-title:#124c4e;                              /* solid heading colour */

  --maxw:1200px;
  --pad:clamp(20px,5vw,40px);
  --sect-y:clamp(52px,8vw,100px);
  --radius:16px;
  --shadow:0 16px 40px -20px rgba(43,30,16,.55);
  --shadow-lg:0 30px 64px -24px rgba(43,30,16,.6);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;font-family:var(--f-body);
  font-size:clamp(16px,1.05vw,18px);line-height:1.7;color:var(--c-ink);
  background:
    radial-gradient(1200px 620px at 82% -120px, rgba(203,122,32,.22), transparent 70%),
    radial-gradient(900px 520px at -5% 6%, rgba(156,42,46,.10), transparent 70%),
    var(--c-parch);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* faint aged-paper grain */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E")}
body>*{position:relative;z-index:1}
img{max-width:100%;display:block}
a{color:var(--c-amber);text-decoration:none}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--sect-y)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

h1,h2,h3{font-family:var(--f-head);line-height:1.14;margin:0 0 .4em;font-weight:700}
.section-head{text-align:center;margin-bottom:clamp(28px,4vw,50px)}
/* solid vintage heading colour */
.section-title{font-size:clamp(36px,5.6vw,58px);letter-spacing:.015em;font-weight:700;
  color:var(--c-title)}
.section-sub{color:var(--c-wood-2);font-size:1.08rem;margin:0 auto;max-width:56ch}
.eyebrow{display:inline-block;font-weight:700;letter-spacing:.24em;color:var(--c-ruby);
  font-size:.8rem;margin-bottom:.5em;text-transform:uppercase}
/* vintage fleuron divider with flanking rules */
.section-title::after{content:"❦";display:block;width:auto;margin:.12em auto 0;
  font-size:.4em;color:var(--c-gold);-webkit-text-fill-color:var(--c-gold);
  text-shadow:38px 4px 0 rgba(180,132,42,.9), -38px 4px 0 rgba(180,132,42,.9),
              72px 4px 0 rgba(180,132,42,.35), -72px 4px 0 rgba(180,132,42,.35)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--f-body);font-weight:700;font-size:1rem;
  padding:.85em 1.6em;border-radius:999px;border:0;cursor:pointer;
  min-height:48px;transition:transform .15s, box-shadow .2s, filter .2s;
  text-align:center;line-height:1.1}
.btn:active{transform:translateY(1px)}
.btn .ico{width:1.25em;height:1.25em;flex:none}
.btn-wa{background:var(--c-wa);color:#fff;box-shadow:0 10px 26px -10px rgba(37,211,102,.7)}
.btn-wa:hover{background:var(--c-wa-dk)}
.btn-gold{background:linear-gradient(160deg,var(--c-gold-lt),var(--c-gold) 55%,var(--c-amber));
  color:#fff;border:1px solid rgba(74,51,28,.35);
  box-shadow:0 12px 26px -12px rgba(180,132,42,.9), inset 0 1px 0 rgba(255,255,255,.4)}
.btn-gold:hover{filter:brightness(1.06)}
.btn-sm{padding:.5em 1em;min-height:40px;font-size:.92rem}
.btn-lg{padding:.95em 1.9em;font-size:1.06rem}
.btn-xl{padding:1.1em 2.3em;font-size:1.18rem}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--c-cobalt);outline-offset:3px;border-radius:8px}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:50%;background:var(--c-parch-2);color:var(--c-ruby);border:1px solid rgba(74,51,28,.2);
  transition:background .2s,transform .15s}
.btn-icon:hover{background:var(--c-gold-lt);color:#fff;transform:translateY(-1px)}
.btn-icon .ico{width:21px;height:21px}

/* ============ HEADER ============ */
.site-header{position:sticky;top:0;z-index:50;
  background:rgba(243,230,199,.9);backdrop-filter:blur(10px);
  border-bottom:3px double rgba(180,132,42,.55);transition:box-shadow .25s, background .25s}
.site-header.scrolled{box-shadow:0 6px 24px -14px rgba(43,30,16,.55);background:rgba(243,230,199,.97)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px}
.brand{display:flex;flex-direction:column;line-height:1.0;color:var(--c-ink)}
.brand-name{font-family:var(--f-display);font-weight:400;font-size:1.9rem;letter-spacing:.02em;color:var(--c-ruby)}
.brand-tag{font-size:.72rem;color:var(--c-wood-2);font-weight:600;letter-spacing:.02em}
.header-cta{display:flex;align-items:center;gap:8px}
.lang-switch{display:flex;gap:2px;background:var(--c-parch-2);border-radius:999px;padding:3px;border:1px solid rgba(74,51,28,.18)}
.lang-switch button{border:0;background:transparent;cursor:pointer;font-family:var(--f-body);
  font-weight:700;font-size:.82rem;color:var(--c-wood-2);padding:.35em .72em;border-radius:999px;line-height:1;transition:background .2s,color .2s}
.lang-switch button:hover{color:var(--c-ruby)}
.lang-switch button[aria-pressed="true"]{background:var(--c-gold);color:#fff}

/* ============ HERO ============ */
.hero{background:#241203}
.hero-banner{display:flex;justify-content:center;background:#241203;
  border-bottom:6px solid var(--c-wood)}
.hero-banner img{width:100%;max-width:1600px;height:auto}
.hero-bar{background:linear-gradient(135deg,var(--c-ruby),var(--c-amber) 130%);color:#fff;
  border-bottom:3px double rgba(255,255,255,.35)}
.hero-bar-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;padding-block:clamp(16px,2.4vw,22px)}
.hero-tag{margin:0;font-weight:600;font-size:clamp(15px,1.9vw,19px);color:#fff7e6;max-width:50ch}
.hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero-scroll{color:#fff;font-weight:700;border-bottom:2px solid rgba(255,255,255,.45);padding-bottom:2px;white-space:nowrap}
.hero-scroll:hover{border-color:#fff}

/* ============ TRUST ============ */
.trust{background:var(--c-wood);color:var(--c-parch);border-block:2px solid rgba(180,132,42,.5)}
.trust-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,4vw,52px);padding-block:18px;text-align:center}
.trust-item{display:flex;align-items:center;gap:.5em;font-weight:600;font-size:1.02rem}
.trust-ico{color:var(--c-gold-lt);font-size:1.2em}

/* ============ GALLERY INTRO ============ */
.gallery-intro{text-align:center}
.gallery-intro .container{max-width:760px}
.gallery-intro .lead{font-size:1.24rem;color:var(--c-ink);font-weight:700;font-family:var(--f-head)}
.gallery-intro p{font-size:1.08rem;color:var(--c-wood-2);margin:0 auto 1.2em}

/* ============ GALLERY (carousel) ============ */
.gallery{background:transparent}
.gallery-alt{background:linear-gradient(180deg,rgba(255,247,225,.6),transparent)}
.carousel{position:relative}
.car-track{display:flex;gap:clamp(16px,2vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:6px 2px 18px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.car-track::-webkit-scrollbar{height:8px}
.car-track::-webkit-scrollbar-thumb{background:rgba(74,51,28,.35);border-radius:8px}
.piece{flex:0 0 auto;width:clamp(244px,74vw,300px);scroll-snap-align:start;
  background:var(--c-card);border-radius:88px 88px var(--radius) var(--radius);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:transform .22s, box-shadow .22s}
.piece:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.piece-btn{display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in}
/* dark leaded / wood frame around each stained-glass image */
.frame{display:flex;align-items:center;justify-content:center;height:308px;overflow:hidden;
  border:7px solid var(--c-wood);border-radius:84px 84px 8px 8px;
  background:radial-gradient(130% 120% at 50% 18%, #fff7e6, var(--c-parch-2));
  box-shadow:inset 0 0 0 2px var(--c-gold-lt), inset 0 8px 26px rgba(43,30,16,.28)}
.frame img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .5s ease}
.piece:hover .frame img{transform:scale(1.05)}
.piece.pic-only{border-radius:88px 88px 12px 12px}
.piece.pic-only .frame{border-radius:84px 84px 10px 10px}
.piece figcaption{padding:16px 18px 18px;text-align:start;display:flex;flex-direction:column;flex:1}
.piece-title{font-family:var(--f-head);font-weight:700;color:var(--c-ruby);font-size:1.2rem;margin:0 0 .25em}
.piece-desc{color:var(--c-wood-2);font-size:.94rem;line-height:1.5;margin:0 0 .6em;flex:1}
.piece-cta{font-weight:700;color:var(--c-gold);font-size:.9rem;display:inline-block}
.piece-cta:hover{text-decoration:underline}
.car-arrow{position:absolute;top:160px;transform:translateY(-50%);z-index:3;
  width:50px;height:50px;border-radius:50%;border:1px solid rgba(74,51,28,.25);cursor:pointer;
  background:var(--c-card);color:var(--c-ruby);box-shadow:var(--shadow);font-size:1.9rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .2s, transform .15s}
.car-arrow:hover{background:var(--c-gold-lt);color:#fff;transform:translateY(-50%) scale(1.07)}
.car-prev{inset-inline-end:-10px}
.car-next{inset-inline-start:-10px}
@media (max-width:560px){.car-arrow{display:none}}

/* ============ SPIRIT ============ */
.spirit{background:linear-gradient(135deg,#2c1608,#5a2417 130%);color:#f6e6c8;
  border-block:4px double rgba(180,132,42,.45)}
.section-title.on-dark{color:#f2cf7e}
.section-sub.on-dark{color:#eed9b4}
.section-title.on-dark::after{color:#ffd98a;-webkit-text-fill-color:#ffd98a;
  text-shadow:38px 4px 0 rgba(255,217,138,.9), -38px 4px 0 rgba(255,217,138,.9)}
.spirit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);margin-bottom:30px}
.spirit-item{border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg);border:6px solid var(--c-wood);
  background:#241206;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.spirit-item img{width:100%;height:100%;object-fit:cover;object-position:center}
.spirit-cta{text-align:center}
@media (max-width:780px){.spirit-grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}

/* ============ SPOTLIGHT ============ */
.spotlight{background:linear-gradient(135deg,var(--c-teal),var(--c-teal-dk));color:#eef6f4;
  border-block:4px double rgba(180,132,42,.45)}
.spotlight-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.spotlight-media{border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg);border:7px solid var(--c-wood);
  background:rgba(0,0,0,.22);display:flex;justify-content:center}
.spotlight-media img{width:100%;height:auto;max-height:600px;object-fit:contain}
.spotlight-text h2{color:#fff;font-size:clamp(28px,3.8vw,42px)}
.spotlight-text p{color:#e6f2ef;font-size:1.06rem;margin-bottom:1.6em}
.spotlight-text .eyebrow{color:#ffd98a}

/* ============ ABOUT ============ */
.about{background:transparent}
.about-inner{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,4vw,56px);align-items:center}
.about-media{border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg);border:7px solid var(--c-wood);background:#fffaf0}
.about-media img{width:100%;height:auto}
.about-text h2{font-size:clamp(28px,3.8vw,42px)}
.about-text p{margin:0 0 1em;font-size:1.06rem;color:var(--c-ink)}
.about-text strong{color:var(--c-ruby)}
.about-warm{font-weight:600;color:var(--c-wood-2);background:var(--c-parch-2);
  border-inline-start:4px solid var(--c-gold);padding:14px 18px;border-radius:10px}

/* ============ PROCESS ============ */
.process{background:linear-gradient(180deg,rgba(255,247,225,.55),transparent)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,28px)}
.step{background:var(--c-card);border-radius:16px;padding:28px 22px;text-align:center;
  box-shadow:var(--shadow);border:1px solid rgba(180,132,42,.3)}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;
  font-family:var(--f-display);font-weight:800;font-size:1.4rem;color:#fff;margin-bottom:10px;
  background:linear-gradient(135deg,var(--c-gold-lt),var(--c-ruby));border:2px solid rgba(74,51,28,.3)}
.step h3{font-size:1.2rem;color:var(--c-ruby);margin-bottom:.3em}
.step p{margin:0;color:var(--c-wood-2);font-size:.95rem}

/* ============ CONTACT ============ */
.contact{background:linear-gradient(135deg,rgba(180,132,42,.16),rgba(156,42,46,.12)),var(--c-parch-2);
  text-align:center;border-top:4px double rgba(180,132,42,.45)}
.contact-lead{max-width:46ch;margin:0 auto 2em;color:var(--c-wood-2);font-size:1.1rem}
.contact-actions{display:flex;flex-direction:column;align-items:center;gap:22px}
.contact-secondary{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px;align-items:center}
.contact-link{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:1.06rem;color:var(--c-ruby);min-height:48px}
.contact-link:hover{color:var(--c-amber)}
.contact-link .ico{width:22px;height:22px}
.contact-area{display:inline-flex;align-items:center;gap:.5em;color:var(--c-wood-2);font-size:.96rem}
.contact-area .ico{width:20px;height:20px;fill:var(--c-gold)}

/* ============ FOOTER ============ */
.site-footer{background:#241203;color:#f0e2c6;border-top:4px double rgba(180,132,42,.5)}
.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;padding-block:34px}
.footer-brand{display:flex;flex-direction:column}
.footer-brand .brand-name{font-family:var(--f-display);font-weight:800;font-size:1.5rem}
.footer-brand .brand-tag{color:#c9b487;font-size:.85rem}
.footer-contact{display:flex;flex-wrap:wrap;gap:18px}
.footer-contact a{color:#f0e2c6;font-weight:600;border-bottom:1px solid transparent}
.footer-contact a:hover{border-color:var(--c-gold-lt)}
.footer-copy{width:100%;text-align:center;color:#a2895f;font-size:.85rem;margin:8px 0 0;
  border-top:1px solid rgba(255,255,255,.09);padding-top:18px}

/* ============ FLOATING WHATSAPP ============ */
.fab-wa{position:fixed;inset-inline-start:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;
  width:60px;height:60px;border-radius:50%;background:var(--c-wa);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -8px rgba(37,211,102,.7);
  animation:fab-in .5s ease both .8s, fab-pulse 2.6s ease-in-out infinite 1.6s}
.fab-wa svg{width:32px;height:32px}
.fab-wa:hover{background:var(--c-wa-dk);transform:scale(1.06)}
.fab-wa.hide{opacity:0;pointer-events:none;transform:scale(.6)}
@keyframes fab-in{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes fab-pulse{0%,100%{box-shadow:0 12px 30px -8px rgba(37,211,102,.7)}
  50%{box-shadow:0 12px 30px -8px rgba(37,211,102,.7),0 0 0 12px rgba(37,211,102,.12)}}
@media (prefers-reduced-motion:reduce){.fab-wa{animation:fab-in .01s both}}

/* ============ LIGHTBOX ============ */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(20,10,3,.96);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px}
.lightbox[hidden]{display:none}
.lb-figure{margin:0;max-width:min(92vw,1100px);max-height:74vh;display:flex;flex-direction:column;align-items:center;gap:10px}
.lb-figure img{max-width:100%;max-height:64vh;object-fit:contain;border-radius:8px;border:6px solid var(--c-wood);
  box-shadow:0 20px 60px rgba(0,0,0,.6);background:#000}
.lb-cap{color:#f0e2c6;font-size:1.05rem;font-family:var(--f-head);text-align:center}
.lb-close{position:absolute;top:16px;inset-inline-start:20px;width:48px;height:48px;border-radius:50%;border:0;
  background:rgba(255,255,255,.14);color:#fff;font-size:2rem;line-height:1;cursor:pointer}
.lb-close:hover{background:rgba(255,255,255,.26)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;border:0;
  background:rgba(255,255,255,.14);color:#fff;font-size:2.2rem;cursor:pointer;line-height:1}
.lb-nav:hover{background:rgba(255,255,255,.28)}
.lb-prev{inset-inline-end:16px}
.lb-next{inset-inline-start:16px}
.lb-wa{margin-top:4px}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .spotlight-inner{grid-template-columns:1fr}
  .spotlight-media{order:-1;max-width:520px;margin-inline:auto}
  .about-inner{grid-template-columns:1fr}
  .about-media{max-width:560px;margin-inline:auto}
}
@media (max-width:600px){
  .steps{grid-template-columns:1fr}
  .brand-tag{display:none}
  .brand-name{white-space:nowrap}
  .hide-mobile{display:none}
  .header-cta .btn-icon{display:none}
  .header-cta{gap:6px}
  .header-cta .btn-wa{padding:.5em;width:42px;height:42px;border-radius:50%}
  .hero-bar-inner{justify-content:center;text-align:center}
  .hero-actions{justify-content:center;width:100%}
  .lb-nav{width:46px;height:46px}
}