/* Home's design, "Surfbali" (chosen 23 Oct 2026; it replaced the original look).
   Daria's reference: the "Surfbali" travel template (light grey page, white cards, near-black type, a lime accent, swapped for Esplori's baby blue).
   Loaded on Home after home.css; <body> has the class "design-surf". CSS only: the text, the markup and the motion
   (motion-home.js) are the same as before.

   Colour: a white page, light-grey cards (flipped from the template, Daria 23 Oct 2026), near-black ink, a darker grey for the second half of a heading, one baby-blue
   accent for dots, the "lost" moment and the CTA on photos. Neutral dark (no navy) for every scrim and dark block.
   Type: General Sans 500 for headings (declared in home.css), smaller and tighter than Original; Inter for text.
   Structure: every block is a rounded card on the white page. Lists (story, price, FAQ) are hairline rows like the
   template's day-by-day programme. The solution section becomes the template's "balance" layout: head + collage on the left, the three
   cards stacked on the right. */

.design-surf {
  --sb-page: #ffffff;
  --sb-card: #f2f2f0;
  --sb-ink: #1b1b1a;
  --sb-ink-2: #2b2b29;
  --sb-muted: #6e6e6a;
  --sb-grey: #8a8a85;
  --sb-line: #e1e1dd;
  --sb-chip: #e8e8e5;
  --sb-blue: #b6d1f0; /* the site's own baby blue (--primary) */

  /* site.css / home.css tokens, so every role and block follows */
  --surface: var(--sb-page);
  --surface-dark: var(--sb-ink);
  --surface-darkest: #121211;
  --text-on-light: var(--sb-ink);
  --text-on-light-muted: var(--sb-muted);
  --border: var(--sb-line);
  --border-on-dark: rgba(255, 255, 255, .14);
  --primary: var(--sb-blue);
  --mist: var(--sb-page);
  --soft-blue: var(--sb-grey);
  --ocean: var(--sb-grey);
  --sky: rgba(255, 255, 255, .55);
  --radius: 20px;
  --radius-lg: 24px;
  --fs-body: clamp(15px, .35vw + 10px, 17px);
  --fs-xl: clamp(42px, 4.4vw, 70px);
  --fs-l: clamp(32px, 2.9vw, 46px);
  --fs-m: clamp(28px, 2.3vw, 36px);
  --fs-s: clamp(17px, 1.2vw, 19px);
  --fs-quote: clamp(22px, 2vw, 30px);

  background-color: var(--sb-page);
}

/* ---------- Type ---------- */

.design-surf .h-xl,
.design-surf .h-l,
.design-surf .h-m,
.design-surf .h-s,
.design-surf .text-quote,
.design-surf .price_table td,
.design-surf .guarantee_days {
  font-family: "General Sans", "Inter", Arial, sans-serif;
  font-weight: 500;
}

.design-surf .h-xl { letter-spacing: -.04em; line-height: 1.02; }
.design-surf .h-l  { letter-spacing: -.035em; line-height: 1.08; }
.design-surf .h-m  { letter-spacing: -.03em; line-height: 1.1; }
.design-surf .h-s  { letter-spacing: -.015em; line-height: 1.3; }
.design-surf .text-quote { letter-spacing: -.025em; line-height: 1.25; color: var(--sb-ink); }

.design-surf .text-body,
.design-surf .text-small {
  font-weight: 400;
}

/* The marked words: the template's grey second half, same face (a little darker than the template, so it reads) */
.design-surf .h-xl em,
.design-surf .h-l em,
.design-surf .h-m em,
.design-surf .u-soft,
.design-surf .text-quote .u-em {
  font-style: normal;
  color: var(--sb-grey);
}

.design-surf .h-xl.is-inverse em,
.design-surf .h-l.is-inverse em,
.design-surf .h-m.is-inverse em {
  color: rgba(255, 255, 255, .6);
}

/* ---------- Buttons: ink pills on grey, baby-blue pills on photos, the arrow in its own circle ---------- */

.design-surf .btn:not(.v-button-ghost),
.design-surf .pf_submit {
  gap: 12px;
  padding: 6px 6px 6px 22px;
  border-radius: var(--pill);
  background-color: var(--sb-ink);
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.design-surf .btn:not(.v-button-ghost) > span:last-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--pill);
  background-color: rgba(255, 255, 255, .14);
}

.design-surf .pf_submit {
  padding: 16px 24px;
}

.design-surf .hero .btn,
.design-surf .guarantee .btn,
.design-surf .preview_copy .btn {
  background-color: var(--sb-blue);
  color: var(--sb-ink);
}

.design-surf .hero .btn > span:last-child,
.design-surf .guarantee .btn > span:last-child {
  background-color: rgba(27, 27, 26, .1);
}

/* On the Try-it photo: the template's frosted "Apply now" pill */
.design-surf .tryit .btn {
  background-color: rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #ffffff;
}

.design-surf .tryit .btn:hover {
  background-color: rgba(255, 255, 255, .3);
}

/* "Live website example ↗": the same baby-blue pill as the hero CTA (Daria, 23 Oct 2026), arrow in its own circle */
.design-surf .websites_cta {
  gap: 12px;
  margin-left: 0;
  padding: 6px 6px 6px 22px;
  border-radius: var(--pill);
  background-color: var(--sb-blue);
  color: var(--sb-ink);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.design-surf .websites_cta .is-underlined {
  text-decoration: none;
}

.design-surf .websites_cta > span:last-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--pill);
  background-color: rgba(27, 27, 26, .1);
}

/* ---------- Navbar: grey glass, small links, ink pill ---------- */

.design-surf .navbar_scrim { background-color: rgba(255, 255, 255, .82); }
.design-surf .navbar_scrim.is-inverse { background-color: rgba(18, 18, 17, .55); }
.design-surf .navbar_link { color: var(--sb-ink); font-size: 14px; font-weight: 500; }
/* The burger: the site's original icon, three 18 x 2 px rounded lines 4 px apart, in the logo's dark blue, with no
   circle behind it (Daria, 23 Oct 2026). White over a dark section, where dark blue would disappear. */
.design-surf .navbar_burger,
.design-surf .navbar.is-dark .navbar_burger {
  gap: 4px;
  border-radius: 0;
  background-color: transparent;
}

.design-surf .navbar_burger_line {
  width: 18px;
  height: 2px;
  border-radius: var(--pill);
  background-color: #022449;
}

/* A slimmer navbar (Daria, 23 Oct 2026): a smaller logo and button and less padding, so the bar is 68px tall and ends
   above the hero card, which starts 80px down. It must never cover the card. */
.design-surf .navbar { padding-top: 12px; padding-bottom: 12px; }
.design-surf .navbar_logo { width: 88px; height: 34px; }

/* The navbar button is the hero's CTA: a baby-blue pill, ink text, the arrow in its own circle, on every background */
.design-surf .navbar_cta,
.design-surf .navbar.is-dark .navbar_cta {
  gap: 12px;
  padding: 6px 6px 6px 22px;
  border-radius: var(--pill);
  background-color: var(--sb-blue);
  color: var(--sb-ink);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.design-surf .navbar_cta > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--pill);
  background-color: rgba(27, 27, 26, .1);
}

.design-surf .navbar_cta:hover,
.design-surf .navbar.is-dark .navbar_cta:hover { background-color: var(--sb-blue); opacity: .85; }
.design-surf .navbar.is-dark .navbar_link { color: #ffffff; }
.design-surf .navbar.is-dark .navbar_burger_line { background-color: #ffffff; }

@media screen and (max-width: 991px) {
  .design-surf .navbar_menu { background-color: var(--sb-page); }
  .design-surf .navbar.is-dark .navbar_link { color: var(--sb-ink); }
  .design-surf .navbar_cta,
  .design-surf .navbar.is-dark .navbar_cta { justify-content: space-between; padding: 6px 6px 6px 22px; background-color: var(--sb-blue); color: var(--sb-ink); }
}

/* ---------- Hero: a neutral scrim, baby-blue ticks, the booking card as a white card ---------- */

.design-surf .hero_grid { border-radius: var(--radius-lg); }

/* The hero photo 20 % darker (Daria, 23 Oct 2026) */
.design-surf .hero_bg { filter: brightness(.8); }

.design-surf .hero_bg_scrim {
  background: linear-gradient(90deg, rgba(18, 18, 17, .62) 0%, rgba(18, 18, 17, .34) 45%, rgba(18, 18, 17, .06) 100%);
}

.design-surf .hero_points li::before {
  background-color: var(--sb-blue);
}

.design-surf .hero .esb {
  border-radius: var(--radius);
}

/* ---------- Rhythm (Daria, 23 Oct 2026): no two sections in a row on the same background ----------
   hero (photo card) · stats (white) · story (photo card) · solution (white) · try it (dark photo) · price (white) ·
   websites (grey card) · FAQ (white) · free preview (photo card) · footer (dark). Cards and flat white sections
   alternate: never two cards in a row either. A card is a rounded sheet inside the page margin, like the hero. A new
   section takes whichever background its neighbours don't have. */

.design-surf .l-section:not(.hero):not(.stats):not(.tryit):not(.preview) {
  padding-top: var(--padding-md);
  padding-bottom: var(--padding-md);
}

.design-surf .story.l-section,
.design-surf .websites.l-section {
  margin: 0 var(--padding-page);
  padding-left: 0;
  padding-right: 0;
  border-radius: var(--radius-lg);
  background-color: var(--sb-card);
}

/* ---------- Facts: Original's row (big figures, a rule on top, hairline dividers), only in Surfbali's ink ---------- */

/* On the white page; the story under it is the photo card */
.design-surf .stats.l-section {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.design-surf .stats_text {
  max-width: 240px;
  font-size: clamp(16px, .25vw + 13px, 18px);
  line-height: 1.4;
}

/* ---------- Story: the photo card, the moments as the template's day-by-day rows ---------- */

.design-surf .story_grid { align-items: start; }
.design-surf .story_body { justify-self: stretch; max-width: none; gap: var(--space-md); }
.design-surf .story_img { border-radius: var(--radius-lg); }
.design-surf .story_bubble { border-radius: 16px; box-shadow: 0 18px 36px rgba(18, 18, 17, .16); }

.design-surf .story .story_timeline {
  gap: 0;
  padding: 0;
  border-top: 1px solid var(--sb-line);
}

.design-surf .story .story_timeline::before { display: none; }

.design-surf .story .story_timeline li {
  gap: 4px;
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--sb-line);
}

.design-surf .story .story_timeline li::before { display: none; }

.design-surf .story .story_time {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--sb-grey);
}

.design-surf .story .story_timeline .text-body {
  font-family: "General Sans", "Inter", Arial, sans-serif;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--sb-ink);
}

/* Monday, 8:30: the one baby-blue chip, like the template's active tab */
.design-surf .story .story_timeline li.is-lost .story_time {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--pill);
  background-color: var(--sb-blue);
  color: var(--sb-ink);
  font-weight: 500;
}

/* The story as a photo card, like the hero (Daria, 23 Oct 2026): the sofa photo fills the whole card, a dark
   gradient under the text on the left (the man sits right of centre in the photo), white type. */
.design-surf .story.l-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--sb-ink);
}

.design-surf .story .l-container,
.design-surf .story_grid { position: static; }

.design-surf .story_grid {
  align-items: center;
  min-height: clamp(560px, 48vw, 760px);
}

.design-surf .story_body { grid-column: 1; }

.design-surf .story_photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.design-surf .story_photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, rgba(18, 18, 17, .1) 0%, rgba(18, 18, 17, .3) 35%, rgba(18, 18, 17, .82) 58%, rgba(18, 18, 17, .9) 100%);
  pointer-events: none;
}

/* The photo is wider than the card (138 %, pinned left), so the man, who sits at 52 % of the photo, lands at about
   72 % of the card: closer to the right edge, clear of the text. */
.design-surf .story_img {
  width: 138%;
  max-width: none;
  height: 100%;
  aspect-ratio: auto;
  object-position: 50% 35%;
  border-radius: 0;
}

/* The WhatsApp message on the wall to the right of him, sized like the real thing: the time and grey ticks sit at the end of the
   last line, not on a row of their own. */
.design-surf .story_bubble {
  z-index: 1;
  top: 30%;
  left: auto;
  right: 4%;
  bottom: auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: 10px;
  row-gap: 0;
  max-width: 250px;
  padding: 8px 10px 6px 12px;
  border-radius: 12px 12px 12px 4px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, .35);
}

.design-surf .story_bubble_time {
  margin-left: auto;
  color: #8696a0;
}

.design-surf .story .h-l,
.design-surf .story .text-quote,
.design-surf .story .story_timeline .text-body { color: #ffffff; }

.design-surf .story .h-l em,
.design-surf .story .text-quote .u-em { color: rgba(255, 255, 255, .6); }

.design-surf .story .story_time { color: rgba(255, 255, 255, .6); }

.design-surf .story .story_timeline,
.design-surf .story .story_timeline li { border-color: rgba(255, 255, 255, .18); }

@media screen and (max-width: 767px) {
  .design-surf .story_grid { min-height: 0; }
  .design-surf .story_body { grid-column: 1; }
  .design-surf .story_photo::after { background: rgba(18, 18, 17, .78); }
  .design-surf .story_img { width: 100%; object-position: 50% 50%; }
  .design-surf .story_bubble { display: none; }
}

/* ---------- Solution: head + collage on the left, three cards stacked on the right ---------- */

.design-surf .solution_body {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-xl);
  align-items: center;
}

.design-surf .solution_intro {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

.design-surf .collage { aspect-ratio: 4 / 3; }

.design-surf .collage_img {
  border-radius: 18px;
  box-shadow: 0 24px 48px rgba(18, 18, 17, .14);
}

.design-surf .collage_img.is-c { border-color: var(--sb-page); } /* forest-road-jeep-crop.webp is cut around the jeep, so it sits in the middle */

.design-surf .solution_cards {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.design-surf .solution_card,
.design-surf .solution_card:nth-child(2),
.design-surf .solution_card:nth-child(3) {
  position: relative;
  gap: 8px;
  margin-top: 0;
  padding: var(--space-sm);
  border: 0;
  border-radius: 18px;
  background-color: var(--sb-card);
}

.design-surf .solution_card .text-body { font-size: 15px; }

/* Icons: Google Material Symbols, Outlined (Apache 2.0), 32px in ink, above each title (Daria, 23 Oct 2026). They
   replace the 01-03 numbers, which read as steps. 1 credit_card (pay once), 2 event_available (see which cars are
   free), 3 tune (your rental conditions). */
.design-surf .solution_num { display: none; }

/* Icon and title on one line, the text under both */
.design-surf .solution_card,
.design-surf .solution_card:nth-child(2),
.design-surf .solution_card:nth-child(3) {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 8px;
  align-items: center;
}

.design-surf .solution_card .text-body { grid-column: 1 / -1; }

.design-surf .solution_card::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  background: no-repeat center / 32px 32px;
}

.design-surf .solution_card:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%231B1B1A'%3E%3Cpath d='M880-720v480q0 33-23.5 56.5T800-160H160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720Zm-720 80h640v-80H160v80Zm0 160v240h640v-240H160Zm0 240v-480 480Z'/%3E%3C/svg%3E"); }
.design-surf .solution_card:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%231B1B1A'%3E%3Cpath d='M438-226 296-368l58-58 84 84 168-168 58 58-226 226ZM200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z'/%3E%3C/svg%3E"); }
.design-surf .solution_card:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%231B1B1A'%3E%3Cpath d='M440-120v-240h80v80h320v80H520v80h-80Zm-320-80v-80h240v80H120Zm160-160v-80H120v-80h160v-80h80v240h-80Zm160-80v-80h400v80H440Zm160-160v-240h80v80h160v80H680v80h-80Zm-480-80v-80h400v80H120Z'/%3E%3C/svg%3E"); }

/* ---------- Try it: a rounded photo banner inside the page margin ---------- */

.design-surf .tryit.l-section {
  margin: 0 var(--padding-page);
  padding-top: var(--padding-lg);
  padding-bottom: var(--padding-lg);
  border-radius: var(--radius-lg);
  background-color: var(--sb-ink);
}

/* On the sunset photo the whole heading is white, "as a customer" included (Daria, 23 Oct 2026) */
.design-surf .tryit .h-l.is-inverse em { color: #ffffff; }

/* The coast car park at sunset, mirrored (coast-parking-sunset.webp): the green hillside sits behind the text, the
   sunlit sea behind the phone */
.design-surf .tryit .media-cover { object-position: 50% 50%; }

/* The phone at the right edge of the banner */
.design-surf .tryit_phone { justify-self: end; }

.design-surf .tryit_scrim {
  /* A soft pool of shade behind the text (the pale rock face), not a flat band: an eased fade to the right, plus a
     radial glow centred on the copy, so the photo stays bright around it (Daria, 23 Oct 2026) */
  background:
    radial-gradient(ellipse 60% 80% at 22% 55%, rgba(18, 18, 17, .55) 0%, rgba(18, 18, 17, .32) 50%, rgba(18, 18, 17, 0) 100%),
    linear-gradient(90deg, rgba(18, 18, 17, .62) 0%, rgba(18, 18, 17, .56) 22%, rgba(18, 18, 17, .42) 40%, rgba(18, 18, 17, .24) 58%, rgba(18, 18, 17, .12) 76%, rgba(18, 18, 17, .08) 100%);
}

.design-surf .tryit_phone {
  border-color: #121211;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .12);
}

/* ---------- Price: hairline rows; the guarantee as the template's white coach card ---------- */

.design-surf .price_table th {
  font-size: 13px;
  font-weight: 400;
  color: var(--sb-muted);
  vertical-align: middle;
}

.design-surf .price_table td {
  font-size: var(--fs-s);
  letter-spacing: -.015em;
}

.design-surf .guarantee {
  padding: 12px 12px var(--space-md);
  border-radius: var(--radius-lg);
  background-color: var(--sb-card);
}

.design-surf .guarantee > :not(.guarantee_photo):not(.guarantee_seal) {
  margin-left: calc(var(--space-md) - 12px);
  margin-right: calc(var(--space-md) - 12px);
}

.design-surf .guarantee_photo {
  width: 100%;
  height: 260px;
  margin: 0;
  border-radius: 16px;
}

.design-surf .guarantee .h-m.is-inverse { color: var(--sb-ink); }
.design-surf .guarantee .h-m.is-inverse em { color: var(--sb-grey); }
.design-surf .guarantee .text-body.is-inverse { color: var(--sb-muted); }

/* The seal: a baby-blue circle, no star */
.design-surf .guarantee_star { display: none; }

.design-surf .guarantee_seal {
  width: 104px;
  margin: -64px 0 0 calc(var(--space-md) - 12px);
  border: 6px solid var(--sb-card);
  border-radius: var(--pill);
  background-color: var(--sb-blue);
  color: var(--sb-ink);
}

.design-surf .guarantee_days { font-size: 36px; letter-spacing: -.05em; }

.design-surf .guarantee_unit {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
}

/* ---------- Websites ---------- */

.design-surf .websites_photo { border-radius: 18px; }
.design-surf .websites_visual .websites_shot { border-radius: 18px; overflow: hidden; }

/* ---------- FAQ: hairline rows, grey "+" circles ---------- */

.design-surf .faq.l-section { background-color: transparent; }
.design-surf .faq_list { border-top: 1px solid var(--sb-line); }
.design-surf .faq_item summary { padding: 22px 56px 22px 0; }

.design-surf .faq_item summary::after {
  width: 32px;
  height: 32px;
  margin-top: -16px;
  background: var(--sb-chip) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' fill='none' stroke='%231B1B1A' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat center;
}

.design-surf .faq_item[open] summary::after { background-color: var(--sb-blue); }
.design-surf .faq_photo { border-radius: var(--radius-lg); }

/* The questions start level with the photo, not with the heading: the heading takes its own row, the photo and the
   list share the next one. */
@media screen and (min-width: 992px) {
  .design-surf .faq_body { row-gap: var(--space-md); }
  .design-surf .faq_side { display: contents; }
  .design-surf .faq_side > .h-l { grid-column: 1; grid-row: 1; }
  .design-surf .faq_photo { grid-column: 1; grid-row: 2; margin-top: 0; }
  .design-surf .faq_list { grid-column: 2; grid-row: 2; }
}

/* ---------- Free preview, popup, form ---------- */

.design-surf .preview.l-section { padding-top: var(--padding-md); }
.design-surf .preview_card { border-radius: var(--radius-lg); }

/* The night photo (Daria, 23 Oct 2026): the file is trimmed (top 18 % cut, the empty sky), and it is shown 118 % wide
   and pinned left, so the bright headlight at its top right falls outside the card, while the top of the scene
   (sea, mist, mountains) stays in view */
.design-surf .preview_card .media-cover {
  right: auto;
  width: 118%;
  max-width: none;
  object-position: 50% 0%;
}

.design-surf .preview_scrim {
  /* lighter: the night photo is dark already (Daria, 23 Oct 2026) */
  background-image: linear-gradient(90deg, rgba(18, 18, 17, .45) 0%, rgba(18, 18, 17, .2) 55%, rgba(18, 18, 17, .05) 100%);
}

.design-surf .preview_panel,
.design-surf .preview-dialog {
  border-radius: 20px;
  background-color: var(--sb-card);
}

.design-surf .preview_panel { box-shadow: 0 30px 60px rgba(0, 0, 0, .25); }
.design-surf .preview-dialog::backdrop { background-color: rgba(18, 18, 17, .55); }

.design-surf .pf input[type="text"],
.design-surf .pf input[type="email"],
.design-surf .pf input[type="tel"],
.design-surf .pf select {
  border-color: var(--sb-line);
  border-radius: 12px;
  background-color: var(--sb-page);
  font-weight: 400;
}

.design-surf .pf input:focus,
.design-surf .pf select:focus {
  border-color: var(--sb-ink);
  box-shadow: 0 0 0 3px rgba(182, 209, 240, .7);
}

/* ---------- Responsive ---------- */

@media screen and (max-width: 991px) {
  .design-surf .solution_body { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}

@media screen and (max-width: 767px) {
  .design-surf .solution_card,
  .design-surf .solution_card:nth-child(2),
  .design-surf .solution_card:nth-child(3) { padding: var(--space-sm) var(--space-xs); }
}

@media screen and (max-width: 479px) {
  .design-surf .preview_card { border-radius: 0; }
  .design-surf .tryit.l-section { margin: 0; border-radius: 0; }
}


/* ---------- Free preview: Daria, photo, name, role (Daria, 23 Oct 2026) ---------- */
.design-surf .preview_person {
  gap: 14px;
  margin-top: var(--space-xs);
}

.design-surf .preview_avatar {
  width: 60px;
  height: 60px;
}

.design-surf .preview_person_text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  font-family: var(--font-body);
}

.design-surf .preview_person_name {
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
}

.design-surf .preview_person_role {
  font-size: 15px;
  color: rgba(255, 255, 255, .55);
}


/* ---------- Free-preview form, card style (Daria, 23 Oct 2026, after a property-search reference) ----------
   A white card with a bold title, grey labels, pill fields, and a full-width baby-blue pill button. Only the form in the last section; the popup keeps its own look. */
.design-surf .preview_panel {
  padding: 28px;
  border-radius: 24px;
  background-color: #ffffff;
}

.design-surf .preview_panel_title {
  margin: 0;
  font-family: "General Sans", "Inter", Arial, sans-serif;
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--sb-ink);
}

.design-surf .preview_panel_sub {
  margin: 10px 0 22px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--sb-ink);
}

.design-surf .preview_panel .pf_field label {
  font-size: 13px;
  font-weight: 500;
  color: #3d3d3a; /* darker field titles (Daria, 23 Oct 2026) */
}

.design-surf .preview_panel .pf input[type="text"],
.design-surf .preview_panel .pf input.pf_other,
.design-surf .preview_panel .pf input[type="email"],
.design-surf .preview_panel .pf input[type="tel"],
.design-surf .preview_panel .pf_select__button {
  height: 46px;
  padding-left: 20px; /* no icons in the fields (removed, Daria 23 Oct 2026) */
  border: 1px solid #e2e2df;
  border-radius: var(--pill);
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: 9px center;
  background-size: 28px 28px;
  font-size: 15px;
  font-weight: 500;
  color: var(--sb-ink);
}

.design-surf .preview_panel .pf input::placeholder {
  font-weight: 400;
  color: #a3a39e;
}


.design-surf .preview_panel .pf input:focus,
.design-surf .preview_panel .pf_select__button:focus-visible,
.design-surf .preview_panel .pf_select.is-open .pf_select__button {
  border-color: var(--sb-ink);
  box-shadow: none;
}

.design-surf .preview_panel .pf_next,
.design-surf .preview_panel .pf_submit,
.design-surf .preview-dialog .pf_next,
.design-surf .preview-dialog .pf_submit {
  justify-content: center;
  width: 100%;
  border-radius: var(--pill);
  background-color: var(--sb-blue);
  color: var(--sb-ink);
}

.design-surf .preview_panel .pf_next > span:last-child,
.design-surf .preview_panel .pf_submit > span:last-child,
.design-surf .preview-dialog .pf_next > span:last-child,
.design-surf .preview-dialog .pf_submit > span:last-child {
  background-color: rgba(27, 27, 26, .1);
}


/* Required fields get a red asterisk after their label (Daria, 23 Oct 2026); WhatsApp keeps its "(optional)" */
.design-surf .preview_req {
  color: #e5484d;
}

.design-surf .pf_field:has(:required) > label::after,
.design-surf .pf_field:has(:required) > .pf_label_row > label::after {
  content: " *";
  color: #e5484d;
}

.design-surf .preview_panel .pf_select__button {
  padding-right: 44px;
  font-weight: 500;
}

/* Under the title: the preview doesn't commit them to anything */
.design-surf .preview_panel_note {
  margin: 8px 0 22px; /* under the title (Daria, 23 Oct 2026); the step bar under it takes the divider's place */
  font-family: var(--font-body);
  font-size: 14px;
  color: #6e6e6a;
}

.design-surf .preview_panel .pf_select__button.is-placeholder {
  font-weight: 400;
  color: #a3a39e;
}

.design-surf .preview_panel .pf_select__list {
  border-radius: 20px;
}

/* The white Esplori Studio logo above the free-preview heading (Daria, 23 Oct 2026) */
.design-surf .preview_logo {
  display: block;
  width: 110px;
  height: auto;
  margin-bottom: var(--space-2xs);
}

/* ---------- The example booking on tablets and phones (Daria, 23 Oct 2026) ----------
   Under the hero text, full width of the card. No clipping on the hero card, so the date pickers can open. */
@media screen and (max-width: 991px) {
  .design-surf .hero_grid {
    overflow: visible;
  }

  .design-surf .hero .hero_visual {
    padding: 0;
  }
}

@media screen and (max-width: 767px) {
  /* A wider booking card on phones: less padding around it inside the hero card */
  .design-surf .hero_grid {
    padding-right: 12px;
    padding-left: 12px;
  }

  .design-surf .hero_copy {
    padding: 0 8px;
  }
}

/* Phones (Daria, 23 Oct 2026): the Try-it phone centred, the guarantee before the price table, a smaller contact logo */
@media screen and (max-width: 767px) {
  .design-surf .tryit_phone {
    justify-self: center;
  }

  .design-surf .preview_logo {
    width: 80px;
  }
}

@media screen and (max-width: 991px) {
  .design-surf .price_grid .guarantee {
    order: -1;
  }
}

/* ---------- Phones (Daria, 23 Oct 2026) ----------
   Hero: the photo edge to edge (full bleed, from the top of the screen, no rounded card), white text on it, the
   booking card under the text. home.js marks the hero dark on phones, so the navbar fades in its dark version.
   Story ("Why car rental companies miss bookings"): the photo card runs edge to edge. */
@media screen and (max-width: 767px) {
  .design-surf .hero.l-section {
    padding: 0 0 var(--space-lg);
  }

  .design-surf .hero .l-container {
    padding-right: 0;
    padding-left: 0;
  }

  .design-surf .hero_grid {
    padding: 112px var(--padding-page) var(--space-lg);
    border-radius: 0;
  }

  .design-surf .hero_bg,
  .design-surf .hero_bg_scrim {
    border-radius: 0;
  }

  .design-surf .hero_bg_scrim {
    background: linear-gradient(180deg, rgba(18, 18, 17, .45) 0%, rgba(18, 18, 17, .35) 40%, rgba(18, 18, 17, .55) 100%);
  }

  .design-surf .hero_copy {
    padding: 0;
  }

  .design-surf .hero .hero-search,
  .design-surf .hero .hero-fleet,
  .design-surf .hero .esb {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 18px 50px rgba(0, 0, 0, .3);
  }

  .design-surf .story.l-section {
    margin-right: 0;
    margin-left: 0;
    border-radius: 0;
  }
}

/* Phones: no "Free preview for your site" button in the hero; the booking card follows the text directly */
@media screen and (max-width: 767px) {
  .design-surf .hero_cta {
    display: none;
  }
}

/* Phones: more room above and below each section (Daria, 23 Oct 2026) */
@media screen and (max-width: 767px) {
  .design-surf .l-section:not(.hero):not(.stats):not(.tryit):not(.preview),
  .design-surf .tryit.l-section {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .design-surf .stats.l-section {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .design-surf .preview.l-section {
    padding-top: 88px;
  }
}


/* Phones, tighter hero (Daria, 23 Oct 2026): the headline close under the navbar, the booking card close under the
   two check points */
@media screen and (max-width: 767px) {
  .design-surf .hero_grid {
    gap: 24px;
  }

}

/* Tablets and phones: the hero is only as tall as its content, so on a tall screen nothing is stretched or centred
   and the booking card sits right under the check points, its wrapper fitted to the card (Daria, 23 Oct 2026) */
@media screen and (max-width: 991px) {
  .design-surf .hero.l-section,
  .design-surf .hero .l-container,
  .design-surf .hero_grid {
    min-height: 0;
  }

  .design-surf .hero_grid {
    grid-template-rows: auto;
    align-content: start;
  }

  .design-surf .hero .hero_visual,
  .design-surf .hero_copy {
    min-height: 0;
    justify-content: flex-start;
  }

  .design-surf .hero_text {
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* The burger icon: dark blue on light, white on dark, no circle */
.design-surf .navbar_burger_icon { color: #022449; }
.design-surf .navbar.is-dark .navbar_burger_icon { color: #ffffff; }

/* Phones: a little more air above the booking card (Daria, 23 Oct 2026) */
@media screen and (max-width: 767px) {
  .design-surf .hero_grid {
    gap: 36px;
  }
}

/* Phones: the contact card runs straight into the footer, no white strip between them (Daria, 23 Oct 2026) */
@media screen and (max-width: 767px) {
  .design-surf .preview .l-spacer {
    display: none;
  }
}

/* ---------- Phone and tablet menu: a white sheet over the top half (Daria, 23 Oct 2026) ----------
   The logo and a close × stay where they are, the links centred and large, the free-preview pill under them,
   Instagram and e-mail small at the foot. Under the sheet the page is darkened and blurred (.navbar_backdrop, a tap
   on it closes the menu). While open, the navbar drops its own blur: a blurred parent would trap both the sheet and the
   backdrop inside the navbar's box. */
@media screen and (max-width: 991px) {
  .design-surf .navbar:has(.navbar_menu.is-open) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .design-surf .navbar:has(.navbar_menu.is-open) .navbar_backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* sized to the screen: the navbar (transformed by the entrance animation) would hold an inset:0 box */
    z-index: 1;
    display: block;
    background-color: rgba(10, 18, 30, .45);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    animation: menu-in .25s ease-out;
  }

  .design-surf .navbar_menu {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    width: 100vw;
    min-height: 50vh;
    min-height: 50dvh;
    margin: 0;
    padding: 96px 24px 72px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    border-radius: 0 0 28px 28px;
    background-color: #ffffff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .2);
  }

  .design-surf .navbar_menu.is-open {
    display: flex;
    animation: menu-down .3s cubic-bezier(.25, 1, .5, 1);
  }

  .design-surf .navbar_logo,
  .design-surf .navbar_burger {
    position: relative;
    z-index: 3;
  }

  .design-surf .navbar_links {
    align-items: center;
    gap: 2px;
  }

  .design-surf .navbar_link,
  .design-surf .navbar.is-dark .navbar_link {
    padding: 8px;
    color: var(--sb-ink);
    font-family: "General Sans", "Inter", Arial, sans-serif;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -.02em;
    text-align: center;
  }

  .design-surf .navbar_menu .navbar_cta {
    width: auto;
  }

  .design-surf .navbar_menu_foot {
    position: absolute;
    right: 24px;
    bottom: 24px;
    left: 24px;
    display: flex;
    justify-content: center;
    gap: 28px;
  }

  .design-surf .navbar_menu_foot a {
    color: #8a8a85;
    font-family: var(--font-body);
    font-size: 13px;
    text-decoration: none;
  }

  /* Open: the burger turns into a close × */
  .design-surf .navbar_burger[aria-expanded="true"] .navbar_burger_icon {
    display: none;
  }

  .design-surf .navbar_burger[aria-expanded="true"]::before {
    content: "";
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23022449' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 24px 24px;
  }

  /* The sheet is white, so the logo shows in its dark version */
  .design-surf .navbar:has(.navbar_menu.is-open) .navbar_logo_img { opacity: 1; }
  .design-surf .navbar:has(.navbar_menu.is-open) .navbar_logo_img.is-inverse { opacity: 0; }

  html:has(.navbar_menu.is-open) body.design-surf {
    overflow: hidden;
  }
}

@keyframes menu-down {
  from { opacity: 0; transform: translateY(-24px); }
  to { opacity: 1; transform: none; }
}

@keyframes menu-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* The WhatsApp ticks: the double-check icon, in the time's grey (Daria, 23 Oct 2026) */
.design-surf .story_bubble_time {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.story_bubble_ticks {
  width: 16px;
  height: 16px;
}

/* Phones: the contact photo starts right after the FAQ's own 88px, and holds the same 88px inside at the top and
   bottom, so both sides of the edge match (Daria, 23 Oct 2026) */
@media screen and (max-width: 767px) {
  .design-surf .preview.l-section {
    padding-top: 0;
  }

  .design-surf .preview_card {
    padding-top: 88px;
    padding-bottom: 88px;
  }
}

/* ---------- The free-preview popup: a photo on top with the title on it, and the date (Daria, 23 Oct 2026) ---------- */
.design-surf .preview-dialog {
  padding: 12px 40px 36px;
}

.design-surf .preview-dialog_head {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  height: 200px;
  margin: 0 -28px 22px;
  padding: 24px 28px;
  overflow: hidden;
  border-radius: 16px;
}

.design-surf .preview-dialog_photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

.design-surf .preview-dialog_head::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(18, 18, 17, 0) 30%, rgba(18, 18, 17, .65) 100%);
}

.design-surf .preview-dialog_head .h-m {
  position: relative;
  z-index: 2;
  margin: 0;
  padding-right: 0;
  color: #ffffff;
}

.design-surf .preview-dialog_close {
  z-index: 3;
  top: 24px;
  right: 24px;
  background-color: rgba(255, 255, 255, .9);
}

.design-surf .preview-dialog > .pf_progress {
  margin-bottom: 14px;
}

.design-surf .preview-dialog_eta {
  position: relative;
  z-index: 2;
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, .9);
}

.design-surf .preview-dialog_eta[hidden] {
  display: none;
}

@media screen and (max-width: 479px) {
  .design-surf .preview-dialog {
    padding: 8px 20px 24px;
  }

  .design-surf .preview-dialog_head {
    height: 160px;
    margin: 0 -12px 18px;
  }
}

/* The popup is white, like the contact form card (Daria, 23 Oct 2026); its fields keep a hairline so they still show */
.design-surf .preview-dialog {
  background-color: #ffffff;
}

.design-surf .preview-dialog .pf input[type="text"],
.design-surf .preview-dialog .pf input[type="email"],
.design-surf .preview-dialog .pf input[type="tel"],
.design-surf .preview-dialog .pf_select__button {
  border: 1px solid #e2e2df;
  background-color: #ffffff;
}

/* Form buttons (popup and card): the label centred, the arrow circle at the right edge (Daria, 23 Oct 2026) */
.design-surf .preview-dialog .pf_next,
.design-surf .preview-dialog .pf_submit,
.design-surf .preview_panel .pf_next,
.design-surf .preview_panel .pf_submit {
  position: relative;
  justify-content: center;
  min-height: 48px; /* the arrow circle no longer gives the height */
  padding-right: 52px;
  padding-left: 52px;
}

.design-surf .preview-dialog .pf_next > span:last-child,
.design-surf .preview-dialog .pf_submit > span:last-child,
.design-surf .preview_panel .pf_next > span:last-child,
.design-surf .preview_panel .pf_submit > span:last-child {
  position: absolute;
  top: 50%;
  right: 6px;
  margin-top: -18px;
}

/* Step 2 of the form (popup and card): Back and "Get free preview" side by side, half and half (Daria, 23 Oct 2026).
   Back stays an arrow only (the word was removed earlier), now an outlined pill as wide as the other button. */
.design-surf .preview-dialog .pf_step_nav,
.design-surf .preview_panel .pf_step_nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.design-surf .preview-dialog .pf_back,
.design-surf .preview_panel .pf_back {
  width: 100%;
  height: 48px;
  border-radius: var(--pill);
}

.design-surf .preview-dialog .pf_step_nav .pf_submit,
.design-surf .preview_panel .pf_step_nav .pf_submit {
  width: 100%;
  min-width: 0;
  padding-right: 48px;
  padding-left: 16px;
  white-space: nowrap;
}

/* Back: the arrow and the word, like the other buttons' text */
.design-surf .preview-dialog .pf_back,
.design-surf .preview_panel .pf_back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--sb-ink);
}


/* Phones: the full-screen popup keeps its photo header in the page margin and 16px fields (no iOS zoom) */
@media screen and (max-width: 767px) {
  .design-surf .preview-dialog {
    padding: 12px 20px 32px;
    border-radius: 0;
  }

  .design-surf .preview-dialog_head {
    height: 180px;
    margin: 0 -8px 18px;
  }

  .design-surf .preview-dialog_close {
    top: max(24px, calc(env(safe-area-inset-top) + 12px));
    right: 24px;
  }

  .design-surf .preview_panel .pf input[type="text"],
  .design-surf .preview_panel .pf input[type="email"],
  .design-surf .preview_panel .pf input[type="tel"],
  .design-surf .preview_panel .pf_select__button,
  .design-surf .preview-dialog .pf input[type="text"],
  .design-surf .preview-dialog .pf input[type="email"],
  .design-surf .preview-dialog .pf input[type="tel"],
  .design-surf .preview-dialog .pf_select__button {
    font-size: 16px;
  }
}

/* ---------- Phones: the navbar fades into the page (Daria, 23 Oct 2026) ----------
   As on the old site: no solid bar and no blur edge, a white gradient that runs out well below the navbar, with many
   stops so the fade has no visible band. Over a dark section the dark version does the same. */
@media screen and (max-width: 767px) {
  .design-surf .navbar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .design-surf .navbar_scrim,
  .design-surf .navbar_scrim.is-inverse {
    bottom: -40px;
    background-color: transparent;
  }

  .design-surf .navbar_scrim {
    background-image: linear-gradient(180deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, .97) 30%,
      rgba(255, 255, 255, .9) 45%,
      rgba(255, 255, 255, .78) 58%,
      rgba(255, 255, 255, .6) 69%,
      rgba(255, 255, 255, .41) 79%,
      rgba(255, 255, 255, .23) 88%,
      rgba(255, 255, 255, .09) 95%,
      rgba(255, 255, 255, 0) 100%);
  }

  .design-surf .navbar_scrim.is-inverse {
    background-image: linear-gradient(180deg,
      rgba(18, 18, 17, .85) 0%,
      rgba(18, 18, 17, .8) 30%,
      rgba(18, 18, 17, .72) 45%,
      rgba(18, 18, 17, .6) 58%,
      rgba(18, 18, 17, .45) 69%,
      rgba(18, 18, 17, .3) 79%,
      rgba(18, 18, 17, .16) 88%,
      rgba(18, 18, 17, .06) 95%,
      rgba(18, 18, 17, 0) 100%);
  }
}

/* The form's Back is the arrow only again (Daria, 23 Oct 2026): a round outlined button, "Get free preview" takes the
   rest of the row */
.design-surf .preview-dialog .pf_step_nav,
.design-surf .preview_panel .pf_step_nav {
  grid-template-columns: 48px minmax(0, 1fr);
}

.design-surf .preview-dialog .pf_back,
.design-surf .preview_panel .pf_back {
  width: 48px;
  font-size: 18px;
}

/* Phones: a slimmer navbar, smaller logo (Daria, 23 Oct 2026) */
@media screen and (max-width: 767px) {
  .design-surf .navbar {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .design-surf .navbar_logo {
    width: 72px;
    height: 28px;
  }

  .design-surf .navbar_burger {
    width: 36px;
    height: 36px;
  }
}

@media screen and (max-width: 767px) {
  /* the headline follows the slimmer navbar */
  .design-surf .hero_grid {
    padding-top: 84px;
  }
}

@media screen and (max-width: 767px) {
  .design-surf .preview-dialog {
    padding: 8px 16px 24px;
    border-radius: 20px;
  }

  .design-surf .preview-dialog_head {
    height: 160px;
    margin: 0 -8px 16px;
  }

  .design-surf .preview-dialog_close {
    top: 18px;
    right: 18px;
  }
}

/* Phones: the navbar's fade is short, so the header reads lower (Daria, 23 Oct 2026) */
@media screen and (max-width: 767px) {
  .design-surf .navbar {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .design-surf .navbar_scrim,
  .design-surf .navbar_scrim.is-inverse {
    bottom: -12px;
  }
}

/* Phones: the blur along the bottom edge of the screen is a thin strip, not 80px (Daria, 23 Oct 2026) */
@media screen and (max-width: 767px) {
  .design-surf .bottom-blur_wrap {
    height: 28px;
  }
}

/* Phones (Daria, 23 Oct 2026): no logo above the contact heading; the navbar 4px taller (52px) */
@media screen and (max-width: 767px) {
  .design-surf .preview_logo {
    display: none;
  }

  .design-surf .navbar {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}