/* ════════════════════════════════════════════════════════════════
   LAWN 'N' ORDER — Interior page layer
   Loads after lno-core.css + lno-ui.css + lno-premium.css.
   Page hero · breadcrumbs · at-a-glance · service cards · feature
   rows · photo slots · materials · cross-links · CTA band
   ════════════════════════════════════════════════════════════════ */

/* ── Page hero ───────────────────────────────────────────────── */
.phero{position:relative;min-height:clamp(420px,58vh,640px);display:flex;align-items:flex-end;overflow:hidden;background:var(--green-900)}
.phero-media{position:absolute;inset:0}
.phero-media img{width:100%;height:100%;object-fit:cover}
.phero-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(14,24,18,.86) 0%,rgba(14,24,18,.66) 46%,rgba(14,24,18,.28) 100%)}
.phero-content{position:relative;width:100%;padding:150px 0 54px}
.phero .crumbs{margin-bottom:22px}
.phero-note{font:600 13px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:16px}
.phero h1{font:800 clamp(38px,5.4vw,70px)/1.03 var(--font-display);letter-spacing:-.02em;color:#fff;max-width:19ch;text-wrap:balance}
.phero h1 em{font-style:normal;color:var(--gold-soft)}
.phero-sub{max-width:60ch;margin-top:20px;font:400 clamp(17px,1.5vw,20px)/1.55 var(--font-body);color:rgba(255,255,255,.88);text-wrap:pretty}
.phero-ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:30px}
.phero-facts{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:34px;padding-top:24px;border-top:1px solid rgba(255,255,255,.2)}
.phero-facts div{display:flex;flex-direction:column;gap:3px;min-width:140px}
.phero-facts b{font:700 clamp(19px,2vw,26px)/1 var(--font-display);color:#fff}
.phero-facts span{font:500 12.5px/1.35 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.62)}

/* ── Breadcrumbs ─────────────────────────────────────────────── */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:500 13.5px/1 var(--font-body)}
.crumbs a{color:rgba(255,255,255,.72);text-decoration:none}
.crumbs a:hover{color:#fff}
.crumbs span{color:rgba(255,255,255,.44)}
.crumbs b{font-weight:600;color:#fff}
.crumbs--ink a{color:var(--muted)}
.crumbs--ink a:hover{color:var(--brand)}
.crumbs--ink span{color:var(--line)}
.crumbs--ink b{color:var(--ink)}

/* ── Intro + at-a-glance ─────────────────────────────────────── */
.pintro{background:var(--bg)}
.pintro .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,5vw,76px);align-items:start}
.pintro-body p{font:400 clamp(17px,1.4vw,19.5px)/1.65 var(--font-body);color:var(--ink);margin-bottom:18px;text-wrap:pretty}
.pintro-body p:last-child{margin-bottom:0}
.pintro-body p.lead{font:400 clamp(20px,1.9vw,25px)/1.5 var(--font-display);color:var(--ink)}
.pintro-body strong{font-weight:700}
.glance{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(24px,2.4vw,34px);box-shadow:var(--shadow-1)}
.glance h3{font:700 19px/1.2 var(--font-display);color:var(--ink);margin-bottom:6px}
.glance>p{font:400 14.5px/1.5 var(--font-body);color:var(--muted);margin-bottom:20px}
.glance dl{display:flex;flex-direction:column;gap:14px}
.glance dl>div{display:flex;flex-direction:column;gap:3px;padding-bottom:14px;border-bottom:1px dashed var(--line)}
.glance dl>div:last-child{border:0;padding-bottom:0}
.glance dt{font:600 11.5px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.glance dd{font:400 15.5px/1.5 var(--font-body);color:var(--ink)}
.glance .glance-cta{margin-top:22px;width:100%;justify-content:center}

/* ── Service cards ───────────────────────────────────────────── */
.scards{display:grid;grid-template-columns:1fr;gap:clamp(18px,2vw,26px)}@media(min-width:660px){.scards{grid-template-columns:repeat(2,1fr)}}@media(min-width:1000px){.scards{grid-template-columns:repeat(3,1fr)}}
.scard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;box-shadow:var(--shadow-1);transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s}
.scard:hover{transform:translateY(-5px);box-shadow:var(--shadow-2)}
.scard-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-alt)}
.scard-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.scard:hover .scard-img img{transform:scale(1.05)}
.scard-tag{position:absolute;left:14px;top:14px;z-index:2;padding:6px 11px;border-radius:999px;background:rgba(14,24,18,.72);backdrop-filter:blur(6px);font:600 10.5px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:#fff}
.scard-body{flex:1;display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2vw,26px)}
.scard-body h3{font:700 clamp(19px,1.6vw,22px)/1.2 var(--font-display);color:var(--ink)}
.scard-body p{font:400 15px/1.6 var(--font-body);color:var(--muted);text-wrap:pretty}
.scard-more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font:700 14.5px/1 var(--font-body);color:var(--brand)}
.scard-more svg{width:16px;height:16px;transition:transform .25s}
.scard:hover .scard-more svg{transform:translateX(4px)}

/* ── Feature rows ────────────────────────────────────────────── */
.frows{display:flex;flex-direction:column;gap:clamp(48px,6vw,96px)}
.frow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.frow-media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-2);aspect-ratio:4/3;background:var(--bg-alt)}
.frow-media img{width:100%;height:100%;object-fit:cover}
.frow--flip .frow-media{order:2}
.frow-body h3{font:700 clamp(25px,2.6vw,36px)/1.14 var(--font-display);letter-spacing:-.01em;color:var(--ink);margin-bottom:14px;text-wrap:balance}
.frow-body p{font:400 clamp(16px,1.35vw,18.5px)/1.65 var(--font-body);color:var(--muted);margin-bottom:14px;text-wrap:pretty}
.frow-note{display:inline-flex;align-items:center;gap:9px;margin-top:6px;padding:9px 15px;border-radius:999px;background:var(--bg-alt);border:1px solid var(--line);font:600 13.5px/1.3 var(--font-body);color:var(--brand)}
.ticks{display:flex;flex-direction:column;gap:11px;margin:18px 0 22px}
.ticks li{display:flex;gap:11px;font:400 16px/1.5 var(--font-body);color:var(--ink);list-style:none}
.ticks svg{flex:none;width:19px;height:19px;margin-top:2px;color:var(--brand-bright)}

/* ── Numbered spec cards ─────────────────────────────────────── */
.specs{display:grid;grid-template-columns:1fr;gap:clamp(16px,1.8vw,22px)}@media(min-width:620px){.specs{grid-template-columns:repeat(2,1fr)}}@media(min-width:980px){.specs{grid-template-columns:repeat(3,1fr)}}
.spec{padding:clamp(22px,2.2vw,30px);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-1)}
.spec .n{display:block;font:700 13px/1 var(--font-body);letter-spacing:.14em;color:var(--accent);margin-bottom:14px}
.spec h3{font:700 18.5px/1.25 var(--font-display);color:var(--ink);margin-bottom:8px}
.spec p{font:400 15px/1.6 var(--font-body);color:var(--muted);text-wrap:pretty}
.spec-num{background:var(--bg-alt);border-color:transparent}

/* ── Photo / asset slots ─────────────────────────────────────── */
.ph-slot{display:none;position:relative;flex-direction:column;justify-content:center;gap:8px;padding:26px;min-height:190px;border-radius:var(--radius-lg);border:1.5px dashed color-mix(in oklch,var(--brand) 42%,var(--line));background-image:repeating-linear-gradient(135deg,color-mix(in oklch,var(--brand) 6%,var(--bg-alt)) 0 10px,var(--bg-alt) 10px 20px);text-align:left}
.ph-slot b{font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.ph-slot span{font:400 13.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);max-width:44ch}
.ph-slot--tall{min-height:320px;aspect-ratio:4/3}

/* ── Materials ───────────────────────────────────────────────── */
.mats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.mat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-1)}
.mat .mat-img{aspect-ratio:3/2;background:var(--bg-alt)}
.mat .mat-img img{width:100%;height:100%;object-fit:cover}
.mat-body{padding:16px 18px 20px}
.mat-body h4{font:700 16.5px/1.25 var(--font-display);color:var(--ink);margin-bottom:5px}
.mat-body p{font:400 14px/1.55 var(--font-body);color:var(--muted)}

/* ── Cross-links ─────────────────────────────────────────────── */
.xlinks{display:flex;flex-wrap:wrap;gap:12px}
.xlink{display:inline-flex;align-items:center;gap:10px;padding:13px 19px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font:600 15px/1 var(--font-body);color:var(--ink);text-decoration:none;box-shadow:var(--shadow-1);transition:border-color .2s,color .2s,transform .2s}
.xlink:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.xlink svg{width:16px;height:16px;color:var(--brand)}

/* ── Sections & bands ────────────────────────────────────────── */
.psec{padding:clamp(62px,7vw,104px) 0}
.psec--alt{background:var(--bg-alt)}
.psec--tight{padding:clamp(44px,4.6vw,66px) 0}
.psec--dark{background:var(--green-900);color:#fff}
.psec--dark .sec-head h2,.psec--dark .spec h3{color:#fff}
.psec--dark .sec-head .lede,.psec--dark .spec p{color:rgba(255,255,255,.76)}
.psec--dark .spec{background:#274924;border-color:rgba(255,255,255,.16);box-shadow:none}
.psec--dark .eyebrow{color:var(--gold-soft)}
.psec--dark .hand{color:var(--gold-soft)}

/* ── Compact CTA band ────────────────────────────────────────── */
.ctaband{background:var(--brand);color:#fff}
.ctaband .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px;padding:clamp(34px,4vw,56px) 0}
.ctaband h2{font:800 clamp(25px,2.7vw,38px)/1.12 var(--font-display);letter-spacing:-.01em;color:#fff;max-width:26ch;text-wrap:balance}
.ctaband p{margin-top:10px;font:400 16.5px/1.55 var(--font-body);color:rgba(255,255,255,.84);max-width:52ch}
.ctaband-act{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.ctaband .btn--solid{background:#fff;color:var(--green-900)}
.ctaband .btn--solid:hover{background:var(--gold-soft);color:var(--green-900)}
.ctaband .btn--ghost{border-color:rgba(255,255,255,.55);color:#fff}
.ctaband .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff}

/* ── Estimator teaser (secondary calculator entry) ───────────── */
.calc-teaser{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(22px,3vw,44px);align-items:center;padding:clamp(26px,3vw,40px);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-1)}
.calc-teaser h3{font:700 clamp(21px,2vw,27px)/1.18 var(--font-display);color:var(--ink);margin-bottom:10px}
.calc-teaser p{font:400 15.5px/1.6 var(--font-body);color:var(--muted);margin-bottom:18px}
.calc-teaser .tiny{font:500 13px/1.4 var(--font-body);color:var(--muted);margin-top:12px}

@media(max-width:920px){
  .pintro .wrap{grid-template-columns:1fr}
  .frow{grid-template-columns:minmax(0,1fr)}.frow--flip .frow-media{order:0}
  .ctaband .wrap{flex-direction:column;align-items:flex-start}
}
@media(max-width:600px){
  .phero-content{padding:120px 0 40px}
  .phero-facts div{min-width:120px}
}

/* Internal production notes — hidden from visitors. Add data-notes to <body> to review them. */
body[data-notes] .ph-slot{display:flex}