@import url('/css/variables.css');

/* Hero */
.services-hero { position: relative; min-height: 100vh; display: grid; align-items: end; margin-top: -120px; padding-top: 120px; }
.services-hero .hero-bg { position:absolute; inset:0; background: center/cover no-repeat; }
.services-hero .hero-bg::after { content:''; position:absolute; inset:0; background: url('/images/berlin-hero.jpg') center/cover no-repeat; /* REPLACE */ }
.services-hero .hero-overlay { position:absolute; inset:0; background: linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.55)); }
.tabs-wrap { position: relative; z-index: 2; width: 100%; padding-top: 12vh; display:grid; place-items:center; }
.tabs-box { position: relative; }
.tabs { display:flex; gap: 22px; overflow-x: auto; padding: 8px 12px; }
.tab { appearance:none; border:1px solid rgba(255,255,255,.7); color:#fff; background: rgba(255,255,255,.12); padding: 16px 26px; border-radius: 9999px; font-weight:500; cursor:pointer; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); font-size: 1.05rem; }
.tab.is-active { background:#fff; color:#000; }
.tab:focus-visible { outline: 3px solid rgba(255,255,255,.7); }

/* Moving chevron indicator */
.tab-indicator { position:absolute; top: -20px; left: 0; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 12px solid rgba(255,255,255,.95); filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); transition: transform 250ms ease; will-change: transform; }

/* Frosted panel */
.service-panel { position: relative; z-index: 2; width: min(1200px, 92%); margin: 18px auto 10vh; background: rgba(255,255,255,.24); border: 1px solid rgba(255,255,255,.45); border-radius: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.28); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: opacity 320ms cubic-bezier(.2,.6,.2,1), transform 360ms cubic-bezier(.2,.6,.2,1), box-shadow 360ms cubic-bezier(.2,.6,.2,1); transform-style: preserve-3d; will-change: transform, box-shadow; }
.service-panel::after { content:''; position:absolute; inset:0; border-radius: 22px; background: radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%); pointer-events:none; }
.service-panel.is-swapping { opacity: 0; transform: translateY(10px) scale(.997); }
.panel-inner { display:grid; grid-template-columns: 1.2fr .8fr; gap: 28px; padding: 36px; align-items: center; }
.panel-copy { display: grid; gap: 30px; }
.service-panel.is-swapping .panel-copy, .service-panel.is-swapping .panel-media { opacity: 0; transform: translateY(8px); }
.panel-copy, .panel-media { transition: opacity 320ms cubic-bezier(.2,.6,.2,1), transform 360ms cubic-bezier(.2,.6,.2,1); }
.panel-title { font-family: var(--font-sans); font-weight: 400; color:#fff; font-size: clamp(30px, 3.5vw, 42px); margin: 0; letter-spacing:.1px; }
.panel-copy p { color:#fff; line-height: 1.75; margin: 0; opacity:.95; max-width: 56ch; }
.btn-outline { display:inline-flex; align-items:center; justify-content:center; padding: 10px 80px; border-radius: 10px; border: 1px solid rgba(255,255,255,.95); color:#fff; text-decoration:none; transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); box-shadow: 0 6px 18px rgba(0,0,0,.12); font-size: 1rem; font-weight: 500; text-align:center; width: max-content; margin-top: 10px;}
.btn-outline:hover { background:#fff; color:#000; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.panel-media { position:relative; width:100%; height: 320px; border-radius: 16px; background: #cbd5e1 center/cover no-repeat; overflow:hidden; }
.panel-media::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,0) 35%); pointer-events:none; }

/* Contact */
.services-contact { background:#f6f7f9; padding: 80px 0 60px; }
.services-contact .section-title { text-align:center; font-family: 'Playfair Display', serif; font-size: clamp(24px,2.6vw,34px); margin: 0 0 65px 0; font-weight: 400;}
.contact-grid { width:min(800px,92%); margin:0 auto; display:grid; grid-template-columns: 1fr; gap: 20px; align-items:start; }
.contact-media .team-img { width:100%; aspect-ratio: 4/3; border-radius:14px; background: #cbd5e1 center/cover no-repeat; box-shadow: var(--shadow-md); }
.contact-media figcaption { text-align:center; color: var(--gray-600); margin-top: 10px; }
.contact-form { background: transparent; padding: 18px; border-radius: 16px; box-shadow: none; display:grid; gap: 12px; }
.contact-form .row-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-form .field { display:grid; gap:6px; }
.contact-form label { color: var(--gray-700); font-size:.95rem; }
.contact-form input, .contact-form textarea { border:1px solid var(--gray-300); border-radius: 12px; padding: 12px 14px; font-size: 1rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); background: transparent; color: var(--gray-800); }
.contact-form select { border:1px solid var(--gray-300); border-radius: 12px; padding: 12px 42px 12px 14px; font-size: 1rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); background: transparent; color: var(--gray-800); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--gray-500); }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline:none; border-color: var(--gray-500); box-shadow: 0 0 0 3px rgba(100,116,139,.18); }
.contact-form .error { min-height: 16px; font-size: .85rem; color: var(--error-color); }
.btn-submit { height: 48px; border-radius: 9999px; border:0; background: var(--brand-green); color:#fff; font-weight:700; cursor:pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); }
.btn-submit:hover { background: var(--brand-green-dark); box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* Toast notification */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; background: var(--brand-green); color:#fff; padding: 12px 14px; border-radius: 10px; box-shadow: var(--shadow-md); transition: opacity 250ms ease, transform 250ms ease; z-index: 2000; pointer-events: none; font-weight: 600; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--error-color); }

@media (max-width: 900px) {
  .panel-inner { grid-template-columns: 1fr; }
  .panel-media { height: 220px; }
  .contact-grid { grid-template-columns: 1fr; width: min(100%, 560px); }
}

/* Add extra breathing room below the fixed header on tablets/phones */
@media (max-width: 1024px) {
  .services-hero { padding-top: 160px; margin-top: -110px; }
}
@media (max-width: 768px) {
  .services-hero { padding-top: 190px; margin-top: -100px; }
}

/* Desktop-only: extra presence */
@media (min-width: 1025px) {
  .service-panel { min-height: 384px; display: grid; align-items: center; width: min(900px, 90%); }
  /* tighten inner spacing on desktop to reduce blank space */
  .panel-inner { padding: 28px 28px; gap: 65px; }
  /* hover/elevation state */
  .service-panel:hover { box-shadow: 0 28px 70px rgba(0,0,0,.34); }
}