/*
 * COMSENSE — service.css
 * Shared conversion layout for ALL service pages (Custom Cabinets, Flat-Pack,
 * Reface, Bathroom, Countertops, Murphy Beds).
 * Loaded by functions.php on the "Service Page" template.
 * Per-service tweaks go in their own file (e.g. cabinets.css).
 * Tokens/buttons/section headers come from global.css.
 * ============================================================ */

#main.svc{padding-top:0}

/* ── HERO ── */
.svc-hero{display:grid;grid-template-columns:1fr 470px;min-height:88vh;padding-top:84px;overflow:hidden}
.svc-hero-l{position:relative;background:var(--green-800);padding:120px 64px 110px 60px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.svc-hero-l::before{content:'';position:absolute;inset:0;background-size:cover;background-position:center;opacity:1;pointer-events:none}
.svc-hero-l::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,rgba(10,24,18,.85) 0%,rgba(11,27,18,.55) 50%,rgba(11,27,18,.3) 100%)}
.svc-hero-l>*{position:relative;z-index:1}
.svc-hero-eyebrow{font-size:.72rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--amber);margin-bottom:32px;display:flex;align-items:center;gap:14px}
.svc-hero-eyebrow::before{content:'';width:28px;height:1px;background:var(--amber);opacity:.7}
.svc-hero h1{font-family:var(--serif);font-size:clamp(2.6rem,4.6vw,4rem);font-weight:300;line-height:1.07;color:#fff;margin-bottom:26px;letter-spacing:-.005em}
.svc-hero h1 em{font-style:italic;color:var(--amber);font-weight:400}
.svc-hero-sub{font-size:1.04rem;color:rgba(255,255,255,.62);line-height:1.85;max-width:520px;margin-bottom:36px;font-weight:300}
.svc-hero-points{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:40px}
.svc-hero-points li{font-size:.9rem;color:rgba(255,255,255,.8);padding-left:26px;position:relative;line-height:1.5}
.svc-hero-points li::before{content:'✓';position:absolute;left:0;color:var(--amber);font-weight:700}
.svc-hero-meta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.svc-hero-meta span.sep{width:3px;height:3px;border-radius:50%;background:rgba(192,168,116,.5)}

.svc-hero-r{background:#fff;display:flex;flex-direction:column;justify-content:center;padding:64px 48px;box-shadow:-20px 0 60px rgba(10,24,18,.13);z-index:2}
.svc-form-title{font-family:var(--serif);font-size:1.7rem;font-weight:400;color:var(--green-700);margin-bottom:6px}
.svc-form-sub{font-size:.8rem;color:var(--text-mut);margin-bottom:26px}

/* ── INTRO BAND ── */
.svc-intro{padding:110px 0 0;text-align:center}
.svc-intro .h-eyebrow{justify-content:center}
.svc-intro h2{font-family:var(--serif);font-size:clamp(2rem,3.2vw,2.7rem);font-weight:300;color:var(--green-700);line-height:1.18;letter-spacing:-.005em;max-width:760px;margin:0 auto}
.svc-intro h2 em{font-style:italic;color:var(--amber);font-weight:400}
.svc-intro p{font-size:1.02rem;color:var(--text-mut);line-height:1.9;max-width:680px;margin:22px auto 0;font-weight:300}

/* ── BENEFITS GRID ── */
.svc-benefits{padding:90px 0 0}
.svc-ben-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:3px;overflow:hidden;margin-top:60px}
.svc-ben{background:var(--white);padding:40px 34px;display:flex;flex-direction:column;gap:14px}
.svc-ben-ic{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:var(--cream);flex-shrink:0}
.svc-ben-ic svg{width:22px;height:22px;fill:none;stroke:var(--amber);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svc-ben h3{font-family:var(--serif);font-size:1.22rem;font-weight:400;color:var(--green-700);line-height:1.25}
.svc-ben p{font-size:.88rem;color:var(--text-mut);line-height:1.7;font-weight:300}

/* ── WHAT'S INCLUDED ── */
.svc-incl{padding:120px 0 0}
.svc-incl-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-top:10px}
.svc-incl-media{border-radius:4px;overflow:hidden;aspect-ratio:4/3;background:var(--green-700)}
.svc-incl-media img{width:100%;height:100%;object-fit:cover;display:block}
.svc-incl-body h2{font-family:var(--serif);font-size:clamp(1.9rem,3vw,2.5rem);font-weight:300;color:var(--green-700);line-height:1.18;letter-spacing:-.005em;margin-bottom:14px}
.svc-incl-body h2 em{font-style:italic;color:var(--amber);font-weight:400}
.svc-incl-body>p{font-size:.96rem;color:var(--text-mut);line-height:1.85;font-weight:300;margin-bottom:24px}
.svc-incl-list{list-style:none;display:flex;flex-direction:column;gap:0}
.svc-incl-list li{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--line-3);font-size:.92rem;color:var(--text-2);line-height:1.55}
.svc-incl-list li:last-child{border-bottom:1px solid var(--line-3)}
.svc-incl-list li::before{content:'';flex-shrink:0;width:20px;height:20px;margin-top:1px;border-radius:50%;background:var(--green-700);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
.svc-incl-list li strong{color:var(--green-700);font-weight:600}

/* ── PROCESS (reuses homepage look) ── */
.svc-process{padding:120px 0 0}
.svc-proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:44px;margin-top:64px}
.svc-proc-step{border-top:1px solid var(--line);padding-top:28px;position:relative}
.svc-proc-step::before{content:'';position:absolute;top:-1px;left:0;width:32px;height:2px;background:var(--amber);transition:width .4s cubic-bezier(.2,.7,.2,1)}
.svc-proc-step:hover::before{width:64px}
.svc-proc-num{font-family:var(--serif);font-size:2.6rem;font-weight:300;font-style:italic;color:var(--amber);line-height:1;margin-bottom:30px}
.svc-proc-step h3{font-family:var(--serif);font-size:1.3rem;font-weight:400;color:var(--green-700);margin-bottom:12px;line-height:1.3}
.svc-proc-step p{font-size:.86rem;color:var(--text-mut);line-height:1.7;font-weight:300}

/* ── FAQ ── */
.svc-faq{padding:120px 0 0}
.svc-faq-wrap{max-width:820px;margin:56px auto 0}
.faq-item{border-bottom:1px solid var(--line-2)}
.faq-item:first-child{border-top:1px solid var(--line-2)}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:var(--sans);font-size:1.04rem;font-weight:500;color:var(--green-700);padding:26px 44px 26px 0;position:relative;display:flex;justify-content:space-between;align-items:center;gap:20px;line-height:1.4}
.faq-q::after{content:'';position:absolute;right:4px;top:50%;width:13px;height:13px;margin-top:-6px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BF7A22' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;transition:transform .3s}
.faq-item.open .faq-q::after{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a-inner{padding:0 44px 26px 0;font-size:.94rem;color:var(--text-mut);line-height:1.85;font-weight:300}
.faq-item.open .faq-a{max-height:560px}

/* ── FINAL CTA ── */
.svc-cta{margin-top:120px;background:var(--green-800);position:relative;overflow:hidden}
.svc-cta::before{content:'';position:absolute;inset:0;background-size:cover;background-position:center;opacity:.08;pointer-events:none}
.svc-cta-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.svc-cta-l{padding:90px 56px;display:flex;flex-direction:column;justify-content:center}
.svc-cta-l h2{font-family:var(--serif);font-size:clamp(2rem,3.2vw,2.7rem);font-weight:300;color:#fff;line-height:1.15;margin-bottom:16px;letter-spacing:-.005em}
.svc-cta-l h2 em{font-style:italic;color:var(--amber);font-weight:400}
.svc-cta-l p{font-size:1rem;color:rgba(255,255,255,.6);line-height:1.85;font-weight:300;margin-bottom:28px;max-width:460px}
.svc-cta-bens{list-style:none;display:flex;flex-direction:column;gap:11px}
.svc-cta-bens li{font-size:.9rem;color:rgba(255,255,255,.78);padding-left:24px;position:relative}
.svc-cta-bens li::before{content:'✓';position:absolute;left:0;color:var(--amber);font-weight:700}
.svc-cta-r{background:#fff;padding:72px 56px;display:flex;flex-direction:column;justify-content:center}
.svc-cta-r h3{font-family:var(--serif);font-size:1.55rem;font-weight:400;color:var(--green-700);margin-bottom:4px}
.svc-cta-r .svc-form-sub{margin-bottom:22px}

/* Full quote form fits the narrow hero column: stack rows, 2-col pills */
.svc-hero-r .f-row{grid-template-columns:1fr}
.svc-hero-r .pbtns .wpcf7-radio{grid-template-columns:repeat(2,1fr)}

/* ── RESPONSIVE ── */
@media(max-width:1040px){
  .svc-hero{grid-template-columns:1fr}
  .svc-hero-l{padding:96px 36px 56px}
  .svc-hero-r{padding:48px 32px;box-shadow:none;border-top:1px solid var(--line)}
  .svc-ben-grid{grid-template-columns:1fr 1fr}
  .svc-incl-grid{grid-template-columns:1fr;gap:36px}
  .svc-proc-grid{grid-template-columns:1fr 1fr;gap:34px}
  .svc-cta-inner{grid-template-columns:1fr}
  .svc-cta-l{padding:64px 36px 36px}
  .svc-cta-r{padding:44px 36px 64px}
}
@media(max-width:640px){
  .svc-hero-l{padding:80px 22px 44px}
  .svc-hero-r{padding:40px 22px}
  .svc-intro,.svc-benefits,.svc-incl,.svc-process,.svc-faq{padding-top:80px}
  .svc-ben-grid{grid-template-columns:1fr}
  .svc-proc-grid{grid-template-columns:1fr;gap:40px}
  .svc-cta{margin-top:80px}
  .svc-cta-l,.svc-cta-r{padding:40px 22px}
}

/* ── SERVICE VIDEO (optional, e.g. flat-pack assembly) ── */
.svc-video{padding:110px 0;background:var(--cream)}
.svc-video-sub{font-size:1.04rem;color:var(--text-mut);line-height:1.8;max-width:660px;margin:18px auto 0;font-weight:300}
.svc-video-frame{position:relative;max-width:960px;margin:48px auto 0;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--green-900);box-shadow:0 40px 90px -30px rgba(10,24,18,.5)}
.svc-video-frame iframe,.svc-video-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover}
@media(max-width:640px){.svc-video{padding:64px 0}.svc-video-frame{margin-top:32px;border-radius:7px}}