/*
Theme Name: SafeSync Solutions
Theme URI: https://safesyncsolutions.co.uk
Author: Kyle Hides
Author URI: https://safesyncsolutions.co.uk
Description: Custom WordPress theme for SafeSync Solutions
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: safesync
*/

/* ----------------------------------------------------------
   RESET & BASE
---------------------------------------------------------- */
html, body { margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea {
  font: inherit; color: inherit; background: transparent; border: none; outline: none;
}
a { text-decoration: none; color: inherit; }
:focus { outline: none; }

/* ----------------------------------------------------------
   TOKENS (SafeSync Design System)
---------------------------------------------------------- */
:root{
  /* Base */
  --bg-0:#f7f9fb; --bg-1:#ffffff; --ink:#0f1113; --ink-muted:#49515a;

  /* Dark UI */
  --dark-900:#1e2a36; --dark-950:#19242f;
  --on-dark:#e8edf2; --on-dark-80:rgba(232,237,242,.8);
  --on-dark-60:rgba(232,237,242,.6); --on-dark-20:rgba(232,237,242,.2);
  --on-dark-15:rgba(232,237,242,.15); --social-bg:rgba(232,237,242,.10);

  /* Accent */
  --accent:#ce8956; --accent-hover:#b87744; --accent-pressed:#9c6439;
  --accent-light:#e6b590; --accent-25a:rgba(206,137,86,0.25);

  /* Focus */
  --focus:rgba(206,137,86,0.45);

  /* Nav (sizes) */
  --header-h: 70px;     /* desktop nav height */
  --topbar-h: 120px;    /* desktop topbar approx (logo 100px + paddings) */
  --adminbar-h: 0px;    /* set via body.admin-bar below */
  --masthead-h: calc(var(--header-h) + var(--topbar-h));

  /* Nav colors */
  --nav-bg-900:var(--dark-900); --nav-bg-950:var(--dark-950);
  --nav-link:var(--on-dark-80); --nav-link-hover:#111; --gold:var(--accent);
}

/* Mobile breakpoint: topbar hidden, shorter header */
@media (max-width:992px){
  :root{
    --header-h: 64px;
    --topbar-h: 0px;
    --masthead-h: calc(var(--header-h) + var(--topbar-h));
  }
}

/* Admin bar heights (WordPress) */
body.admin-bar{ --adminbar-h: 32px; }
@media (max-width:782px){ body.admin-bar{ --adminbar-h: 46px; } }

/* ----------------------------------------------------------
   TYPOGRAPHY
---------------------------------------------------------- */
body{
  font-family:'Poppins',sans-serif; font-size:16px; line-height:1.6;
  color:var(--ink); background:var(--bg-0);
}
h1,h2,h3,h4,h5,h6{
  font-family:'Montserrat',sans-serif; font-weight:700; margin:0 0 12px; color:var(--ink);
}
p{ margin:0 0 18px; }
strong{ font-weight:600; }

/* ----------------------------------------------------------
   UTILITIES
---------------------------------------------------------- */
.container{ width:90%; max-width:1200px; margin:0 auto; }
.section{ padding:80px 0; }
@media (max-width:760px){ .section{ padding:48px 0; } } /* tighter on phones */

.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:12px; top:12px; width:auto; height:auto; background:#fff; color:#111;
  padding:8px 12px; border-radius:8px; z-index:1000;
}

/* ----------------------------------------------------------
   GLOBAL ELEMENTS
---------------------------------------------------------- */
a:hover{ color:var(--accent); }
button,.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 18px; border-radius:8px; font-weight:600; cursor:pointer;
  transition:background .2s ease,color .2s ease,transform .15s ease;
}
.btn--primary{ background:var(--accent); color:#111; }
.btn--primary:hover{ background:var(--accent-hover); transform:translateY(-1px); color:#fff; }
.btn--ghost{ border:1px solid var(--on-dark-20); color:var(--on-dark); }
.btn--ghost:hover{ background:rgba(255,255,255,.06); }
.btn--services{ border:1px solid var(--on-dark-20); color:var(--accent); }
.btn--services:hover{ background:var(--dark-900); color:#fff; }

/* Inputs */
input,select,textarea{
  padding:14px 18px; border:1px solid #ccc; border-radius:8px; font-size:16px;
  background:#f9f9f9; transition:border-color .3s ease, box-shadow .3s ease;
  width:100%;
}
input:focus,select:focus,textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-25a); }

/* ================== TOP BAR (desktop-only) ================== */
.ss-topbar{ background:var(--dark-950); color:var(--on-dark); border-bottom:1px solid var(--on-dark-20); }
.ss-topbar__inner{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
  padding:10px clamp(16px,3vw,32px);
}
.ss-topbar__left,.ss-topbar__right{ display:flex; align-items:center; gap:16px; }
.ss-topbar__left{ justify-content:flex-start; } .ss-topbar__right{ justify-content:flex-end; }
.ss-topbar__logo img{ height:100px; width:auto; display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,.15)); }

.tb-link{ display:inline-flex; align-items:center; gap:8px; color:var(--on-dark-80); transition:color .2s ease; white-space:nowrap; }
.tb-link:hover{ color:var(--accent); }
.tb-ico{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; color:var(--accent); flex:0 0 auto; }
.tb-ico .lucide{ width:100%; height:100%; }

.tb-social{
  display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.06); color:var(--on-dark); border:1px solid var(--on-dark-20);
  transition:background .2s ease,color .2s ease,border-color .2s ease, transform .12s ease;
}
.tb-social:hover{ background:var(--accent); color:#fff; border-color:var(--accent); transform:translateY(-1px); }
.tb-social .lucide{ width:16px; height:16px; }

@media (max-width:992px){ .ss-topbar{ display:none; } }

/* ================== RAIL + WAYFINDER NAV ================== */
.ss-header{
  position:sticky; top:0; z-index:999; background:var(--nav-bg-900,#1e2a36);
  border-bottom:1px solid var(--on-dark-20,rgba(232,237,242,.2));
}
.ss-nav{ height:70px; display:flex; align-items:stretch; justify-content:center; padding-inline:clamp(16px,3vw,32px); }

.rail-nav{
  --wf-x:0px; --wf-w:0px; --rail-h:3px; --wf-h:6px; --gap:32px;
  list-style:none; margin:0; padding:0; display:flex; align-items:center; justify-content:center;
  gap:var(--gap); position:relative; height:100%;
}
.rail-nav::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:var(--rail-h);
  background:color-mix(in srgb, var(--accent,#ce8956) 60%, transparent); opacity:.55; pointer-events:none; z-index:0;
}
.rail-nav .wayfinder{
  position:absolute; left:0; bottom:0; height:var(--wf-h); width:var(--wf-w); transform:translateX(var(--wf-x));
  background:var(--accent,#ce8956); border-radius:3px;
  transition:transform .32s cubic-bezier(.22,.61,.36,1), width .24s cubic-bezier(.22,.61,.36,1); pointer-events:none; will-change:transform,width; z-index:1;
}

.rail-nav>li{ display:flex; align-items:stretch; }
.rail-nav>li>a{
  position:relative; display:inline-flex; align-items:center; height:100%; line-height:1;
  padding:0 18px; font-weight:700; letter-spacing:.2px; text-transform:uppercase;
  color:var(--on-dark-80,rgba(232,237,242,.8)); transition:color .15s ease; white-space:nowrap;
}
.rail-nav>li>a:hover,.rail-nav>li>a:focus{ color:var(--accent); }
.rail-nav>li>a.is-active,.rail-nav>li>a[aria-current="page"]{ color:var(--accent); }

@media (max-width:768px){
  .ss-nav{ height:64px; }
  .rail-nav{ gap:18px; }
  .rail-nav>li>a{ padding:0 14px; }
}
@media (prefers-reduced-motion:reduce){ .rail-nav .wayfinder{ transition:none; } .rail-nav>li>a{ transition:none; } }

/* ================== Desktop Services dropdown ================== */
.ss-header,.ss-nav{ overflow:visible; }
.rail-nav>li.has-sub{ position:relative; }
.rail-nav>li.has-sub::after{ content:""; position:absolute; left:0; right:0; bottom:-10px; height:10px; }
.rail-nav>li.has-sub>a{ display:inline-flex; align-items:center; gap:8px; line-height:1; }
.rail-nav>li.has-sub>a .caret{
  width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid var(--on-dark-80);
  transition:transform .18s ease, border-top-color .18s ease;
}
.rail-nav>li.has-sub:hover>a .caret,.rail-nav>li.has-sub:focus-within>a .caret{ transform:rotate(180deg); border-top-color:var(--accent); }

.rail-nav>li.has-sub .sub{
  position:absolute; left:50%; transform:translateX(-50%); top:100%; margin:0; background:var(--dark-950);
  border:1px solid var(--on-dark-20); border-radius:12px; min-width:220px; padding:8px; box-shadow:0 18px 36px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; translate:0 -6px; transition:opacity .16s ease, translate .16s ease; z-index:1000;
}
.rail-nav>li.has-sub:hover .sub,.rail-nav>li.has-sub:focus-within .sub{ opacity:1; pointer-events:auto; translate:0 0; }
.rail-nav>li.has-sub .sub>li>a{
  display:flex; align-items:center; justify-content:space-between; padding:10px 10px; border-radius:8px; color:var(--on-dark-80); white-space:nowrap;
}
.rail-nav>li.has-sub .sub>li>a:hover,.rail-nav>li.has-sub .sub>li>a:focus{ background:rgba(255,255,255,.06); color:#fff; }
.rail-nav>li.has-sub:hover>a,.rail-nav>li.has-sub:focus-within>a{ color:#fff; }
@supports(selector(:has(*))){ .rail-nav>li.has-sub:has(.sub:hover) .sub{ opacity:1; pointer-events:auto; translate:0 0; } }
.rail-nav>li.has-sub .sub,.rail-nav>li.has-sub .sub>li{ list-style:none; margin:0; padding:8px; }

/* ================== MOBILE NAV ================== */
.ss-mobile-bar{ display:none; width:100%; height:64px; align-items:center; justify-content:space-between; padding-inline:16px; }
.ss-mobile-logo img{ height:65px; width:auto; }
.ss-burger{ display:none; }

@media (max-width:992px){
  .ss-mobile-bar{ display:flex; }
  .rail-nav{ display:none; }
  .ss-burger{ display:inline-flex; }
}

.ss-burger{
  align-self:center; width:34px; height:26px; border:0; background:transparent; cursor:pointer;
  flex-direction:column; justify-content:space-between; padding:0; margin-left:12px;
}
.ss-burger span{ display:block; height:2px; width:100%; background:var(--on-dark-80); border-radius:2px; transition:transform .2s ease, opacity .2s ease, background .2s ease; }
.ss-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(12px) rotate(45deg); }
.ss-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.ss-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-12px) rotate(-45deg); }

.ss-burger--close{
  width:28px; height:28px; position:relative; border:0; background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; padding:0;
}
.ss-burger--close span{ position:absolute; top:50%; left:4px; right:4px; height:2px; background:var(--on-dark-80); border-radius:2px; }
.ss-burger--close span:nth-child(1){ transform:translateY(-50%) rotate(45deg); }
.ss-burger--close span:nth-child(2){ transform:translateY(-50%) rotate(-45deg); }

.ss-mobile{ position:fixed; inset:0; pointer-events:none; z-index:1000; }
.ss-mobile.is-open{ pointer-events:auto; }
.ss-mobile__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.42); opacity:0; transition:opacity .22s ease; }
.ss-mobile.is-open .ss-mobile__backdrop{ opacity:1; }

.ss-mobile__panel{
  position:absolute; top:0; right:0; bottom:0; width:min(86vw,420px); background:var(--dark-900);
  border-left:1px solid var(--on-dark-20); transform:translateX(100%); transition:transform .28s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column;
}
.ss-mobile.is-open .ss-mobile__panel{ transform:translateX(0); }

.ss-mobile__head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--on-dark-15); }
.ss-mobile__brand{ font-weight:800; color:var(--on-dark); letter-spacing:.3px; }

.ss-mobile__list{
  list-style:none; margin:6px 0 0; padding:8px 8px 18px; display:flex; flex-direction:column; gap:4px; overflow-y:auto;
}
.ss-mobile__list>li>a{
  position:relative; display:flex; align-items:center; padding:14px 14px 14px 18px; border-radius:10px;
  color:var(--on-dark-80); transition:background .15s ease, color .15s ease;
}
.ss-mobile__list>li>a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.ss-mobile__list>li>a::before{
  content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:2px; background:transparent; transition:background .15s ease, height .15s ease;
}
.ss-mobile__list>li>a.is-active,.ss-mobile__list>li>a[aria-current="page"]{ color:#fff; background:rgba(255,255,255,.06); }
.ss-mobile__list>li>a.is-active::before,.ss-mobile__list>li>a[aria-current="page"]::before{ background:var(--accent); }

.ss-mobile__list .m-has-sub{ display:block; }
.m-sub-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between; padding:14px 14px 14px 18px;
  border-radius:10px; color:var(--on-dark-80); background:transparent; border:0; font:inherit; cursor:pointer;
}
.m-sub-toggle:hover{ background:rgba(255,255,255,.06); color:#fff; }
.m-sub-toggle[aria-expanded="true"] i{ transform:rotate(180deg); }
.m-sub{ list-style:none; margin:4px 0 10px 0; padding-left:10px; border-left:2px solid rgba(255,255,255,.08); }
.m-sub a{ display:block; padding:10px 10px 10px 18px; border-radius:8px; color:var(--on-dark-80); }
.m-sub a:hover{ background:rgba(255,255,255,.06); color:#fff; }

body.nav-open{ overflow:hidden; }

/* ================== HERO (Gradient Glow) ================== */
.hero{ position:relative; background:linear-gradient(180deg, var(--dark-900) 0%, var(--dark-950) 100%); color:var(--on-dark); overflow:clip; }

/* Exact viewport height minus masthead and admin bar (CSS-only, no JS) */
.hero--glow{
  height: calc(100svh - var(--masthead-h) - var(--adminbar-h, 0px)); /* exact fit */
  display: grid;
  place-items: center;
  padding: 0;            /* spacing lives on .hero__inner */
  overflow: clip;
}
.hero__inner{
  width:100%;
  max-width:1200px;
  padding-inline: clamp(16px,3vw,32px);
  padding-block: clamp(40px, 6vh, 72px);
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:clamp(24px,4vw,64px);
}
@media (max-width:960px){ .hero__inner{ grid-template-columns:1fr; gap:28px; } }
.hero__content{ position:relative; z-index:1; }
.hero__title{
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(28px,5vw,52px);
  line-height:1.08; margin:0 0 14px; letter-spacing:.2px; color:#fff;
}
.hero__title::after{
  content:""; position:absolute; left:-10%; top:-18%; width:60%; aspect-ratio:1/1;
  background:radial-gradient(closest-side, rgba(206,137,86,0.35), transparent 60%); filter:blur(18px); z-index:-1; pointer-events:none;
}
.hero__subtitle{ color:var(--on-dark-80); font-size:clamp(16px,2.1vw,18px); max-width:58ch; margin:0 0 22px; }
.hero__ctas{ display:flex; gap:12px; flex-wrap:wrap; margin:0 0 18px; }
.hero__ctas .btn{ height:46px; padding-inline:18px; }
.hero__ctas .btn--ghost{ border:1px solid var(--on-dark-20); color:var(--on-dark); }
.hero__ctas .btn--ghost:hover{ background:rgba(255,255,255,.06); color:#fff; }

.hero__trust{
  list-style:none; display:grid; grid-template-columns:repeat(4,auto); gap:10px 18px;
  padding:0; margin:10px 0 0; color:var(--on-dark-60); font-weight:600; font-size:14px;
}
.hero__trust li{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; padding-left:12px; position:relative; }
.hero__trust li::before{
  content:""; position:absolute; left:0; top:50%; width:6px; height:6px; border-radius:50%; background:var(--accent); transform:translateY(-50%);
}
@media (max-width:960px){ .hero__trust{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.hero__visual{
  position:relative; min-height:clamp(260px,40vh,460px); border-radius:18px; isolation:isolate;
  background:
    radial-gradient(40% 40% at 65% 40%, rgba(206,137,86,0.35), transparent 60%),
    radial-gradient(30% 30% at 35% 60%, rgba(206,137,86,0.22), transparent 70%),
    radial-gradient(90% 90% at 50% 50%, rgba(255,255,255,0.02), transparent 70%);
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:0 0 0 1px rgba(255,255,255,0.03) inset, 0 10px 40px rgba(0,0,0,0.35);
  overflow:hidden;
}
.hero__visual::after{
  content:""; position:absolute; inset:-20%;
  background:radial-gradient(closest-side, rgba(206,137,86,0.18), transparent 70%); filter:blur(30px);
  animation:heroPulse 6s ease-in-out infinite; opacity:.8; pointer-events:none;
}
@keyframes heroPulse{ 0%,100%{ transform:scale(1); opacity:.8; } 50%{ transform:scale(1.06); opacity:1; } }

/* scroll pill kept tight so it never forces extra height */
.hero__scroll{ bottom: 14px; }

.hero__scroll{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  width:28px; height:42px; border-radius:999px; border:2px solid rgba(255,255,255,.25);
  display:inline-flex; align-items:flex-start; justify-content:center; transition:border-color .2s ease, transform .2s ease;
}
.hero__scroll:hover{ border-color:rgba(255,255,255,.45); transform:translateX(-50%) translateY(1px); }
.hero__scroll span{ display:block; width:2px; height:8px; border-radius:2px; background:rgba(255,255,255,.65); margin-top:6px; animation:scrollDot 1.5s ease-in-out infinite; }
@keyframes scrollDot{ 0%{ opacity:0; transform:translateY(0); } 30%{ opacity:1; } 100%{ opacity:0; transform:translateY(14px); } }

/* ================== BRANDS ================== */
.brands{ background:var(--bg-0); padding:clamp(24px,5vw,44px) 0; }
.brands__title{
  text-align:center; font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(18px,3.2vw,22px);
  margin:0 0 14px; color:var(--ink); letter-spacing:.2px;
}
.brands__rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:max-content; gap:clamp(20px,4vw,40px);
  align-items:center; justify-content:center; overflow-x:auto; padding:10px 4px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.brands__rail::-webkit-scrollbar{ height:6px; }
.brands__rail::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.08); border-radius:4px; }
.brand{
  display:inline-flex; align-items:center; justify-content:center; height:60px; width:140px; border-radius:10px;
  scroll-snap-align:center; opacity:.9; transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease; will-change:transform, box-shadow;
}
.brand:hover{ opacity:1; transform:translateY(-1px); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent), 0 10px 26px rgba(206,137,86,.25); }
.brand img{
  max-height:80%; max-width:80%; height:auto; width:auto; object-fit:contain;
  filter:grayscale(100%) contrast(1) opacity(.75); transition:filter .18s ease, opacity .18s ease, transform .18s ease;
}
.brand:hover img,.brand:focus img{ filter:grayscale(0%) contrast(1) opacity(1); }
.brand:focus-visible{ outline:2px solid color-mix(in srgb, var(--accent) 65%, transparent); outline-offset:3px; border-radius:10px; }
@media (max-width:560px){ .brand{ height:50px; width:110px; } }

/* ================== WHY SAFESYNC ================== */
.why{ background:var(--bg-0); padding:clamp(60px,8vw,100px) 0; }
.why__head{ text-align:center; max-width:720px; margin:0 auto 48px; }
.why__title{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(24px,3vw,34px); margin:0 0 16px; color:var(--ink); }
.why__tagline{ font-size:17px; color:var(--ink-muted); margin:0; }
.why__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
@media (max-width:1100px){ .why__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .why__grid{ grid-template-columns:1fr; } }

.why__card{
  background:var(--bg-1); border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:28px 24px; text-align:left;
  transition:transform .25s ease, box-shadow .25s ease;
}
.why__card:hover{ transform:translateY(-4px); box-shadow:0 12px 24px rgba(0,0,0,.08); }
.why__icon{ width:44px; height:44px; border-radius:10px; background:rgba(206,137,86,.1); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.why__icon svg{ width:24px; height:24px; stroke:var(--accent); }
.why__card-title{ font-size:18px; font-weight:700; margin:0 0 10px; color:var(--ink); }
.why__card-text{ font-size:15px; color:var(--ink-muted); margin:0; }

/* ================== ABOUT ================== */
.about{ padding:clamp(60px,8vw,100px) 0; }
.about__grid{ display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(24px,4vw,48px); align-items:start; }
@media (max-width:980px){ .about__grid{ grid-template-columns:1fr; } }
.about__head{ margin-bottom:16px; }
.about__title{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(24px,3.2vw,34px); margin:0 0 10px; color:var(--ink); }
.about__tagline{ margin:0; color:var(--ink-muted); font-size:17px; }
.about__body p{ color:var(--ink-muted); } .about__body p + p{ margin-top:10px; }
.about__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.about__figure{ margin:0 0 14px; border-radius:12px; overflow:hidden; box-shadow:0 10px 28px rgba(0,0,0,.06); }
.about__image{ width:100%; height:auto; display:block; object-fit:cover; }
.about__reasons{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.about__reasons li{ display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:600; }
.about__tick{ display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:rgba(206,137,86,.12); color:var(--accent); flex:0 0 auto; line-height:1; }
.about__tick i{ font-size:14px; line-height:1; }

/* ================== TRUSTED BY ================== */
.trusted{ --trusted-speed:40s; background:#fff; padding:clamp(28px,5vw,56px); }
.trusted__title{ text-align:center; font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(18px,3.2vw,22px); margin:0 0 18px; color:var(--ink); }
.trusted__rail{ position:relative; overflow:hidden; min-height:60px; padding:10px 4px; }
.trusted__rail[data-speed]+.trusted__track{ animation-duration:attr(data-speed); }
.trusted__rail[data-speed] .trusted__track{ animation-duration:var(--trusted-speed); }
.trusted__rail[data-speed]{ --trusted-speed:attr(data-speed); }
.trusted__track{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:clamp(20px,4vw,40px);
  width:max-content; animation:trusted-marquee var(--trusted-speed) linear infinite; will-change:transform;
}
.trusted:hover .trusted__track{ animation-play-state:paused; }
.trusted__rail::before,.trusted__rail::after{
  content:""; position:absolute; top:0; bottom:0; width:24px; pointer-events:none; z-index:0;
}
.trusted__rail::before{ left:0; background:linear-gradient(to right, var(--bg-0), transparent); }
.trusted__rail::after{ right:0; background:linear-gradient(to left, var(--bg-0), transparent); }
@keyframes trusted-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.trusted__row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:clamp(14px,3vw,26px); align-items:center; }
.client{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:140px; height:60px; border-radius:10px;
  opacity:.9; transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease; will-change:transform, box-shadow;
}
.client:hover{ opacity:1; transform:translateY(-1px); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent), 0 10px 26px rgba(206,137,86,.25); }
.client img{
  display:block; max-height:80%; max-width:80%; height:auto; width:auto; object-fit:contain;
  filter:grayscale(100%) contrast(1) opacity(.75); transition:filter .18s ease, opacity .18s ease;
}
.client:is(:hover,:focus-visible) img{ filter:grayscale(0%) contrast(1) opacity(1); }
@media (max-width:560px){ .trusted__rail{ min-height:50px; } .client{ width:110px; height:50px; } }

/* ================== CORE SERVICES ================== */
.services{ background:var(--bg-0); padding:clamp(56px,7vw,96px) 0; border-top:1px solid rgba(0,0,0,.04); }
.services__head{ text-align:center; max-width:760px; margin:0 auto clamp(28px,4.5vw,40px); }
.services__title{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(24px,3.2vw,34px); margin:0 0 8px; color:var(--ink); }
.services__tagline{ margin:0; color:var(--ink-muted); font-size:16px; }
.services__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2vw,26px); }
@media (max-width:1100px){ .services__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .services__grid{ grid-template-columns:1fr; } }

.service-card{
  background:var(--bg-1); border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:22px 20px;
  display:flex; flex-direction:column; gap:10px; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.service-card:hover{ transform:translateY(-4px); box-shadow:0 16px 28px rgba(0,0,0,.08); border-color:color-mix(in srgb, var(--accent) 25%, transparent); }
.service-card__icon{ width:46px; height:46px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background:rgba(206,137,86,.12); color:var(--accent); margin-bottom:6px; }
.service-card__icon i{ font-size:20px; line-height:1; }
.service-card__title{ font-size:18px; font-weight:800; margin:0; color:var(--ink); }
.service-card__text{ color:var(--ink-muted); margin:0 0 6px; font-size:15px; }
.service-card__link{ margin-top:auto; font-weight:700; color:var(--accent); display:inline-flex; align-items:center; gap:8px; }
.service-card__link::after{ content:"→"; transition:transform .18s ease; }
.service-card__link:hover::after{ transform:translateX(2px); }

/* ================== CASE STUDIES ================== */
.cases{ background:var(--bg-1); padding:clamp(56px,7vw,96px) 0; border-top:1px solid rgba(0,0,0,.04); border-bottom:1px solid rgba(0,0,0,.04); }
.cases__head{ text-align:center; max-width:760px; margin:0 auto clamp(24px,4.5vw,40px); }
.cases__title{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(24px,3.2vw,34px); margin:0 0 8px; color:var(--ink); }
.cases__tagline{ margin:0; color:var(--ink-muted); font-size:16px; }
.cases__empty{ text-align:center; color:var(--ink-muted); }
.cases__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,26px); }
@media (max-width:1024px){ .cases__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .cases__grid{ grid-template-columns:1fr; } }
.case-card{
  background:var(--bg-1); border:1px solid rgba(0,0,0,.06); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.case-card:hover{ transform:translateY(-4px); box-shadow:0 16px 28px rgba(0,0,0,.08); border-color:color-mix(in srgb, var(--accent) 25%, transparent); }
.case-card__media{ display:block; aspect-ratio:16/9; background:#f0f2f5; }
.case-card__img{ width:100%; height:100%; object-fit:cover; display:block; }
.case-card__placeholder{ width:100%; height:100%; background:linear-gradient(135deg,#eceff3,#f7f9fb); }
.case-card__body{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:8px; }
.case-card__title{ margin:0; font-size:18px; font-weight:800; }
.case-card__title a{ color:var(--ink); }
.case-card__title a:hover{ color:var(--accent); }
.case-card__excerpt{ margin:0; color:var(--ink-muted); font-size:15px; }
.case-card__link{ margin-top:auto; font-weight:700; color:var(--accent); display:inline-flex; align-items:center; gap:8px; }
.case-card__link::after{ content:"→"; transition:transform .18s ease; }
.case-card__link:hover::after{ transform:translateX(2px); }
.cases__cta{ text-align:center; margin-top:clamp(20px,3vw,28px); }

/* ================== CTA BANNERS ================== */
.cta{
  position:relative; isolation:isolate; padding:clamp(28px,5vw,48px) clamp(16px,4vw,24px);
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, #fff) 0%, color-mix(in srgb, var(--accent) 10%, #fff) 60%, #fff 100%);
  border-top:1px solid rgba(0,0,0,.04); border-bottom:1px solid rgba(0,0,0,.04);
}
.cta::before{
  content:""; position:absolute; inset:8px; border-radius:16px; pointer-events:none;
  background:radial-gradient(1200px 300px at 12% 0%, rgba(206,137,86,.18), transparent 50%),
             radial-gradient(1200px 300px at 88% 100%, rgba(206,137,86,.12), transparent 52%); z-index:-1;
}
.cta__inner{
  max-width:1100px; margin:0 auto; background:var(--bg-1); border:1px solid rgba(0,0,0,.06); border-radius:16px;
  padding:clamp(18px,3.6vw,28px); display:grid; grid-template-columns:1.2fr auto; align-items:center;
  gap:clamp(12px,2.5vw,24px); box-shadow:0 16px 28px rgba(0,0,0,.05);
}
@media (max-width:760px){ .cta__inner{ grid-template-columns:1fr; text-align:center; } }
.cta__title{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(22px,3vw,30px); margin:0 0 6px; color:var(--ink); }
.cta__text{ margin:0; color:var(--ink-muted); }
.cta__actions{ display:flex; align-items:center; justify-content:flex-end; gap:clamp(10px,2vw,14px); }
@media (max-width:760px){ .cta__actions{ justify-content:center; flex-wrap:wrap; } }
.cta__btn{ min-width:220px; height:46px; border-radius:10px; font-weight:800; }
.cta__phone{ display:inline-flex; align-items:center; gap:8px; font-weight:800; color:var(--accent); padding:8px 10px; border-radius:10px; transition:background .18s ease, color .18s ease; }
.cta__phone:hover{ background:rgba(206,137,86,.10); color:#111; }
.cta__phone-ico{ line-height:1; }

/* Dark CTA */
.cta--dark{
  background:var(--dark-900); position:relative; isolation:isolate;
  padding:clamp(32px,6vw,56px) clamp(16px,4vw,24px); color:var(--on-dark);
}
.cta--dark::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(1200px 400px at 20% 0%, rgba(206,137,86,.18), transparent 60%),
             radial-gradient(1200px 400px at 80% 100%, rgba(206,137,86,.12), transparent 62%);
  pointer-events:none; z-index:0;
}
.cta--dark .cta__inner{
  background:var(--dark-950); border:1px solid var(--on-dark-20); border-radius:16px;
  padding:clamp(20px,3.6vw,32px); display:grid; grid-template-columns:1.2fr auto; align-items:center;
  gap:clamp(12px,2.5vw,24px); box-shadow:0 18px 32px rgba(0,0,0,.4); position:relative; z-index:1;
}
@media (max-width:760px){ .cta--dark .cta__inner{ grid-template-columns:1fr; text-align:center; } .cta--dark .cta__actions{ justify-content:center; flex-wrap:wrap; } }
.cta--dark .cta__title{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(22px,3vw,32px); margin:0 0 8px; color:var(--on-dark); }
.cta--dark .cta__text{ margin:0; color:var(--on-dark-80); }
.cta--dark .cta__actions{ display:flex; align-items:center; justify-content:flex-end; gap:clamp(10px,2vw,16px); }
.cta--dark .cta__btn{ min-width:220px; height:46px; border-radius:10px; font-weight:800; }
.cta--dark .cta__phone{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--accent); padding:8px 12px; border-radius:8px; transition:background .18s ease, color .18s ease; }
.cta--dark .cta__phone:hover{ background:rgba(206,137,86,.15); color:#fff; }

/* ================== TESTIMONIALS ================== */
.testimonials{ background:var(--bg-0); padding:clamp(60px,8vw,100px) 0; text-align:center; }
.testimonials .section-title{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(22px,3vw,32px); margin-bottom:12px; color:var(--ink); }
.testimonials .section-intro{ max-width:680px; margin:0 auto 40px; color:var(--ink-muted); font-size:16px; }
.reviews-widget{ max-width:1000px; margin:0 auto; }

/* ================== AREAS WE COVER ================== */
.areas{ background:linear-gradient(180deg, var(--bg-0), #fff); padding:clamp(48px,7vw,88px) 0; }
.areas__head{ text-align:center; max-width:820px; margin:0 auto clamp(22px,4.5vw,38px); }
.areas__title{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(24px,3vw,32px); margin:0 0 8px; color:var(--ink); }
.areas__tagline{ margin:0; color:var(--ink-muted); }
.areas__layout{ display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(18px,3.5vw,32px); align-items:start; }
@media (max-width:980px){ .areas__layout{ grid-template-columns:1fr; } }
.areas__map-wrap{
  border-radius:16px; overflow:hidden; border:1px solid rgba(0,0,0,.06); box-shadow:0 8px 24px rgba(0,0,0,.06); background:#0c141c;
}
.areas__map{ width:100%; height:clamp(320px,42vw,480px); }
.areas__list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.areas__item{ margin:0; }
.areas__link{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; background:#fff;
  border:1px solid rgba(0,0,0,.06); border-radius:12px; color:var(--ink); font-weight:600;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease; position:relative;
}
.areas__link:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--accent) 22%, transparent); box-shadow:0 14px 24px rgba(0,0,0,.08); }
.areas__name{ font-size:15px; }
.areas__link.is-active{ background:rgba(255,255,255,.06); border-color:color-mix(in srgb, var(--accent) 22%, transparent); box-shadow:0 10px 22px rgba(0,0,0,.08); }
.areas__link.is-active::before{ content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:2px; background:var(--accent); }

/* ================== FAQ (+ built-in CTA) ================== */
.faq{ padding:clamp(40px,7vw,96px) 0; background:#fff; }
.faq__head{ text-align:center; max-width:800px; margin:0 auto clamp(22px,4vw,36px); }
.faq__title{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(22px,3vw,32px); margin:0 0 8px; color:var(--ink); }
.faq__tagline{ color:var(--ink-muted); margin:0; }
.faq__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,2vw,16px); max-width:1000px; margin:0 auto clamp(28px,5vw,44px); }
@media (max-width:860px){ .faq__grid{ grid-template-columns:1fr; } }
.faq__item{ background:var(--bg-1); border:1px solid rgba(0,0,0,.06); border-radius:12px; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,.05); }
.faq__q{
  width:100%; text-align:left; padding:16px 18px; font-weight:700; color:var(--ink); background:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
}
.faq__icon{ font-weight:800; transition:transform .2s ease, opacity .2s ease; opacity:.7; }
.faq__q[aria-expanded="true"] .faq__icon{ transform:rotate(45deg); opacity:1; }
.faq__a{
  max-height:0; overflow:hidden; padding:0 18px; color:var(--ink-muted); line-height:1.6;
  transition:max-height .24s ease, padding .24s ease, opacity .24s ease; opacity:0;
}
.faq__a.is-open,.faq__q[aria-expanded="true"] + .faq__a{ max-height:240px; padding:10px 18px 16px; opacity:1; }

.faq__cta{
  background:radial-gradient(1200px 600px at 10% 0%, rgba(206,137,86,.18), transparent 60%),
             linear-gradient(180deg, var(--dark-900), var(--dark-950));
  border:1px solid var(--on-dark-20); border-radius:16px; padding:clamp(20px,4vw,32px); color:var(--on-dark);
  box-shadow:0 24px 60px rgba(0,0,0,.25);
}
.faq__cta-inner{ display:grid; gap:10px; align-items:center; text-align:center; }
.faq__cta-title{ margin:0; font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(20px,2.4vw,26px); color:var(--accent); }
.faq__cta-text{ margin:0 0 8px; color:var(--on-dark-80); }
.faq__cta-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.faq__cta .btn--primary{ background:var(--accent); color:#111; }
.faq__cta .btn--ghost{ border:1px solid var(--on-dark-20); color:var(--on-dark); }
.faq__cta .btn--ghost:hover{ background:rgba(255,255,255,.06); }

/* ================== CONTACT ================== */
.contact-hero{
  background:radial-gradient(60% 120% at 100% -20%, rgba(206,137,86,.18), transparent), linear-gradient(180deg, #111a22, #1b2a36);
  color:var(--on-dark); padding:clamp(36px,6vw,72px) 0; border-bottom:1px solid rgba(255,255,255,.06);
}
.contact-hero__inner{ max-width:1100px; margin:0 auto; padding:0 20px; }
.contact-hero__title{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(26px,4vw,40px); margin:0 0 8px; color:var(--accent); }
.contact-hero__sub{ color:var(--on-dark-80); margin:0 0 16px; }
.contact-hero__quick{ display:flex; gap:10px; flex-wrap:wrap; margin:16px 0; }
.contact-chip{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:var(--on-dark); }
.contact-chip i{ width:16px; text-align:center; }
.contact-chip:hover{ background:var(--accent); color:#111; border-color:var(--accent); }
.contact-hero__alert{ display:flex; gap:12px; align-items:flex-start; background:rgba(182,74,90,.10); border:1px solid rgba(182,74,90,.20); border-radius:12px; padding:12px 14px; margin-top:12px; }
.contact-hero__alert i{ color:#b64a5a; margin-top:2px; }

.contact-body{ background:var(--bg-0); padding:clamp(32px,6vw,72px) 0; }
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(18px,3vw,32px); }
@media (max-width:960px){ .contact-grid{ grid-template-columns:1fr; } }

.contact-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:clamp(16px,3vw,22px);
  box-shadow:0 12px 26px rgba(0,0,0,.06);
}
.form-errors{
  background:#fff4f4; border-left:4px solid #e55757; padding:12px 14px; border-radius:8px; margin-bottom:10px; color:#7a2b2b;
}
.form-success{
  background:#ecfff1; border-left:4px solid #2ecc71; padding:14px 16px; border-radius:8px; margin-bottom:10px; color:#185c34;
}
.contact-form .form-row{ margin-bottom:12px; }
.contact-form .form-row.two{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:640px){ .contact-form .form-row.two{ grid-template-columns:1fr; } }
.contact-form label{ display:block; font-weight:600; margin:0 0 6px; }
.contact-form textarea{ resize:vertical; }
.form-row.checkbox .check{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; cursor:pointer; user-select:none;
}
.form-row.checkbox input[type="checkbox"]{ margin:0; width:auto; height:auto; accent-color:var(--accent); transform:translateY(0); }
.form-row.checkbox .check:focus-within{ outline:2px solid var(--accent-25a); outline-offset:3px; border-radius:6px; padding:2px 4px; }

.contact-side{ display:grid; gap:14px; align-content:start; }
.map-card{ background:#0c141c; border:1px solid rgba(0,0,0,.06); border-radius:14px; overflow:hidden; box-shadow:0 12px 26px rgba(0,0,0,.06); }
.map-embed{ width:100%; height:320px; border:0; display:block; }
.contact-facts{ list-style:none; margin:0; padding:0; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px; box-shadow:0 12px 26px rgba(0,0,0,.06); }
.contact-facts li{ display:flex; gap:10px; align-items:center; padding:12px 14px; border-top:1px solid #f1f1f1; }
.contact-facts li:first-child{ border-top:0; }
.contact-facts i{ width:18px; text-align:center; color:var(--accent); }

/* ----------------------------------------------------------
   FOOTER
---------------------------------------------------------- */
.site-footer{
  --primary:#ce8946; --footer-bg:#1e2a36; --footer-bottom:#19242f; --on-dark:#e8edf2;
  --on-dark-80:rgba(232,237,242,.8); --on-dark-60:rgba(232,237,242,.6); --on-dark-20:rgba(232,237,242,.2); --social-bg:rgba(232,237,242,.1);
  background:var(--footer-bg); color:var(--on-dark); font-size:15px; line-height:1.65;
}
.site-footer__top{ width:100%; padding:64px 0 32px; }
.site-footer__bottom{ background:var(--footer-bottom); padding:20px 0; width:100%; }
.site-footer__grid{ display:grid; grid-template-columns:1.1fr 1fr 1fr 1fr; gap:56px; padding-inline:clamp(16px,3vw,32px); }
@media (max-width:1100px){ .site-footer__grid{ grid-template-columns:1fr 1fr; gap:36px; } }
@media (max-width:640px){ .site-footer__grid{ grid-template-columns:1fr; gap:28px; } }
.brandline{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.brandname{ font-weight:800; font-size:20px; margin:0; }
.tagline{ color:var(--on-dark-80); margin:0 0 18px; }
.brand-logo{ height:100px; width:auto; }
.section-title{ font-weight:800; font-size:20px; margin:0 0 16px; color:var(--accent); }
.list{ list-style:none; margin:0; padding:0; }
.list li{ margin:10px 0; }
.link{ color:var(--on-dark); text-decoration:none; opacity:.95; }
.link:hover{ color:var(--primary); }
.emergency{
  background:rgba(182,74,90,0.1); border:1px solid rgba(182,74,90,0.2); border-radius:10px; padding:14px 16px; margin:0 0 14px;
}
.emergency .title{ display:flex; align-items:center; gap:8px; font-weight:700; color:#b64a5a; margin:0 0 6px; }
.emergency .title svg{ width:16px; height:16px; color:#b64a5a; }
.emergency .desc{ font-size:13px; color:var(--on-dark-80); margin:0; }
.contact{ list-style:none; margin:0; padding:0; }
.contact .row{ display:flex; align-items:center; gap:10px; margin:10px 0; }
.contact svg{ width:16px; height:16px; color:var(--primary); }
.social{ display:flex; align-items:center; gap:12px; margin-top:10px; }
.social a{
  width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--social-bg); border:1px solid var(--on-dark-20); color:var(--on-dark); transition:all .2s ease;
}
.social a svg{ width:16px; height:16px; }
.social a:hover{ background:var(--primary); color:#fff; border-color:var(--primary); }
.bottombar{ display:flex; justify-content:center; padding-inline:clamp(16px,3vw,32px); }
.bottombar p{ margin:0; font-size:14px; color:var(--on-dark-60); text-align:center; width:100%; }
.bottombar .link{ color:var(--on-dark-60); }
.bottombar .link:hover{ color:var(--primary); }

/* ================== How We Work – responsive stack ================== */
.process__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.process__step{ background:var(--bg-1); border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:18px; }
.process__step + .process__step{ margin-top:0; }
.process__title{ margin:0 0 6px; }
.process__kicker,.process__meta{ margin:0 0 8px; color:var(--ink-muted); }
@media (max-width:820px){ .process__grid{ grid-template-columns:1fr; gap:14px; } .process__step{ padding:16px; } }

/* ================== Blog index (listing) – mobile optimised ================== */
.blog-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2.5vw,22px); }
@media (max-width:980px){ .blog-list{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .blog-list{ grid-template-columns:1fr; } }

.blog-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px; overflow:hidden;
  display:flex; gap:14px; padding:12px;
}
.blog-card__media{ flex:0 0 180px; aspect-ratio:16/10; background:#f3f5f7; border-radius:10px; overflow:hidden; }
.blog-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-card__body{ display:grid; gap:8px; }
@media (max-width:640px){
  .blog-card{ flex-direction:column; padding:12px; }
  .blog-card__media{ flex:none; width:100%; }
}

/* ================== Single post ================== */
.post-hero{
  padding:clamp(28px,6vw,54px) 0; background:linear-gradient(180deg, var(--dark-900), var(--dark-950));
  color:var(--on-dark); border-bottom:1px solid rgba(255,255,255,.08);
}
.post-hero__inner{ max-width:1100px; margin:0 auto; padding:0 20px; }
.post-hero__title{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(24px,4vw,38px); margin:0; color:var(--accent); }

.post-body{ background:var(--bg-0); padding:clamp(24px,6vw,48px) 0; }
.post-layout{ max-width:1100px; margin:0 auto; padding:0 20px; display:grid; grid-template-columns:2fr 1fr; gap:24px; }
@media (max-width:900px){ .post-layout{ grid-template-columns:1fr; } }
.post-content{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:clamp(14px,2.4vw,20px);
}
.post-content img{ height:auto; max-width:100%; }
.post-sidebar{ display:grid; gap:12px; }

/* ================== Minor duplicates cleanup ================== */
.areas__link.is-active{ background:rgba(255,255,255,.06); border-color:color-mix(in srgb, var(--accent) 22%, transparent); box-shadow:0 10px 22px rgba(0,0,0,.08); position:relative; }
.areas__link.is-active::before{ content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:2px; background:var(--accent); }

/* =========================================================
   BLOG ARCHIVE — eBay-style cards on desktop, tidy on mobile
   ========================================================= */

/* ----- Desktop (eBay-style) ----- */
.blog-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.5vw, 22px);
}
.blog-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  overflow: hidden;
}
.blog-card__media,
.blog-card .post-thumb,
.blog-card figure {
  flex: 0 0 220px;               /* wide thumb like listings */
  max-width: 220px;
  aspect-ratio: 16/10;
  border-radius: 10px;
  overflow: hidden;
  background: #f3f5f7;
}
.blog-card__media img,
.blog-card .post-thumb img,
.blog-card figure img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.blog-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 6px;
}
.blog-card__title { font-size: 20px; line-height: 1.25; margin: 0; }
.blog-card__meta  { font-size: 13px; color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: 8px 12px; }

/* Show visible excerpt with ellipsis (don’t cut it off entirely) */
.blog-card__excerpt,
.blog-card .entry-summary,
.blog-card .excerpt {
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;         /* desktop clamp */
  overflow: hidden;
  position: relative;
}
.blog-card__excerpt::after,
.blog-card .entry-summary::after,
.blog-card .excerpt::after {
  content: "…";
  position: absolute;
  right: 0; bottom: 0;
  padding-left: 6px;
  background: linear-gradient(90deg, transparent, #fff 40%);
}
.blog-card__actions,
.blog-card .card-actions { margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ----- Tablet (2 columns) ----- */
@media (max-width: 980px) {
  .blog-list { grid-template-columns: repeat(2, 1fr); }
  .blog-card__media,
  .blog-card .post-thumb,
  .blog-card figure { flex-basis: 200px; max-width: 200px; }
}

/* ----- Mobile (clean single column, image on top) ----- */
@media (max-width: 720px) {
  .blog-list { grid-template-columns: 1fr; gap: 12px; }

  .blog-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  .blog-card__media,
  .blog-card .post-thumb,
  .blog-card figure {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    aspect-ratio: 16/9;
    border-radius: 10px;
  }

  .blog-card__body { gap: 6px; }
  .blog-card__title { font-size: 18px; }
  .blog-card__excerpt,
  .blog-card .entry-summary,
  .blog-card .excerpt { -webkit-line-clamp: 4; } /* a bit more room on phones */
}

/* =========================================================
   SINGLE POST — keep sidebar tidy on mobile
   (matches your single-post.php structure)
   ========================================================= */

/* On narrow screens, stack article then sidebar (no markup change needed) */
@media (max-width: 900px) {
  /* The grid container is inline-styled in the template, so we make both
     children span the full width instead of trying to override the parent. */
  .post-article,
  .post-sidebar { grid-column: 1 / -1; }

  .post-article {
    padding: 16px;
    border-radius: 12px;
  }

  .post-sidebar { gap: 12px; }
}

/* Content safety on phones: images/tables don’t overflow */
@media (max-width: 900px) {
  .post-article img,
  .post-article video,
  .post-article iframe {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 10px;
    margin: 10px 0;
  }
  .post-article .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .post-article table { min-width: 560px; }
  .post-article pre { overflow: auto; border-radius: 10px; padding: 12px; }
}

/* In case your blog archive uses theme-native classes instead of .blog-list/.blog-card */
@media (min-width: 981px) {
  .archive .post, .blog .post { display: flex; gap: 14px; padding: 12px; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px; }
  .archive .post .post-thumbnail, .blog .post .post-thumbnail { flex:0 0 220px; max-width:220px; aspect-ratio:16/10; border-radius:10px; overflow:hidden; }
  .archive .post .post-thumbnail img, .blog .post .post-thumbnail img { width:100%; height:100%; object-fit:cover; }
  .archive .post .entry-summary, .blog .post .entry-summary {
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; position:relative; color:var(--ink-muted);
  }
  .archive .post .entry-summary::after, .blog .post .entry-summary::after { content:"…"; position:absolute; right:0; bottom:0; padding-left:6px; background:linear-gradient(90deg,transparent,#fff 40%); }
}

/* =========================================================
   BLOG ARCHIVE — eBay-style listing layout (Desktop View)
   ========================================================= */

@media (min-width: 981px) {

  /* Archive wrapper */
  .blog-list {
    display: grid;
    grid-template-columns: 1fr;        /* one card per row like listings */
    gap: 20px;
  }

  /* Each blog “card” */
  .blog-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 4px 14px rgba(0,0,0,.04);
    transition: transform .2s ease, box-shadow .2s ease;
  }

  .blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0,0,0,.08);
  }

  /* Thumbnail left */
  .blog-card__media {
    flex: 0 0 260px;
    max-width: 260px;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    overflow: hidden;
    background: #f3f5f7;
  }

  .blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
  }

  .blog-card:hover .blog-card__media img {
    transform: scale(1.05);
  }

  /* Content right */
  .blog-card__body {
    flex: 1 1 auto;
    display: grid;
    gap: 8px;
    min-width: 0;
  }

  .blog-card__title {
    margin: 0;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.3;
  }

  .blog-card__title a {
    color: var(--ink);
    text-decoration: none;
  }

  .blog-card__title a:hover {
    color: var(--accent);
  }

  .blog-card__meta {
    font-size: 14px;
    color: var(--ink-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
  }

  /* Excerpt */
  .blog-card__excerpt {
    margin: 4px 0 0;
    color: var(--ink-muted);
    font-size: 16px;
    line-height: 1.6;

    /* Clamp for tidy look */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    position: relative;
  }

  .blog-card__excerpt::after {
    content: "…";
    position: absolute;
    right: 0;
    bottom: 0;
    padding-left: 6px;
    background: linear-gradient(90deg, transparent, #fff 40%);
  }

  /* Read more / actions */
  .blog-card__actions {
    margin-top: 8px;
    display: flex;
    gap: 10px;
  }

  .blog-card__actions .btn {
    padding: 8px 14px;
    font-size: 15px;
  }
}

/* =========================================================
   BLOG CARDS — Fix long text overflow on mobile (clean ellipsis)
   ========================================================= */

@media (max-width: 720px) {
  .blog-card__excerpt,
  .blog-card .entry-summary,
  .blog-card .excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;   /* shows up to 4 lines */
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    color: var(--ink-muted);
    font-size: 15px;
    line-height: 1.6;
    word-break: break-word;
    white-space: normal;
    max-width: 100%;
  }

  /* tidy fade on end */
  .blog-card__excerpt::after,
  .blog-card .entry-summary::after,
  .blog-card .excerpt::after {
    content: "…";
    position: absolute;
    right: 0;
    bottom: 0;
    padding-left: 6px;
    background: linear-gradient(90deg, transparent, #fff 40%);
  }
}

/* =========================================================
   File: wp-content/themes/safesync/style.css  (append/update)
   Section: Services — Stacked (click only)
   ========================================================= */
.svc-stack{ display:grid; gap:clamp(10px,2vw,14px); }
.svc{
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  background:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.05);
  overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.svc:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow:0 14px 24px rgba(0,0,0,.08);
}

/* Header */
.svc__head{
  list-style:none;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  cursor:pointer;
}
.svc__head::-webkit-details-marker{ display:none; }
.svc__icon{
  width:38px; height:38px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(206,137,86,.12); color:var(--accent);
}
.svc__icon i{ font-size:18px; line-height:1; }
.svc__title{ font-weight:800; color:var(--ink); line-height:1.3; }
.svc__chev{
  width:22px; height:22px; position:relative; opacity:.75;
  transition:transform .2s ease, opacity .2s ease;
}
.svc__chev::before, .svc__chev::after{
  content:""; position:absolute; top:50%; left:50%;
  width:14px; height:2px; background:currentColor; border-radius:2px;
  transform:translate(-50%,-50%);
}
.svc__chev::after{ transform:translate(-50%,-50%) rotate(90deg); } /* + */

/* Panel */
.svc__panel{
  padding:0 18px 16px;
  border-top:1px solid #f1f1f1;
  background:linear-gradient(180deg,#fff,var(--bg-0));
}
.svc__blurb{ margin:12px 0 10px; color:var(--ink-muted); }
.svc__cta{ margin-top:6px; }

/* Open state */
.svc[open] .svc__chev{ opacity:1; transform:rotate(45deg); } /* + → × */

/* REMOVE any hover-peek: ensure no expand on hover */
.svc:hover:not([open]) .svc__panel{ padding-top:0; }

/* =========================================================
   BLOG (home.php) — clamp excerpt + mobile layout for .blog-item
   ========================================================= */
.blog-item .blog-excerpt{
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.6;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;       /* desktop clamp */
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;

  word-break: break-word;
  hyphens: auto;
}
.blog-item .blog-excerpt::after{
  content: "…";
  position: absolute;
  right: 0;
  bottom: 0;
  padding-left: 6px;
  background: linear-gradient(90deg, transparent, #fff 40%);
}
@media (max-width: 720px){
  .blog-item{
    grid-template-columns: 1fr !important;
  }
  .blog-thumb img{
    aspect-ratio: 16 / 9 !important;
  }
  .blog-item .blog-excerpt{
    -webkit-line-clamp: 4;
  }
}