/* Scottish Salvage Group — main (deferred) CSS. Below-the-fold + components. */

/* ── Mega menu (desktop) ─────────────────────────────── */
.sss-nav-item{position:relative}
.sss-mega{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);width:min(840px,calc(100vw - 2rem));background:#fff;border:1px solid var(--line);border-radius:var(--rad-lg);padding:1.5rem;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .15s var(--ease),transform .2s var(--ease);z-index:95}
.sss-mega:not([hidden]){opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.sss-mega-grid{display:grid;grid-template-columns:1fr 1fr 1.05fr;gap:1.5rem}
.sss-mega-feature{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--rad);padding:1.1rem;margin:-.4rem}
.sss-mega-head{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 .6rem}
.sss-mega-col ul{list-style:none;margin:0;padding:0}
.sss-mega-col a{display:block;padding:.55rem .6rem;border-radius:var(--rad-sm);color:var(--ink);font-weight:700;font-size:.95rem;line-height:1.25}
.sss-mega-col a span{display:block;color:var(--muted);font-weight:400;font-size:.8rem;margin-top:1px}
.sss-mega-col a:hover{background:var(--paper-2);color:var(--saltire-d)}
.sss-mega-feature .sss-btn{margin-top:.6rem}

/* ── Mobile nav ──────────────────────────────────────── */
.sss-mnav-backdrop{position:fixed;inset:0;background:rgba(14,23,38,.5);backdrop-filter:blur(3px);z-index:101;opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
.sss-mnav-backdrop.is-open{opacity:1;pointer-events:auto}
.sss-mnav{position:fixed;top:0;right:0;bottom:0;width:min(360px,92vw);background:#fff;z-index:102;box-shadow:var(--shadow-lg);transform:translateX(100%);visibility:hidden;transition:transform .28s var(--ease),visibility 0s linear .28s;overflow-y:auto;padding:1.25rem;overscroll-behavior:contain}
.sss-mnav.is-open{transform:translateX(0);visibility:visible;transition:transform .28s var(--ease)}
.sss-mnav-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.sss-mnav-x{width:40px;height:40px;border:1px solid var(--line);border-radius:var(--rad-sm);background:#fff;font-size:1.5rem;line-height:1;color:var(--ink);cursor:pointer}
.sss-mnav-call{display:flex;flex-direction:column;padding:.7rem .9rem;border:1px solid var(--line);border-radius:var(--rad);margin:.5rem 0 .75rem;color:var(--ink)}
.sss-mnav-call strong{font-size:1.2rem;font-weight:800}
.sss-mnav-call span{font-size:11px;color:var(--green);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.sss-mnav-h{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:1.25rem 0 .4rem;padding-bottom:.4rem;border-bottom:1px solid var(--line-soft)}
.sss-mnav-list{list-style:none;margin:0;padding:0}
.sss-mnav-list a{display:block;padding:.7rem .6rem;border-radius:var(--rad-sm);color:var(--ink);font-weight:600;min-height:44px}
.sss-mnav-list a:hover{background:var(--paper-2);color:var(--saltire-d)}

/* ── Hero form wrapper ───────────────────────────────── */
.sss-hero-form{align-self:center}

/* ── Process steps ───────────────────────────────────── */
/* Base reset applies to EVERY .sss-steps list (city pages use it outside .sss-process). */
.sss-steps{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:1.1rem}
.sss-process .sss-steps{grid-template-columns:repeat(3,1fr);counter-reset:s}
.sss-steps li{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:1.4rem 1.3rem;position:relative}
.sss-steps li strong{display:block;font-size:1.08rem;color:var(--ink);margin:.7rem 0 .3rem}
.sss-steps li p{margin:0;font-size:.95rem;color:var(--muted)}
.sss-step-n{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:11px;background:var(--navy-grad);color:var(--amber);font-weight:900;font-size:1.1rem}

/* ── Service tiles ───────────────────────────────────── */
.sss-tiles{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:1rem}
.sss-tile{display:block;position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:1.5rem;color:var(--ink);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);overflow:hidden}
.sss-tile::before{content:"";position:absolute;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--saltire),var(--amber));transition:width .3s var(--ease)}
.sss-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--saltire)}
.sss-tile:hover::before{width:100%}
.sss-tile-ic{display:inline-flex;width:46px;height:46px;align-items:center;justify-content:center;border-radius:11px;background:var(--saltire-soft);color:var(--saltire-d);margin-bottom:1rem;transition:.2s var(--ease)}
.sss-tile:hover .sss-tile-ic{background:var(--navy-grad);color:var(--amber)}
.sss-tile-name{display:block;font-weight:800;font-size:1.08rem;margin-bottom:.3rem;letter-spacing:-.01em}
.sss-tile-desc{display:block;font-size:.9rem;color:var(--muted);line-height:1.5}
.sss-tile-arrow{position:absolute;top:1.5rem;right:1.4rem;color:var(--muted-2);transition:.2s var(--ease)}
.sss-tile:hover .sss-tile-arrow{color:var(--saltire);transform:translateX(4px)}

/* ── Cards (why) ─────────────────────────────────────── */
.sss-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-top:1.4rem}
.sss-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--rad);padding:1.4rem}
.sss-card h3{font-size:1.05rem;margin-bottom:.4rem}
.sss-card p{margin:0;font-size:.93rem;color:var(--muted)}

/* ── Town grid ───────────────────────────────────────── */
.sss-town-grid{list-style:none;margin:1.3rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.sss-town-grid li a{display:inline-flex;align-items:center;padding:.6rem 1rem;background:#fff;border:1px solid var(--line);border-radius:999px;font-weight:600;font-size:.92rem;color:var(--ink)}
.sss-town-grid li a:hover{border-color:var(--saltire);color:var(--saltire-d);background:var(--saltire-soft)}
.sss-town-all{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important}

/* ── Split cards ─────────────────────────────────────── */
.sss-split{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.sss-split-card{background:#fff;border:1px solid var(--line);border-radius:var(--rad-lg);padding:1.8rem}
.sss-split-card h3{font-size:1.25rem}
.sss-split-card p{color:var(--muted)}

/* ── FAQ ─────────────────────────────────────────────── */
.sss-faq-list{margin-top:1.3rem;border-top:1px solid var(--line)}
.sss-faq-item{border-bottom:1px solid var(--line)}
.sss-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem .2rem;font-weight:700;font-size:1.05rem;color:var(--ink);cursor:pointer;list-style:none}
.sss-faq-item summary::-webkit-details-marker{display:none}
.sss-faq-chev{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--paper-2);color:var(--saltire-d);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;transition:transform .2s var(--ease)}
.sss-faq-item[open] .sss-faq-chev{transform:rotate(45deg)}
.sss-faq-a{padding:0 .2rem 1.1rem;color:var(--ink-soft)}
.sss-faq-a p{margin:0 0 .6rem}

/* ── CTA band ────────────────────────────────────────── */
.sss-cta{background:var(--navy-grad);color:#fff;margin-top:1rem}
.sss-cta-in{padding:3rem 1.25rem;text-align:center}
.sss-cta h2{color:#fff}
.sss-cta p{color:#BFD0E2;margin-bottom:1.4rem}

/* ── Prose (guides/legal/city body) ──────────────────── */
.sss-prose{max-width:72ch}
.sss-prose h2{margin-top:2rem}
.sss-prose h3{margin-top:1.5rem}
.sss-prose ul,.sss-prose ol{margin:0 0 1.2rem;padding-left:1.3rem}
.sss-prose li{margin-bottom:.45rem}
.sss-prose blockquote{margin:1.4rem 0;padding:1rem 1.3rem;background:var(--saltire-soft);border-left:4px solid var(--saltire);border-radius:0 var(--rad-sm) var(--rad-sm) 0;color:var(--ink)}

/* ── Tables (prices) ─────────────────────────────────── */
.sss-table-wrap{overflow-x:auto;margin:1.4rem 0;border:1px solid var(--line);border-radius:var(--rad)}
.sss-table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:480px}
.sss-table th,.sss-table td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--line-soft)}
.sss-table thead th{background:var(--paper-2);font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:800}
.sss-table tbody tr:hover{background:var(--paper-2)}
.sss-table td strong{color:var(--ink)}
.sss-price{font-weight:800;color:var(--green);font-variant-numeric:tabular-nums}

/* ── Two-column layout (pillar/city with sticky form) ── */
.sss-cols{display:grid;grid-template-columns:1fr 360px;gap:2.5rem;align-items:start}
.sss-cols-main{min-width:0}
.sss-aside{position:sticky;top:calc(var(--header-h) + 14px)}
.sss-aside .sss-quote-card{box-shadow:var(--shadow)}

/* ── Panels / callouts ───────────────────────────────── */
.sss-panel{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--rad);padding:1.4rem 1.5rem;margin:1.4rem 0}
.sss-panel-amber{background:var(--amber-soft);border-color:#F6D998}
.sss-checklist{list-style:none;margin:1rem 0;padding:0;display:grid;gap:.6rem}
.sss-checklist li{position:relative;padding-left:1.9rem;line-height:1.5}
.sss-checklist li::before{content:"";position:absolute;left:0;top:.15rem;width:20px;height:20px;border-radius:50%;background:var(--green-soft);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23168A4B' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");background-size:13px;background-repeat:no-repeat;background-position:center}

/* ── Stat row ────────────────────────────────────────── */
.sss-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin:1.4rem 0}
.sss-stat{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:1.2rem;text-align:center}
.sss-stat b{display:block;font-size:1.9rem;font-weight:900;color:var(--ink);letter-spacing:-.02em}
.sss-stat span{font-size:.85rem;color:var(--muted)}

/* ── Interlink block ─────────────────────────────────── */
.sss-interlink{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:none}
.sss-interlink>*{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.sss-interlink-h{font-size:1.3rem}
.sss-interlink-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-top:1.2rem}
.sss-interlink-head{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 .6rem}
.sss-interlink-col ul{list-style:none;margin:0;padding:0}
.sss-interlink-col a{display:block;padding:.4rem 0;color:var(--saltire-d);font-weight:600;font-size:.95rem}
.sss-interlink-col a span{display:block;color:var(--muted);font-weight:400;font-size:.8rem}
.sss-interlink-col a:hover{color:var(--ink)}

/* ── Region hub directory ────────────────────────────── */
.sss-region-group{margin-bottom:1.8rem}
.sss-region-group h3{font-size:1.05rem;padding-bottom:.5rem;border-bottom:2px solid var(--saltire-soft);margin-bottom:.8rem}
.sss-region-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.3rem}
.sss-region-links a{display:block;padding:.5rem .6rem;border-radius:var(--rad-sm);color:var(--ink);font-size:.93rem}
.sss-region-links a:hover{background:var(--saltire-soft);color:var(--saltire-d)}

/* ── Footer ──────────────────────────────────────────── */
.sss-footer{background:var(--ink);color:#AEC0D2;margin-top:3rem}
.sss-footer-cta{background:linear-gradient(150deg,#16263D,#0E1726);border-bottom:1px solid rgba(255,255,255,.08)}
.sss-footer-cta-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;padding:2.2rem 1.25rem}
.sss-footer-cta h2{color:#fff;margin:0 0 .3rem}
.sss-footer-cta p{margin:0;color:#BFD0E2}
.sss-footer-cta-btns{display:flex;gap:.7rem;flex-wrap:wrap}
.sss-footer-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem;padding:2.6rem 1.25rem}
.sss-footer-brand .sss-logo{color:#fff;margin-bottom:.8rem}
.sss-footer-brand .sss-logo small{color:#7E92A6}
.sss-footer-brand p{font-size:.9rem;line-height:1.6;color:#9DB0C4}
.sss-footer-nap a{color:#fff}
.sss-footer-social{list-style:none;display:flex;gap:1rem;padding:0;margin:1rem 0 0}
.sss-footer-social a{color:#AEC0D2;font-size:.9rem}
.sss-footer-social a:hover{color:#fff}
.sss-footer-col h3{color:#fff;font-size:.95rem;margin-bottom:.8rem}
.sss-footer-col ul{list-style:none;margin:0;padding:0}
.sss-footer-col li{margin-bottom:.5rem}
.sss-footer-col a{color:#9DB0C4;font-size:.9rem}
.sss-footer-col a:hover{color:#fff}
.sss-footer-legal{border-top:1px solid rgba(255,255,255,.08)}
.sss-footer-legal-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem;padding:1.2rem 1.25rem;font-size:.82rem;color:#7E92A6}
.sss-footer-legal ul{list-style:none;display:flex;flex-wrap:wrap;gap:1rem;margin:0;padding:0}
.sss-footer-legal a{color:#9DB0C4}.sss-footer-legal a:hover{color:#fff}

/* ── Sticky mobile bar ───────────────────────────────── */
.sss-stickybar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:96;background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(14,23,38,.1)}
.sss-stickybar a{flex:1;display:flex;align-items:center;justify-content:center;gap:.45rem;padding:.95rem;font-weight:800;font-size:.95rem;min-height:54px}
.sss-stickybar-call{background:var(--ink);color:#fff}
.sss-stickybar-wa{background:#1FA855;color:#fff}

/* ── WhatsApp FAB ────────────────────────────────────── */
.sss-wa-fab{position:fixed;right:18px;bottom:18px;z-index:95;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(37,211,102,.45);transition:transform .2s var(--ease)}
.sss-wa-fab:hover{transform:scale(1.08);color:#fff}

/* ── Cookie banner ───────────────────────────────────── */
.sss-cookie{position:fixed;left:18px;right:18px;bottom:18px;z-index:97;max-width:520px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--rad);box-shadow:var(--shadow-lg);padding:1rem 1.1rem;display:flex;gap:1rem;align-items:center}
/* display:flex above would override the hidden attribute's UA display:none — without this
   rule the banner shows before consent-check and never disappears on "Got it". */
.sss-cookie[hidden]{display:none!important}
.sss-cookie p{margin:0;font-size:.85rem;color:var(--muted)}
.sss-cookie .sss-btn{padding:.6rem 1rem;min-height:42px;flex:0 0 auto}

/* ── Reviews ─────────────────────────────────────────── */
.sss-reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-top:1.4rem}
.sss-review{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:1.4rem}
.sss-review-stars{color:#F2950D;letter-spacing:2px;font-size:1rem}
.sss-review p{font-style:italic;color:var(--ink-soft);margin:.6rem 0}
.sss-review cite{font-style:normal;font-weight:700;color:var(--ink);font-size:.9rem}

/* ── Responsive ──────────────────────────────────────── */
@media(max-width:980px){
  .sss-cols{grid-template-columns:1fr}
  .sss-aside{position:static}
  .sss-footer-cols{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .sss-steps,.sss-process .sss-steps,.sss-split{grid-template-columns:1fr}
  .sss-stickybar{display:flex}
  body{padding-bottom:54px}
  .sss-wa-fab{bottom:64px}
  .sss-cookie{bottom:64px}
}
@media(max-width:560px){
  .sss-footer-cols{grid-template-columns:1fr}
  .sss-section{padding:2.2rem 1.25rem}
}