
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:#3c3122; color:#3c3122; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:16px;
  line-height:1.5; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; width:100%; height:100%; object-fit:cover; }
a { color:inherit; text-decoration:none; }

.mond { max-width:1200px; margin:0 auto; display:grid; gap:7px; padding:7px;
  background:#3c3122;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:minmax(120px,auto);
  grid-template-areas:
    "nav  nav  nav  nav  nav  nav"
    "hero hero hero red  red  imga"
    "hero hero hero yel  blu  imga"
    "abt  abt  abt  abt  svc1 svc2"
    "imgb imgc imgc imgc svc1 svc2"
    "imgb quo  quo  quo  reds reds"
    "con  con  con  con  con  con"
    "foot foot foot foot foot foot"; }

.cell { background:#fffbf4; color:#3c3122; padding:22px;
  display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.cell.img { padding:0; }

.nav { grid-area:nav; flex-direction:row; align-items:center;
  justify-content:space-between; padding:16px 22px; }
.brand { font-family:Optima, Candara, 'Segoe UI', sans-serif; font-weight:800; font-size:20px;
  letter-spacing:-0.01em; text-transform:uppercase; }
.nav nav a { margin-left:22px; font-weight:600; font-size:14px; color:#a2907a; }
.nav nav a:hover { color:#ef8a52; }

.hero { grid-area:hero; justify-content:center; }
.kick { text-transform:uppercase; letter-spacing:0.26em; font-size:12px;
  color:#ef8a52; margin-bottom:16px; }
.hero h1 { font-family:Optima, Candara, 'Segoe UI', sans-serif; font-weight:800; line-height:0.92;
  font-size:clamp(2.6rem,7vw,5rem); letter-spacing:-0.03em; text-transform:uppercase; }
.dek { color:#a2907a; margin:18px 0 24px; max-width:34ch; font-size:1.1rem; }
.btn { align-self:flex-start; background:#ef8a52; color:#141414;
  font-weight:800; letter-spacing:0.1em; text-transform:uppercase; font-size:13px;
  padding:14px 26px; }
.btn:hover { background:#3c3122; color:#fffbf4; }

.red { grid-area:red; background:#ef8a52; color:#141414; }
.red .big { font-family:Optima, Candara, 'Segoe UI', sans-serif; font-weight:800; font-size:3.4rem; line-height:1; }
.red .tag { text-transform:uppercase; letter-spacing:0.16em; font-size:11px;
  margin-top:8px; opacity:0.9; }
.yellow { grid-area:yel; background:#f8cab1; color:#141414; }
.blue { grid-area:blu; background:#b9927a; color:#141414; }
.yellow h3,.blue h3 { font-family:Optima, Candara, 'Segoe UI', sans-serif; font-weight:800; font-size:1.05rem;
  margin-bottom:8px; }
.yellow p,.blue p { font-size:0.9rem; opacity:0.92; }

.imga { grid-area:imga; } .imgb { grid-area:imgb; } .imgc { grid-area:imgc; }

.about { grid-area:abt; }
.about h2 { font-family:Optima, Candara, 'Segoe UI', sans-serif; font-weight:800; font-size:1.7rem; margin-bottom:10px; }
.about p { color:#a2907a; max-width:60ch; }

.svc { }
.mond .svc:nth-of-type(8) { grid-area:svc1; }
.mond .svc:nth-of-type(9) { grid-area:svc2; }
.svc h3 { font-family:Optima, Candara, 'Segoe UI', sans-serif; font-weight:800; font-size:1.1rem; margin-bottom:8px; }
.svc p { color:#a2907a; font-size:0.92rem; }

.quote { grid-area:quo; background:#b9927a; color:#141414; }
.quote blockquote { font-family:Optima, Candara, 'Segoe UI', sans-serif; font-weight:700; font-size:clamp(1.2rem,3vw,1.9rem);
  line-height:1.2; }
.quote cite { font-style:normal; margin-top:12px; font-size:12px; letter-spacing:0.12em;
  text-transform:uppercase; opacity:0.85; }

.redsm { grid-area:reds; background:#f8cab1; }

.contact { grid-area:con; }
.contact h2 { font-family:Optima, Candara, 'Segoe UI', sans-serif; font-weight:800; font-size:1.7rem; margin-bottom:8px; }
.contact p { color:#a2907a; margin-bottom:16px; }
.lines { display:flex; flex-wrap:wrap; gap:24px; font-family:Optima, Candara, 'Segoe UI', sans-serif; font-size:1.2rem; }
.lines a:hover { color:#ef8a52; }
.lines span { color:#a2907a; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:1rem; }

.foot { grid-area:foot; background:#3c3122; color:#fdf3e8; flex-direction:row;
  justify-content:center; text-align:center; font-size:12px; letter-spacing:0.16em;
  text-transform:uppercase; padding:16px; }

@media (max-width:820px){
  .mond{ grid-template-columns:1fr 1fr;
    grid-template-areas:
      "nav nav" "hero hero" "red imga" "yel blu"
      "abt abt" "svc1 svc2" "imgb imgc" "quo quo"
      "reds reds" "con con" "foot foot"; }
}


.xq{box-sizing:border-box;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;color:#3c3122;padding:56px 24px;width:100%}
.xq *{box-sizing:border-box;margin:0}
.xq .xq-wrap{max-width:1060px;margin:0 auto}
.xq h2{font-family:Optima, Candara, 'Segoe UI', sans-serif;font-size:1.7rem;line-height:1.2;margin-bottom:8px}
.xq .xq-kick{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#ef8a52;margin-bottom:10px;font-weight:700}

.xq-steplist{counter-reset:xqs;list-style:none;padding:0;margin-top:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.xq-step{counter-increment:xqs;position:relative;padding:18px 18px 18px 20px;border-left:3px solid #ef8a52;background:rgba(60,49,34,0.05);border-radius:0 20px 20px 0}
.xq-step::before{content:"0" counter(xqs);display:block;font-family:Optima, Candara, 'Segoe UI', sans-serif;font-size:.8rem;letter-spacing:.1em;color:#ef8a52;font-weight:800;margin-bottom:8px}
.xq-step h3{font-family:Optima, Candara, 'Segoe UI', sans-serif;font-size:1.02rem;margin-bottom:6px}
.xq-step p{font-size:.9rem;color:#a2907a}


/* =====================================================
   DESIGN DNA: arch-roman
   Whole-page visual system applied over the layout
   archetype. Appended last so it wins the cascade.
   ===================================================== */
html::before{content:'';position:fixed;inset:0;z-index:99980;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='100'%3E%3Cpath d='M17.5 0V100' stroke='%23ef8a52' stroke-width='1'/%3E%3C/svg%3E");opacity:.05;}
h1,h2,h3{font-family:Baskerville, 'Baskerville Old Face', Georgia, serif !important;letter-spacing:.02em !important;font-weight:600 !important}
img{border-radius:180px 180px 0 0 !important;filter:sepia(.12) contrast(1.03)}
a[class*="btn"],button,span[class*="btn"]{border-radius:999px 999px 999px 999px !important;border:1.5px solid #ef8a52 !important;letter-spacing:.1em}
div[class*="card"]:not([class*="cards"]),article[class*="card"],a[class*="card"],figure[class*="card"],li[class*="card"]{border-radius:120px 120px 0 0 !important;border:1px solid rgba(239,138,82,.4) !important;box-shadow:none !important}
h2::after{content:'\2726';display:block;color:#ef8a52;font-size:1rem;margin-top:.5rem}
