:root{
  --cream:#F7F5EF;
  --cream-deep:#F0EDE3;
  --sage:#CED3BE;
  --sage-deep:#A9B192;
  --gold:#8C7A4A;
  --gold-deep:#6E5E37;
  --ink:#1A1A17;
  --ink-soft:#4A473E;
  --line: rgba(26,26,23,0.12);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:19px;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Jost',sans-serif;
  font-weight:400;
  font-size:1.05rem;
  line-height:1.6;
  overflow-x:hidden;
}
@media (max-width:600px){
  html{font-size:17px;}
}
h1,h2,h3,.serif{
  font-family:'Bodoni Moda', serif;
  font-weight:500;
  letter-spacing:0.01em;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
::selection{background:var(--sage);color:var(--ink);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

/* ---------- NAV ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(247,245,239,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav.wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:84px;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{height:34px;width:auto;}
.navlinks{display:flex;align-items:center;gap:40px;font-size:0.92rem;letter-spacing:0.03em;text-transform:uppercase;}
.navlinks a{position:relative;padding-bottom:4px;}
.navlinks a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);
  transition:width 0.3s ease;
}
.navlinks a:hover::after,.navlinks a.active::after{width:100%;}
.navlinks a.active{color:var(--gold-deep);}
.nav-cta{
  border:1px solid var(--ink);padding:10px 22px;border-radius:2px;
  font-size:0.85rem;letter-spacing:0.03em;text-transform:uppercase;
  transition:background 0.3s ease, color 0.3s ease;
  white-space:nowrap;
}
.nav-cta:hover{background:var(--ink);color:var(--cream);}
.navlinks a:focus-visible, .nav-cta:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.burger span{display:block;width:26px;height:2px;background:var(--ink);margin:6px 0;}

@media (max-width:900px){
  .navlinks{display:none;}
  .burger{display:block;}
}
.navlinks.open{
  display:flex !important;position:absolute;top:84px;left:0;right:0;
  background:var(--cream);flex-direction:column;padding:24px 32px;
  border-bottom:1px solid var(--line);gap:20px;
}

/* ---------- PAGE HERO (inner pages) ---------- */
.page-hero{
  padding:180px 0 90px;position:relative;overflow:hidden;
}
.page-hero .eyebrow{margin-bottom:18px;}
.page-hero h1{font-size:clamp(2.6rem,6vw,4.4rem);line-height:1.02;max-width:760px;}
.page-hero p.lead{color:var(--ink-soft);font-size:1.1rem;max-width:520px;margin-top:22px;line-height:1.6;}
.page-hero .shape{position:absolute;opacity:0.85;z-index:0;}

.eyebrow{
  font-size:0.85rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:22px;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:'';width:36px;height:1px;background:var(--gold-deep);}

/* shapes (legacy, mostly unused now) */
.shape.circle{width:220px;height:220px;border-radius:50%;background:var(--sage);}
.shape.tri-gold{width:0;height:0;border-left:80px solid transparent;border-right:80px solid transparent;border-bottom:130px solid var(--gold);}
.shape.tri-sage{width:0;height:0;border-left:60px solid transparent;border-right:60px solid transparent;border-bottom:200px solid var(--sage);}
.shape.tri-ink{width:0;height:0;border-left:44px solid transparent;border-right:44px solid transparent;border-bottom:78px solid var(--ink);}
@keyframes float1{0%,100%{transform:translateY(0px);}50%{transform:translateY(-20px);}}
@keyframes float2{0%,100%{transform:translateY(0px);}50%{transform:translateY(16px);}}

/* faint brand-mark watermark, replaces the geometric shape clutter */
.mark-watermark{
  position:absolute;
  left:-6%;
  top:50%;
  transform:translateY(-50%);
  width:min(32vw, 460px);
  opacity:0.07;
  filter:grayscale(1);
  pointer-events:none;
  z-index:0;
  user-select:none;
}
@media (max-width:900px){
  .mark-watermark{width:60vw;opacity:0.06;}
}

/* ---------- BUTTONS ---------- */
.cta-row{display:flex;gap:18px;flex-wrap:wrap;}
.btn-primary{
  background:var(--ink);color:var(--cream);
  padding:16px 34px;border-radius:2px;
  font-size:0.9rem;letter-spacing:0.04em;text-transform:uppercase;
  transition:background 0.3s ease, transform 0.3s ease;
  display:inline-block;border:1px solid var(--ink);
}
.btn-primary:hover{background:var(--gold-deep);border-color:var(--gold-deep);transform:translateY(-2px);}
.btn-ghost{
  border:1px solid var(--ink);padding:16px 34px;border-radius:2px;
  font-size:0.9rem;letter-spacing:0.04em;text-transform:uppercase;
  transition:background 0.3s ease, color 0.3s ease;background:transparent;
}
.btn-ghost:hover{background:var(--ink);color:var(--cream);}

/* ---------- MARQUEE STRIP ---------- */
.strip{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--cream-deep);
  padding:18px 0;overflow:hidden;white-space:nowrap;
}
.strip-inner{display:inline-block;animation:marquee 28s linear infinite;}
.strip span{
  font-family:'Bodoni Moda',serif;font-style:italic;font-size:1.1rem;
  color:var(--gold-deep);margin:0 28px;
}
@keyframes marquee{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* ---------- SECTION SHARED ---------- */
section{padding:120px 0;position:relative;}
.section-head{max-width:640px;margin-bottom:64px;}
.section-head .eyebrow{margin-bottom:16px;}
.section-head h2{font-size:clamp(2.1rem,4vw,3rem);line-height:1.08;}
.section-head p{color:var(--ink-soft);margin-top:18px;font-size:1.05rem;line-height:1.6;max-width:520px;}

/* ---------- IMAGE PLACEHOLDER ---------- */
/* To use a real photo: replace the placeholder <div> with
   <img src="assets/your-photo.jpg" alt="..."> using the same class for sizing. */
.img-ph{
  position:relative;overflow:hidden;background:var(--sage);
  display:flex;align-items:center;justify-content:center;color:var(--cream);
}
.img-ph::before{content:'';position:absolute;inset:0;opacity:0.94;}
.img-ph span{position:relative;z-index:1;font-family:'Bodoni Moda',serif;font-style:italic;font-size:1.1rem;text-align:center;padding:0 20px;}
.img-ph.tone-gold::before{background:linear-gradient(135deg,var(--gold),var(--gold-deep));}
.img-ph.tone-sage::before{background:linear-gradient(135deg,var(--sage-deep),var(--sage));}
.img-ph.tone-ink::before{background:linear-gradient(135deg,var(--ink),#3a382f);}
.img-ph.tone-mix::before{background:linear-gradient(135deg,var(--gold-deep),var(--ink));}
.img-ph.tone-mix2::before{background:linear-gradient(135deg,var(--sage),var(--gold));}

/* ---------- SERVICES LIST ---------- */
.service-list{display:flex;flex-direction:column;border-top:1px solid var(--line);}
.service-row{
  display:grid;grid-template-columns:64px 1fr 1.3fr;gap:40px;
  padding:38px 0;border-bottom:1px solid var(--line);
  align-items:start;transition:background 0.35s ease;
}
.service-row:hover{background:var(--cream-deep);}
.service-mark{width:34px;height:34px;margin-top:6px;flex-shrink:0;}
.service-row h3{font-size:1.5rem;font-weight:500;}
.service-row p{color:var(--ink-soft);line-height:1.65;font-size:0.98rem;}
.service-row ul{margin-top:14px;padding-left:18px;color:var(--ink-soft);font-size:0.92rem;line-height:1.9;}

@media (max-width:900px){
  .service-row{grid-template-columns:44px 1fr;}
  .service-row p, .service-row ul{grid-column:2/3;}
}

/* ---------- ABOUT / DARK BLOCK ---------- */
.dark-block{background:var(--ink);color:var(--cream);}
.dark-block .eyebrow{color:var(--sage);}
.dark-block .eyebrow::before{background:var(--sage);}
.dark-block p{color:rgba(247,245,239,0.75);}
.dark-block .stat b{color:var(--sage);}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
@media (max-width:900px){.two-col{grid-template-columns:1fr;gap:44px;}}

.stat-row{display:flex;gap:44px;margin-top:36px;flex-wrap:wrap;}
.stat b{font-family:'Bodoni Moda',serif;font-size:2.1rem;display:block;}
.stat span{font-size:0.8rem;letter-spacing:0.05em;text-transform:uppercase;color:rgba(247,245,239,0.6);}

/* ---------- GRID (portfolio / team) ---------- */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;border:1px solid var(--line);}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
@media (max-width:900px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:1fr;}}

/* ---------- CARDS ---------- */
.card{background:var(--cream);border:1px solid var(--line);padding:34px;}
.card h3{font-size:1.15rem;margin-bottom:10px;}
.card p{color:var(--ink-soft);font-size:0.95rem;line-height:1.6;}

/* ---------- CONTACT FORM ---------- */
.form-field{margin-bottom:22px;}
.form-field label{display:block;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--gold-deep);margin-bottom:8px;}
.form-field input, .form-field textarea, .form-field select{
  width:100%;padding:14px 16px;border:1px solid var(--line);background:var(--cream);
  font-family:'Jost',sans-serif;font-size:0.98rem;color:var(--ink);
  border-radius:2px;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{
  outline:none;border-color:var(--gold);
}
.form-field textarea{resize:vertical;min-height:120px;}
.form-submit{
  background:var(--ink);color:var(--cream);border:none;
  padding:16px 38px;font-size:0.9rem;letter-spacing:0.04em;text-transform:uppercase;
  cursor:pointer;transition:background 0.3s ease;border-radius:2px;
}
.form-submit:hover{background:var(--gold-deep);}
.form-note{font-size:0.82rem;color:var(--ink-soft);margin-top:14px;}

.info-card{background:var(--cream);border:1px solid var(--line);padding:40px;}
.info-card .label{font-size:0.78rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--gold-deep);margin-bottom:8px;}
.info-card .val{margin-bottom:26px;font-size:1.02rem;}
.info-card .val:last-child{margin-bottom:0;}
.socials{display:flex;gap:16px;margin-top:6px;}
.socials a{
  width:42px;height:42px;border:1px solid var(--ink);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.3s ease,color 0.3s ease;flex-shrink:0;
}
.socials a:hover{background:var(--ink);color:var(--cream);}
.socials svg{width:18px;height:18px;}

/* ---------- FOOTER ---------- */
footer{padding:36px 0;border-top:1px solid var(--line);}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:0.82rem;color:var(--ink-soft);}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.8s ease, transform 0.8s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* breadcrumb */
.breadcrumb{font-size:0.8rem;color:var(--ink-soft);margin-bottom:20px;letter-spacing:0.02em;}
.breadcrumb a:hover{color:var(--gold-deep);}