/* ============================================================
   BELNOTTE — The Art of Ritual
   Palette: paper white · soft black · bronze gold
   Type: Cinzel (titles) · Cormorant Garamond (headings) · Jost (text & interface)
   ============================================================ */

:root{
  --paper:#FCFBF9;
  --paper-alt:#F6F4EF;
  --ink:#1C1B18;
  --ink-soft:#3A3833;
  --soft-black:#070707;
  --soft-black-2:#101010;
  --gold:#A6874F;
  --gold-light:#C3A46C;
  --cream:#F1E9DA;
  --muted:#757166;
  --muted-dark:#A79F8D;
  --line:rgba(28,27,24,.14);
  --line-gold:rgba(166,135,79,.38);
  --line-dark:rgba(241,233,218,.16);
  --shadow:0 18px 60px rgba(20,19,17,.10);
  --display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --display-caps:'Cinzel', 'Trajan Pro', Georgia, serif;
  --text:'Jost', 'Avenir Next', Avenir, 'Century Gothic', sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-weight:400;
  font-size:16px;
  line-height:1.75;
  letter-spacing:.015em;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.container{width:min(1180px,calc(100% - 48px));margin-inline:auto}
.narrow{width:min(820px,calc(100% - 48px));margin-inline:auto}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:40;
  background:var(--soft-black);
  border-bottom:1px solid var(--line-gold);
}
.nav{height:84px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:16px}
.brand-logo{height:50px;width:auto;display:block}
.brand-logo.large{height:76px}
.footer-brand{flex-direction:column;align-items:flex-start;gap:14px}
.brand-kicker{display:block;font-size:8.5px;letter-spacing:.42em;color:var(--muted-dark);text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:26px;font-size:10.5px;text-transform:uppercase;letter-spacing:.24em}
.nav-links a{color:rgba(241,233,218,.72);padding:6px 0;border-bottom:1px solid transparent;transition:color .25s ease,border-color .25s ease}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--gold-light);border-bottom-color:var(--line-gold)}
.menu-btn{
  display:none;border:1px solid var(--line-dark);background:transparent;color:var(--cream);
  padding:10px 16px;font-family:var(--text);font-size:10px;letter-spacing:.28em;text-transform:uppercase;cursor:pointer;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--ink);color:var(--ink);background:transparent;
  padding:15px 30px;min-height:50px;
  font-family:var(--text);font-size:10.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.26em;cursor:pointer;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.btn:hover{background:var(--ink);color:var(--cream)}
.btn.gold{border-color:var(--gold);color:var(--gold)}
.btn.gold:hover{background:var(--gold);color:var(--paper)}
.btn.on-dark{border-color:var(--cream);color:var(--cream)}
.btn.on-dark:hover{background:var(--cream);color:var(--ink)}
.btn.subtle{border-color:var(--line);color:var(--ink-soft);padding:12px 22px}
.btn.subtle:hover{border-color:var(--ink);background:transparent;color:var(--ink)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* ---------- Hero (home) ---------- */
.hero{position:relative;background:var(--soft-black);color:var(--cream);overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.5}
.hero-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,19,17,.35) 0%,rgba(20,19,17,.62) 68%,var(--soft-black) 100%)}
.hero-content{position:relative;min-height:78vh;display:grid;place-items:center;text-align:center;padding:110px 0 130px}
.hero-icon{width:clamp(58px,7vw,88px);height:auto;margin:0 auto 30px;filter:drop-shadow(0 6px 24px rgba(0,0,0,.5))}
.hero-title{
  font-family:var(--display-caps);font-weight:400;
  font-size:clamp(30px,4.8vw,52px);letter-spacing:.26em;text-indent:.26em;
  margin:0;color:var(--cream);
}
.hero-sub{font-family:var(--display-caps);font-size:clamp(14px,1.6vw,17px);letter-spacing:.44em;text-indent:.44em;text-transform:uppercase;color:var(--gold-light);margin:20px 0 0}
.hero .lede{max-width:560px;margin:34px auto 0;color:rgba(241,233,218,.82);font-weight:300;font-size:16.5px;line-height:1.9}
.hero .cta-row{justify-content:center}

/* Signature plumb line — a single gold thread from the hero into the page */
.plumb{position:relative;height:110px;background:var(--paper)}
.plumb::before{content:"";position:absolute;left:50%;top:0;width:1px;height:100%;background:linear-gradient(180deg,var(--gold) 0%,rgba(166,135,79,0) 100%)}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{background:var(--soft-black);color:var(--cream);padding:92px 0 84px;text-align:center;position:relative}
.page-hero::after{content:"";position:absolute;left:50%;bottom:-55px;width:1px;height:110px;background:linear-gradient(180deg,var(--gold) 40%,rgba(166,135,79,0) 100%);z-index:1}
.breadcrumb{font-size:9.5px;letter-spacing:.46em;text-transform:uppercase;color:var(--gold-light);margin-bottom:22px}
.page-hero h1{
  font-family:var(--display-caps);font-weight:400;
  font-size:clamp(23px,3.2vw,36px);letter-spacing:.2em;text-indent:.2em;text-transform:uppercase;
  margin:0;
}
.page-hero .lede{max-width:600px;margin:26px auto 0;color:rgba(241,233,218,.78);font-weight:300;font-size:16px;line-height:1.9}

/* ---------- Sections ---------- */
.section{padding:110px 0}
.section.alt{background:var(--paper-alt)}
.section.first{padding-top:130px}
.section-kicker{
  font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:14px;margin-bottom:22px;
}
.section-kicker::before{content:"";width:34px;height:1px;background:var(--gold);flex:none}
.centered .section-kicker{justify-content:center}
.centered .section-kicker::after{content:"";width:34px;height:1px;background:var(--gold);flex:none}
h2.section-title,.text-block h2{
  font-family:var(--display);font-weight:600;
  font-size:clamp(27px,3vw,36px);letter-spacing:.03em;line-height:1.35;
  margin:0 0 24px;color:var(--ink);
}
.section-copy{color:var(--ink-soft);font-weight:300;font-size:16px;max-width:640px}
.section-head{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:end;margin-bottom:66px}
.centered{text-align:center}
.centered .section-copy{margin-inline:auto}

.quote{
  font-family:var(--display);font-weight:500;font-style:italic;
  font-size:clamp(23px,2.7vw,31px);line-height:1.7;letter-spacing:.01em;
  text-align:center;color:var(--ink);margin:0;
}
.quote span{color:var(--gold)}
.quote-attr{text-align:center;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--muted);margin-top:28px}

.rule{height:1px;background:var(--line);margin:34px 0}

/* ---------- Cards ---------- */
.grid{display:grid;gap:34px}
.grid.three{grid-template-columns:repeat(3,1fr)}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.two.duo{width:min(790px,100%);margin:34px auto 0}
.card{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color .3s ease,box-shadow .35s ease,transform .35s ease}
a.card:hover{border-color:var(--line-gold);box-shadow:var(--shadow);transform:translateY(-3px)}
.card-image{aspect-ratio:4/3.1;overflow:hidden;background:var(--soft-black-2)}
.card-image.tall{aspect-ratio:3/3.6}
.card-image img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
a.card:hover .card-image img{transform:scale(1.035)}
.card-body{padding:30px 30px 34px;display:flex;flex-direction:column;gap:12px;flex:1}
.card-body .meta{font-size:9.5px;letter-spacing:.38em;text-transform:uppercase;color:var(--gold)}
.card-body h3{font-family:var(--display);font-weight:600;font-size:23px;letter-spacing:.05em;margin:0;color:var(--ink)}
.card-body p{margin:0;color:var(--ink-soft);font-weight:300;font-size:14.5px;line-height:1.8}
.card-body .btn{margin-top:auto;align-self:flex-start}

/* ---------- Split layout ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:center}
.split.rev .image-frame{order:2}
.image-frame{border:1px solid var(--line);padding:14px;background:#fff}
.image-frame img{width:100%}
.image-frame.plain{border:none;padding:0;background:transparent}
.text-block p{color:var(--ink-soft);font-weight:300;font-size:16px;max-width:520px}

/* ---------- Detail list ---------- */
.detail-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.detail{padding:48px 40px;border-left:1px solid var(--line)}
.detail:first-child{border-left:none}
.detail h4{font-family:var(--display-caps);font-weight:400;font-size:14px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 16px;color:var(--ink)}
.detail h4 span{color:var(--gold)}
.detail p{margin:0;color:var(--ink-soft);font-weight:300;font-size:14.5px;line-height:1.85}

/* ---------- Dark band ---------- */
.band-dark{background:var(--soft-black);color:var(--cream);padding:110px 0;text-align:center}
.band-dark .section-kicker{justify-content:center;color:var(--gold-light)}
.band-dark .section-kicker::before,.band-dark .section-kicker::after{content:"";width:34px;height:1px;background:var(--gold);flex:none}
.band-dark h2{font-family:var(--display);font-weight:600;font-size:clamp(26px,3vw,34px);letter-spacing:.03em;margin:0 0 22px;color:var(--cream)}
.band-dark p{color:rgba(241,233,218,.75);font-weight:300;max-width:560px;margin:0 auto}
.band-dark .cta-row{justify-content:center}

/* ---------- Forms ---------- */
.form-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:76px;align-items:start}
.form-panel{border:1px solid var(--line);background:#fff;padding:50px}
.field{margin-bottom:26px}
.field label,.form-panel > label{display:block;font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.field input,.field select,.field textarea{
  width:100%;border:none;border-bottom:1px solid var(--line);background:transparent;
  padding:10px 2px;font-family:var(--text);font-size:15.5px;font-weight:300;color:var(--ink);
  border-radius:0;transition:border-color .25s ease;
}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23A6874F'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold)}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;margin:6px 0 30px}
.check{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:300;color:var(--ink-soft)}
.check input{accent-color:var(--gold);width:15px;height:15px}
.form-note{font-size:12.5px;font-weight:300;color:var(--muted);line-height:1.8;margin:0 0 26px}
.status{margin-top:20px;font-size:13px;letter-spacing:.06em;color:var(--gold)}
.contact-line{font-size:15px;font-weight:300;color:var(--ink-soft)}
.contact-line strong{font-weight:500;letter-spacing:.06em;color:var(--ink)}

/* ---------- Footer ---------- */
.footer{background:var(--soft-black);color:var(--cream);padding:80px 0 46px;border-top:1px solid var(--line-gold)}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:44px;padding-bottom:52px;border-bottom:1px solid var(--line-dark)}
.footer-links{display:flex;flex-wrap:wrap;gap:12px 30px;font-size:10.5px;text-transform:uppercase;letter-spacing:.24em}
.footer-links a{color:rgba(241,233,218,.65);transition:color .25s ease}
.footer-links a:hover{color:var(--gold-light)}
.footer-bottom{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;padding-top:30px;font-size:11.5px;letter-spacing:.14em;color:rgba(241,233,218,.45)}

/* ---------- Focus & motion ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .grid.three{grid-template-columns:repeat(2,1fr)}
  .detail-list{grid-template-columns:1fr}
  .detail{border-left:none;border-top:1px solid var(--line)}
  .detail:first-child{border-top:none}
  .section-head{grid-template-columns:1fr;gap:26px;align-items:start}
}
@media (max-width:860px){
  .nav{height:74px}
  .menu-btn{display:inline-flex}
  .nav-links{
    display:none;position:absolute;left:0;right:0;top:74px;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--soft-black);border-bottom:1px solid var(--line-gold);padding:14px 24px 22px;
  }
  .nav-links.open{display:flex}
  .nav-links a{width:100%;padding:13px 0;border-bottom:1px solid var(--line-dark)}
  .split,.split.rev,.form-wrap{grid-template-columns:1fr;gap:44px}
  .split.rev .image-frame{order:0}
  .section{padding:76px 0}
  .hero-content{min-height:64vh;padding:90px 0 110px}
  .form-panel{padding:34px 26px}
  .checks{grid-template-columns:1fr}
  .footer-top{flex-direction:column}
}
@media (max-width:560px){
  .grid.three,.grid.two{grid-template-columns:1fr}
  .brand-logo{height:38px}
  .brand-logo.large{height:58px}
}