/* Commercial Services + service sub-pages — merged blue theme.
   Union of all 8 page <style> blocks. --display renamed to --title
   (Astra/Elementor set --display:flex on wrappers). Fonts in prestige.css. */
:root{
  --bg: oklch(0.97 0.004 240);
  --bg-2: oklch(0.93 0.008 240);
  --ink: oklch(0.28 0.07 250);
  --ink-deep: oklch(0.22 0.08 250);
  --ink-2: oklch(0.42 0.06 250);
  --ink-3: oklch(0.55 0.03 250);
  --rule: oklch(0.86 0.015 240);
  --rule-strong: oklch(0.72 0.02 240);
  --accent: oklch(0.55 0.14 245);
  --accent-ink: oklch(0.20 0.08 250);
  --dark: oklch(0.22 0.08 250);
  --sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --maxw: 1360px;
  --pad: clamp(20px, 4vw, 56px);
  --title: "Bebas Neue", "Oswald", "Impact", sans-serif;
}
* { box-sizing:border-box }
html,body { margin:0;padding:0 }
body { background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility; }
a { color:inherit; text-decoration:none }
::selection { background: var(--accent); color: var(--bg) }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad) }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-3); }
.eyebrow .dot { display:inline-block; width:6px; height:6px; border-radius:50%; background: var(--accent); margin-right:8px; transform:translateY(-2px) }
.meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3) }
section { padding-block: clamp(64px, 9vw, 130px) }
/* ===== INTRO HERO ===== */
  .intro { padding-top: clamp(48px, 7vw, 96px) }
.intro .top { display:flex; justify-content: space-between; gap: 24px; margin-bottom: 36px; flex-wrap: wrap }
.intro h1 { font-family: var(--title); text-transform: uppercase;
    font-size: clamp(56px, 9vw, 150px); line-height: 0.88; letter-spacing: 0.005em;
    margin: 0; max-width: 16ch; }
.intro h1 em { font-style: normal; color: var(--accent) }
.intro .lead { max-width: 52ch; font-size: clamp(16px, 1.3vw, 19px); color: var(--ink-2); line-height: 1.45; margin-top: 28px; }
.intro .actions { display:flex; gap: 12px; margin-top: 28px; flex-wrap: wrap }
.btn { display:inline-flex; align-items:center; gap: 14px;
    background: var(--ink); color: var(--bg);
    border: 0; border-radius: 2px; padding: 14px 20px;
    font-family: var(--sans); font-size: 15px; font-weight: 500; cursor: pointer; }
.btn .arrow { font-family: var(--mono); font-weight: 400 }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink) }
.btn.amber { background: var(--accent); color: var(--bg) }
.intro-meta { display:flex; justify-content: space-between; align-items: end;
    margin-top: clamp(36px, 5vw, 64px); padding-block: 22px;
    border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
    gap: 24px; flex-wrap: wrap; }
.intro-meta .item { display:flex; gap: 14px; align-items:center }
.intro-meta .item .k { font-family: var(--title); font-size: 44px; line-height: 1; letter-spacing: 0.01em }
.intro-meta .item .l { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); max-width: 20ch }
/* ===== MAINTENANCE / SPLIT ===== */
  .split { display:grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start }
.split h2 { font-family: var(--title); text-transform: uppercase;
    font-size: clamp(44px, 6vw, 96px); line-height: 0.9; letter-spacing: 0.005em; margin: 12px 0 0; }
.split h2 em { font-style: normal; color: var(--accent) }
.split p { color: var(--ink-2); font-size: 16px; max-width: 52ch; margin-top: 24px }
.checklist { list-style: none; padding: 0; margin: 28px 0 0; display:grid; gap: 0; border-top: 1px solid var(--rule) }
.checklist li { display:flex; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule);
    font-size: 16px; font-weight: 500; color: var(--ink); }
.checklist li .ix { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.08em; min-width: 28px }
.checklist li .ck { color: var(--accent); font-weight: 600 }
.call-card { border: 1px solid var(--rule-strong); background: var(--bg);
    padding: 26px; display:grid; gap: 20px; border-radius: 2px;
    position: sticky; top: 24px; }
.call-card .ph { aspect-ratio: 4/3 }
.call-card .status { display:inline-flex; align-items:center; gap: 8px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.call-card .pulse { width: 8px; height:8px; border-radius:50%; background: oklch(0.65 0.18 145);
    box-shadow: 0 0 0 0 oklch(0.65 0.18 145 / 0.6); animation: pulse 2s infinite; }
0% { box-shadow:0 0 0 0 oklch(0.65 0.18 145 / 0.6) }
70% { box-shadow:0 0 0 10px oklch(0.65 0.18 145 / 0) }
100% { box-shadow:0 0 0 0 oklch(0.65 0.18 145 / 0) }
.call-card .tel { font-family: var(--title); font-size: 52px; line-height: 1; letter-spacing: 0.01em; display:block }
.call-card .row { display:flex; justify-content: space-between; align-items:center; padding-block: 10px; border-bottom: 1px dashed var(--rule) }
.call-card .row:last-of-type { border-bottom:0 }
.call-card .row b { font-weight: 500 }
/* ===== SECTION HEAD ===== */
  .section-head { display:grid; grid-template-columns: 1fr 1.6fr; gap: 48px; margin-bottom: clamp(40px, 6vw, 72px); align-items: end }
.section-head h2 { font-family: var(--title); text-transform: uppercase;
    font-size: clamp(56px, 8vw, 128px); line-height: 0.9; letter-spacing: 0.005em; margin: 12px 0 0; }
.section-head h2 em { font-style: normal; color: var(--accent) }
.section-head .lede { font-size: 17px; color: var(--ink-2); max-width: 54ch; line-height: 1.45 }
/* ===== SOLUTIONS CARD GRID ===== */
  .solutions { background: var(--bg-2) }
.cards { display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
.card { background: var(--bg); border: 1px solid var(--rule); border-radius: 2px;
    display:flex; flex-direction: column; overflow: hidden;
    transition: border-color .2s, transform .2s; }
.card:hover { border-color: var(--accent); transform: translateY(-3px) }
.card .img { aspect-ratio: 16/10 }
.card .body { padding: 24px 24px 26px; display:flex; flex-direction: column; gap: 14px; flex: 1 }
.card .ix { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-3) }
.card h3 { font-family: var(--title); text-transform: uppercase; font-size: 38px; line-height: 1; letter-spacing: 0.01em; margin: 0; }
.card p { color: var(--ink-2); font-size: 14.5px; margin: 0; flex: 1 }
.card .more { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
    padding-top: 14px; border-top: 1px solid var(--rule); }
.card .more:after { content:" →"; color: var(--accent) }
/* ===== CTA STRIP ===== */
  .cta-strip { background: var(--accent); color: var(--bg) }
.cta-strip .wrap { padding-block: clamp(56px, 8vw, 100px); display:grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items:center }
.cta-strip h2 { font-family: var(--title); text-transform: uppercase; font-size: clamp(56px, 8vw, 128px); line-height: 0.9; margin: 0; letter-spacing: 0.005em }
.cta-strip h2 em { font-style: normal; color: var(--ink-deep) }
.cta-strip p { color: oklch(0.92 0.04 245); max-width: 46ch; margin: 0 0 4px }
.cta-strip .actions { display:flex; flex-direction: column; gap: 12px }
.cta-strip .btn { background: var(--ink-deep); color: var(--bg) }
.cta-strip .btn.ghost { background: transparent; color: var(--bg); border: 1px solid var(--bg) }
/* image placeholder */
  .ph { background:
      repeating-linear-gradient(135deg,
        oklch(0.88 0.02 240) 0 6px,
        oklch(0.92 0.012 240) 6px 12px);
    border: 1px solid var(--rule);
    color: var(--ink-3);
    display:flex; align-items:center; justify-content:center;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    position: relative; }
.ph:after { content: attr(data-label);
    position: absolute; bottom: 10px; left: 10px;
    background: var(--bg); padding: 3px 6px; border: 1px solid var(--rule); }
@media (max-width: 1000px){
    .cards{grid-template-columns: repeat(2, 1fr)}
  }
@media (max-width: 820px){
    .split, .section-head, .cta-strip .wrap{grid-template-columns: 1fr}
    .call-card{position: static}
    .cards{grid-template-columns: 1fr}
  }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }
.eyebrow { font-family: var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color: var(--ink-3) }
section { padding-block: clamp(64px, 9vw, 124px) }
.btn { display:inline-flex; align-items:center; gap:14px; background: var(--ink); color: var(--bg); border:0; border-radius:2px; padding:14px 20px; font-family: var(--sans); font-size:15px; font-weight:500; cursor:pointer }
/* INTRO */
  .intro { padding-top: clamp(48px,7vw,92px) }
.intro .top { display:flex; justify-content:space-between; gap:24px; margin-bottom:34px; flex-wrap:wrap }
.crumb { font-family: var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color: var(--ink-3) }
.crumb a:hover { color: var(--ink) }
.crumb .sep { color: var(--accent); margin:0 8px }
.intro h1 { font-family: var(--title); text-transform:uppercase; font-size: clamp(56px,9vw,150px); line-height:0.88; letter-spacing:0.005em; margin:0; max-width:14ch }
.intro .lead { max-width:54ch; font-size: clamp(16px,1.3vw,19px); color: var(--ink-2); line-height:1.45; margin-top:28px }
.intro-meta { display:flex; justify-content:space-between; align-items:end; margin-top: clamp(36px,5vw,60px); padding-block:22px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); gap:24px; flex-wrap:wrap }
/* SPLIT INTRO */
  .split { display:grid; grid-template-columns:1.2fr 1fr; gap: clamp(32px,5vw,72px); align-items:start }
.split h2 { font-family: var(--title); text-transform:uppercase; font-size: clamp(40px,5.5vw,84px); line-height:0.9; letter-spacing:0.005em; margin:12px 0 0 }
.split p { color: var(--ink-2); font-size:16px; max-width:54ch; margin-top:22px }
.quote { margin-top:28px; padding:22px 24px; border-left:3px solid var(--accent); background: var(--bg-2); font-size:16px; color: var(--ink-2) }
.quote b { color: var(--ink); font-weight:500 }
.call-card { border:1px solid var(--rule-strong); background: var(--bg); padding:26px; display:grid; gap:18px; border-radius:2px; position:sticky; top:24px }
.call-card .status { display:inline-flex; align-items:center; gap:8px; font-family: var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color: var(--ink) }
.call-card .pulse { width:8px; height:8px; border-radius:50%; background: oklch(0.65 0.18 145); box-shadow:0 0 0 0 oklch(0.65 0.18 145 / 0.6); animation:pulse 2s infinite }
/* SECTION HEAD */
  .section-head { display:grid; grid-template-columns:1fr 1.6fr; gap:48px; margin-bottom: clamp(40px,6vw,68px); align-items:end }
.section-head h2 { font-family: var(--title); text-transform:uppercase; font-size: clamp(52px,7vw,116px); line-height:0.9; letter-spacing:0.005em; margin:12px 0 0 }
/* SERVICE ROWS */
  .svc-list { border-top:1px solid var(--rule) }
.svc { display:grid; grid-template-columns:80px 1.1fr 2fr; gap:32px; padding:32px 0; border-bottom:1px solid var(--rule); align-items:baseline }
.svc:hover { background: var(--bg-2) }
.svc .n { font-family: var(--mono); font-size:12px; color: var(--ink-3); letter-spacing:0.1em }
.svc .t { font-family: var(--title); text-transform:uppercase; font-size: clamp(30px,3.6vw,50px); line-height:1; letter-spacing:0.01em }
.svc .d { color: var(--ink-2); font-size:15.5px; max-width:56ch }
/* WHY / dark */
  .why { background: var(--ink-deep); color: var(--bg) }
.why .section-head h2 { color: var(--bg) }
.why .eyebrow { color: oklch(0.75 0.04 240) }
.why .grid { display:grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px,5vw,64px); align-items:start }
.why p { color: oklch(0.84 0.04 240); font-size:16px; line-height:1.6; max-width:58ch }
.why .pts { list-style:none; padding:0; margin:0; display:grid; gap:0; border-top:1px solid oklch(0.36 0.08 250) }
.why .pts li { display:flex; gap:14px; align-items:baseline; padding:16px 0; border-bottom:1px solid oklch(0.36 0.08 250); font-size:15px; font-weight:500 }
.why .pts .ck { color: var(--accent) }
/* FAQ */
  .faq-list { border-top:1px solid var(--rule) }
details.faq { border-bottom:1px solid var(--rule) }
details.faq summary { list-style:none; cursor:pointer; padding:26px 0; display:grid; grid-template-columns:64px 1fr 32px; gap:24px; align-items:center; font-family: var(--title); text-transform:uppercase; font-size: clamp(24px,3vw,40px); line-height:1; letter-spacing:0.01em }
details.faq summary::-webkit-details-marker { display:none }
details.faq summary .n { font-family: var(--mono); font-size:11px; letter-spacing:0.1em; color: var(--ink-3) }
details.faq summary .plus { width:32px; height:32px; border:1px solid var(--ink); border-radius:50%; position:relative; transition:background .2s }
details.faq summary .plus:before,details.faq summary .plus:after { content:""; position:absolute; left:50%; top:50%; background: var(--ink) }
details.faq summary .plus:before { width:12px; height:1.5px; transform:translate(-50%,-50%) }
details.faq summary .plus:after { width:1.5px; height:12px; transform:translate(-50%,-50%); transition:transform .2s }
details.faq[open] summary .plus { background: var(--accent); border-color: var(--accent) }
details.faq[open] summary .plus:before { background: var(--bg) }
details.faq[open] summary .plus:after { transform:translate(-50%,-50%) rotate(90deg); opacity:0 }
details.faq .body { padding:0 0 30px 88px; color: var(--ink-2); font-size:16px; line-height:1.55; max-width:74ch }
/* CTA */
  .cta-strip { background: var(--accent); color: var(--bg) }
.cta-strip h2 { font-family: var(--title); text-transform:uppercase; font-size: clamp(52px,7vw,116px); line-height:0.9; margin:0; letter-spacing:0.005em }
.cta-strip p { color: oklch(0.93 0.04 245); max-width:46ch; margin:20px 0 0 }
.ph { background: repeating-linear-gradient(135deg, oklch(0.88 0.02 240) 0 6px, oklch(0.92 0.012 240) 6px 12px); border:1px solid var(--rule); color: var(--ink-3); display:flex; align-items:center; justify-content:center; font-family: var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; position:relative }
.ph:after { content:attr(data-label); position:absolute; bottom:10px; left:10px; background: var(--bg); padding:3px 6px; border:1px solid var(--rule) }
.imgrow { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top: clamp(32px,5vw,56px) }
.imgrow .ph { aspect-ratio:16/10 }
@media (max-width:880px){
    .split,.section-head,.why .grid,.cta-strip .wrap{grid-template-columns:1fr}
    .call-card{position:static}
    .svc{grid-template-columns:56px 1fr; gap:14px}
    .svc .d{grid-column:1 / -1; padding-left:70px}
    .imgrow{grid-template-columns:1fr}
    details.faq summary{grid-template-columns:40px 1fr 28px; gap:16px}
    details.faq .body{padding-left:56px}
  }
.intro { padding-top: clamp(48px,7vw,92px) }
.split { display:grid; grid-template-columns:1.2fr 1fr; gap: clamp(32px,5vw,72px); align-items:start }
.section-head { display:grid; grid-template-columns:1fr 1.6fr; gap:48px; margin-bottom: clamp(40px,6vw,68px); align-items:end }
.svc-list { border-top:1px solid var(--rule) }
.why { background: var(--ink-deep); color: var(--bg) }
.faq-list { border-top:1px solid var(--rule) }
.cta-strip { background: var(--accent); color: var(--bg) }
/* SERVICE GROUPS (refrigeration has grouped lists) */
  .groups { display:grid; grid-template-columns:repeat(2,1fr); gap:16px }
.group { border:1px solid var(--rule); background: var(--bg); padding:28px 26px 30px; border-radius:2px; display:flex; flex-direction:column; gap:18px }
.group .gh { display:flex; align-items:baseline; gap:14px }
.group .gh .n { font-family: var(--mono); font-size:11px; letter-spacing:0.1em; color: var(--ink-3) }
.group h3 { font-family: var(--title); text-transform:uppercase; font-size:38px; line-height:1; letter-spacing:0.01em; margin:0 }
.group ul { list-style:none; padding:0; margin:0; display:grid; gap:0; border-top:1px solid var(--rule) }
.group li { padding:13px 0; border-bottom:1px solid var(--rule); font-size:15px; display:flex; gap:12px; align-items:baseline }
.group li:last-child { border-bottom:0 }
.group li .ck { color: var(--accent); font-weight:600 }
.group li b { font-weight:500 }
.group li span.txt { color: var(--ink-2) }
@media (max-width:880px){
    .split,.section-head,.why .grid,.cta-strip .wrap,.groups{grid-template-columns:1fr}
    .call-card{position:static}
    .imgrow{grid-template-columns:1fr}
    details.faq summary{grid-template-columns:40px 1fr 28px; gap:16px}
    details.faq .body{padding-left:56px}
  }
/* ── Override home prestige.css .btn leak (width:100% + justify space-between) ── */
.intro .btn,
.split .btn,
.solutions .btn,
.why .btn,
.svc-list .btn,
.groups .btn {
  width: auto;
  justify-content: center;
}
/* call-card amber button keeps its inline space-between */
.call-card .btn.amber { width: 100%; }