/* ==========================================================================
   Arco Gold — landing page styles
   Palette and type follow the WePaint (yellow) reference direction.
   ========================================================================== */

:root{
  --yellow:      #ffe468;
  --yellow-deep: #fec73c;
  --yellow-wash: #fff8dd;
  --ink:         #1d252d;
  --ink-2:       #3d4650;
  --ink-soft:    #626c77;
  --paper:       #ffffff;
  --paper-warm:  #fdfaf3;
  --line:        rgba(29,37,45,.14);
  --shadow-s:    0 2px 8px rgba(29,37,45,.06);
  --shadow-m:    0 18px 44px rgba(29,37,45,.14);
  --wrap:        1180px;
  --r:           4px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Mulish','Muli',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Arvo',Georgia,'Times New Roman',serif;
  line-height:1.18;
  margin:0 0 .5em;
  letter-spacing:-.005em;
}
h1{ font-size:clamp(2.3rem,5.2vw,3.9rem); }
h2{ font-size:clamp(1.85rem,3.4vw,2.6rem); }
h3{ font-size:1.25rem; }
p{ margin:0 0 1em; max-width:68ch; text-wrap:pretty; }
img{ max-width:100%; display:block; }
a{ color:var(--ink); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:#8a6a00; }

:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }

.wrap{ width:min(100% - 40px,var(--wrap)); margin-inline:auto; }
.section{ padding:96px 0; }
.section--warm{ background:var(--paper-warm); }
.section-head{ max-width:720px; margin-bottom:52px; }
.section-head p{ color:var(--ink-soft); font-size:1.05rem; }
.kicker{
  display:inline-block; font-weight:800; font-size:.9rem;
  padding-bottom:6px; margin-bottom:14px;
  border-bottom:3px solid var(--yellow-deep);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  min-height:52px; padding:0 28px; border-radius:var(--r);
  font-weight:800; font-size:1rem; text-decoration:none;
  border:2px solid transparent; cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.btn--primary{ background:var(--yellow); color:var(--ink); }
.btn--primary:hover{ background:var(--yellow-deep); color:var(--ink); }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:#0c1116; color:#fff; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:#fff; }
.btn--onphoto{ background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }
.btn--onphoto:hover{ background:#fff; color:var(--ink); }

/* ---------- top bar ---------- */
.topbar{
  background:var(--ink); color:#e9edf1;
  font-size:.9rem; padding:9px 0;
}
.topbar .wrap{ display:flex; flex-wrap:wrap; gap:8px 26px; align-items:center; }
.topbar .offer{ color:var(--yellow); font-weight:800; }
.topbar a{ color:#e9edf1; text-decoration:none; }
.topbar a:hover{ color:var(--yellow); }
.topbar .right{ margin-left:auto; display:flex; gap:22px; flex-wrap:wrap; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.97);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{ display:flex; align-items:center; gap:24px; min-height:78px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; }
.brand__mark{
  width:42px; height:42px; border-radius:var(--r);
  background:var(--yellow); display:grid; place-items:center;
  font-family:'Arvo',serif; font-weight:700; font-size:1.15rem; color:var(--ink);
  box-shadow:inset 0 -3px 0 var(--yellow-deep);
}
.brand__name{ font-family:'Arvo',serif; font-size:1.28rem; line-height:1.1; }
.brand__sub{ display:block; font-family:'Mulish',sans-serif; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.nav{ display:flex; align-items:center; gap:28px; }
.nav a{ text-decoration:none; font-weight:700; font-size:.98rem; }
.nav a:hover{ color:#8a6a00; }
.nav-toggle{ display:none; }

/* ---------- hero ---------- */
.hero{ position:relative; isolation:isolate; color:#fff; }
.hero__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:60% 50%; z-index:-2;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(96deg,rgba(16,21,26,.92) 0%,rgba(16,21,26,.78) 42%,rgba(16,21,26,.18) 78%,rgba(16,21,26,0) 100%);
}
.hero__inner{ padding:120px 0 148px; max-width:660px; }
.hero h1{ color:#fff; margin-bottom:18px; }
.hero h1 em{
  font-style:normal; color:var(--ink);
  background:var(--yellow);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  padding:.02em .14em; margin-left:-.14em;
}
.hero__lede{ font-size:1.14rem; color:#dfe4e9; max-width:56ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.hero__facts{
  display:flex; flex-wrap:wrap; gap:12px 34px; margin-top:38px;
  padding-top:22px; border-top:1px solid rgba(255,255,255,.22);
  font-size:.95rem; color:#dfe4e9;
}
.hero__facts b{ color:#fff; }

/* ---------- estimator ---------- */
.estimator{ background:var(--paper-warm); padding-bottom:96px; }
.estimator__card{
  margin-top:-72px; position:relative; z-index:5;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-m); overflow:hidden;
  display:grid; grid-template-columns:1.35fr .85fr;
}
.estimator__form{ padding:40px 44px 44px; }
.estimator__form h2{ margin-bottom:6px; }
.estimator__form > p{ color:var(--ink-soft); margin-bottom:26px; }
.est-step{ border-top:1px solid var(--line); padding:20px 0 4px; }
.est-step:first-of-type{ border-top:0; padding-top:0; }
.est-step__q{ display:block; font-weight:800; margin-bottom:12px; }
.est-step__q span{ color:var(--ink-soft); font-weight:600; }
.field-row{ display:flex; flex-wrap:wrap; gap:16px; }
.field{ flex:1 1 130px; }
.field label{ display:block; font-size:.85rem; font-weight:700; color:var(--ink-soft); margin-bottom:6px; }
.field input,.field select{
  width:100%; height:48px; padding:0 12px;
  border:1px solid var(--line); border-radius:var(--r);
  background:#fff; font:inherit; font-size:1rem; color:var(--ink);
}
.field input:focus,.field select:focus{ border-color:var(--ink); outline:none; box-shadow:0 0 0 3px var(--yellow); }
.coats{ display:flex; flex-wrap:wrap; gap:10px; }
.coats input{ position:absolute; opacity:0; pointer-events:none; }
.coats label{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; min-width:96px; padding:0 18px;
  border:1px solid var(--line); border-radius:var(--r);
  font-weight:700; cursor:pointer; background:#fff;
}
.coats input:checked + label{ background:var(--yellow); border-color:var(--yellow-deep); box-shadow:inset 0 -3px 0 var(--yellow-deep); }
.coats input:focus-visible + label{ outline:3px solid var(--ink); outline-offset:3px; }
.estimator__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

.estimator__result{
  background:var(--ink); color:#fff; padding:44px 36px;
  display:flex; flex-direction:column; justify-content:flex-start;
}
.result-figure{ margin-bottom:26px; }
.result-figure__value{
  font-family:'Arvo',serif; font-size:3.6rem; line-height:1;
  color:var(--yellow); display:block;
}
.result-figure__unit{ font-size:.95rem; color:#c9d0d7; letter-spacing:.04em; }
.result-line{
  display:flex; justify-content:space-between; gap:16px;
  padding:11px 0; border-top:1px solid rgba(255,255,255,.16); font-size:.96rem;
}
.result-line span:first-child{ color:#c9d0d7; }
.result-line b{ font-weight:800; }
.result-note{ margin:24px 0 0; font-size:.85rem; line-height:1.55; color:#a9b2bb; }

/* ---------- services ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:56px; align-items:center; }
.service{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:34px 30px 30px; box-shadow:var(--shadow-s);
  display:flex; flex-direction:column;
}
.service__icon{
  width:56px; height:56px; border-radius:var(--r); background:var(--yellow);
  display:grid; place-items:center; margin-bottom:20px;
  box-shadow:inset 0 -3px 0 var(--yellow-deep);
}
.service__icon svg{ width:28px; height:28px; }
.service p{ color:var(--ink-soft); font-size:.99rem; }
.service ul{ margin:4px 0 0; padding:0; list-style:none; font-size:.95rem; }
.service li{ padding:7px 0 7px 24px; position:relative; border-top:1px solid var(--line); color:var(--ink-2); }
.service li::before{
  content:""; position:absolute; left:2px; top:15px;
  width:9px; height:9px; background:var(--yellow-deep); border-radius:2px;
}

/* ---------- about ---------- */
.about__media{ position:relative; }
.about__media img{ border-radius:var(--r); }
.about__badge{
  position:absolute; right:-18px; bottom:-24px;
  background:var(--yellow); border-radius:var(--r);
  padding:20px 26px; box-shadow:var(--shadow-m); text-align:center;
}
.about__badge b{ font-family:'Arvo',serif; font-size:2.1rem; display:block; line-height:1; }
.about__badge span{ font-size:.85rem; font-weight:700; }
.checklist{ list-style:none; margin:24px 0 30px; padding:0; }
.checklist li{ padding:10px 0 10px 34px; position:relative; border-top:1px solid var(--line); }
.checklist li:last-child{ border-bottom:1px solid var(--line); }
.checklist li::before{
  content:""; position:absolute; left:4px; top:17px; width:16px; height:9px;
  border-left:3px solid var(--yellow-deep); border-bottom:3px solid var(--yellow-deep);
  transform:rotate(-45deg);
}
.checklist b{ display:block; }
.checklist span{ color:var(--ink-soft); font-size:.95rem; }

/* ---------- process ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border-top:3px solid var(--ink); }
.step{ padding:28px 26px 32px 0; border-right:1px solid var(--line); }
.step:last-child{ border-right:0; padding-right:0; }
.step__n{ font-family:'Arvo',serif; font-size:1rem; color:#8a6a00; display:block; margin-bottom:10px; }
.step h3{ font-size:1.12rem; }
.step p{ color:var(--ink-soft); font-size:.96rem; margin:0; }

/* ---------- projects ---------- */
.gallery{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:200px; gap:18px; }
.gallery figure{ margin:0; position:relative; overflow:hidden; border-radius:var(--r); background:var(--ink); }
.gallery img{ width:100%; height:100%; object-fit:cover; }
.gallery figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:26px 20px 16px; color:#fff;
  font-size:.93rem; font-weight:700;
  background:linear-gradient(transparent,rgba(16,21,26,.85));
}
.gallery .tall{ grid-row:span 2; }
.gallery .wide{ grid-column:span 2; }

/* ---------- reviews ---------- */
.reviews{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.review{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:30px 28px; display:flex; flex-direction:column; gap:14px;
}
.review__stars{ color:var(--yellow-deep); letter-spacing:3px; font-size:1.05rem; }
.review p{ margin:0; font-size:1rem; color:var(--ink-2); }
.review__who{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:14px; border-top:1px solid var(--line); }
.avatar{
  width:44px; height:44px; border-radius:50%; background:var(--yellow);
  display:grid; place-items:center; font-family:'Arvo',serif; font-size:.95rem;
  box-shadow:inset 0 -3px 0 var(--yellow-deep);
}
.review__who b{ display:block; font-size:.98rem; }
.review__who span{ font-size:.85rem; color:var(--ink-soft); }

/* ---------- team ---------- */
.team{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.member{ border-top:3px solid var(--yellow-deep); padding-top:22px; }
.member h3{ margin-bottom:2px; }
.member .role{ font-size:.92rem; color:#8a6a00; font-weight:800; }
.member p{ margin-top:12px; color:var(--ink-soft); font-size:.97rem; }

/* ---------- areas ---------- */
.areas{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.areas li{
  list-style:none; padding:9px 18px; background:#fff;
  border:1px solid var(--line); border-radius:100px; font-weight:700; font-size:.95rem;
}

/* ---------- quote ---------- */
.quote-band{
  background:var(--yellow) url("/assets/img/template/band-yellow.png") center/cover no-repeat;
  padding:64px 0;
}
.quote-band .wrap{ display:flex; flex-wrap:wrap; align-items:center; gap:28px; }
.quote-band h2{ margin:0; flex:1 1 420px; }
.quote-band p{ margin:10px 0 0; font-weight:700; }
.quote-band p a{ text-decoration:none; }
.quote-band p a:hover{ text-decoration:underline; }

.quote-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; }
.contact-block h3{ margin-top:26px; }
.contact-block a{ font-weight:700; }
.contact-list{ list-style:none; margin:0; padding:0; }
.contact-list li{ padding:12px 0; border-top:1px solid var(--line); display:flex; gap:14px; }
.contact-list li:first-child{ border-top:0; }
.contact-list .lbl{ min-width:74px; color:var(--ink-soft); font-size:.9rem; font-weight:700; padding-top:2px; }
.form{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:34px 34px 38px; box-shadow:var(--shadow-s); }
.form .field{ flex:1 1 220px; margin-bottom:16px; }
.form textarea{
  width:100%; min-height:120px; padding:12px; font:inherit; font-size:1rem;
  border:1px solid var(--line); border-radius:var(--r); resize:vertical; color:var(--ink);
}
.form textarea:focus{ border-color:var(--ink); outline:none; box-shadow:0 0 0 3px var(--yellow); }
.form__note{ font-size:.86rem; color:var(--ink-soft); margin:14px 0 0; }

/* ---------- footer ---------- */
.site-footer{ background:var(--ink); color:#c9d0d7; padding:64px 0 28px; }
.site-footer h4{ color:#fff; font-size:1.05rem; margin-bottom:14px; }
.site-footer a{ color:#c9d0d7; text-decoration:none; }
.site-footer a:hover{ color:var(--yellow); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; font-size:.96rem; }
.footer-grid li{ padding:5px 0; }
.site-footer .brand__name{ color:#fff; }
.site-footer p{ font-size:.96rem; }
.colophon{
  margin-top:44px; padding-top:20px; border-top:1px solid rgba(255,255,255,.16);
  display:flex; flex-wrap:wrap; gap:10px 24px; font-size:.88rem; color:#8e979f;
}
.colophon .right{ margin-left:auto; }

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .estimator__card{ grid-template-columns:1fr; }
  .estimator__result{ padding:34px 30px 40px; }
  .grid-3,.reviews,.team{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .step{ padding-right:24px; }
  .step:nth-child(2n){ border-right:0; padding-right:0; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .quote-grid{ grid-template-columns:1fr; gap:40px; }
  .grid-2{ gap:40px; }
}
@media (max-width:820px){
  .section{ padding:72px 0; }
  .nav{
    position:absolute; top:100%; left:0; right:0; display:none;
    flex-direction:column; align-items:flex-start; gap:0;
    background:#fff; border-bottom:1px solid var(--line); padding:8px 20px 18px;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:12px 0; width:100%; border-top:1px solid var(--line); }
  .nav-toggle{
    display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:0 16px;
    background:var(--yellow); border:0; border-radius:var(--r); font:inherit; font-weight:800; cursor:pointer;
  }
  .site-header .wrap{ position:relative; }
  .grid-2,.grid-3,.reviews,.team,.gallery{ grid-template-columns:1fr; }
  .gallery{ grid-auto-rows:220px; }
  .gallery .tall,.gallery .wide{ grid-row:auto; grid-column:auto; }
  .about__badge{ right:12px; bottom:-18px; }
  .hero__inner{ padding:84px 0 120px; }
  .estimator__form{ padding:32px 24px 34px; }
  .form{ padding:26px 22px 30px; }
  .footer-grid{ grid-template-columns:1fr; gap:30px; }
  .topbar .right{ margin-left:0; }
}
@media (max-width:520px){
  .steps{ grid-template-columns:1fr; }
  .step{ border-right:0; padding-right:0; border-top:1px solid var(--line); }
  .step:first-child{ border-top:0; }
  .hero::after{ background:linear-gradient(180deg,rgba(16,21,26,.82),rgba(16,21,26,.92)); }
}