/* ==========================================================================
   IDEA GIOIELLI — Maison di famiglia dal 1990
   Tema: lusso classico scuro · oro champagne · serif editoriale
   ========================================================================== */

/* ============================== TOKENS ============================== */
:root{
  --bg:        #0b0b0c;
  --bg-2:      #111113;
  --bg-3:      #16161a;
  --line:      #2a2a2e;
  --line-2:    #1d1d20;
  --ink:       #ece8e1;
  --ink-soft:  #b6b1a8;
  --ink-mute:  #6f6a62;
  --gold:      #c9a96a;
  --gold-2:    #b08f4d;
  --gold-soft: #ddc28a;

  --serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --maxw: 1380px;
  --gut:  clamp(20px, 5vw, 80px);

  --t-fast:  .35s cubic-bezier(.2,.7,.2,1);
  --t-med:   .7s  cubic-bezier(.2,.7,.2,1);
  --t-slow:  1.2s cubic-bezier(.2,.7,.2,1);
}

/* ============================== RESET ============================== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
img,svg{display:block;max-width:100%;height:auto}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
input,textarea,select{font:inherit;color:inherit}

body{
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* fine grain on the whole site */
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.92  0 0 0 0 0.88  0 0 0 0 0.82  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.5;
  mix-blend-mode:overlay;
  z-index:1;
}

::selection{background:var(--gold);color:#111}

/* ============================== UTILITIES ============================== */
.kicker{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
}
.section-head{
  padding: 0 var(--gut);
  max-width:var(--maxw);
  margin:0 auto clamp(40px,6vw,80px);
}
.section-head--center{ text-align:center; }
.section-head .kicker{display:block;margin-bottom:18px}
.section-title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.2rem, 5.4vw, 4.6rem);
  line-height:1.04;
  letter-spacing:-.005em;
  margin:0;
  color:var(--ink);
}
.section-title em{font-style:italic;color:var(--gold)}

.btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:16px 28px;
  font-family:var(--sans);
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;
  border:1px solid var(--line);
  transition:all var(--t-fast);
  cursor:pointer;
  position:relative;
}
.btn--gold{
  background:var(--gold);
  color:#0a0a0a;
  border-color:var(--gold);
}
.btn--gold:hover{
  background:var(--gold-soft);
  border-color:var(--gold-soft);
  transform:translateY(-2px);
}
.btn--ghost{
  color:var(--ink);
  border-color:rgba(236,232,225,.25);
}
.btn--ghost:hover{
  border-color:var(--gold);
  color:var(--gold);
}
.btn--full{ width:100%; justify-content:center }
.btn svg{transition:transform var(--t-fast)}
.btn:hover svg{transform:translateX(4px)}

.link-arrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
  color:var(--gold);
  padding-bottom:6px;
  border-bottom:1px solid rgba(201,169,106,.4);
  transition:all var(--t-fast);
}
.link-arrow::after{
  content:"→";font-size:14px;letter-spacing:0;
  transition:transform var(--t-fast);
}
.link-arrow:hover{ color:var(--gold-soft);border-bottom-color:var(--gold-soft) }
.link-arrow:hover::after{ transform:translateX(4px) }

/* ============================== INTRO LOADER ============================== */
.intro{
  position:fixed;inset:0;z-index:100;
  background:#0a0a0a;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .8s ease, visibility 0s .8s;
}
.intro.is-gone{opacity:0;visibility:hidden;pointer-events:none}
.intro__inner{
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:18px;
}
.intro__line{
  width:0;height:1px;background:var(--gold);
  animation:introLine 1.4s .15s cubic-bezier(.2,.7,.2,1) forwards;
}
.intro__mark{
  font-family:var(--serif);
  font-style:italic;font-weight:300;
  font-size:clamp(2rem,5vw,3.2rem);
  color:var(--ink);
  opacity:0;
  animation:introFade .9s 1s forwards;
}
.intro__since{
  font-size:10px;letter-spacing:.6em;color:var(--gold);
  opacity:0;
  animation:introFade .9s 1.4s forwards;
}
@keyframes introLine { to{ width:120px } }
@keyframes introFade { to{ opacity:1 } }

/* ============================== NAV ============================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:18px var(--gut);
  transition:background var(--t-fast), padding var(--t-fast), border-color var(--t-fast);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(11,11,12,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:12px var(--gut);
  border-bottom-color:var(--line-2);
}
.nav__brand{ justify-self:start;display:flex;align-items:center }
.nav__logo{
  height:46px;width:auto;
  filter: invert(1) brightness(1.15) contrast(1.05);
  transition:height var(--t-fast);
}
.nav.is-stuck .nav__logo{height:38px}

.nav__links{
  justify-self:center;
  display:flex;gap:38px;
}
.nav__links a{
  position:relative;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:400;
  color:var(--ink-soft);
  padding:6px 0;
  transition:color var(--t-fast);
}
.nav__links a::after{
  content:"";position:absolute;left:50%;bottom:0;
  width:0;height:1px;background:var(--gold);
  transition:all var(--t-fast);
  transform:translateX(-50%);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{width:100%}

.nav__cta{
  justify-self:end;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
  color:var(--gold);
  padding:10px 18px;
  border:1px solid rgba(201,169,106,.45);
  transition:all var(--t-fast);
}
.nav__cta:hover{
  background:var(--gold);color:#0a0a0a;border-color:var(--gold);
}

.nav__burger{
  display:none;
  justify-self:end;
  width:36px;height:36px;
  position:relative;
}
.nav__burger span{
  position:absolute;left:8px;right:8px;height:1px;background:var(--ink);
  transition:transform var(--t-fast),top var(--t-fast),opacity var(--t-fast);
}
.nav__burger span:nth-child(1){top:14px}
.nav__burger span:nth-child(2){top:22px}
.nav__burger.is-open span:nth-child(1){top:18px;transform:rotate(45deg)}
.nav__burger.is-open span:nth-child(2){top:18px;transform:rotate(-45deg)}

/* ============================== HERO ============================== */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding: 130px var(--gut) 60px;
  overflow:hidden;
  isolation:isolate;
  z-index:2;
}

/* layered gradient backdrop instead of stock photo, in case images are missing */
.hero__bg{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(60% 50% at 78% 22%, rgba(201,169,106,.18), transparent 70%),
    radial-gradient(80% 60% at 12% 90%, rgba(176,143,77,.10), transparent 70%),
    linear-gradient(180deg, #0a0a0b 0%, #111113 60%, #0a0a0b 100%);
}
/* a subtle vertical "spotlight" */
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 80% at 50% 0%, rgba(255,255,255,.06), transparent 60%);
}
.hero__grain{
  position:absolute;inset:0;z-index:-1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.55;
  pointer-events:none;
}

.hero__rule{
  display:flex;align-items:center;gap:18px;
  font-size:11px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--gold);
  max-width:var(--maxw);width:100%;margin:0 auto;
}
.hero__rule-line{flex:1;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.hero__city{color:var(--ink-soft);letter-spacing:.32em}

.hero__title{
  margin:0;
  align-self:center;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(3.5rem, 13vw, 12rem);
  line-height:.92;
  letter-spacing:-.015em;
  color:var(--ink);
  max-width:var(--maxw);width:100%;
  margin-inline:auto;
  padding: clamp(20px,5vw,60px) 0;
}
.hero__title-row{
  display:block;
  overflow:hidden;
}
.hero__title-row em{
  font-style:italic;
  color:var(--gold);
  font-weight:300;
}
.hero__title-row--shift{ padding-left: clamp(40px, 14vw, 240px) }

.hero__sub{
  font-family:var(--sans);
  font-size:clamp(.95rem,1.1vw,1.05rem);
  line-height:1.7;
  color:var(--ink-soft);
  max-width:480px;
  margin: 24px auto 0;
  text-align:left;
  align-self:end;
  margin-left:auto;margin-right:0;
  padding-right:6px;
}

.hero__actions{
  display:flex;gap:14px;flex-wrap:wrap;
  max-width:var(--maxw);width:100%;
  margin: 36px auto 0;
}

.hero__scroll{
  position:absolute;left:var(--gut);bottom:36px;
  display:flex;align-items:center;gap:14px;
  font-size:10px;letter-spacing:.5em;text-transform:uppercase;
  color:var(--ink-mute);
}
.hero__scroll-line{
  width:60px;height:1px;background:var(--ink-mute);
  position:relative;overflow:hidden;
}
.hero__scroll-line::after{
  content:"";position:absolute;left:-30%;top:0;bottom:0;width:30%;
  background:var(--gold);
  animation:scrollHint 2.4s infinite;
}
@keyframes scrollHint{
  0%{left:-30%}100%{left:100%}
}

/* ============================== MARQUEE ============================== */
.marquee{
  position:relative;z-index:2;
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
  padding:26px 0;
  overflow:hidden;
  background:var(--bg-2);
}
.marquee__track{
  display:inline-flex;
  white-space:nowrap;
  gap:50px;
  animation:marquee 38s linear infinite;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.6rem,3vw,2.6rem);
  color:var(--ink-soft);
  font-weight:300;
}
.marquee__track .dot{color:var(--gold);font-style:normal}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ============================== MAISON ============================== */
.maison{
  position:relative;z-index:2;
  padding: clamp(80px,12vw,160px) var(--gut);
  max-width:var(--maxw);
  margin:0 auto;
}
.maison__grid{
  display:grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(40px,8vw,120px);
  align-items:start;
}
.maison__label{
  position:sticky;top:120px;
}
.maison__copy .lede{
  font-family:var(--serif);
  font-size:clamp(1.6rem,3vw,2.4rem);
  line-height:1.25;
  color:var(--ink);
  margin: 0 0 32px;
  font-weight:300;
}
.maison__copy .lede em{ color:var(--gold);font-style:italic }
.maison__copy p{
  color:var(--ink-soft);
  font-size:1.02rem;
  line-height:1.85;
  max-width:62ch;
  margin: 0 0 28px;
}

/* ============================== SERVICES ============================== */
.services{
  position:relative;z-index:2;
  padding: clamp(60px,10vw,140px) 0;
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 50%, var(--bg) 100%);
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
}
.services__grid{
  max-width:var(--maxw);
  margin:0 auto;
  padding: 0 var(--gut);
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0;
  border-top:1px solid var(--line-2);
}
.service{
  position:relative;
  padding: 50px 40px 60px;
  border-right:1px solid var(--line-2);
  transition:background var(--t-med);
}
.service:last-child{border-right:0}
.service:hover{ background:rgba(201,169,106,.025) }
.service__num{
  display:block;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.2rem;
  color:var(--gold);
  margin-bottom: 28px;
}
.service__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.8rem,2.4vw,2.4rem);
  line-height:1;
  margin: 0 0 22px;
  color:var(--ink);
}
.service__text{
  color:var(--ink-soft);
  font-size:.98rem;
  line-height:1.8;
  max-width:38ch;
  margin:0;
}
.service__rule{
  display:block;
  margin-top:36px;
  width:32px;height:1px;background:var(--gold);
  transition:width var(--t-med);
}
.service:hover .service__rule{ width:64px }

/* ============================== STORY ============================== */
.story{
  position:relative;z-index:2;
  padding: clamp(80px,12vw,160px) var(--gut);
  max-width:var(--maxw);
  margin:0 auto;
}
.story__grid{
  display:grid;
  grid-template-columns: 1fr 2.2fr;
  gap: clamp(40px,8vw,120px);
}
.story__years{
  position:sticky;top:120px;
  display:flex;flex-direction:column;gap:24px;
}
.story__year{
  display:flex;align-items:center;gap:16px;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.4rem;
  color:var(--ink-soft);
}
.story__year span{min-width:60px}
.story__year i{
  width:40px;height:1px;background:var(--gold);display:block;
}
.story__copy .kicker{display:block;margin-bottom:18px}
.story__copy h2{ margin: 0 0 40px }
.story__copy p{
  color:var(--ink-soft);
  font-size:1.05rem;
  line-height:1.85;
  max-width:62ch;
  margin: 0 0 24px;
}
.story__copy strong{color:var(--ink);font-weight:500}
.story__signature{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.15rem;
  color:var(--gold);
  margin-top: 36px !important;
}

/* ============================== PILLARS ============================== */
.pillars{
  position:relative;z-index:2;
  background:var(--bg-2);
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
  padding: clamp(60px,8vw,100px) var(--gut);
}
.pillars__grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:48px;
}
.pillar{
  border-top:1px solid var(--gold);
  padding-top:24px;
}
.pillar__num{
  font-family:var(--serif);
  font-style:italic;
  color:var(--gold);
  font-size:1rem;
}
.pillar h4{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.4rem;
  margin:14px 0 10px;
  color:var(--ink);
}
.pillar p{
  margin:0;
  color:var(--ink-soft);
  font-size:.95rem;
  line-height:1.7;
}

/* ============================== CONTACT ============================== */
.contact{
  position:relative;z-index:2;
  padding: clamp(80px,12vw,160px) var(--gut);
  max-width:var(--maxw);
  margin:0 auto;
}
.contact__grid{
  display:grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px,8vw,100px);
  align-items:start;
}
.contact__info{ display:flex;flex-direction:column;gap:34px }
.contact__block .contact__label{
  display:block;
  font-size:10px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--gold);
  margin-bottom:8px;
}
.contact__block p{
  margin:0;
  font-family:var(--serif);
  font-size:1.25rem;
  line-height:1.5;
  color:var(--ink);
  font-weight:300;
}
.contact__block a{ transition:color var(--t-fast) }
.contact__block a:hover{ color:var(--gold) }

.contact__form{
  background:var(--bg-2);
  border:1px solid var(--line-2);
  padding: clamp(28px,4vw,48px);
  display:flex;flex-direction:column;gap:22px;
}
.hp{ position:absolute;left:-9999px;width:1px;height:1px;opacity:0 }
.field{ display:flex;flex-direction:column;gap:8px }
.field-row{ display:grid;grid-template-columns:1fr 1fr;gap:18px }
.field label{
  font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink-mute);
}
.field label span{ color:var(--ink-mute);text-transform:none;letter-spacing:.05em;font-style:italic }
.field input,
.field select,
.field textarea{
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  padding: 12px 0;
  font-family:var(--serif);
  font-size:1.1rem;
  color:var(--ink);
  font-weight:300;
  transition:border-color var(--t-fast);
  border-radius:0;
}
.field select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 5 5-5' fill='none' stroke='%23c9a96a' stroke-width='1'/></svg>");
  background-repeat:no-repeat;
  background-position:right 4px center;
}
.field select option{ background:var(--bg-2);color:var(--ink) }
.field textarea{ resize:vertical;min-height:120px }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-bottom-color:var(--gold);
}
.field textarea::placeholder{ color:var(--ink-mute);font-style:italic }

.check{
  display:flex;gap:12px;align-items:flex-start;
  font-size:.85rem;color:var(--ink-soft);line-height:1.55;
  cursor:pointer;
}
.check input{
  appearance:none;-webkit-appearance:none;
  width:16px;height:16px;
  border:1px solid var(--line);
  background:transparent;
  flex-shrink:0;
  position:relative;cursor:pointer;
  margin-top:2px;
}
.check input:checked{ background:var(--gold);border-color:var(--gold) }
.check input:checked::after{
  content:"";position:absolute;
  left:4px;top:0;
  width:5px;height:10px;
  border:solid #0a0a0a;border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);
}

.form-status{
  margin:0;font-size:.9rem;min-height:1em;
}
.form-status.is-ok{ color:var(--gold-soft) }
.form-status.is-err{ color:#e08b7a }

/* ============================== FOOTER ============================== */
.foot{
  position:relative;z-index:2;
  background:#08080a;
  border-top:1px solid var(--line-2);
  padding: 80px var(--gut) 30px;
}
.foot__inner{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1fr 2fr;gap:60px;
  padding-bottom:50px;
  border-bottom:1px solid var(--line-2);
}
.foot__brand img{
  height:54px;width:auto;
  filter:invert(1) brightness(1.1);
  margin-bottom:18px;
}
.foot__brand p{
  font-family:var(--serif);font-style:italic;
  color:var(--ink-soft);
  margin:0;
}
.foot__cols{ display:grid;grid-template-columns:repeat(3,1fr);gap:40px }
.foot__cols div{ display:flex;flex-direction:column;gap:10px }
.foot__label{
  font-size:10px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--gold);
  margin-bottom:8px;
}
.foot__cols a{
  color:var(--ink-soft);
  font-size:.95rem;
  transition:color var(--t-fast);
}
.foot__cols a:hover{ color:var(--gold) }
.foot__bottom{
  max-width:var(--maxw);margin:24px auto 0;
  display:flex;justify-content:space-between;
  font-size:.78rem;color:var(--ink-mute);letter-spacing:.04em;
  flex-wrap:wrap;gap:18px;
  line-height:1.7;
}
.foot__legal{ display:flex;flex-direction:column;gap:2px }
.foot__legal--right{ text-align:right }
@media (max-width:700px){
  .foot__legal,.foot__legal--right{ text-align:left }
}

.link-arrow--sm{
  font-size:10px;letter-spacing:.22em;
  margin-top:10px;
  padding-bottom:4px;
}

/* ============================== REVEAL ANIMATIONS ============================== */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].is-in{
  opacity:1;
  transform:translateY(0);
}
[data-reveal-delay="1"].is-in{ transition-delay:.1s }
[data-reveal-delay="2"].is-in{ transition-delay:.2s }
[data-reveal-delay="3"].is-in{ transition-delay:.3s }

/* ============================== RESPONSIVE ============================== */
@media (max-width: 980px){
  .nav__links,
  .nav__cta{ display:none }
  .nav{ grid-template-columns:1fr auto }
  .nav__burger{ display:block }

  .nav__links.is-mobile{
    display:flex;
    position:fixed;inset:0;
    background:rgba(8,8,10,.97);
    backdrop-filter:blur(20px);
    flex-direction:column;
    align-items:center;justify-content:center;
    gap:32px;
    z-index:49;
  }
  .nav__links.is-mobile a{
    font-family:var(--serif);font-style:italic;
    font-size:2rem;letter-spacing:0;text-transform:none;
    color:var(--ink);
  }

  .hero__title-row--shift{ padding-left: 0 }
  .hero__sub{ margin-left:0 }

  .maison__grid,
  .story__grid,
  .contact__grid{ grid-template-columns:1fr }
  .maison__label,
  .story__years{ position:static;top:auto }
  .story__years{ flex-direction:row;flex-wrap:wrap;gap:20px }

  .services__grid{ grid-template-columns:1fr }
  .service{ border-right:0;border-bottom:1px solid var(--line-2) }
  .service:last-child{ border-bottom:0 }

  .pillars__grid{ grid-template-columns:repeat(2,1fr);gap:30px }

  .foot__inner{ grid-template-columns:1fr }
  .foot__cols{ grid-template-columns:repeat(3,1fr);gap:24px }
}

@media (max-width: 600px){
  .field-row{ grid-template-columns:1fr }
  .pillars__grid{ grid-template-columns:1fr }
  .foot__cols{ grid-template-columns:1fr;gap:24px }
  .hero__scroll{ display:none }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1;transform:none}
}