/* =========================================================
   Awesome Bilpleje — Design System
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* --- Brand colors (from logo) --- */
  --color-teal:        #33B9CE;
  --color-teal-dark:   #1C8A9C;
  --color-teal-light:  #9FE3EC;
  --color-teal-pale:   #E4F7FA;

  --color-ink:         #0B161D;
  --color-ink-soft:    #122029;
  --color-ink-softer:  #1B2B35;

  --color-bg:          #F6FAFB;
  --color-surface:     #FFFFFF;
  --color-border:      #E1E9EC;

  --color-text:        #0E1B22;
  --color-text-muted:  #526670;
  --color-text-soft:   #7C8D96;

  --color-on-teal:     #05242A;
  --color-on-ink:      #F4FBFC;

  --color-gold:        #F0B23D;
  --color-success:     #1FA363;
  --color-danger:      #E24C4C;

  /* semantic */
  --color-primary: var(--color-teal);
  --color-primary-strong: var(--color-teal-dark);
  --color-accent: var(--color-gold);

  /* --- Typography --- */
  --font-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* --- Spacing scale (8px rhythm) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* --- Radius --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 2px rgba(11,22,29,.06), 0 1px 1px rgba(11,22,29,.04);
  --shadow-md: 0 8px 24px -8px rgba(11,22,29,.16), 0 2px 8px -2px rgba(11,22,29,.08);
  --shadow-lg: 0 24px 60px -16px rgba(11,22,29,.28), 0 8px 24px -8px rgba(11,22,29,.12);
  --shadow-glow: 0 0 0 1px rgba(51,185,206,.16), 0 12px 40px -10px rgba(51,185,206,.35);

  /* --- Motion --- */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;

  --container: 1200px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--color-bg);
  color:var(--color-text);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-heading); margin:0; line-height:1.12; letter-spacing:-0.01em; color:var(--color-ink); }
p{ margin:0; }
section{ position:relative; }

::selection{ background:var(--color-teal); color:var(--color-on-teal); }

:focus-visible{
  outline:2.5px solid var(--color-teal-dark);
  outline-offset:3px;
  border-radius:4px;
}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--space-5);
}
@media (min-width:768px){ .container{ padding-inline:var(--space-7); } }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  font-family:var(--font-heading);
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-teal-dark);
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background:var(--color-teal);
  border-radius:2px;
}

.section-head{
  max-width:640px;
  margin-bottom:var(--space-7);
}
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{
  font-size:clamp(28px,4vw,42px);
  margin-top:var(--space-3);
}
.section-head p{
  margin-top:var(--space-4);
  color:var(--color-text-muted);
  font-size:17px;
}

.section-pad{ padding-block:var(--space-9); }
@media (max-width:640px){ .section-pad{ padding-block:var(--space-8); } }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  font-family:var(--font-heading);
  font-weight:600;
  font-size:15px;
  letter-spacing:.01em;
  padding:14px 26px;
  border-radius:var(--radius-full);
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  white-space:nowrap;
  min-height:48px;
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn-primary{
  background:var(--color-teal);
  color:var(--color-on-teal);
  box-shadow:var(--shadow-glow);
}
.btn-primary:hover{ background:var(--color-teal-dark); color:#fff; transform:translateY(-2px); }
.btn-primary:active{ transform:translateY(0); }

.btn-dark{
  background:var(--color-ink);
  color:var(--color-on-ink);
}
.btn-dark:hover{ background:var(--color-ink-soft); transform:translateY(-2px); box-shadow:var(--shadow-md); }

.btn-ghost{
  background:transparent;
  color:var(--color-ink);
  border-color:var(--color-border);
}
.btn-ghost:hover{ border-color:var(--color-teal); color:var(--color-teal-dark); background:var(--color-teal-pale); }

.btn-on-dark{
  background:rgba(255,255,255,.08);
  color:#fff;
  border-color:rgba(255,255,255,.28);
  backdrop-filter:blur(8px);
}
.btn-on-dark:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.5); }

.btn-block{ width:100%; }
.btn-lg{ padding:16px 32px; font-size:16px; }

/* cursor affordance on all interactive elements */
a,button,.card-service,.faq-item summary,.chip,.gallery-tile,.testi-dot{ cursor:pointer; }

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset-inline:0; top:0;
  z-index:100;
  padding-block:18px;
  transition:padding var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base) var(--ease-out);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); }
.site-header::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(11,22,29,0);
  transition:background var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  z-index:-1;
}
.site-header.scrolled{ padding-block:10px; }
.site-header.scrolled::before{
  background:rgba(11,22,29,.72);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 1px 0 rgba(255,255,255,.06), 0 12px 30px -14px rgba(0,0,0,.5);
}

.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:56px; width:auto; transition:height var(--dur-base) var(--ease-out); }
.site-header.scrolled .brand img{ height:46px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text strong{ font-family:var(--font-heading); font-size:15px; letter-spacing:.02em; color:#fff; }
.brand-text span{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--color-teal-light); }

.main-nav{ display:none; }
.main-nav ul{ display:flex; align-items:center; gap:var(--space-6); }
.main-nav a{
  font-size:14.5px; font-weight:500; color:rgba(244,251,252,.82);
  position:relative; padding-block:4px;
  transition:color var(--dur-base) var(--ease-out);
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--color-teal); border-radius:2px;
  transition:right var(--dur-base) var(--ease-out);
}
.main-nav a:hover{ color:#fff; }
.main-nav a:hover::after{ right:0; }

.nav-dropdown{ position:relative; }
.nav-dropdown-trigger{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:none; font-family:var(--font-body);
  font-size:14.5px; font-weight:500; color:rgba(244,251,252,.82);
  padding-block:4px; transition:color var(--dur-base) var(--ease-out);
}
.nav-dropdown-trigger svg{ width:14px; height:14px; transition:transform var(--dur-base) var(--ease-out); }
.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown-trigger[aria-expanded="true"]{ color:#fff; }
.nav-dropdown:hover .nav-dropdown-trigger svg,
.nav-dropdown-trigger[aria-expanded="true"] svg{ transform:rotate(180deg); }
.nav-dropdown-menu{
  position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%) translateY(6px);
  width:280px; padding:10px; border-radius:var(--radius-md);
  background:var(--color-ink-soft); border:1px solid rgba(255,255,255,.1);
  box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
  z-index:10;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-menu.open{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.nav-dropdown-menu a{
  display:flex; align-items:flex-start; gap:12px;
  padding:10px 12px; border-radius:var(--radius-sm);
  transition:background var(--dur-fast) var(--ease-out);
}
.nav-dropdown-menu a::after{ display:none; }
.nav-dropdown-menu a:hover{ background:rgba(255,255,255,.06); }
.nav-dropdown-menu .dd-ic{
  width:34px; height:34px; border-radius:var(--radius-sm); flex:none;
  background:rgba(51,185,206,.14); color:var(--color-teal-light);
  display:flex; align-items:center; justify-content:center;
}
.nav-dropdown-menu .dd-ic svg{ width:18px; height:18px; }
.nav-dropdown-menu .dd-text strong{ display:block; font-size:14px; font-weight:600; color:#fff; }
.nav-dropdown-menu .dd-text span{ display:block; font-size:12px; color:rgba(244,251,252,.5); margin-top:1px; }

.mobile-drawer .drawer-group{ margin-bottom:4px; }
.mobile-drawer .drawer-group-label{
  font-family:var(--font-heading); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-teal-light); padding:20px 4px 6px;
}
.mobile-drawer .drawer-sublist a{
  font-size:18px; padding-left:16px; color:rgba(244,251,252,.85);
}

.header-actions{ display:flex; align-items:center; gap:var(--space-3); }
.lang-toggle{
  display:flex; align-items:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-full); padding:3px; gap:2px;
}
.lang-toggle button{
  border:none; background:transparent; color:rgba(244,251,252,.6);
  font-family:var(--font-heading); font-size:12px; font-weight:700; letter-spacing:.04em;
  padding:6px 10px; border-radius:var(--radius-full); transition:all var(--dur-base) var(--ease-out);
}
.lang-toggle button.active{ background:var(--color-teal); color:var(--color-on-teal); }

.phone-pill{
  display:none; align-items:center; gap:8px;
  font-family:var(--font-heading); font-weight:600; font-size:14px; color:#fff;
}
.phone-pill svg{ width:16px; height:16px; color:var(--color-teal-light); }

.nav-toggle{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  color:#fff;
}
.nav-toggle svg{ width:20px; height:20px; }
.nav-toggle .icon-close{ display:none; }
.nav-toggle.open .icon-menu{ display:none; }
.nav-toggle.open .icon-close{ display:block; }

@media (min-width:1040px){
  .main-nav{ display:block; }
  .nav-toggle{ display:none; }
  .phone-pill{ display:inline-flex; }
}

/* mobile drawer */
.mobile-drawer{
  position:fixed; inset:0; z-index:99;
  background:var(--color-ink);
  display:flex; flex-direction:column;
  padding:100px var(--space-5) var(--space-6);
  transform:translateY(-8px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.mobile-drawer.open{ opacity:1; transform:translateY(0); visibility:visible; pointer-events:auto; }
.mobile-drawer ul{ display:flex; flex-direction:column; gap:2px; }
.mobile-drawer a{
  display:block; padding:16px 4px; font-family:var(--font-heading); font-size:24px; font-weight:600;
  color:#fff; border-bottom:1px solid rgba(255,255,255,.08);
}
.mobile-drawer .drawer-footer{ margin-top:auto; display:flex; flex-direction:column; gap:var(--space-4); padding-top:var(--space-6); }
.mobile-drawer .drawer-contact{ color:var(--color-teal-light); font-family:var(--font-heading); font-size:17px; font-weight:600; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  background:radial-gradient(120% 100% at 15% 0%, #16323b 0%, var(--color-ink) 46%, #060d11 100%);
  color:#fff;
  overflow:hidden;
  padding-top:120px;
  padding-bottom:200px;
}
.hero-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(600px 400px at 82% 18%, rgba(51,185,206,.35), transparent 60%),
    radial-gradient(500px 380px at 100% 90%, rgba(240,178,61,.14), transparent 60%);
  filter:blur(10px);
}
.hero-bg-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:1;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 85%);
}
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(6,13,17,.92) 0%, rgba(6,13,17,.68) 38%, rgba(6,13,17,.3) 62%, rgba(6,13,17,.05) 85%);
  pointer-events:none;
}
.hero .container{ position:relative; z-index:2; display:grid; gap:var(--space-8); }
.hero-copy{ max-width:640px; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:var(--space-5); }
.hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  padding:8px 14px; border-radius:var(--radius-full);
  font-size:13px; font-weight:500; color:rgba(244,251,252,.85);
  backdrop-filter:blur(6px);
}
.hero-badge svg{ width:15px; height:15px; color:var(--color-teal-light); }
.hero h1{
  font-size:clamp(38px,6.4vw,68px);
  color:#fff;
  font-weight:700;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg, var(--color-teal-light), var(--color-teal) 55%, var(--color-teal-dark));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-copy p{
  margin-top:var(--space-5);
  font-size:18px;
  color:rgba(244,251,252,.72);
  max-width:520px;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:var(--space-7); }

.hero-stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--space-5);
  margin-top:var(--space-9);
  padding-top:var(--space-6);
  border-top:1px solid rgba(255,255,255,.12);
  max-width:640px;
}
.hero-stat strong{
  display:block; font-family:var(--font-heading); font-size:clamp(24px,3.4vw,34px); font-weight:700; color:#fff;
}
.hero-stat span{ font-size:13px; color:rgba(244,251,252,.6); }

.scroll-cue{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:rgba(244,251,252,.5); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  z-index:2;
}
.scroll-cue .line{ width:1px; height:34px; background:linear-gradient(rgba(244,251,252,.6), transparent); animation:cue-move 2s ease-in-out infinite; }
@keyframes cue-move{ 0%,100%{ transform:scaleY(1); opacity:.6; } 50%{ transform:scaleY(.5); opacity:1; } }

.hero-fade{
  position:absolute; left:0; right:0; bottom:0; height:180px;
  background:linear-gradient(to bottom, transparent, var(--color-surface));
  pointer-events:none;
  z-index:1;
}

/* ---------- Trust / logos strip ---------- */
.trust-strip{
  background:var(--color-surface);
  border-bottom:1px solid var(--color-border);
  padding-block:var(--space-6);
}
.trust-strip .container{
  display:grid; gap:var(--space-6);
  grid-template-columns:repeat(2,1fr);
  text-align:center;
}
.trust-item{ display:flex; flex-direction:column; gap:4px; }
.trust-item strong{ font-family:var(--font-heading); font-size:26px; color:var(--color-ink); }
.trust-item span{ font-size:12.5px; color:var(--color-text-soft); letter-spacing:.03em; }
@media (min-width:640px){ .trust-strip .container{ grid-template-columns:repeat(4,1fr); } }

/* ---------- Services ---------- */
.services-grid{
  display:grid; gap:var(--space-5);
  grid-template-columns:1fr;
}
@media (min-width:640px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .services-grid{ grid-template-columns:repeat(3,1fr); } }

.card-service{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-6);
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  display:flex; flex-direction:column; height:100%;
}
.card-service:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.service-icon{
  width:52px; height:52px; border-radius:var(--radius-md);
  background:var(--color-teal-pale); color:var(--color-teal-dark);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:var(--space-5);
  transition:background var(--dur-base), color var(--dur-base), transform var(--dur-base);
}
.service-icon svg{ width:26px; height:26px; }
.card-service:hover .service-icon{ background:var(--color-teal); color:var(--color-on-teal); transform:scale(1.06) rotate(-4deg); }
.card-service h3{ font-size:19px; margin-bottom:8px; }
.card-service p{ color:var(--color-text-muted); font-size:14.5px; flex:1; }
.card-service .price-tag{
  margin-top:var(--space-5); display:flex; align-items:center; justify-content:space-between;
  padding-top:var(--space-4); border-top:1px dashed var(--color-border);
}
.price-tag .price{ font-family:var(--font-heading); font-weight:700; color:var(--color-ink); }
.price-tag .price small{ font-weight:500; color:var(--color-text-soft); font-size:12px; }
.price-tag a{ font-size:13px; font-weight:600; color:var(--color-teal-dark); display:inline-flex; align-items:center; gap:4px; }
.price-tag a svg{ width:14px; height:14px; transition:transform var(--dur-base) var(--ease-out); }
.price-tag a:hover svg{ transform:translateX(3px); }

/* ---------- Process ---------- */
.process-dark{
  background:var(--color-ink);
  color:#fff;
}
.process-dark .section-head h2{ color:#fff; }
.process-dark .section-head p{ color:rgba(244,251,252,.6); }
.process-steps{
  display:grid; gap:var(--space-6);
  grid-template-columns:1fr;
  counter-reset:step;
}
@media (min-width:900px){ .process-steps{ grid-template-columns:repeat(4,1fr); } }
.process-step{ position:relative; padding-top:var(--space-6); }
.process-step .num{
  font-family:var(--font-heading); font-size:46px; font-weight:700;
  background:linear-gradient(180deg, var(--color-teal-light), rgba(159,227,236,.15));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display:block; margin-bottom:var(--space-3);
}
.process-step h3{ color:#fff; font-size:17px; margin-bottom:8px; }
.process-step p{ color:rgba(244,251,252,.58); font-size:14.5px; }
.process-step:not(:last-child)::after{
  content:""; position:absolute; top:34px; left:calc(100% - 8px); width:calc(var(--space-6) + 16px);
  height:1px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 6px, transparent 6px 12px);
  display:none;
}
@media (min-width:900px){ .process-step:not(:last-child)::after{ display:block; } }

/* ---------- Before / After ---------- */
.ba-shell{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:16/10;
  box-shadow:var(--shadow-lg);
  max-width:880px;
  margin-inline:auto;
  touch-action:pan-y;
  user-select:none;
}
.ba-panel{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.ba-after{ background:linear-gradient(135deg,#0e2c33,#0a171c 60%); }
.ba-before{ background:linear-gradient(135deg,#3a4247,#2a3134 60%); }
.ba-before-wrap{ position:absolute; inset:0; overflow:hidden; }
.ba-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba-label{
  position:absolute; top:16px; font-family:var(--font-heading); font-size:12px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:7px 14px; border-radius:var(--radius-full);
  background:rgba(0,0,0,.4); color:#fff; backdrop-filter:blur(6px);
}
.ba-label.before{ left:16px; }
.ba-label.after{ right:16px; background:rgba(51,185,206,.28); }
.ba-handle{
  position:absolute; top:0; bottom:0; left:50%;
  width:0; display:flex; align-items:center; justify-content:center;
  transform:translateX(-50%);
}
.ba-handle::before{
  content:""; position:absolute; top:0; bottom:0; left:0; width:2px; background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.25);
}
.ba-grip{
  width:44px; height:44px; border-radius:50%; background:#fff; color:var(--color-ink);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md);
  pointer-events:none;
}
.ba-grip svg{ width:20px; height:20px; }
.ba-slider-input{
  position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize;
}
.ba-caption{ text-align:center; margin-top:var(--space-4); color:var(--color-text-soft); font-size:13px; }

/* ---------- Pricing ---------- */
.pricing-toggle-wrap{ display:flex; justify-content:center; margin-bottom:var(--space-8); }
.pricing-tiers{
  display:grid; gap:var(--space-5);
  grid-template-columns:1fr;
  align-items:stretch;
}
@media (min-width:900px){ .pricing-tiers{ grid-template-columns:repeat(3,1fr); } }
.tier-card{
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:var(--space-6); display:flex; flex-direction:column;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.tier-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.tier-card.featured{
  background:var(--color-ink); color:#fff; border-color:transparent;
  box-shadow:var(--shadow-lg); position:relative; transform:scale(1.02);
}
.tier-card.featured h3, .tier-card.featured .tier-desc{ color:#fff; }
.tier-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--color-teal); color:var(--color-on-teal); font-family:var(--font-heading);
  font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 16px; border-radius:var(--radius-full); box-shadow:var(--shadow-sm);
}
.tier-name{ font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--color-teal-dark); }
.tier-card.featured .tier-name{ color:var(--color-teal-light); }
.tier-card h3{ font-size:26px; margin-top:6px; }
.tier-desc{ color:var(--color-text-muted); font-size:14px; margin-top:8px; }
.tier-price{ margin-top:var(--space-5); display:flex; align-items:baseline; gap:6px; }
.tier-price .amount{ font-family:var(--font-heading); font-size:40px; font-weight:700; }
.tier-price .from{ font-size:13px; color:var(--color-text-soft); }
.tier-card.featured .tier-price .from{ color:rgba(244,251,252,.55); }
.tier-list{ margin-top:var(--space-6); display:flex; flex-direction:column; gap:12px; flex:1; }
.tier-list li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; }
.tier-list svg{ width:18px; height:18px; flex:none; color:var(--color-teal); margin-top:2px; }
.tier-card.featured .tier-list svg{ color:var(--color-teal-light); }
.tier-card .btn{ margin-top:var(--space-6); }

.price-list{
  margin-top:var(--space-9);
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  overflow:hidden;
}
.price-row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding:18px var(--space-6); border-bottom:1px solid var(--color-border);
  transition:background var(--dur-fast) var(--ease-out);
}
.price-row:last-child{ border-bottom:none; }
.price-row:hover{ background:var(--color-teal-pale); }
.price-row .name{ font-weight:600; color:var(--color-ink); font-size:15px; }
.price-row .desc{ color:var(--color-text-soft); font-size:13px; margin-top:2px; }
.price-row .amount{ font-family:var(--font-heading); font-weight:700; white-space:nowrap; }

/* ---------- Gallery ---------- */
.gallery-grid{
  display:grid; gap:var(--space-4);
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:768px){ .gallery-grid{ grid-template-columns:repeat(4,1fr); grid-auto-rows:160px; } }
.gallery-tile{
  position:relative; border-radius:var(--radius-md); overflow:hidden;
  display:flex; align-items:flex-end;
  min-height:160px;
  isolation:isolate;
}
.gallery-tile img, .gallery-tile .tile-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-out); }
.gallery-tile:hover img, .gallery-tile:hover .tile-bg{ transform:scale(1.08); }
.gallery-tile::after{
  content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(6,13,17,.75), transparent 55%); z-index:1;
}
.gallery-tile .tag{
  position:relative; z-index:2; color:#fff; font-family:var(--font-heading); font-size:13px; font-weight:600; padding:14px;
}
@media (min-width:768px){
  .gallery-tile:nth-child(1){ grid-column:span 2; grid-row:span 2; }
  .gallery-tile:nth-child(4){ grid-column:span 2; }
}

/* ---------- Service detail sections (tinting / chiptuning / tires) ---------- */
.service-detail-grid{
  display:grid; gap:var(--space-6);
  grid-template-columns:1fr;
  margin-bottom:var(--space-8);
}
@media (min-width:900px){ .service-detail-grid{ grid-template-columns:repeat(3,1fr); } }
.detail-card{
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:var(--space-6);
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.detail-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.detail-card .service-icon{ margin-bottom:var(--space-4); }
.detail-card h3{ font-size:17px; margin-bottom:8px; }
.detail-card p{ color:var(--color-text-muted); font-size:14.5px; }

.detail-note{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--color-teal-pale); border:1px solid rgba(51,185,206,.25);
  border-radius:var(--radius-md); padding:16px 18px; margin-top:var(--space-6);
  font-size:13.5px; color:var(--color-text-muted); max-width:880px; margin-inline:auto;
}
.detail-note svg{ width:20px; height:20px; flex:none; color:var(--color-teal-dark); margin-top:1px; }

.section-cta{ display:flex; justify-content:center; margin-top:var(--space-6); }

/* ---------- Why us ---------- */
.why-grid{ display:grid; gap:var(--space-6); grid-template-columns:1fr; }
@media (min-width:768px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
.why-item{ display:flex; gap:var(--space-4); }
.why-icon{
  width:48px; height:48px; border-radius:var(--radius-md); background:var(--color-teal-pale); color:var(--color-teal-dark);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.why-icon svg{ width:24px; height:24px; }
.why-item h3{ font-size:17px; margin-bottom:6px; }
.why-item p{ color:var(--color-text-muted); font-size:14.5px; }

/* ---------- Testimonials ---------- */
.testi-wrap{ position:relative; max-width:720px; margin-inline:auto; }
.testi-track{ position:relative; min-height:260px; }
.testi-card{
  position:absolute; inset:0;
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:var(--space-7); text-align:center;
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.testi-card.active{ opacity:1; transform:translateY(0); pointer-events:auto; position:relative; }
.testi-stars{ display:flex; justify-content:center; gap:4px; margin-bottom:var(--space-4); }
.testi-stars svg{ width:18px; height:18px; color:var(--color-gold); }
.testi-quote{ font-family:var(--font-heading); font-size:19px; color:var(--color-ink); line-height:1.5; }
.testi-person{ margin-top:var(--space-5); display:flex; align-items:center; justify-content:center; gap:10px; }
.testi-avatar{
  width:38px; height:38px; border-radius:50%; background:var(--color-teal); color:var(--color-on-teal);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-weight:700; font-size:14px;
}
.testi-person strong{ display:block; font-size:14px; }
.testi-person span{ display:block; font-size:12.5px; color:var(--color-text-soft); }
.testi-dots{ display:flex; justify-content:center; gap:8px; margin-top:var(--space-6); }
.testi-dot{ width:9px; height:9px; border-radius:50%; background:var(--color-border); border:none; padding:0; transition:background var(--dur-base), width var(--dur-base); }
.testi-dot.active{ background:var(--color-teal); width:26px; border-radius:6px; }

/* ---------- FAQ ---------- */
.faq-list{ max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden;
}
.faq-item summary{
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding:20px var(--space-5); font-family:var(--font-heading); font-weight:600; font-size:15.5px; color:var(--color-ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item .icon-plus{ width:22px; height:22px; flex:none; color:var(--color-teal-dark); transition:transform var(--dur-base) var(--ease-out); }
.faq-item[open] .icon-plus{ transform:rotate(45deg); }
.faq-body{ padding:0 var(--space-5) 20px; color:var(--color-text-muted); font-size:14.5px; max-width:640px; }

/* ---------- Contact / Booking ---------- */
.contact-grid{
  display:grid; gap:var(--space-7);
  grid-template-columns:1fr;
}
@media (min-width:960px){ .contact-grid{ grid-template-columns:1.1fr .9fr; } }

.booking-form{
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:var(--space-7); box-shadow:var(--shadow-md);
}
.form-row{ display:grid; gap:var(--space-4); grid-template-columns:1fr; margin-bottom:var(--space-4); }
@media (min-width:560px){ .form-row.two{ grid-template-columns:1fr 1fr; } }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--color-ink); margin-bottom:6px; }
.field .req{ color:var(--color-danger); }
.field input, .field select, .field textarea{
  width:100%; border:1.5px solid var(--color-border); border-radius:var(--radius-sm);
  padding:13px 14px; font-family:var(--font-body); font-size:15px; color:var(--color-text);
  background:var(--color-bg); transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  min-height:48px;
}
.field textarea{ min-height:110px; resize:vertical; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:#c6d3d7; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--color-teal); box-shadow:0 0 0 4px rgba(51,185,206,.16);
}
.field-hint{ font-size:12px; color:var(--color-text-soft); margin-top:6px; }
.consent-row{ display:flex; align-items:flex-start; gap:10px; margin-bottom:var(--space-5); }
.consent-row input{ margin-top:3px; width:18px; height:18px; accent-color:var(--color-teal); flex:none; }
.consent-row label{ font-size:13px; color:var(--color-text-muted); }
.form-success{
  display:none; align-items:center; gap:12px; padding:16px 18px; border-radius:var(--radius-md);
  background:#EAFBF2; border:1px solid #BFEFD5; color:#116B41; font-size:14px; font-weight:500; margin-top:var(--space-4);
}
.form-success.show{ display:flex; }
.form-success svg{ width:22px; height:22px; flex:none; }
.form-error{
  display:none; align-items:flex-start; gap:12px; padding:16px 18px; border-radius:var(--radius-md);
  background:#FDECEC; border:1px solid #F5C2C2; color:#8A1F1F; font-size:14px; font-weight:500; margin-top:var(--space-4);
}
.form-error.show{ display:flex; }
.form-error svg{ width:22px; height:22px; flex:none; margin-top:1px; }
.form-error a{ text-decoration:underline; font-weight:600; }
.hp-field{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }

.contact-info{ display:flex; flex-direction:column; gap:var(--space-5); }
.info-card{
  background:var(--color-ink); color:#fff; border-radius:var(--radius-lg); padding:var(--space-6);
  display:flex; flex-direction:column; gap:var(--space-5);
}
.info-row{ display:flex; gap:14px; align-items:flex-start; }
.info-row .ic{
  width:42px; height:42px; border-radius:var(--radius-sm); background:rgba(51,185,206,.16); color:var(--color-teal-light);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.info-row .ic svg{ width:20px; height:20px; }
.info-row strong{ display:block; font-size:14px; color:#fff; margin-bottom:2px; }
.info-row span, .info-row a{ font-size:13.5px; color:rgba(244,251,252,.65); }
.info-row a:hover{ color:var(--color-teal-light); }
.hours-table{ width:100%; border-collapse:collapse; margin-top:2px; }
.hours-table td{ padding:3px 0; font-size:13.5px; color:rgba(244,251,252,.72); }
.hours-table td:last-child{ text-align:right; font-weight:600; color:#fff; }
.hours-table tr.closed td:last-child{ color:rgba(244,251,252,.4); }

.map-embed{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--color-border); box-shadow:var(--shadow-sm); }
.map-embed iframe{ width:100%; height:220px; border:0; display:block; }

/* ---------- Footer ---------- */
.site-footer{ background:#081117; color:rgba(244,251,252,.6); padding-block:var(--space-8) var(--space-6); }
.footer-top{ display:grid; gap:var(--space-7); grid-template-columns:1fr; padding-bottom:var(--space-7); border-bottom:1px solid rgba(255,255,255,.08); }
@media (min-width:840px){ .footer-top{ grid-template-columns:1.3fr 1fr 1fr 1fr; } }
.footer-brand img{ height:26px; margin-bottom:var(--space-4); }
.footer-brand p{ font-size:13.5px; max-width:280px; color:rgba(244,251,252,.5); }
.footer-social{ display:flex; gap:10px; margin-top:var(--space-5); }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; transition:all var(--dur-base) var(--ease-out);
}
.footer-social a:hover{ background:var(--color-teal); border-color:var(--color-teal); color:var(--color-on-teal); }
.footer-social svg{ width:16px; height:16px; }
.footer-col h4{ color:#fff; font-family:var(--font-heading); font-size:13.5px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:var(--space-4); }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:14px; transition:color var(--dur-base) var(--ease-out); }
.footer-col a:hover{ color:var(--color-teal-light); }
.footer-bottom{ display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:space-between; padding-top:var(--space-6); font-size:12.5px; }
.footer-bottom a:hover{ color:var(--color-teal-light); }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:flex; gap:10px; padding:12px var(--space-5);
  background:rgba(11,22,29,.92); backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.1);
  transform:translateY(0); transition:transform var(--dur-base) var(--ease-out);
}
.sticky-cta.hide{ transform:translateY(110%); }
.sticky-cta .btn{ flex:1; }
@media (min-width:1040px){ .sticky-cta{ display:none; } }

/* ---------- Reveal animation base state ---------- */
[data-reveal]{ opacity:1; }
.js-anim [data-reveal]{ opacity:0; }

/* ---------- misc ---------- */
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:var(--radius-full);
  border:1.5px solid var(--color-border); font-size:13.5px; font-weight:600; color:var(--color-text-muted);
  transition:all var(--dur-base) var(--ease-out);
}
.chip.active{ background:var(--color-ink); color:#fff; border-color:var(--color-ink); }

.badge-danish{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--color-text-soft);
}
.badge-danish svg{ width:14px; height:14px; }

.skip-link{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--color-teal); color:var(--color-on-teal); padding:12px 18px; border-radius:var(--radius-sm);
  font-weight:600; transition:top var(--dur-base) var(--ease-out);
}
.skip-link:focus{ top:12px; }