/* ============================================================
   androsdoors.gr — HOMEPAGE ONLY stylesheet
   Brand direction: navy + yellow CTA + teal checkmarks + WhatsApp green.
   Token architecture: primitive → semantic → component.
   ============================================================ */

:root{
  /* ── Primitive: color ─────────────────────────────────────── */
  --navy:        #0F2846;
  --navy-2:      #14355C;
  --navy-3:      #1B4077;
  --yellow:      #E5A400;
  --yellow-dk:   #C98F00;
  --teal:        #2DBDB0;
  --teal-dk:     #239E93;
  --wa-green:    #25D366;
  --wa-green-dk: #1EB156;
  --ink:         #121826;
  --ink-soft:    #47536B;
  --ink-mute:    #8A93A4;
  --paper:       #FFFFFF;
  --snow:        #F6F8FB;
  --line:        #E3E9F0;
  --line-dk:     #CFD7E2;

  /* ── Primitive: motion ────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    180ms;
  --dur-base:    280ms;
  --dur-slow:    520ms;

  /* ── Primitive: radius ────────────────────────────────────── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ── Primitive: elevation (layered shadows) ───────────────── */
  --shadow-xs: 0 1px 2px rgba(15,40,70,0.06);
  --shadow-sm: 0 2px 4px rgba(15,40,70,0.04), 0 4px 10px rgba(15,40,70,0.06);
  --shadow-md: 0 4px 10px rgba(15,40,70,0.06), 0 14px 28px rgba(15,40,70,0.10);
  --shadow-lg: 0 10px 20px rgba(15,40,70,0.08), 0 28px 56px rgba(15,40,70,0.16);
  --shadow-xl: 0 16px 32px rgba(15,40,70,0.10), 0 44px 88px rgba(15,40,70,0.24);
  --shadow-yellow: 0 8px 22px -6px rgba(229,164,0,0.55);
  --shadow-focus:  0 0 0 3px rgba(229,164,0,0.35);
}

/* ============================================================
   Global
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-weight:400;color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  line-height:1.6;
  font-feature-settings:"ss01","cv11","kern";
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* Brand-aligned selection */
::selection{background:var(--yellow);color:var(--navy)}
::-moz-selection{background:var(--yellow);color:var(--navy)}

/* Focus ring — accessible and branded */
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px;border-radius:var(--r-sm)}
button:focus-visible,a:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}

/* Scroll margin for sticky header offset */
section[id],[id]{scroll-margin-top:92px}

/* Branded scrollbar (WebKit) */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--snow)}
::-webkit-scrollbar-thumb{background:var(--line-dk);border-radius:var(--r-md);border:3px solid var(--snow)}
::-webkit-scrollbar-thumb:hover{background:var(--navy)}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-iteration-count:1 !important}
  html{scroll-behavior:auto}
  .hero-slide,.process-band::before{animation:none !important}
}

/* Typography */
h1,h2,h3,h4,h5,h6{
  font-family:'Google Sans','DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-weight:600;line-height:1.1;letter-spacing:-0.018em;color:var(--ink);margin:0;
}
h1{font-size:clamp(2.25rem,5.5vw,4.25rem);font-weight:700;letter-spacing:-0.028em}
h2{font-size:clamp(1.9rem,3.6vw,3rem);letter-spacing:-0.022em}
h3{font-size:clamp(1.3rem,2vw,1.75rem)}
h4{font-size:1.15rem;font-weight:600}

/* Hero title explicitly uses Google Sans (with DM Sans Greek fallback) */
.hero h1{font-family:'Google Sans','DM Sans',sans-serif}

/* Tabular numerals where alignment matters */
.h-phone-text strong,.cta-phone,.wa-text strong,.step-num,.shape-index,.form-tiny,.f-bottom{
  font-variant-numeric:tabular-nums;
}

.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2rem)}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:0.55rem;
  font-weight:600;font-size:0.92rem;letter-spacing:0.02em;
  padding:0.95rem 1.6rem;border:1px solid transparent;border-radius:var(--r-pill);
  transition:transform var(--dur-base) var(--ease-out),
             background var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out);
  cursor:pointer;
  will-change:transform;
}
.btn:active{transform:translateY(0) scale(0.98)}
.btn-yellow{background:var(--yellow);color:var(--navy);box-shadow:var(--shadow-xs)}
.btn-yellow:hover{background:var(--yellow-dk);transform:translateY(-2px);box-shadow:var(--shadow-yellow)}
.btn-navy{background:var(--navy);color:#fff;box-shadow:var(--shadow-xs)}
.btn-navy:hover{background:var(--navy-2);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line-dk)}
.btn-ghost:hover{border-color:var(--navy);color:var(--navy);background:rgba(15,40,70,0.03)}
.btn-outline-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.5)}
.btn-outline-light:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn-arrow::after{content:"→";margin-left:.25rem;transition:transform var(--dur-base) var(--ease-out)}
.btn-arrow:hover::after{transform:translateX(5px)}
.btn-block{width:100%;justify-content:center}
.btn-lg{padding:1.1rem 2rem;font-size:0.98rem}

/* ============================================================
   Header
   ============================================================ */
.h-site{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,0.88);backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out);
}
.h-site.scrolled{box-shadow:var(--shadow-sm);background:rgba(255,255,255,0.96)}
.h-site-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-top:0.95rem;padding-bottom:0.95rem}
.h-logo{display:flex;align-items:center;gap:0.65rem;transition:opacity var(--dur-base) var(--ease-out)}
.h-logo:hover{opacity:0.85}
.h-logo img{height:58px;width:auto;transition:height var(--dur-base) var(--ease-out)}
.h-site.scrolled .h-logo img{height:50px}
.h-nav{display:none;gap:2rem;align-items:center}
.h-nav a{
  font-family:'Google Sans','DM Sans',sans-serif;
  font-size:0.84rem;letter-spacing:0.09em;text-transform:uppercase;
  font-weight:500;color:var(--ink);padding:0.4rem 0;position:relative;
  transition:color var(--dur-base) var(--ease-out);
}
.h-nav a:hover,.h-nav a.active{color:var(--navy)}
.h-nav a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;background:var(--yellow);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-base) var(--ease-out);
}
.h-nav a:hover::after,.h-nav a.active::after{transform:scaleX(1)}

.h-right{display:none;align-items:center;gap:1.25rem}
.h-phone{display:flex;align-items:center;gap:0.75rem}
.h-phone-icon{
  width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:transform var(--dur-base) var(--ease-spring),background var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
  box-shadow:var(--shadow-xs);
}
.h-phone:hover .h-phone-icon{transform:scale(1.08) rotate(-8deg);background:var(--yellow);color:var(--navy);box-shadow:var(--shadow-yellow)}
.h-phone-text small{display:block;font-size:0.68rem;color:var(--ink-mute);letter-spacing:0.04em;line-height:1}
.h-phone-text strong{display:block;font-size:0.98rem;color:var(--navy);font-weight:700;margin-top:2px;letter-spacing:0.01em;transition:color var(--dur-base)}
.h-phone:hover .h-phone-text strong{color:var(--yellow)}
.h-lang{font-family:'Google Sans','DM Sans',sans-serif;font-size:0.8rem;font-weight:500;color:var(--ink-mute);letter-spacing:0.1em;text-transform:uppercase;transition:color var(--dur-base)}
.h-lang:hover{color:var(--navy)}
.h-burger{display:flex;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0;color:var(--navy);border-radius:var(--r-sm);transition:background var(--dur-base)}
.h-burger:hover{background:var(--snow)}

@media (min-width:1024px){
  .h-nav{display:flex}.h-right{display:flex}.h-burger{display:none}
}

/* Mobile nav — slide in from right */
.m-nav{
  position:fixed;inset:0;background:var(--navy);z-index:100;
  display:flex;flex-direction:column;padding:1.5rem;color:#fff;
  transform:translateX(100%);visibility:hidden;
  transition:transform var(--dur-slow) var(--ease-out),visibility 0s linear var(--dur-slow);
}
.m-nav.open{transform:translateX(0);visibility:visible;transition:transform var(--dur-slow) var(--ease-out),visibility 0s}
.m-nav-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}
.m-close{width:44px;height:44px;background:none;border:0;color:#fff;border-radius:var(--r-sm);transition:background var(--dur-base)}
.m-close:hover{background:rgba(255,255,255,0.08)}
.m-nav-links{display:flex;flex-direction:column;gap:1rem;flex-grow:1}
.m-nav-links a{font-family:'Google Sans','DM Sans',sans-serif;font-size:1.4rem;font-weight:500;color:#fff;transition:color var(--dur-base),transform var(--dur-base)}
.m-nav-links a:hover{color:var(--yellow);transform:translateX(4px)}
.m-nav-foot{padding-top:1.5rem;border-top:1px solid rgba(255,255,255,0.15);display:flex;flex-direction:column;gap:0.6rem;color:rgba(255,255,255,0.8);font-size:0.92rem}
.m-nav-foot a{display:inline-flex;align-items:center;gap:0.5rem;transition:color var(--dur-base)}
.m-nav-foot a:hover{color:var(--yellow)}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  min-height:clamp(520px,90vh,820px);
  display:flex;align-items:center;
  overflow:hidden;color:#fff;background:var(--navy);
}
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.2s var(--ease-in-out);
  transform:scale(1.04);animation:hero-kb 22s ease-in-out infinite alternate;
}
.hero-slide.active{opacity:1;z-index:1}
@keyframes hero-kb{from{transform:scale(1.04)}to{transform:scale(1.12)}}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,transparent 0%,transparent 55%,rgba(15,40,70,0.5) 92%,rgba(15,40,70,0.7) 100%),
    linear-gradient(110deg,rgba(15,40,70,0.85) 0%,rgba(15,40,70,0.55) 55%,rgba(15,40,70,0.15) 100%);
}
.hero-inner{position:relative;z-index:2;width:100%;padding-top:clamp(4rem,10vw,7rem);padding-bottom:clamp(4rem,10vw,7rem)}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:0.75rem;
  font-size:0.74rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--yellow);font-weight:600;margin-bottom:1.5rem;
}
.hero-eyebrow::before{content:"";width:28px;height:2px;background:var(--yellow)}
.hero h1{color:#fff;max-width:20ch;font-weight:700;text-shadow:0 2px 24px rgba(0,0,0,0.18)}
.hero p{max-width:52ch;color:rgba(255,255,255,0.9);font-size:clamp(1rem,1.3vw,1.15rem);margin-top:1.5rem;line-height:1.55;text-shadow:0 1px 12px rgba(0,0,0,0.2)}
.hero-cta-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:clamp(2rem,4vw,2.5rem);align-items:center}
.hero-cta-row .meta{color:rgba(255,255,255,0.75);font-size:0.88rem}
.hero-cta-row .meta strong{color:#fff;font-weight:700;letter-spacing:0.02em}
.hero-dots{position:absolute;left:clamp(1.25rem,4vw,2rem);bottom:2rem;z-index:3;display:flex;gap:0.5rem}
.hero-dot{width:32px;height:2px;background:rgba(255,255,255,0.35);border:0;padding:0;cursor:pointer;transition:background var(--dur-base) var(--ease-out),width var(--dur-base) var(--ease-out)}
.hero-dot:hover{background:rgba(255,255,255,0.7)}
.hero-dot.active{background:var(--yellow);width:44px}

/* ============================================================
   Benefits strip (navy bg, 6 icon columns)
   ============================================================ */
.benefits{background:var(--navy);color:#fff;padding:clamp(2rem,4vw,3rem) 0;border-top:1px solid rgba(255,255,255,0.08)}
.benefits-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem 1rem}
@media (min-width:720px){.benefits-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.benefits-grid{grid-template-columns:repeat(6,1fr);gap:1rem}}
.benefit{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:0.85rem;
  padding:1rem 0.5rem;border-radius:var(--r-md);
  transition:background var(--dur-base) var(--ease-out);
}
.benefit:hover{background:rgba(255,255,255,0.04)}
.benefit-icon{
  width:56px;height:56px;color:var(--yellow);
  display:flex;align-items:center;justify-content:center;
  transition:transform var(--dur-base) var(--ease-spring),color var(--dur-base) var(--ease-out);
  will-change:transform;
}
.benefit:hover .benefit-icon{transform:translateY(-4px) scale(1.08)}
.benefit-t{font-size:0.88rem;font-weight:600;line-height:1.35;letter-spacing:0.01em;color:#fff;max-width:11ch;transition:color var(--dur-base)}
.benefit:hover .benefit-t{color:var(--yellow)}

/* ============================================================
   Services grid (3 cards, white bg)
   ============================================================ */
.services{background:var(--paper);padding:clamp(4rem,8vw,6rem) 0}
.section-head{display:flex;flex-direction:column;gap:0.75rem;margin-bottom:clamp(2rem,4vw,3rem);max-width:56ch}
.section-label{
  display:inline-flex;align-items:center;gap:0.65rem;
  font-size:0.76rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--teal);
}
.section-label::before{content:"";width:24px;height:2px;background:var(--teal)}

.svc-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media (min-width:720px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
.svc-card{
  background:var(--snow);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:2rem 1.75rem 1.75rem;
  display:flex;flex-direction:column;gap:1rem;
  position:relative;overflow:hidden;
  transition:transform var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             background var(--dur-base) var(--ease-out);
}
.svc-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--yellow),var(--yellow-dk));
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-slow) var(--ease-out);
}
.svc-card:hover{transform:translateY(-6px);border-color:var(--navy);box-shadow:var(--shadow-lg);background:#fff}
.svc-card:hover::before{transform:scaleX(1)}

.svc-icon-wrap{
  width:110px;height:110px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  margin-bottom:0.25rem;padding:14px;
  transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-base),box-shadow var(--dur-base);
}
.svc-icon-wrap img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  transition:transform var(--dur-slow) var(--ease-out);
  will-change:transform;
}
.svc-card:hover .svc-icon-wrap{border-color:var(--navy);box-shadow:var(--shadow-md)}
.svc-card:hover .svc-icon-wrap img{transform:scale(1.08) rotate(-2deg)}
.svc-card h3{font-size:1.4rem;font-weight:600;color:var(--navy);line-height:1.2;margin-top:0.25rem}
.svc-card h3 span{display:block;font-weight:700}
.svc-card p{color:var(--ink-soft);font-size:0.95rem;line-height:1.55;margin:0;flex-grow:1}
.svc-more{
  display:inline-flex;align-items:center;gap:0.35rem;
  font-size:0.78rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--navy);
  margin-top:0.75rem;transition:color var(--dur-base);
}
.svc-more::after{content:"→";transition:transform var(--dur-base) var(--ease-out)}
.svc-card:hover .svc-more{color:var(--yellow-dk)}
.svc-card:hover .svc-more::after{transform:translateX(6px)}

/* ============================================================
   About + Checklist
   ============================================================ */
.about{background:var(--snow);padding:clamp(4rem,8vw,6rem) 0;position:relative;overflow:hidden}
.about-grid{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4rem);align-items:center}
@media (min-width:960px){.about-grid{grid-template-columns:1.05fr 0.95fr}}
.about-copy h2{color:var(--navy);max-width:18ch}
.about-copy h2 span{color:var(--yellow-dk)}
.about-copy p{color:var(--ink-soft);max-width:50ch;margin:1.25rem 0;line-height:1.7}

.checklist{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0.85rem 1.5rem;max-width:540px}
@media (max-width:640px){.checklist{grid-template-columns:1fr}}
.checklist li{
  display:flex;gap:0.65rem;align-items:center;
  font-weight:500;color:var(--ink);font-size:0.96rem;
  transition:transform var(--dur-base) var(--ease-out);
}
.checklist li:hover{transform:translateX(3px)}
.checklist li::before{
  content:"";flex:0 0 20px;height:20px;border-radius:50%;background:var(--teal);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M5 10.5 8.5 14 15 7' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size:14px;background-position:center;background-repeat:no-repeat;
  transition:transform var(--dur-base) var(--ease-spring),background-color var(--dur-base);
}
.checklist li:hover::before{transform:scale(1.12);background-color:var(--teal-dk)}

.about-media{position:relative;aspect-ratio:4/5;max-width:560px;margin:0 auto;width:100%}
.about-media .frame{
  position:relative;width:100%;height:100%;
  border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--shadow-xl);
  background:var(--paper);
  transition:transform var(--dur-slow) var(--ease-out);
}
.about-media:hover .frame{transform:translateY(-4px)}
.about-media .frame img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.about-media:hover .frame img{transform:scale(1.03)}
.about-media .badge{
  position:absolute;top:1.25rem;left:-0.75rem;z-index:2;
  background:var(--yellow);color:var(--navy);
  padding:0.65rem 1.1rem;border-radius:var(--r-pill);
  font-size:0.76rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  box-shadow:var(--shadow-yellow);
  display:inline-flex;align-items:center;gap:0.35rem;
}

/* ============================================================
   Shapes (window types — 3 × 2 big cards)
   ============================================================ */
.shapes{background:var(--navy);color:#fff;padding:clamp(4rem,7vw,6rem) 0;position:relative;overflow:hidden}
.shapes::before{
  content:"";position:absolute;inset:0;opacity:0.04;pointer-events:none;
  background:radial-gradient(circle at 15% 10%,var(--yellow) 0,transparent 35%),
             radial-gradient(circle at 85% 90%,var(--teal) 0,transparent 35%);
}
.shapes .wrap{position:relative;z-index:1}
.shapes-head{text-align:center;max-width:60ch;margin:0 auto clamp(3rem,5vw,4rem)}
.shapes-head h2{color:#fff}
.shapes-head h2 span{color:var(--yellow)}
.shapes-head p{color:rgba(255,255,255,0.78);margin-top:0.75rem}

.shapes-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;max-width:1100px;margin:0 auto}
@media (min-width:640px){.shapes-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}}

.shape-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.25rem;
  padding:2rem 1.25rem;min-height:clamp(200px,24vw,260px);
  background:rgba(255,255,255,0.035);
  border:1.5px solid rgba(255,255,255,0.16);
  border-radius:var(--r-xl);
  position:relative;overflow:hidden;
  transition:transform var(--dur-base) var(--ease-out),
             background var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.shape-item::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(circle at 50% 0%,rgba(229,164,0,0.2) 0%,transparent 55%);
  opacity:0;transition:opacity var(--dur-slow) var(--ease-out);
}
/* Subtle sweep highlight on hover */
.shape-item::after{
  content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;z-index:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,0.06) 50%,transparent 70%);
  transition:left var(--dur-slow) var(--ease-out);
}
.shape-item:hover{
  transform:translateY(-6px);
  background:rgba(255,255,255,0.07);
  border-color:var(--yellow);
  box-shadow:0 28px 48px -22px rgba(229,164,0,0.35);
}
.shape-item:hover::before{opacity:1}
.shape-item:hover::after{left:100%}

.shape-icon{
  position:relative;z-index:1;
  width:clamp(90px,12vw,120px);height:clamp(90px,12vw,120px);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.9);
  transition:color var(--dur-base),transform var(--dur-slow) var(--ease-spring);
}
.shape-icon svg{width:100%;height:100%}
.shape-item:hover .shape-icon{color:var(--yellow);transform:scale(1.12) rotate(-4deg)}
.shape-label{
  position:relative;z-index:1;
  font-size:clamp(1rem,1.35vw,1.15rem);font-weight:600;letter-spacing:0.01em;color:#fff;
  transition:color var(--dur-base);
}
.shape-item:hover .shape-label{color:var(--yellow)}
.shape-index{
  position:absolute;top:1rem;right:1.25rem;z-index:1;
  font-size:0.7rem;font-weight:700;letter-spacing:0.14em;
  color:rgba(255,255,255,0.35);transition:color var(--dur-base);
}
.shape-item:hover .shape-index{color:var(--yellow)}

/* ============================================================
   Process + Embedded form
   ============================================================ */
.process-band{background:var(--snow);color:var(--ink);padding:clamp(3rem,6vw,5rem) 0 clamp(4rem,7vw,6rem);position:relative;overflow:hidden}
.process-band::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:0.08;pointer-events:none;
  background-image:
    radial-gradient(circle at 20% 20%,var(--yellow) 0,transparent 30%),
    radial-gradient(circle at 80% 80%,var(--teal) 0,transparent 28%);
}
.process-band .wrap{position:relative;z-index:1}
.pg-grid{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4rem);align-items:start}
@media (min-width:1024px){.pg-grid{grid-template-columns:1.2fr 0.8fr}}

.process-head .section-label{color:var(--teal)}
.process-head .section-label::before{background:var(--teal)}
.process-head h2{color:var(--navy)}
.process-head p{color:var(--ink-soft);margin-top:0.75rem;max-width:48ch;line-height:1.6}

.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:2.5rem}
.step{
  display:flex;flex-direction:column;gap:0.65rem;
  padding:1.25rem;border-radius:var(--r-md);
  transition:background var(--dur-base) var(--ease-out);
}
.step:hover{background:rgba(15,40,70,0.04)}
.step-icon{
  width:48px;height:48px;border-radius:var(--r-md);
  background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--navy);
  transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base),color var(--dur-base);
  box-shadow:var(--shadow-xs);
}
.step:hover .step-icon{background:rgba(229,164,0,0.12);border-color:var(--yellow);color:var(--yellow-dk)}
.step-num{font-size:0.72rem;font-weight:700;color:var(--yellow);letter-spacing:0.14em;text-transform:uppercase}
.step h4{color:var(--navy);font-weight:600;font-size:1.05rem}
.step p{color:var(--ink-soft);font-size:0.88rem;line-height:1.5;margin:0}

/* Embedded free-measurement form */
.form-card{
  background:var(--navy-2);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--r-xl);
  padding:clamp(1.75rem,3vw,2.25rem);
  box-shadow:var(--shadow-xl);
  position:relative;overflow:hidden;
}
.form-card::before{
  content:"";position:absolute;top:0;right:0;width:180px;height:180px;
  background:radial-gradient(circle,rgba(229,164,0,0.12) 0%,transparent 65%);
  pointer-events:none;
}
.form-card h3{color:#fff;font-size:1.5rem;margin-bottom:0.5rem}
.form-card .lede{color:rgba(255,255,255,0.75);font-size:0.94rem;margin-bottom:1.5rem;line-height:1.5}
.form-card .row{display:grid;grid-template-columns:1fr 1fr;gap:0.85rem;margin-bottom:0.85rem}
@media (max-width:540px){.form-card .row{grid-template-columns:1fr}}
.form-card input,
.form-card select,
.form-card textarea{
  width:100%;padding:0.85rem 1rem;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:var(--r-md);
  color:#fff;font-family:inherit;font-size:0.95rem;
  transition:border-color var(--dur-base) var(--ease-out),
             background var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.form-card input::placeholder,
.form-card textarea::placeholder{color:rgba(255,255,255,0.5)}
.form-card input:hover,
.form-card select:hover,
.form-card textarea:hover{border-color:rgba(255,255,255,0.3)}
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus{
  outline:none;border-color:var(--yellow);
  background:rgba(255,255,255,0.1);
  box-shadow:0 0 0 3px rgba(229,164,0,0.2);
}
.form-card select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23E5A400' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-size:12px 8px;
  padding-right:2.5rem;color:#fff;cursor:pointer;
}
.form-card select option{color:var(--ink);background:#fff}
.form-card textarea{min-height:110px;resize:vertical}
.form-card .stack > * + *{margin-top:0.85rem}
.form-card button[type="submit"]{margin-top:1rem}
.form-tiny{font-size:0.78rem;color:rgba(255,255,255,0.55);margin-top:0.85rem;letter-spacing:0.02em}

/* WhatsApp callout */
.wa-callout{
  display:flex;align-items:center;gap:1rem;
  margin-top:2rem;padding:1rem 1.25rem;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-xs);
  transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base),box-shadow var(--dur-base),transform var(--dur-base);
}
.wa-callout:hover{background:#fff;border-color:var(--yellow);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.wa-icon{
  flex:0 0 48px;height:48px;border-radius:50%;
  background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:transform var(--dur-base) var(--ease-spring),background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
  box-shadow:var(--shadow-xs);
}
.wa-callout:hover .wa-icon{transform:scale(1.08) rotate(-8deg);background:var(--yellow);color:var(--navy);box-shadow:var(--shadow-yellow)}
.wa-text small{display:block;font-size:0.74rem;color:var(--ink-mute);letter-spacing:0.05em}
.wa-text strong{display:block;color:var(--navy);font-size:1.35rem;font-weight:700;margin-top:2px;letter-spacing:0.01em;transition:color var(--dur-base)}
.wa-callout:hover .wa-text strong{color:var(--yellow-dk)}

/* ============================================================
   Brands strip
   ============================================================ */
.brands{background:var(--snow);padding:clamp(2.5rem,4vw,3.5rem) 0}
.brands-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:3rem 4rem}
.brands-wrap img{
  max-height:54px;width:auto;
  filter:grayscale(100%) opacity(0.5);
  transition:filter var(--dur-slow) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.brands-wrap img:hover{filter:grayscale(0) opacity(1);transform:translateY(-2px)}

/* ============================================================
   Footer
   ============================================================ */
.f-site{background:var(--navy);color:rgba(255,255,255,0.75);padding:clamp(3rem,5vw,4.5rem) 0 1.5rem;position:relative;overflow:hidden}
.f-site::before{
  content:"";position:absolute;inset:0;opacity:0.04;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='white'><circle cx='40' cy='50' r='1.5'/><circle cx='60' cy='40' r='1'/><circle cx='80' cy='60' r='1.2'/><circle cx='100' cy='45' r='1'/><circle cx='120' cy='55' r='1.3'/><circle cx='140' cy='40' r='1'/><circle cx='160' cy='60' r='1.2'/></svg>");
  background-size:400px;
}
.f-wrap{position:relative}
.f-top{display:grid;grid-template-columns:1fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,0.12)}
@media (min-width:960px){.f-top{grid-template-columns:1.5fr 0.9fr 0.9fr 1fr}}
.f-brand img{height:54px;width:auto;margin-bottom:1rem}
.f-brand p{font-size:0.92rem;line-height:1.6;max-width:36ch;color:rgba(255,255,255,0.7)}
.f-site h6{font-size:0.78rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#fff;margin-bottom:1rem}
.f-site ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0.55rem;font-size:0.92rem}
.f-site ul li a{
  position:relative;display:inline-block;padding:2px 0;
  transition:color var(--dur-base),padding-left var(--dur-base);
}
.f-site ul li a:hover{color:var(--yellow);padding-left:6px}
.f-social{display:flex;gap:0.6rem;margin-top:0.75rem}
.f-social a{
  width:36px;height:36px;border:1px solid rgba(255,255,255,0.18);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.8);
  transition:all var(--dur-base) var(--ease-out);
}
.f-social a:hover{border-color:var(--yellow);color:var(--yellow);transform:translateY(-3px);background:rgba(229,164,0,0.08)}
.f-bottom{padding-top:1.25rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:0.75rem;font-size:0.78rem;color:rgba(255,255,255,0.5);letter-spacing:0.02em}
.f-bottom a{color:inherit;transition:color var(--dur-base)}
.f-bottom a:hover{color:var(--yellow)}

/* ============================================================
   Page hero (inner pages)
   ============================================================ */
.page-hero{
  position:relative;min-height:clamp(340px,54vh,500px);
  display:flex;align-items:flex-end;
  padding:clamp(4rem,9vw,7rem) 0 clamp(2.5rem,5vw,4rem);
  overflow:hidden;color:#fff;background:var(--navy);
}
.page-hero-bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
  transform:scale(1.04);animation:hero-kb 22s ease-in-out infinite alternate;
}
.page-hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(15,40,70,0.35) 0%,rgba(15,40,70,0.65) 60%,rgba(15,40,70,0.9) 100%);
}
.page-hero-inner{position:relative;z-index:2}
.page-hero-meta{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,0.2);
  margin-bottom:1.5rem;
}
.page-hero-meta .label{
  font-family:'DM Sans',sans-serif;
  font-size:0.7rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.75);
}
.page-hero h1{
  color:#fff;max-width:22ch;
  font-size:clamp(2.1rem,5vw,3.75rem);line-height:1.05;font-weight:700;
  text-shadow:0 2px 20px rgba(0,0,0,0.18);
}
.page-hero h1 span{color:var(--yellow)}
.page-hero-lede{
  color:rgba(255,255,255,0.88);max-width:52ch;
  font-size:clamp(1rem,1.25vw,1.1rem);margin-top:1rem;line-height:1.55;
}
.page-hero-breadcrumb{
  display:flex;align-items:center;gap:0.5rem;
  font-family:'DM Sans',sans-serif;font-size:0.78rem;color:rgba(255,255,255,0.7);
  margin-bottom:1rem;
}
.page-hero-breadcrumb a{transition:color var(--dur-base)}
.page-hero-breadcrumb a:hover{color:var(--yellow)}
.page-hero-breadcrumb .sep{color:rgba(255,255,255,0.4)}

/* ============================================================
   Section (generic inner-page content wrap)
   ============================================================ */
.section{padding:clamp(4rem,7vw,6rem) 0;background:var(--paper)}
.section-alt{background:var(--snow)}

/* ============================================================
   Service detail grid (service pages)
   ============================================================ */
.svc-detail{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:960px){.svc-detail{grid-template-columns:1.6fr 1fr}}

/* ============================================================
   Prose (article body — service pages)
   ============================================================ */
.prose{color:var(--ink-soft);font-size:1.02rem;line-height:1.8}
.prose p{margin:0 0 1.2rem}
.prose strong{color:var(--ink);font-weight:600}
.prose .lede{
  font-family:'Google Sans','DM Sans',sans-serif;
  font-size:clamp(1.15rem,1.6vw,1.4rem);color:var(--ink);
  font-weight:500;line-height:1.45;letter-spacing:-0.01em;
  margin:0 0 1.75rem;padding-left:1.25rem;
  border-left:3px solid var(--yellow);
}
.prose h3{
  font-family:'Google Sans','DM Sans',sans-serif;
  color:var(--navy);font-weight:600;
  font-size:clamp(1.2rem,2vw,1.55rem);
  margin:2.5rem 0 1.25rem;
  padding-bottom:0.6rem;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;gap:0.65rem;
  letter-spacing:-0.015em;
}
.prose h3 .num{
  font-size:0.78rem;font-weight:700;color:var(--yellow);
  letter-spacing:0.14em;font-family:'DM Sans',sans-serif;
}
.prose ul{list-style:none;padding:0;margin:1rem 0 1.75rem}
.prose ul li{
  position:relative;padding:0.7rem 0 0.7rem 2rem;
  border-bottom:1px solid var(--line);
  color:var(--ink-soft);font-size:0.98rem;line-height:1.5;
  transition:padding-left var(--dur-base) var(--ease-out),color var(--dur-base);
}
.prose ul li:hover{padding-left:2.4rem;color:var(--ink)}
.prose ul li::before{
  content:"";position:absolute;left:0;top:0.9rem;
  width:20px;height:20px;border-radius:50%;background:var(--teal);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M5 10.5 8.5 14 15 7' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size:14px;background-position:center;background-repeat:no-repeat;
  transition:background-color var(--dur-base),transform var(--dur-base) var(--ease-spring);
}
.prose ul li:hover::before{background-color:var(--teal-dk);transform:scale(1.15)}
.prose .callout{
  background:var(--snow);
  border-left:3px solid var(--yellow);
  padding:1.15rem 1.35rem;margin:1.5rem 0;border-radius:0 var(--r-md) var(--r-md) 0;
  color:var(--ink);font-weight:500;line-height:1.55;font-size:0.98rem;
}
.prose img{border-radius:var(--r-lg);margin:1.5rem 0;box-shadow:var(--shadow-md)}

/* ============================================================
   Side card (sidebar on service pages)
   ============================================================ */
.side-card{
  background:var(--snow);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:1.75rem;
  position:sticky;top:100px;
  box-shadow:var(--shadow-xs);
}
.side-card .side-img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r-md);margin-bottom:1.25rem;
}
.side-card .side-label{
  font-family:'DM Sans',sans-serif;font-size:0.72rem;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--teal);margin-bottom:0.5rem;
  display:inline-flex;align-items:center;gap:0.5rem;
}
.side-card .side-label::before{content:"";width:22px;height:2px;background:var(--teal)}
.side-card h4{
  font-family:'Google Sans','DM Sans',sans-serif;
  color:var(--navy);font-weight:600;font-size:1.25rem;line-height:1.2;
  margin:0 0 0.75rem;letter-spacing:-0.015em;
}
.side-card p{color:var(--ink-soft);font-size:0.93rem;line-height:1.55;margin:0 0 1.25rem}

/* ============================================================
   Contact page specifics
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4rem)}
@media (min-width:960px){.contact-grid{grid-template-columns:0.95fr 1.05fr}}

.contact-details{display:flex;flex-direction:column;gap:0}
.contact-row{
  display:grid;grid-template-columns:100px 1fr;gap:1.5rem;align-items:center;
  padding:1.25rem 0;border-bottom:1px solid var(--line);
}
.contact-row .label{
  font-family:'DM Sans',sans-serif;font-size:0.72rem;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-mute);
}
.contact-row .value{
  font-family:'Google Sans','DM Sans',sans-serif;
  font-size:clamp(1.1rem,1.4vw,1.3rem);color:var(--navy);font-weight:500;line-height:1.3;
  letter-spacing:-0.01em;
}
.contact-row .value small{
  display:block;font-family:'DM Sans',sans-serif;font-size:0.82rem;
  color:var(--ink-mute);font-weight:400;margin-top:0.15rem;letter-spacing:0;
}
.contact-row a.value{transition:color var(--dur-base)}
.contact-row a.value:hover{color:var(--yellow-dk)}

/* Map */
.map-frame{
  aspect-ratio:16/7;width:100%;overflow:hidden;
  border-radius:var(--r-xl);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.map-frame iframe{border:0;width:100%;height:100%;filter:grayscale(0.2)}

/* ============================================================
   Form feedback banner (sent / error)
   ============================================================ */
.form-banner{
  display:none;align-items:flex-start;gap:0.75rem;
  padding:0.95rem 2.75rem 0.95rem 1rem;
  border-radius:var(--r-md);
  margin-bottom:1.25rem;
  font-family:'DM Sans',sans-serif;font-size:0.92rem;line-height:1.45;
  position:relative;
  animation:bannerIn var(--dur-slow) var(--ease-spring);
}
.form-banner.show{display:flex}
@keyframes bannerIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.form-banner-success{
  background:rgba(45,189,176,0.14);
  border:1px solid rgba(45,189,176,0.5);
  color:#fff;
}
.form-banner-error{
  background:rgba(229,164,0,0.14);
  border:1px solid rgba(229,164,0,0.55);
  color:#fff;
}
.form-banner .banner-icon{flex:0 0 22px;display:flex;align-items:center;justify-content:center;color:var(--yellow)}
.form-banner-success .banner-icon{color:var(--teal)}
.form-banner .banner-text{flex:1;font-weight:500}
.form-banner .banner-close{
  position:absolute;right:0.6rem;top:0.45rem;
  width:30px;height:30px;
  background:transparent;border:0;cursor:pointer;
  color:inherit;font-size:22px;line-height:1;
  opacity:0.55;transition:opacity var(--dur-base);
}
.form-banner .banner-close:hover{opacity:1}

/* ============================================================
   Gallery (service pages — έργα)
   ============================================================ */
.gallery-section{background:var(--snow);padding:clamp(4rem,7vw,6rem) 0}
.gallery-section .section-head{max-width:none;margin-bottom:clamp(2rem,4vw,3rem)}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0.75rem;
}
@media (min-width:640px){.gallery-grid{grid-template-columns:repeat(3,1fr);gap:1rem}}
@media (min-width:960px){.gallery-grid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1280px){.gallery-grid{grid-template-columns:repeat(5,1fr)}}

.gallery-item{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:1/1;background:var(--line);
  border-radius:var(--r-md);
  cursor:zoom-in;
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.gallery-item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-slow) var(--ease-out),filter var(--dur-base);
  filter:saturate(0.95);
}
.gallery-item::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(15,40,70,0.55) 100%);
  opacity:0;transition:opacity var(--dur-base) var(--ease-out);
  pointer-events:none;
}
.gallery-item::before{
  content:"";position:absolute;top:0.6rem;right:0.6rem;
  width:32px;height:32px;border-radius:50%;
  background:var(--yellow);
  opacity:0;transform:scale(0.6);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-spring);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2846' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='M21 21l-4.35-4.35M11 8v6M8 11h6'/></svg>");
  background-size:18px;background-position:center;background-repeat:no-repeat;
  z-index:2;
}
.gallery-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.gallery-item:hover img{transform:scale(1.08);filter:saturate(1.05)}
.gallery-item:hover::after{opacity:1}
.gallery-item:hover::before{opacity:1;transform:scale(1)}

.gallery-count{
  text-align:center;margin-top:1.5rem;
  font-family:'DM Sans',sans-serif;font-size:0.82rem;color:var(--ink-mute);letter-spacing:0.06em;
}

/* ============================================================
   Lightbox (fullscreen image viewer)
   ============================================================ */
.lightbox{
  position:fixed;inset:0;z-index:200;
  display:none;align-items:center;justify-content:center;
  background:rgba(15,40,70,0.95);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transition:opacity var(--dur-base) var(--ease-out);
}
.lightbox.open{display:flex;opacity:1}
.lightbox-img{
  max-width:min(92vw,1400px);max-height:86vh;width:auto;height:auto;
  object-fit:contain;box-shadow:var(--shadow-xl);border-radius:var(--r-md);
  animation:lbIn var(--dur-slow) var(--ease-out);
}
@keyframes lbIn{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}
.lightbox-btn{
  position:absolute;
  width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;backdrop-filter:blur(4px);
  transition:background var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-spring);
  font-size:24px;
}
.lightbox-btn:hover{background:var(--yellow);color:var(--navy);border-color:var(--yellow);transform:scale(1.08)}
.lightbox-close{top:1.5rem;right:1.5rem}
.lightbox-prev{left:1.5rem;top:50%;transform:translateY(-50%)}
.lightbox-next{right:1.5rem;top:50%;transform:translateY(-50%)}
.lightbox-prev:hover,.lightbox-next:hover{transform:translateY(-50%) scale(1.08)}
.lightbox-count{
  position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);
  font-family:'DM Sans',sans-serif;font-size:0.82rem;letter-spacing:0.14em;
  color:rgba(255,255,255,0.7);background:rgba(255,255,255,0.08);padding:0.5rem 1rem;border-radius:var(--r-pill);
  backdrop-filter:blur(4px);
}
@media (max-width:640px){
  .lightbox-btn{width:44px;height:44px;font-size:20px}
  .lightbox-close{top:1rem;right:1rem}
  .lightbox-prev{left:0.5rem}
  .lightbox-next{right:0.5rem}
}

/* ============================================================
   Compare-other-services CTA (service pages)
   ============================================================ */
.compare-band{background:var(--navy);color:#fff;padding:clamp(3rem,5vw,4.5rem) 0;position:relative;overflow:hidden}
.compare-band::before{
  content:"";position:absolute;inset:0;opacity:0.06;pointer-events:none;
  background:radial-gradient(circle at 20% 30%,var(--yellow) 0,transparent 40%);
}
.compare-band .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
@media (min-width:960px){.compare-band .wrap{grid-template-columns:1.2fr auto}}
.compare-band h2{color:#fff;max-width:22ch}
.compare-band h2 span{color:var(--yellow)}
.compare-band p{color:rgba(255,255,255,0.75);margin-top:0.75rem;max-width:52ch}
.compare-links{display:flex;flex-wrap:wrap;gap:0.75rem}

/* ============================================================
   Reveal animation
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity 0.9s var(--ease-out),transform 0.9s var(--ease-out)}
  .reveal.visible{opacity:1;transform:translateY(0)}
}