/* Portali — original prototype styles (1:1) */
:root {
  --ink:#050505;
  --paper:#ffffff;
  --mist:#eefaff;
  --aqua:#30d7d2;
  --blue:#0a78c8;
  --line:#d9e4e8;
  --muted:#667077;
  --radius:999px;
  --max:1440px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:#3f3f3f;
  color:var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
button, input, textarea { font:inherit; }
img { max-width:100%; display:block; }

.site {
  width:min(100%, var(--max));
  margin:0 auto;
  background:var(--paper);
  overflow:hidden;
}

.nav {
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:0px 34px;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(0,0,0,.08);
  backdrop-filter:blur(14px);
}
.brand {
  display:flex;
  align-items:center;
  gap:14px;
  min-width:150px;
}
.brand img {
  width:132px;
  height:auto;
}
.nav-links {
  display:flex;
  gap:24px;
  align-items:center;
  font-size:14px;
}
.nav-actions {
  display:flex;
  gap:10px;
  align-items:center;
}
.lang-switch {
  display:inline-flex;
  border:1px solid var(--ink);
  border-radius:999px;
  overflow:hidden;
}
.lang-switch button {
  border:0;
  background:transparent;
  padding:8px 11px;
  cursor:pointer;
  font-size:12px;
  font-weight:700;
}
.lang-switch button.active {
  background:var(--ink);
  color:white;
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:42px;
  padding:0 18px;
  border:1.5px solid currentColor;
  border-radius:var(--radius);
  font-size:14px;
  font-weight:700;
  transition:.2s ease;
  cursor:pointer;
  background:transparent;
}
.btn:hover {
  transform:translateY(-2px);
}
.btn.dark {
  background:var(--ink);
  color:white;
  border-color:var(--ink);
}
.btn.light {
  color:white;
  border-color:white;
}

.section {
  padding:86px 52px;
}

.hero {
  min-height:650px;
  background:linear-gradient(135deg, #dff8fb 0%, #c8f2f4 58%, #d7f8ef 100%);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:74px 52px 48px;
}
.hero-top {
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:44px;
  align-items:end;
}
.display {
  margin:0;
  font-size:clamp(66px, 8.2vw, 132px);
  letter-spacing:-.07em;
  line-height:.83;
  font-weight:900;
  max-width:920px;
}
.hero-copy {
  max-width:450px;
  padding-bottom:10px;
}
.hero-copy p {
  font-size:22px;
  line-height:1.35;
  margin:0 0 28px;
}
.eyebrow {
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:700;
  margin-bottom:18px;
}
.ticker {
  border-top:1px solid rgba(0,0,0,.22);
  padding-top:24px;
  font-size:20px;
  font-weight:700;
  letter-spacing:-.02em;
  white-space:nowrap;
  overflow:hidden;
}

.headline {
  font-size:clamp(56px, 7vw, 104px);
  line-height:.88;
  letter-spacing:-.065em;
  margin:0;
  font-weight:900;
}
.subcopy {
  max-width:660px;
  font-size:20px;
  line-height:1.45;
  color:#252525;
  margin:26px 0 42px;
}
.section-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:54px;
}

.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.card {
  border-top:1px solid var(--ink);
  padding-top:14px;
}
.card-visual {
  height:260px;
  margin:16px 0 18px;
  position:relative;
  overflow:hidden;
  background:#e8eef0;
}
.card-visual.one {
  background:
    radial-gradient(circle at 70% 28%, var(--aqua) 0 18%, transparent 19%),
    linear-gradient(135deg, #101010 0 48%, #dfeff2 49% 100%);
}
.card-visual.two {
  background:
    linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,.45) 36% 45%, transparent 46%),
    linear-gradient(135deg, #30d7d2, #0b78c9);
}
.card-visual.three {
  background:
    radial-gradient(circle at 50% 50%, #090909 0 22%, transparent 23%),
    linear-gradient(135deg,#f2f2f2,#bcc6ca);
}
.card h3 { font-size:23px; margin:0 0 10px; }
.card p { line-height:1.5; color:#40474c; margin:0 0 14px; }
.text-link {
  font-size:14px;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:4px;
}

.dark-section {
  background:var(--ink);
  color:white;
}
.dark-section .headline { color:var(--aqua); }
.dark-section .subcopy { color:#d0d0d0; }

.accordion {
  border-top:1px solid #3c3c3c;
}
.acc-item {
  border-bottom:1px solid #3c3c3c;
}
.acc-trigger {
  width:100%;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  padding:21px 0;
  background:none;
  color:white;
  border:0;
  cursor:pointer;
  text-align:left;
  font-size:20px;
}
.acc-trigger span:last-child {
  font-size:30px;
  font-weight:300;
  transition:.2s ease;
}
.acc-item.open .acc-trigger span:last-child {
  transform:rotate(45deg);
}
.acc-content {
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
  color:#c5c5c5;
}
.acc-content-inner {
  padding:0 0 24px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px 30px;
  font-size:15px;
  line-height:1.55;
}

.approach {
  background:var(--mist);
}
.steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:#b9d9de;
  border:1px solid #b9d9de;
  margin-top:44px;
}
.step {
  background:var(--mist);
  min-height:250px;
  padding:28px;
}
.step .num { font-size:12px; letter-spacing:.12em; margin-bottom:70px; }
.step h3 { font-size:27px; margin:0 0 12px; }
.step p { color:#405057; line-height:1.45; }

.work-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px 18px;
}
.work-card .thumb {
  height:300px;
  margin-bottom:16px;
  overflow:hidden;
  background:#ddd;
}
.work-card:nth-child(1) .thumb { background:linear-gradient(135deg,#081d2c,#0c77c7); }
.work-card:nth-child(2) .thumb { background:linear-gradient(135deg,#dfeef0,#55d7d4); }
.work-card:nth-child(3) .thumb { background:linear-gradient(135deg,#151515,#8f8f8f); }
.work-card:nth-child(4) .thumb { background:linear-gradient(135deg,#f0ede8,#ab805d); }
.work-card:nth-child(5) .thumb { background:linear-gradient(135deg,#e6e6e6,#161616); }
.work-card:nth-child(6) .thumb { background:linear-gradient(135deg,#0b78c8,#9fe3e0); }
.work-card h4 {
  font-size:22px;
  margin:0 0 7px;
}
.work-card p {
  color:#676767;
  margin:0 0 10px;
  font-size:14px;
}

.why-grid {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:64px;
  margin-top:50px;
}
.big-statement {
  font-size:clamp(38px, 4.7vw, 74px);
  line-height:.97;
  letter-spacing:-.05em;
  font-weight:800;
  margin:0;
}
.why-list {
  border-top:1px solid #3c3c3c;
}
.why-row {
  padding:20px 0;
  border-bottom:1px solid #3c3c3c;
}
.why-row strong { display:block; margin-bottom:7px; }
.why-row p { margin:0; color:#c0c0c0; line-height:1.45; }

.industries {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:38px;
}
.pill {
  border:1px solid var(--ink);
  border-radius:999px;
  padding:11px 15px;
  font-size:14px;
}

.international {
  background:linear-gradient(135deg, #c9f6f1, #dff9ff);
}
.market-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(0,0,0,.2);
  margin-top:42px;
}
.market-item {
  padding:22px 24px 22px 0;
  border-right:1px solid rgba(0,0,0,.15);
}
.market-item:last-child { border-right:0; }
.market-item h4 { font-size:20px; margin:0 0 10px; }
.market-item p { color:#35464c; line-height:1.45; margin:0; }

.cta {
  min-height:560px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:var(--ink);
  color:white;
}
.cta .headline { color:var(--aqua); max-width:900px; }
.cta-bottom {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
}
.cta-bottom p {
  font-size:20px;
  max-width:520px;
  color:#d7d7d7;
  line-height:1.45;
}

.contact-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:70px;
}
.form {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.field {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.field.full { grid-column:1/-1; }
label { font-size:13px; font-weight:700; }
input, textarea, select {
  border:0;
  border-bottom:1px solid var(--ink);
  padding:12px 0;
  outline:none;
  background:transparent;
}
textarea { min-height:120px; resize:vertical; }
.checks {
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:5px 0;
}
.check-pill {
  border:1px solid #bbb;
  padding:9px 12px;
  border-radius:999px;
  font-size:13px;
}

footer {
  background:#0a0a0a;
  color:white;
  padding:46px 52px 28px;
}
.footer-top {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:start;
}
.footer-logo {
  filter:brightness(0) invert(1);
  width:150px;
  margin-bottom:20px;
}
.footer-links {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  font-size:14px;
}
.footer-links div {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-top:40px;
  margin-top:40px;
  border-top:1px solid #333;
  color:#aaa;
  font-size:12px;
}

[data-lang] { display:none; }
[data-lang].show { display:block; }
.inline-lang[data-lang].show { display:inline; }

@media (max-width: 980px) {
  .nav-links { display:none; }
  .hero-top,
  .why-grid,
  .contact-grid {
    grid-template-columns:1fr;
  }
  .cards,
  .work-grid {
    grid-template-columns:1fr 1fr;
  }
  .steps,
  .market-grid {
    grid-template-columns:1fr 1fr;
  }
  .acc-content-inner {
    grid-template-columns:1fr 1fr;
  }
  .hero { min-height:560px; }
  .hero-copy { max-width:620px; }
}

@media (max-width: 680px) {
  .nav { padding:0px 18px; }
  .brand img { width:110px; }
  .nav-actions .btn { display:none; }
  .section,
  .hero,
  footer { padding-left:22px; padding-right:22px; }
  .hero { padding-top:54px; }
  .display { font-size:clamp(58px, 18vw, 86px); }
  .headline { font-size:clamp(50px, 15vw, 76px); }
  .cards,
  .work-grid,
  .steps,
  .market-grid,
  .acc-content-inner,
  .footer-top,
  .footer-links {
    grid-template-columns:1fr;
  }
  .card-visual,
  .work-card .thumb { height:235px; }
  .market-item {
    border-right:0;
    border-bottom:1px solid rgba(0,0,0,.15);
  }
  .cta-bottom,
  .section-head,
  .footer-bottom {
    flex-direction:column;
    align-items:flex-start;
  }
  .form { grid-template-columns:1fr; }
  .field.full { grid-column:1; }
  .checks { grid-column:1; }
}
  

/* =====================================================================
   Portali theme additions (WordPress) — the design above is untouched.
   ===================================================================== */

/* WordPress admin bar */
.admin-bar .nav { top:0px; }
@media (max-width: 782px) { .admin-bar .nav { top:46px; } }
@media (max-width: 600px) { .admin-bar .nav { top:0; } }

/* Original gradients repeat for projects 7, 8, 9… */
.work-card:nth-child(6n+1) .thumb { background:linear-gradient(135deg,#081d2c,#0c77c7); }
.work-card:nth-child(6n+2) .thumb { background:linear-gradient(135deg,#dfeef0,#55d7d4); }
.work-card:nth-child(6n+3) .thumb { background:linear-gradient(135deg,#151515,#8f8f8f); }
.work-card:nth-child(6n+4) .thumb { background:linear-gradient(135deg,#f0ede8,#ab805d); }
.work-card:nth-child(6n+5) .thumb { background:linear-gradient(135deg,#e6e6e6,#161616); }
.work-card:nth-child(6n+6) .thumb { background:linear-gradient(135deg,#0b78c8,#9fe3e0); }
.work-card .thumb[style] { background-size:cover !important; }

.footer-logo.custom { filter:none; }

/* Contact form: selectable interest pills + status */
.check-pill { position:relative; font-weight:400; cursor:pointer; user-select:none; transition:.15s ease; }
.check-pill input { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.check-pill:hover { border-color:var(--ink); }
.check-pill.on, .check-pill:has(input:checked) { background:var(--ink); border-color:var(--ink); color:#fff; }
.check-pill:has(input:focus-visible) { outline:2px solid var(--aqua); outline-offset:2px; }
.form-status { font-size:15px; line-height:1.45; min-height:0; }
.form-status:empty { display:none; }
.form-status.ok { color:#0a7a52; font-weight:700; }
.form-status.err { color:#c0262d; font-weight:700; }
.btn:disabled { opacity:.55; cursor:wait; transform:none; }
.pt-hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* Inner pages (privacy, terms…) */
.pt-page .headline { margin-bottom:40px; }
.pt-page-content { max-width:780px; font-size:17px; line-height:1.65; color:#252525; }
.pt-page-content a { text-decoration:underline; }

/* =====================================================================
   Booking popup
   ===================================================================== */
.pb-open, .pb-open body { overflow:hidden; }
.pb-modal { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:28px; opacity:0; transition:opacity .22s ease; }
.pb-modal[hidden] { display:none; }
.pb-modal.is-open { opacity:1; }
.pb-backdrop { position:absolute; inset:0; background:rgba(5,5,5,.66); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.pb-dialog { position:relative; width:min(1000px, 100%); max-height:calc(100vh - 56px); background:var(--paper); display:grid; grid-template-columns:320px 1fr; border-radius:22px; overflow:hidden; transform:translateY(16px) scale(.985); transition:transform .3s cubic-bezier(.2,.8,.2,1); outline:none; box-shadow:0 40px 100px rgba(0,0,0,.4); }
.pb-modal.is-open .pb-dialog { transform:none; }
.pb-close { position:absolute; top:18px; right:18px; z-index:3; width:38px; height:38px; border-radius:999px; border:1px solid var(--line); background:var(--paper); font-size:22px; line-height:1; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s ease; }
.pb-close:hover { background:var(--ink); border-color:var(--ink); color:#fff; transform:rotate(90deg); }

/* side */
.pb-side { position:relative; background:var(--ink); color:#fff; padding:28px 28px 26px; display:flex; flex-direction:column; gap:22px; overflow:hidden; }
.pb-side::before { content:''; position:absolute; width:360px; height:360px; right:-190px; bottom:-170px; border-radius:50%; background:radial-gradient(circle, rgba(48,215,210,.32), rgba(48,215,210,0) 68%); pointer-events:none; }
.pb-side-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pb-logo { width:104px; height:auto; filter:brightness(0) invert(1); }
.pb-lang { border-color:rgba(255,255,255,.55); }
.pb-lang button { color:#fff; padding:6px 10px; font-size:11px; }
.pb-lang button.active { background:#fff; color:var(--ink); }
.pb-side-body { display:flex; flex-direction:column; gap:14px; }
.pb-title { margin:6px 0 0; font-size:38px; line-height:.92; letter-spacing:-.055em; font-weight:900; color:var(--aqua); }
.pb-text { margin:0; font-size:14px; line-height:1.55; color:#c9cfd2; }
.pb-len { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.pb-len-label { font-size:11px; text-transform:uppercase; letter-spacing:.12em; font-weight:700; color:#8f989c; }
.pb-len-switch { display:grid; gap:6px; }
.pb-len-switch button { border:1px solid rgba(255,255,255,.22); background:transparent; color:#d6dbdd; border-radius:12px; padding:9px 4px 8px; cursor:pointer; font-family:inherit; font-size:11px; line-height:1.1; transition:.15s ease; }
.pb-len-switch button b { display:block; font-size:18px; letter-spacing:-.03em; color:#fff; margin-bottom:1px; }
.pb-len-switch button:hover { border-color:var(--aqua); }
.pb-len-switch button.active { background:var(--aqua); border-color:var(--aqua); color:var(--ink); }
.pb-len-switch button.active b { color:var(--ink); }
.pb-modal[data-step="2"] .pb-len, .pb-modal[data-step="3"] .pb-len { display:none; }
.pb-meta { list-style:none; margin:6px 0 0; padding:16px 0 0; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-direction:column; gap:12px; font-size:14px; font-weight:700; }
.pb-meta li, .pb-picked { display:flex; align-items:center; gap:11px; }
.pb-meta svg, .pb-picked svg { width:19px; height:19px; flex:0 0 19px; fill:none; stroke:var(--aqua); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.pb-side-foot { margin-top:auto; display:flex; flex-direction:column; gap:12px; position:relative; z-index:1; }
.pb-picked { align-items:flex-start; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:14px 15px; }
.pb-picked svg { margin-top:2px; }
.pb-picked strong { display:block; font-size:14px; margin-bottom:4px; }
.pb-picked span { font-size:13px; color:#bfc6c9; line-height:1.4; }
.pb-picked[hidden] { display:none; }
.pb-tz { display:flex; flex-direction:column; gap:8px; }
.pb-tz[hidden], .pb-modal[data-step="2"] .pb-tz, .pb-modal[data-step="3"] .pb-tz { display:none; }
.pb-tz-label { font-size:11px; text-transform:uppercase; letter-spacing:.12em; font-weight:700; color:#8f989c; }
.pb-tz-switch { display:grid; grid-template-columns:1fr 1fr; background:rgba(255,255,255,.08); border-radius:999px; padding:3px; }
.pb-tz-switch button { border:0; background:transparent; color:#d6dbdd; padding:8px 6px; border-radius:999px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; line-height:1.15; transition:.15s ease; }
.pb-tz-switch button small { display:block; font-weight:400; font-size:10px; opacity:.7; }
.pb-tz-switch button.active { background:#fff; color:var(--ink); }

/* main */
.pb-main { padding:26px 34px 28px; min-width:0; display:flex; flex-direction:column; overflow:auto; }
.pb-progress { list-style:none; margin:0 56px 26px 0; padding:0; display:flex; align-items:center; gap:10px; counter-reset:none; }
.pb-progress li { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:#9aa3a7; white-space:nowrap; }
.pb-progress li + li::before { content:''; width:26px; height:1px; background:var(--line); margin-right:2px; }
.pb-progress em { font-style:normal; }
.pb-progress b { width:24px; height:24px; border-radius:999px; border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; font-size:11px; }
.pb-modal[data-step="1"] .pb-progress li:nth-child(1),
.pb-modal[data-step="2"] .pb-progress li:nth-child(-n+2),
.pb-modal[data-step="3"] .pb-progress li { color:var(--ink); }
.pb-modal[data-step="1"] .pb-progress li:nth-child(1) b,
.pb-modal[data-step="2"] .pb-progress li:nth-child(2) b,
.pb-modal[data-step="3"] .pb-progress li:nth-child(3) b { background:var(--ink); border-color:var(--ink); color:#fff; }
.pb-modal[data-step="2"] .pb-progress li:nth-child(1) b,
.pb-modal[data-step="3"] .pb-progress li:nth-child(-n+2) b { background:var(--aqua); border-color:var(--aqua); color:var(--ink); }

.pb-step[data-step="1"] { display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:0; flex:1; min-height:0; }
.pb-step[hidden] { display:none !important; }
.pb-cal { padding-right:30px; }
.pb-step-title { font-size:12px; text-transform:uppercase; letter-spacing:.12em; font-weight:700; color:var(--muted); margin:0 0 14px; }
.pb-times { border-left:1px solid var(--line); padding-left:24px; display:flex; flex-direction:column; min-height:0; max-height:400px; }
.pb-times .pb-step-title { text-transform:none; letter-spacing:-.01em; font-size:15px; color:var(--ink); margin:6px 0 14px; min-height:20px; }

.pb-cal-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.pb-month { font-size:20px; letter-spacing:-.035em; font-weight:900; }
.pb-nav-btn { width:34px; height:34px; border-radius:999px; border:1px solid var(--line); background:transparent; cursor:pointer; font-size:14px; color:var(--ink); transition:.15s ease; }
.pb-nav-btn:hover:not(:disabled) { background:var(--ink); border-color:var(--ink); color:#fff; }
.pb-nav-btn:disabled { opacity:.3; cursor:default; }
.pb-weekdays, .pb-days { display:grid; grid-template-columns:repeat(7, 1fr); }
.pb-weekdays span { text-align:center; font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:#9aa3a7; font-weight:700; padding:6px 0 8px; }
.pb-days { row-gap:4px; align-content:start; min-height:288px; }
.pb-days.is-loading { display:flex; align-items:center; justify-content:center; }
.pb-day { justify-self:center; width:44px; height:44px; border:0; background:transparent; border-radius:999px; font-size:14px; color:#c3c9cc; cursor:default; position:relative; display:flex; align-items:center; justify-content:center; font-family:inherit; font-variant-numeric:tabular-nums; }
.pb-day.has { color:var(--ink); font-weight:700; cursor:pointer; background:var(--mist); transition:background .15s ease, transform .15s ease; }
.pb-day.has:hover { background:#c8f2f4; transform:scale(1.06); }
.pb-day.today::after { content:''; position:absolute; bottom:6px; width:4px; height:4px; border-radius:50%; background:currentColor; }
.pb-day.selected { background:var(--ink) !important; color:#fff !important; transform:none !important; }
.pb-day.selected::after { background:var(--aqua); }

.pb-slots { display:flex; flex-direction:column; gap:8px; overflow:auto; padding:2px 4px 4px 0; margin-right:-4px; }
.pb-slot { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:46px; padding:0 16px; border:1px solid var(--line); border-radius:12px; background:var(--paper); cursor:pointer; font-family:inherit; font-size:15px; color:var(--ink); transition:.15s ease; flex:0 0 auto; }
.pb-slot b { font-weight:700; font-variant-numeric:tabular-nums; }
.pb-slot small { font-size:11px; color:var(--muted); }
.pb-slot:hover { border-color:var(--ink); background:var(--ink); color:#fff; }
.pb-slot:hover small { color:var(--aqua); }
.pb-slot.selected { background:var(--ink); border-color:var(--ink); color:#fff; }
.pb-slot.selected small { color:var(--aqua); }
.pb-hint { color:var(--muted); font-size:14px; line-height:1.5; margin:0; }
.pb-error { color:#c0262d; font-weight:700; font-size:14px; margin:14px 0 0; line-height:1.4; }
.pb-slots .pb-error { margin:0 0 6px; }

/* step 2 */
.pb-form { display:flex; flex-direction:column; flex:1; }
.pb-form .form { gap:16px 24px; }
.pb-form input, .pb-form textarea { padding:10px 0; }
.pb-form input:focus, .pb-form textarea:focus { border-bottom-color:var(--aqua); box-shadow:0 1px 0 var(--aqua); }
.pb-form textarea { min-height:84px; }
.pb-actions { display:flex; gap:10px; justify-content:space-between; margin-top:auto; padding-top:22px; flex-wrap:wrap; }

/* step 3 */
.pb-done { flex:1; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; max-width:520px; }
.pb-check { width:62px; height:62px; border-radius:999px; background:var(--aqua); display:flex; align-items:center; justify-content:center; margin-bottom:22px; animation:pbPop .45s cubic-bezier(.2,1.4,.4,1) both; }
.pb-check svg { width:28px; height:28px; fill:none; stroke:var(--ink); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
@keyframes pbPop { from { transform:scale(.4); opacity:0; } to { transform:none; opacity:1; } }
.pb-done-title { margin:0 0 12px; font-size:clamp(38px, 4.6vw, 54px); line-height:.9; letter-spacing:-.06em; font-weight:900; }
.pb-done-when { font-size:17px; font-weight:700; margin:0 0 10px; line-height:1.4; }
.pb-done-text { color:#40474c; line-height:1.55; margin:0 0 20px; }
.pb-meet-link[hidden] { display:none; }
.pb-done .pb-actions { justify-content:flex-start; margin-top:4px; padding-top:0; }

@media (max-width: 900px) {
  .pb-dialog { grid-template-columns:1fr; grid-template-rows:auto 1fr; min-height:0; max-height:calc(100vh - 40px); }
  .pb-times { max-height:none; }
  .pb-side { padding:20px 22px; gap:12px; }
  .pb-side::before { display:none; }
  .pb-side-top { padding-right:46px; }
  .pb-text, .pb-side-foot .pb-picked { display:none; }
  .pb-title { font-size:28px; margin:0; }
  .pb-meta { flex-direction:row; flex-wrap:wrap; gap:6px 16px; font-size:12px; padding-top:12px; margin:0; }
  .pb-side-foot { margin-top:0; }
  .pb-len { flex-direction:row; align-items:center; gap:12px; margin:0; }
  .pb-len-switch { flex:1; max-width:320px; }
  .pb-len-switch button { padding:6px 4px; display:flex; align-items:baseline; justify-content:center; gap:3px; }
  .pb-len-switch button b { display:inline; font-size:15px; margin:0; }
  .pb-tz { flex-direction:row; align-items:center; gap:12px; }
  .pb-tz-switch { flex:1; max-width:320px; }
  .pb-close { background:transparent; border-color:rgba(255,255,255,.5); color:#fff; top:16px; right:16px; }
  .pb-main { padding:20px 22px 22px; }
}
@media (max-width: 680px) {
  .pb-modal { padding:0; align-items:stretch; }
  .pb-dialog { height:100%; max-height:none; border-radius:0; align-content:start; }
  .pb-progress { margin:0 0 18px; gap:6px; }
  .pb-progress .pb-pl { display:none; }
  .pb-modal[data-step="1"] .pb-progress li:nth-child(1) .pb-pl,
  .pb-modal[data-step="2"] .pb-progress li:nth-child(2) .pb-pl,
  .pb-modal[data-step="3"] .pb-progress li:nth-child(3) .pb-pl { display:inline; }
  .pb-step[data-step="1"] { grid-template-columns:1fr; gap:20px; }
  .pb-cal { padding-right:0; }
  .pb-times { border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:16px; }
  .pb-days { min-height:0; }
  .pb-day { width:40px; height:40px; }
  .pb-slots { display:grid; grid-template-columns:1fr 1fr; overflow:visible; }
  .pb-slot { padding:0 12px; }
  .pb-modal[data-step="2"] .pb-meta, .pb-modal[data-step="3"] .pb-meta, .pb-modal[data-step="2"] .pb-text { display:none; }
  .pb-form .form { grid-template-columns:1fr; }
  .pb-form .field.full { grid-column:1; }
  .pb-tz-label { display:none; }
  .pb-tz-switch { max-width:none; }
}
@media (max-height: 640px) and (min-width: 901px) {
  .pb-text { display:none; }
}

/* =====================================================================
   Mobile menu (≤980px) — hidden on desktop, so the desktop design is unchanged
   ===================================================================== */
.nav-toggle, .nav-mobile { display:none; }
@media (max-width: 980px) {
  .nav-toggle { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:42px; height:42px; padding:0; border:1.5px solid var(--ink); border-radius:999px; background:transparent; cursor:pointer; transition:.2s ease; }
  .nav-toggle span { display:block; width:16px; height:1.5px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
  .nav-toggle[aria-expanded="true"] { background:var(--ink); }
  .nav-toggle[aria-expanded="true"] span { background:#fff; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(5.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-5.5px) rotate(-45deg); }

  .nav-mobile { display:block; position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:1px solid rgba(0,0,0,.08); box-shadow:0 24px 40px rgba(0,0,0,.08); padding:8px 34px 28px; opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .2s ease, transform .25s ease; max-height:calc(100vh - 80px); overflow:auto; }
  .nav-mobile[hidden] { display:none; }
  .nav.menu-open .nav-mobile { opacity:1; transform:none; pointer-events:auto; }
  .nav-mobile-links { display:flex; flex-direction:column; }
  .nav-mobile-links a { display:flex; align-items:center; justify-content:space-between; padding:18px 0; border-bottom:1px solid var(--line); font-size:30px; font-weight:900; letter-spacing:-.05em; line-height:1; }
  .nav-mobile-links a i { font-style:normal; font-size:20px; font-weight:400; transition:transform .2s ease; }
  .nav-mobile-links a:hover i { transform:translateX(4px); }
  .nav-mobile-book { width:100%; min-height:52px; margin-top:22px; font-size:15px; }
}
@media (max-width: 680px) {
  .nav-mobile { padding:4px 18px 24px; }
  .nav-mobile-links a { font-size:28px; padding:16px 0; }
}


/* =====================================================================
   Colors from Portali Manager
   Every section carries its own variables on its own element:
     --s-bg  --s-head  --s-text  --s-muted  --s-line
   They are printed only when a color is chosen; otherwise the fallback
   (= the original design) is used, so sections never share a background.
   ===================================================================== */

/* backgrounds + main text — one rule per section */
.sec-hero          { background:var(--s-bg, linear-gradient(135deg, #dff8fb 0%, #c8f2f4 58%, #d7f8ef 100%)); color:var(--s-text, inherit); }
.sec-about         { background:var(--s-bg, transparent); color:var(--s-text, inherit); }
.sec-services      { background:var(--s-bg, var(--ink)); color:var(--s-text, #fff); }
.sec-approach      { background:var(--s-bg, var(--mist)); color:var(--s-text, inherit); }
.sec-work          { background:var(--s-bg, transparent); color:var(--s-text, inherit); }
.sec-why           { background:var(--s-bg, var(--ink)); color:var(--s-text, #fff); }
.sec-industries    { background:var(--s-bg, transparent); color:var(--s-text, inherit); }
.sec-international { background:var(--s-bg, linear-gradient(135deg, #c9f6f1, #dff9ff)); color:var(--s-text, inherit); }
.sec-cta           { background:var(--s-bg, var(--ink)); color:var(--s-text, #fff); }
.sec-contact       { background:var(--s-bg, transparent); color:var(--s-text, inherit); }
footer.sec-footer  { background:var(--s-bg, #0a0a0a); color:var(--s-text, #fff); }

/* big headlines */
.sec .headline, .sec-hero .display { color:var(--s-head, inherit); }
.sec-services .headline, .sec-why .headline, .sec-cta .headline { color:var(--s-head, var(--aqua)); }

/* paragraph text */
.sec .subcopy { color:var(--s-muted, #252525); }
.sec-services .subcopy { color:var(--s-muted, #d0d0d0); }
.sec-hero .hero-copy p { color:var(--s-muted, inherit); }
.sec-about .card p { color:var(--s-muted, #40474c); }
.sec-services .acc-content { color:var(--s-muted, #c5c5c5); }
.sec-approach .step p { color:var(--s-muted, #405057); }
.sec-work .work-card p { color:var(--s-muted, #676767); }
.sec-why .why-row p { color:var(--s-muted, #c0c0c0); }
.sec-international .market-item p { color:var(--s-muted, #35464c); }
.sec-cta .cta-bottom p { color:var(--s-muted, #d7d7d7); }
.sec-footer .footer-bottom { color:var(--s-muted, #aaa); border-top-color:var(--s-line, #333); }

/* elements with a hard-coded text color */
.sec-services .acc-trigger { color:var(--s-text, #fff); }
.sec-cta .btn.light { color:var(--s-text, #fff); border-color:var(--s-text, #fff); }
.sec-contact input, .sec-contact textarea { color:var(--s-text, inherit); }

/* lines & borders */
.sec-hero .ticker { border-top-color:var(--s-line, rgba(0,0,0,.22)); }
.sec-about .card { border-top-color:var(--s-line, var(--ink)); }
.sec-services .accordion { border-top-color:var(--s-line, #3c3c3c); }
.sec-services .acc-item { border-bottom-color:var(--s-line, #3c3c3c); }
.sec-approach .steps { background:var(--s-line, #b9d9de); border-color:var(--s-line, #b9d9de); }
.sec-approach .step { background:var(--s-bg, var(--mist)); }
.sec-why .why-list { border-top-color:var(--s-line, #3c3c3c); }
.sec-why .why-row { border-bottom-color:var(--s-line, #3c3c3c); }
.sec-industries .pill { border-color:var(--s-line, var(--ink)); }
.sec-international .market-grid { border-top-color:var(--s-line, rgba(0,0,0,.2)); }
.sec-international .market-item { border-right-color:var(--s-line, rgba(0,0,0,.15)); border-bottom-color:var(--s-line, rgba(0,0,0,.15)); }
.sec-contact input, .sec-contact textarea { border-bottom-color:var(--s-line, var(--ink)); }
:where(.sec-contact) .check-pill { border-color:var(--s-line, #bbb); }

/* header, buttons, booking popup (General & design) */
.nav { background:var(--nav-bg, rgba(255,255,255,.92)); color:var(--nav-text, inherit); }
.nav .lang-switch { border-color:var(--nav-text, var(--ink)); }
.nav .lang-switch button { color:var(--nav-text, inherit); }
.nav .lang-switch button.active { background:var(--nav-text, var(--ink)); color:var(--nav-solid, #fff); }
.nav .nav-toggle { border-color:var(--nav-text, var(--ink)); }
.nav .nav-toggle span { background:var(--nav-text, var(--ink)); }
.nav .nav-toggle[aria-expanded="true"] { background:var(--nav-text, var(--ink)); }
.nav .nav-toggle[aria-expanded="true"] span { background:var(--nav-solid, #fff); }
.nav .nav-mobile { background:var(--nav-solid, #fff); }
.btn.dark { background:var(--btn-bg, var(--ink)); border-color:var(--btn-bg, var(--ink)); color:var(--btn-text, #fff); }
.pb-side { background:var(--popup-bg, var(--ink)); }