/* ===================== Hero (content) ===================== */

/* ===================== Mobile Header Offset Fix ===================== */


.res-hero {
  padding-top: 11rem;
}

.hero{
  padding: 2.5rem 0 1.5rem;
  background: var(--bg);
  border: 0;           /* kill the decorative bar */
  border-image: none;
}
.hero__grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center;
}
.hero__copy h1{
  font-size:clamp(1.9rem, 1.2rem + 2.2vw, 3rem);
  line-height:1.15; margin:.25rem 0 .75rem; color: var(--ink);
}
.hero__copy p{ color:#2f3f50; margin:0 0 1.1rem; }
.hero__cta{ display:flex; gap:.75rem; margin-bottom:.6rem; }

/* right image with overlay + orange frame */
.hero__visual{
  position:relative; border-radius:1rem; overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.25); border:5px solid var(--brand);
}
.hero__visual img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero__visual::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.25));
  pointer-events:none;
}

/* badges */
.badges{ display:flex; gap:.6rem; flex-wrap:wrap; padding:0; margin:.2rem 0 0; list-style:none; }
.badges li{ background:#f3dfc2; border:1px solid rgba(0,0,0,.08); color:#4a3a31; padding:.45rem .65rem; border-radius:.7rem; }

/* ===================== Trust strip ===================== */
.trust{
  padding:.85rem 0; border-top:1px solid rgba(0,0,0,.06); border-bottom:1px solid rgba(0,0,0,.06);
  background: linear-gradient(180deg, rgba(194,109,47,.08), rgba(0,0,0,.04)), var(--muted);
}
.trust__wrap{ display:flex; gap:.75rem; justify-content:center; align-items:center; color:#4a3a31; flex-wrap:wrap; }
.trust .dot{ opacity:.55; }

/* ===================== Cards, Process, Gallery, etc. ===================== */
.cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; margin-top:.8rem; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:1rem; box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; color:var(--ink); }
.card img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.card h3{ margin:1rem 1rem .35rem; color:#1f2e3b; }
.card p{ margin:0 1rem .75rem; color:#3e4b57; }
.card .list{ list-style:disc; margin:0 2rem 1.1rem; color:#2c3e50; }
.card:hover{ box-shadow:0 0 20px 5px rgba(222,132,6,.25); transition:.2s; }

.process{ display:grid; grid-template-columns: repeat(5, 1fr); gap:1rem; margin-top:.75rem; }
.process li{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1rem; position:relative; box-shadow:var(--shadow); color:var(--ink); }
.process h3{ margin:.5rem 0 .25rem; color:#1f2e3b; }
.process p{ margin:0; color:#3e4b57; }
.step{ position:absolute; top:-12px; left:-12px; height:36px; width:36px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#fff; background:var(--brand); border:3px solid #fff; }

.gallery{ display:grid; grid-template-columns: repeat(3, 1fr); gap:.8rem; }
.gallery figure{ margin:0; }
.gallery img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow); }

.grid-2{ display:grid; grid-template-columns:1.1fr .9fr; gap:1.2rem; align-items:start; }
.cta-box, .panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow); color:var(--ink); }
.tags{ display:flex; gap:.5rem; flex-wrap:wrap; padding:0; margin:1rem 0 0; list-style:none; }
.tags li{ border:1px solid var(--line); padding:.35rem .6rem; border-radius:999px; color:#2c3e50; background:#fff; }

.quotes{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; }
blockquote{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1rem; margin:0; color:#2c3e50; box-shadow:var(--shadow); }
blockquote cite{ display:block; margin-top:.6rem; color:#6a7b88; }

/* Forms */
.contact .panel{ margin-bottom:1rem; }
.form{ display:grid; gap:.8rem; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
label{ display:grid; gap:.35rem; font-weight:700; color:#1f2e3b; }
input, select, textarea{ background:#fff; border:1px solid var(--accent); color:var(--ink); border-radius:12px; padding:.75rem .8rem; outline:0; }
input:focus, select:focus, textarea:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--ring); }



/* ===================== Responsive ===================== */
@media (max-width: 980px){
  .hero__grid, .grid-2{ grid-template-columns:1fr; }
  .cards{ grid-template-columns: repeat(2, 1fr); }
  .process{ grid-template-columns: repeat(3, 1fr); }
  .quotes{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px){
  .links{ gap:.4rem; flex-wrap:wrap; }
}
@media (max-width: 640px){
  .cards{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr 1fr; }
  .process{ grid-template-columns:1fr 1fr; }
  .quotes{ grid-template-columns:1fr; }
  .form .row{ grid-template-columns:1fr; }
}


.process {
  list-style: none;        /* ✅ hides default 1., 2., 3. */
  counter-reset: none;     /* just to be safe */
  margin: 0;
  padding: 0;
}




/* ===== Benefits creative block ===== */
.benefits{
  position: relative;
  padding: 3.5rem 0;
  background: var(--bg);
  isolation: isolate; /* so ::before stays behind content */
}

/* angled sand band */
.benefits::before{
  content:"";
  position:absolute;
  inset: 0 0 45% 0;           /* top band height */
  background: linear-gradient(180deg, var(--muted), rgba(0,0,0,0.03));
  clip-path: polygon(0 0,100% 0,100% 80%,0 100%);
  z-index: -1;
}

.benefits__grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 2rem;
  align-items: center;
}

/* copy side */
.eyebrow{
  margin: 0 0 .4rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:#5b463a;
  opacity:.9;
}

.benefits__title{
  position: relative;
  margin: 0 0 .6rem;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
  line-height: 1.15;
  color: var(--ink);
}

/* forged underline accent */
.benefits__title .underline{
  position:absolute;
  left:0; bottom:-8px; height:6px; width:100%;
  background: linear-gradient(90deg, #8a3913, var(--brand), #f09a5b);
  border-radius: 999px;
}




.benefits__lead{
  margin: .6rem 0 1rem;
  color:#364b5c;
}

/* ===== Single-column stacked benefit list ===== */
.benefits__list {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  max-width: 640px;
}

.benefits__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  line-height: 1.55;
  color: var(--ink);
}

.benefits__list li strong {
  color: var(--brand);
  font-weight: 700;
  white-space: nowrap;        /* ⬅️ keeps it all on one line */
  margin-right: 0.4rem;       /* adds breathing room before text */
}

.benefits__list .ico {
  color: var(--brand);
  flex-shrink: 0;
  margin-top: 3px;
}

/* Make sure it stays full width on mobile too */
@media (max-width: 640px) {
  .benefits__list {
    max-width: 100%;
  }
}


/* mobile: single column */
@media (max-width: 640px){
  .benefits__list{
    grid-template-columns: 1fr;
  }
}


/* CTA */
.benefits__cta{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top: 1rem; /* optional, to push them down a bit */ }

/* image collage */
.benefits__visual{
  position: relative;
  min-height: 420px;
}
.frame{
  position:absolute; overflow:hidden; border-radius: 16px;
  border: 5px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
  background:#111;
}
.frame img{ width:100%; height:100%; object-fit:cover; display:block; }

/* primary photo */
.frame--a{
  top: -10px; left: 0; right: 18%; height: 360px;
  transform: rotate(-1.5deg);
  border-color: var(--accent);
}
/* secondary overlapping photo */
.frame--b{
  bottom: -10px; right: 0; width: 58%; height: 260px;
  transform: rotate(2deg);
  border-color: var(--brand);
}

/* responsive */
@media (max-width: 1000px){
  .benefits__grid{ grid-template-columns: 1fr; }
  .benefits__visual{ min-height: 360px; order:-1; }
  .frame--a{ right: 10%; height: 300px; }
  .frame--b{ width: 60%; height: 220px; }
}
@media (max-width: 640px){
  .benefits{ padding: 2.5rem 0; }
  .benefits::before{ inset:0 0 55% 0; }
  .benefits__visual{ min-height: 300px; }
  .frame--a{ height: 240px; }
  .frame--b{ height: 180px; }
}


/* Mobile: push hero below fixed header */
@media (max-width: 768px){
  .res-hero{
    padding-top:8.5rem;   /* adjust up/down if needed */
  }
}