/* Riton Divez — Design System
   Palette, typography and layout per approved art direction. */

:root{
  --color-bg:#14140F;
  --color-surface:#EDE7DA;
  --color-text:#1B1B16;
  --color-muted:#6E6A5E;
  --color-accent:#B08D57;
  --font-display:'Cinzel', serif;
  --font-body:'Plus Jakarta Sans', sans-serif;
  --container-w:1180px;
  --space-1:0.5rem;
  --space-2:1rem;
  --space-3:1.75rem;
  --space-4:3rem;
  --space-5:5rem;
  --space-6:8rem;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--color-surface);
  color:var(--color-text);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{margin:0 0 var(--space-2);font-family:var(--font-display);font-weight:600;letter-spacing:0.01em;line-height:1.15;}
p{margin:0 0 var(--space-2);}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:0;top:-40px;background:var(--color-accent);
  color:var(--color-bg);padding:0.6rem 1rem;z-index:1000;transition:top .2s ease;
}
.skip-link:focus{top:0;}

.container{
  width:100%;
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 1.5rem;
}

.eyebrow{
  font-family:var(--font-body);
  font-size:0.78rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--color-accent);
  margin-bottom:var(--space-2);
  font-weight:600;
}
.eyebrow--light{color:var(--color-accent);}

.display-heading{
  font-size:clamp(1.8rem,3.2vw,2.9rem);
  color:var(--color-text);
}
.display-heading--light{color:var(--color-surface);}
.display-heading--hero{
  font-size:clamp(2.4rem,6vw,4.6rem);
  color:var(--color-surface);
}

.lede{font-size:1.15rem;color:var(--color-text);max-width:44ch;}
.band-dark .lede,.band-dark p{color:var(--color-surface);}
.band-dark .eyebrow{color:var(--color-accent);}
.band-surface p{color:var(--color-text);}
.muted{color:var(--color-muted);}

.hairline{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--color-accent) 20%, var(--color-accent) 80%, transparent);
  margin:var(--space-5) auto 0;
  max-width:var(--container-w);
  width:100%;
}
.hairline--muted{
  background:linear-gradient(90deg, transparent, rgba(176,141,87,0.35) 20%, rgba(176,141,87,0.35) 80%, transparent);
  margin:var(--space-4) auto;
}

.btn{
  display:inline-block;
  padding:0.85rem 1.8rem;
  font-size:0.85rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:600;
  border:1px solid var(--color-accent);
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.btn--outline-light{color:var(--color-surface);border-color:var(--color-accent);background:transparent;}
.btn--outline-light:hover,.btn--outline-light:focus-visible{background:var(--color-accent);color:var(--color-bg);}
.btn--solid{background:var(--color-accent);color:var(--color-bg);}
.btn--solid:hover,.btn--solid:focus-visible{background:transparent;color:var(--color-surface);}
.btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:500;
  background:var(--color-bg);
  border-bottom:1px solid rgba(176,141,87,0.35);
}
.header-inner{
  max-width:var(--container-w);
  margin:0 auto;
  padding:1.1rem 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.wordmark{
  font-family:var(--font-display);
  color:var(--color-surface);
  font-size:1.25rem;
  letter-spacing:0.06em;
}
.wordmark--footer{margin-bottom:0.4rem;}
.main-nav{position:relative;}
#nav-list{
  display:flex;
  gap:2rem;
  list-style:none;
  margin:0;padding:0;
}
#nav-list a{
  color:var(--color-surface);
  font-size:0.85rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:0.3rem 0;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
#nav-list a:hover,#nav-list a:focus-visible,#nav-list a[aria-current="page"]{
  border-color:var(--color-accent);
  color:var(--color-accent);
}
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0.4rem;
}
.nav-toggle-bar{
  width:22px;height:2px;background:var(--color-surface);display:block;transition:transform .25s ease, opacity .25s ease;
}

@media (max-width:860px){
  .nav-toggle{display:flex;}
  #nav-list{
    position:absolute;
    top:calc(100% + 1.1rem);
    right:0;
    background:var(--color-bg);
    border:1px solid rgba(176,141,87,0.35);
    flex-direction:column;
    gap:0;
    min-width:210px;
    padding:0.5rem 0;
    display:none;
  }
  #nav-list.is-open{display:flex;}
  #nav-list li{border-bottom:1px solid rgba(176,141,87,0.15);}
  #nav-list li:last-child{border-bottom:none;}
  #nav-list a{display:block;padding:0.85rem 1.2rem;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--color-bg);
}
.hero-media{
  position:absolute;inset:0;
}
.hero-media img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(1.02);
}
.hero::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(20,20,15,0.05) 0%, rgba(20,20,15,0.35) 55%, rgba(20,20,15,0.94) 100%);
}
.hero-content{
  position:relative;
  z-index:2;
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 1.5rem var(--space-5);
  width:100%;
}
.hero-sub{
  color:var(--color-surface);
  max-width:46ch;
  font-size:1.05rem;
  margin-bottom:var(--space-3);
}

/* ---------- Sections generic ---------- */
.section{padding:var(--space-6) 0;}
.band-surface{background:var(--color-surface);color:var(--color-text);}
.band-dark{background:var(--color-bg);color:var(--color-surface);}

/* Statement asymmetric split */
.statement-grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:var(--space-5);
  align-items:start;
}
@media (max-width:820px){
  .statement-grid{grid-template-columns:1fr;gap:var(--space-3);}
}

/* Offer split (full-bleed image half) */
.offer-grid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  align-items:stretch;
}
.offer-media{position:relative;min-height:420px;}
.offer-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.offer-copy{
  padding:var(--space-5) var(--space-4);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:0.4rem;
}
.offer-copy p{max-width:42ch;}
.offer-copy .btn{margin-top:1rem;align-self:flex-start;}
@media (max-width:900px){
  .offer-grid{grid-template-columns:1fr;}
  .offer-media{min-height:320px;}
  .offer-copy{padding:var(--space-4) var(--space-2);}
}

/* Craft split (image right by default) */
.craft-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:var(--space-5);
  align-items:center;
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 1.5rem;
}
.craft-media img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}
@media (max-width:860px){
  .craft-grid{grid-template-columns:1fr;gap:var(--space-3);}
}

/* Fullbleed */
.fullbleed{
  position:relative;
  min-height:70vh;
  overflow:hidden;
}
.fullbleed img{
  width:100%;height:100%;object-fit:cover;
  position:absolute;inset:0;
}
.fullbleed-caption{
  position:relative;z-index:2;
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:var(--space-5) 1.5rem;
  max-width:var(--container-w);
  margin:0 auto;
  background:linear-gradient(90deg, rgba(20,20,15,0.55) 0%, rgba(20,20,15,0.05) 60%);
}
.fullbleed-caption .display-heading{max-width:16ch;}

/* Gallery — museum-style staggered grid */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:220px;
  gap:2px;
  margin-top:var(--space-3);
}
.gallery-item{
  position:relative;
  margin:0;
  overflow:hidden;
}
.gallery-item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease;
}
.gallery-item:hover img{transform:scale(1.04);}
.gallery-item figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:0.8rem 1rem;
  font-size:0.8rem;
  letter-spacing:0.04em;
  color:var(--color-surface);
  background:linear-gradient(180deg, transparent, rgba(20,20,15,0.85));
}
.gallery-item--tall{grid-row:span 2;grid-column:span 1;}
.gallery-item--wide{grid-column:span 2;}
@media (max-width:900px){
  .gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px;}
  .gallery-item--tall{grid-row:span 2;}
  .gallery-item--wide{grid-column:span 2;}
}
@media (max-width:560px){
  .gallery-grid{grid-template-columns:1fr;grid-auto-rows:260px;}
  .gallery-item--tall,.gallery-item--wide{grid-column:span 1;grid-row:span 1;}
}

/* Full page gallery (gallery.php) */
.gallery-full-section{display:flex;flex-direction:column;}
.gallery-full{margin:0;}
.gallery-full img{width:100%;max-height:78vh;object-fit:cover;}
.gallery-full figcaption{padding-top:1rem;display:flex;gap:1rem;align-items:baseline;}
.gallery-full figcaption p:last-child{font-size:1.05rem;}

/* FAQ */
.faq-container{max-width:820px;}
.faq-list{margin-top:var(--space-3);}
.faq-list details{
  border-bottom:1px solid rgba(176,141,87,0.35);
  padding:1.1rem 0;
}
.faq-list summary{
  cursor:pointer;
  font-weight:600;
  font-size:1.05rem;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{
  content:"+";
  color:var(--color-accent);
  font-size:1.3rem;
  margin-left:1rem;
}
.faq-list details[open] summary::after{content:"–";}
.faq-list p{margin-top:0.8rem;max-width:60ch;}

/* CTA architectural bar */
.cta-bar{
  background:var(--color-bg);
  color:var(--color-surface);
  padding:var(--space-5) 0;
  border-top:1px solid rgba(176,141,87,0.35);
}
.cta-inner{text-align:left;max-width:640px;}
.cta-actions{display:flex;gap:1rem;flex-wrap:wrap;margin:1.3rem 0;}
.cta-address{color:var(--color-muted);font-size:0.9rem;}

/* Page header band (about, services, contacts, gallery) */
.page-header{
  background:var(--color-bg);
  padding:var(--space-5) 0 var(--space-4);
  border-bottom:1px solid rgba(176,141,87,0.35);
}
.page-header-sub{color:var(--color-surface);opacity:0.85;max-width:52ch;}

/* Value grid (about.php) */
.value-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-4);
  margin-top:var(--space-3);
}
.value-index{
  font-family:var(--font-display);
  color:var(--color-accent);
  font-size:1.1rem;
  margin-bottom:0.3rem;
}
@media (max-width:820px){
  .value-grid{grid-template-columns:1fr;}
}

/* Category list (services.php) */
.category-list{max-width:820px;}
.category-item h2{font-size:1.4rem;}
.category-item p{max-width:60ch;}

/* Contact grid (contacts.php) */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-3);
}
.contact-card{
  border-top:1px solid rgba(176,141,87,0.4);
  padding-top:1rem;
}
@media (max-width:820px){
  .contact-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:520px){
  .contact-grid{grid-template-columns:1fr;}
}

/* Subtle grain overlay on dark bands for texture, pure CSS */
.band-dark, .hero, .fullbleed, .cta-bar, .page-header{
  position:relative;
}
.band-dark::before, .cta-bar::before, .page-header::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  opacity:0.04;
  background-image:
    repeating-linear-gradient(0deg, rgba(237,231,218,0.6) 0px, transparent 1px, transparent 2px, rgba(237,231,218,0.6) 3px),
    repeating-linear-gradient(90deg, rgba(237,231,218,0.4) 0px, transparent 1px, transparent 2px, rgba(237,231,218,0.4) 3px);
  mix-blend-mode:overlay;
}

/* Reveal on scroll */
[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}
[data-reveal].is-visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none;}
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--color-bg);
  color:var(--color-surface);
  padding:var(--space-5) 0 var(--space-3);
  border-top:1px solid rgba(176,141,87,0.35);
}
.footer-inner{
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 1.5rem;
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 0.8fr;
  gap:var(--space-4);
}
.footer-tagline{color:var(--color-muted);max-width:26ch;}
.footer-heading{
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:0.75rem;
  color:var(--color-accent);
  margin-bottom:0.7rem;
}
.footer-nav ul, .footer-legal ul{list-style:none;margin:0;padding:0;}
.footer-nav li, .footer-legal li{margin-bottom:0.5rem;}
.footer-nav a, .footer-legal a{color:var(--color-surface);}
.footer-nav a:hover, .footer-legal a:hover{color:var(--color-accent);}
.footer-contact p{margin-bottom:0.4rem;color:var(--color-surface);}
.footer-vat{color:var(--color-muted);font-size:0.85rem;}
.footer-bottom{
  max-width:var(--container-w);
  margin:var(--space-4) auto 0;
  padding:1rem 1.5rem 0;
  border-top:1px solid rgba(176,141,87,0.2);
  color:var(--color-muted);
  font-size:0.8rem;
}
@media (max-width:900px){
  .footer-inner{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .footer-inner{grid-template-columns:1fr;}
}

/* Chevron corner mark — signature device */
.chevron{
  position:relative;
}
.chevron::before{
  content:"";
  position:absolute;
  top:0;left:0;
  width:22px;height:22px;
  border-top:2px solid var(--color-accent);
  border-left:2px solid var(--color-accent);
}
/* STD GEN generated brand lockup */
.lf-brand-lockup{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto}.lf-brand-lockup img{display:block;width:auto;height:44px;max-width:min(260px,48vw);object-fit:contain}@media(max-width:700px){.lf-brand-lockup img{height:36px;max-width:54vw}}
