/* foryoubikeservice — plain CSS (no Tailwind, no build step)

   1. BASE RESET      what Tailwind's "preflight" used to provide
   2. COMPONENTS      buttons + dialogs (formerly the React Button / Dialog components)
   3. SITE STYLES     the original hand-written stylesheet, unchanged

   Sections 1 and 2 live in cascade layers so that the site styles in section 3
   always win over them, exactly as they did in the Tailwind build. */

@layer base, components;

:root {
 --font-sans: 'Ubuntu', Arial, sans-serif;
 --font-display: 'Barlow', Arial, sans-serif;
}

/* ==========================================================================
   1. BASE RESET
   ========================================================================== */
@layer base {
 *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing:border-box; margin:0; padding:0; border:0 solid; }
 html { line-height:1.5; -webkit-text-size-adjust:100%; tab-size:4; font-family:var(--font-sans); -webkit-tap-highlight-color:transparent; }
 hr { height:0; color:inherit; border-top-width:1px; }
 h1,h2,h3,h4,h5,h6 { font-size:inherit; font-weight:inherit; }
 a { color:inherit; text-decoration:inherit; }
 b,strong { font-weight:bolder; }
 small { font-size:80%; }
 ol,ul,menu { list-style:none; }
 img,svg,video,canvas,audio,iframe,embed,object { display:block; vertical-align:middle; }
 img,video { max-width:100%; height:auto; }
 button,input,select,optgroup,textarea,::file-selector-button { font:inherit; font-feature-settings:inherit; font-variation-settings:inherit; letter-spacing:inherit; color:inherit; border-radius:0; background-color:transparent; opacity:1; }
 ::placeholder { opacity:1; color:color-mix(in oklab,currentcolor 50%,transparent); }
 textarea { resize:vertical; }
 button,input:where([type='button'],[type='reset'],[type='submit']),::file-selector-button { appearance:button; }
 [hidden]:where(:not([hidden='until-found'])) { display:none !important; }
}

/* ==========================================================================
   2. COMPONENTS
   ========================================================================== */
@layer components {
 /* --- Buttons ----------------------------------------------------------- */
 .btn { --btn-shadow:0 0 #0000; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; white-space:nowrap; border-radius:4px; font-size:.875rem; line-height:calc(1.25 / .875); font-weight:500; cursor:pointer; box-shadow:var(--btn-shadow); transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke; transition-timing-function:cubic-bezier(.4,0,.2,1); transition-duration:.15s; height:2.25rem; padding:.5rem 1rem; }
 .btn:focus-visible { outline:none; box-shadow:0 0 0 1px var(--primary),var(--btn-shadow); }
 .btn:disabled { pointer-events:none; opacity:.5; cursor:not-allowed; }
 .btn svg { pointer-events:none; width:1rem; height:1rem; flex-shrink:0; }

 .btn-default { --btn-shadow:0 1px 3px 0 rgb(0 0 0 / .1),0 1px 2px -1px rgb(0 0 0 / .1); background-color:var(--primary); color:var(--primary-foreground); }
 .btn-outline { --btn-shadow:0 1px 3px 0 rgb(0 0 0 / .1),0 1px 2px -1px rgb(0 0 0 / .1); border:1px solid var(--border); background-color:var(--background); }
 .btn-link { color:var(--primary); text-underline-offset:4px; }
 .btn-icon { width:2.25rem; padding:0; }
 .p-0 { padding:0; }
 @media (hover:hover) {
  .btn-default:hover { background-color:color-mix(in oklab,var(--primary) 90%,transparent); }
  .btn-outline:hover,.btn-ghost:hover { background-color:var(--accent); color:var(--foreground); }
  .btn-link:hover { text-decoration-line:underline; }
 }

 /* --- Dialogs (native <dialog>) ----------------------------------------- */
 .dialog { position:fixed; inset:auto; left:50%; top:50%; translate:-50% -50%; margin:0; width:100%; max-width:32rem; max-height:none; height:auto; overflow:visible; gap:1rem; border:1px solid var(--border); background-color:var(--background); color:var(--foreground); padding:1.5rem; box-shadow:0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1); }
 .dialog[open] { display:grid; animation:dialog-in .2s cubic-bezier(.4,0,.2,1); }
 .dialog[open]::backdrop { background-color:rgb(0 0 0 / .8); animation:overlay-in .15s cubic-bezier(.4,0,.2,1); }
 .dialog.closing { animation:dialog-out .2s cubic-bezier(.4,0,.2,1) forwards; }
 .dialog.closing::backdrop { animation:overlay-out .15s cubic-bezier(.4,0,.2,1) forwards; }
 .dialog-wide { max-width:48rem; }
 @media (min-width:40rem) { .dialog { border-radius:6px; } }
 .dialog-title { font-size:1.125rem; line-height:1; font-weight:600; letter-spacing:-.025em; }
 .dialog-description { font-size:.875rem; line-height:calc(1.25 / .875); color:var(--muted-foreground); }
 /* Close (X) button: first child of the dialog, stays in view while the popup scrolls */
 .dialog { --dialog-gap:1rem; }
 .dialog-close { position:sticky; top:0; z-index:2; justify-self:end; display:grid; place-items:center; width:40px; height:40px; margin:-8px -8px calc(-40px - var(--dialog-gap)) 0; border-radius:50%; background-color:var(--muted); color:var(--foreground); cursor:pointer; transition:background-color .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1); }
 .dialog-close:hover { background-color:var(--primary); color:var(--primary-foreground); }
 .dialog-close:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
 .dialog-close svg { width:20px; height:20px; }
 .dialog-title { padding-right:44px; }
 /* Browsers without <dialog>.showModal(): show it as a plain fixed box with a dimmed page */
 .dialog-fallback { z-index:50; box-shadow:0 0 0 100vmax rgb(0 0 0 / .8); }
 @keyframes dialog-in { from { opacity:0; transform:scale(.95); } }
 @keyframes dialog-out { to { opacity:0; transform:scale(.95); } }
 @keyframes overlay-in { from { opacity:0; } }
 @keyframes overlay-out { to { opacity:0; } }

 /* --- Small helpers ----------------------------------------------------- */
 .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border-width:0; }
 .rotate-180 { rotate:180deg; }

 /* --- 404 page ---------------------------------------------------------- */
 .not-found { display:flex; min-height:100vh; align-items:center; justify-content:center; background-color:var(--background); padding-inline:1rem; }
 .not-found-inner { max-width:28rem; text-align:center; }
 .not-found h1 { font-size:4.5rem; color:var(--foreground); }
 .not-found h2 { margin-top:1rem; font-size:1.25rem; color:var(--foreground); }
 .not-found p { margin-top:.5rem; font-size:.875rem; line-height:calc(1.25 / .875); color:var(--muted-foreground); }
 .not-found-actions { margin-top:1.5rem; }
 .not-found-link { display:inline-flex; align-items:center; justify-content:center; border-radius:4px; background-color:var(--primary); padding:.5rem 1rem; font-size:.875rem; line-height:calc(1.25 / .875); font-weight:500; color:var(--primary-foreground); transition:background-color .15s cubic-bezier(.4,0,.2,1); }
 @media (hover:hover) { .not-found-link:hover { background-color:color-mix(in oklab,var(--primary) 90%,transparent); } }
}

/* ==========================================================================
   3. SITE STYLES (unchanged from the original src/styles.css)
   ========================================================================== */
:root {
 --background: oklch(1 0 0); --foreground: oklch(.25 .005 260);
 --primary: oklch(.705 .195 44); --primary-foreground: oklch(1 0 0);
 --secondary: oklch(.25 0 0); --secondary-foreground: oklch(.98 0 0);
 --muted: oklch(.965 0 0); --muted-foreground: oklch(.48 .005 260);
 --accent: oklch(.965 .027 90); --border: oklch(.89 .003 260);
 --destructive: oklch(.6 .2 27); --overlay: oklch(.12 0 0 / .57);
 --footer-muted: oklch(.73 0 0); --chat: oklch(.7 .19 150);
 --shadow: 0 4px 24px oklch(.1 0 0 / .1);
}
* { box-sizing: border-box; border-color: var(--border); }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; background:var(--background); color:var(--foreground); font-family:var(--font-sans); font-size:15px; line-height:1.7; }
h1,h2,h3,h4 { font-family:var(--font-display); line-height:1.2; font-weight:700; letter-spacing:0; }
a { text-decoration:none; } button,input,select,textarea { font:inherit; } button { cursor:pointer; }
.site-container { width:min(1120px,calc(100% - 64px)); margin:auto; }
.site-header { background:var(--secondary); color:var(--secondary-foreground); height:100px; position:sticky; top:0; z-index:30; }
.header-inner { width:calc(100% - 64px); height:100%; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:11px; color:var(--secondary-foreground); font-family:var(--font-display); font-size:24px; font-weight:700; line-height:1; }
.brand-mark { width:47px; height:47px; padding:9px; border:2px solid var(--primary); border-radius:50%; color:var(--primary); }
.brand span span { color:var(--primary); }.brand small { display:block; font:10px var(--font-sans); color:var(--footer-muted); margin-top:7px; }
.desktop-nav { display:flex; align-items:center; gap:31px; }
.nav-link { color:var(--secondary-foreground); font-size:14px; padding:8px 0; border-bottom:2px solid transparent; transition:color .2s; }
.nav-link:hover,.nav-link.active { color:var(--primary); }.nav-link.active { border-bottom-color:var(--primary); }
.service-button { height:46px; border-radius:4px; font-weight:600; font-size:13px; padding:0 24px; text-transform:uppercase; box-shadow:none; }
.menu-toggle { display:none; color:var(--secondary-foreground); }
.hero { position:relative; height:min(780px,calc(100svh - 150px)); min-height:550px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 55%; }
.hero::after { content:''; position:absolute; inset:0; background:var(--overlay); }
.hero-content { position:relative; z-index:1; text-align:center; color:var(--primary-foreground); max-width:900px; padding:30px; }
.hero h1 { font-size:42px; margin:0 0 20px; }.hero h1 span { color:var(--primary); }
.hero p { max-width:660px; font-size:17px; line-height:1.7; margin:0 auto 28px; }
.hero-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }
.section { padding:80px 0; }.section-muted { background:var(--muted); }.eyebrow { color:var(--primary); text-transform:uppercase; font-size:13px; font-weight:600; margin:0 0 12px; }.section-heading { font-size:36px; margin:0 0 36px; }.center { text-align:center; }.highlight { color:var(--primary); }
.about-grid { display:grid; grid-template-columns:1fr 1.08fr; gap:55px; align-items:center; }.about-photo { position:relative; padding-top:28px; }.about-photo img { display:block; width:100%; height:445px; object-fit:cover; }.experience-badge { position:absolute; top:0; right:0; background:var(--primary); color:var(--primary-foreground); padding:23px; width:170px; font-size:14px; line-height:1.5; }.experience-badge svg { margin-bottom:8px; }.experience-badge strong { display:block; font:700 24px var(--font-display); }
.about-copy h2 { font-size:35px; margin:0 0 20px; }.body-copy { color:var(--muted-foreground); margin:0 0 25px; }.numbered-feature { display:flex; gap:18px; margin:20px 0; }.feature-number { background:var(--background); color:var(--primary); width:44px; height:44px; display:grid; place-items:center; flex-shrink:0; font:700 19px var(--font-display); }.numbered-feature h3 { font-size:18px; margin:0 0 6px; }.numbered-feature p { color:var(--muted-foreground); font-size:14px; margin:0; }.about-copy .service-button { margin-top:10px; }
.service-layout { display:grid; grid-template-columns:260px 1fr; gap:30px; }.service-tabs { display:flex; flex-direction:column; gap:12px; }.service-tab { width:100%; min-height:65px; justify-content:flex-start; border-radius:0; background:var(--accent); color:var(--foreground); gap:16px; font:600 18px var(--font-display); padding:20px; }.service-tab[aria-selected=true] { background:var(--primary); color:var(--primary-foreground); }.service-tab svg { width:27px; height:27px; }.service-panel { display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center; }.service-panel img { width:100%; height:305px; object-fit:cover; }.service-panel h3 { font-size:25px; margin:0 0 15px; }.service-panel p { color:var(--muted-foreground); font-size:14px; }.check-list { list-style:none; padding:0; margin:18px 0 23px; }.check-list li { display:flex; align-items:center; gap:10px; margin:9px 0; font-size:14px; }.check-list svg { color:var(--primary); width:17px; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }.gallery-item { position:relative; padding:0; border:0; display:block; height:265px; width:100%; overflow:hidden; border-radius:4px; background:var(--secondary); }.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }.gallery-item:hover img { transform:scale(1.04); }.gallery-caption { position:absolute; bottom:0; left:0; right:0; text-align:left; padding:22px 20px; color:var(--primary-foreground); background:linear-gradient(transparent,var(--overlay)); }.gallery-caption h3 { margin:0 0 4px; font-size:21px; }.gallery-caption p { margin:0; font-size:13px; }.gallery-button { margin-top:32px; }
.benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:35px; }.benefit { display:flex; gap:20px; }.benefit>svg { flex-shrink:0; width:38px; height:38px; color:var(--primary); }.benefit h3 { margin:0 0 12px; font-size:21px; }.benefit p { font-size:14px; color:var(--muted-foreground); margin:0; }
.promise-band { padding:48px 0; background:var(--secondary); color:var(--secondary-foreground); }.promises { display:grid; grid-template-columns:repeat(4,1fr); text-align:center; gap:24px; }.promise svg { color:var(--primary); width:30px; height:30px; margin:auto auto 12px; }.promise h3 { margin:0 0 7px; font-size:20px; }.promise p { color:var(--footer-muted); margin:0; font-size:13px; }
.faq-container { max-width:820px; margin:auto; }.faq-subtitle { color:var(--muted-foreground); margin-top:-20px; margin-bottom:30px; }.faq-item { border:1px solid var(--border); margin-bottom:12px; border-radius:4px; overflow:hidden; }.faq-question { width:100%; min-height:61px; border-radius:0; text-align:left; justify-content:space-between; padding:18px 23px; white-space:normal; font-size:16px; background:var(--muted); }.faq-question[aria-expanded=true] { color:var(--primary-foreground); background:var(--primary); }.faq-answer { margin:0; padding:18px 23px; color:var(--muted-foreground); }
.site-footer { background:var(--secondary); color:var(--secondary-foreground); padding:62px 0 0; }.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.15fr; gap:36px; }.site-footer h3 { margin:0 0 24px; font-size:21px; }.site-footer p,.site-footer a:not(.brand) { color:var(--footer-muted); font-size:14px; }.site-footer .brand { font-size:21px; }.footer-list { display:flex; flex-direction:column; gap:9px; }.footer-list a:hover { color:var(--primary); }.footer-contact { display:flex; align-items:center; gap:9px; }.footer-contact svg { width:17px; color:var(--primary); }.footer-bottom { margin-top:40px; padding:22px 0; border-top:1px solid var(--border); display:flex; justify-content:space-between; color:var(--footer-muted); font-size:12px; gap:16px; }
.floating-contact { position:fixed; bottom:25px; width:52px; height:52px; z-index:20; border-radius:50%; box-shadow:var(--shadow); padding:0; color:var(--primary-foreground); }.floating-contact svg { width:24px; height:24px; }.floating-call { right:24px; background:var(--primary); }.floating-chat { left:24px; background:var(--chat); }
.page-heading { padding:60px 0; background:var(--secondary); color:var(--primary-foreground); text-align:center; }.page-heading h1 { font-size:42px; margin:0 0 12px; }.page-heading p { margin:0; color:var(--footer-muted); }
.booking-form { display:grid; gap:15px; }.booking-form label { font-size:14px; font-weight:500; display:grid; gap:6px; }.booking-form input,.booking-form select,.booking-form textarea { background:var(--background); border:1px solid var(--border); border-radius:4px; padding:11px 12px; width:100%; color:var(--foreground); }.booking-form input:focus,.booking-form select:focus,.booking-form textarea:focus { outline:2px solid var(--primary); outline-offset:2px; }.form-note { padding:14px; background:var(--accent); color:var(--foreground); font-size:14px; }.contact-content { max-width:640px; margin:auto; }.mobile-nav { display:none; }.lightbox-image { width:100%; max-height:65vh; object-fit:contain; }
@media(min-width:1600px){ .hero { height:780px; } }
@media(max-width:1000px){ .desktop-nav { gap:18px; }.brand { font-size:21px; }.service-layout { grid-template-columns:220px 1fr; }.service-panel { gap:20px; }.about-grid { gap:30px; }.footer-grid { grid-template-columns:repeat(2,1fr); }.hero h1 { font-size:36px; }.service-panel h3 { font-size:23px; } }
@media(max-width:760px){ .site-container { width:calc(100% - 36px); }.site-header { height:78px; }.header-inner { width:calc(100% - 36px); }.brand { font-size:21px; }.brand-mark { width:39px; height:39px; padding:7px; }.desktop-nav { display:none; }.menu-toggle { display:inline-flex; }.mobile-nav { display:flex; position:absolute; top:78px; width:100%; flex-direction:column; padding:18px 25px 24px; gap:12px; background:var(--secondary); box-shadow:var(--shadow); }.hero { min-height:530px; height:calc(100svh - 125px); max-height:680px; }.hero-photo { object-position:63% center; }.hero-content { padding:25px 20px; }.hero h1 { font-size:32px; max-width:530px; }.hero p { font-size:15px; }.hero-actions { gap:10px; }.service-button { padding:0 18px; font-size:12px; }.section { padding:55px 0; }.about-grid { grid-template-columns:1fr; gap:32px; }.about-photo img { height:350px; }.about-copy h2,.section-heading { font-size:30px; }.service-layout { grid-template-columns:1fr; gap:25px; }.service-tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.service-tab { min-height:58px; padding:12px; font-size:15px; gap:9px; }.service-tab svg { width:21px; height:21px; }.service-panel { grid-template-columns:1fr 1fr; gap:20px; }.service-panel img { height:280px; }.gallery-grid { grid-template-columns:1fr 1fr; gap:15px; }.gallery-item { height:225px; }.benefits { grid-template-columns:1fr; gap:30px; }.promises { grid-template-columns:1fr 1fr; gap:32px; }.footer-grid { gap:32px 20px; }.footer-bottom { flex-direction:column; padding-bottom:75px; } }
@media(max-width:480px){ .service-panel { grid-template-columns:1fr; }.service-panel img { height:260px; }.gallery-item { height:195px; }.gallery-caption { padding:16px 12px; }.gallery-caption h3 { font-size:18px; }.gallery-caption p { font-size:12px; }.footer-grid { grid-template-columns:1fr; }.hero h1 { font-size:30px; }.hero-actions .service-button { font-size:11px; padding:0 14px; }.hero p { line-height:1.6; }.floating-contact { width:46px; height:46px; bottom:18px; }.floating-call { right:18px; }.floating-chat { left:18px; } }
@media(prefers-reduced-motion:reduce){ html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; animation:none!important; } }

.testimonial-note { color:var(--muted-foreground); margin:-19px 0 32px; font-size:13px; }
.testimonial-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.testimonial-card { background:var(--background); border-radius:4px; padding:28px; border-bottom:3px solid var(--primary); display:flex; flex-direction:column; min-height:275px; }
.testimonial-quote { color:var(--primary); width:30px; height:30px; margin-bottom:15px; }
.testimonial-card blockquote { margin:0 0 25px; color:var(--muted-foreground); font-size:15px; line-height:1.8; flex:1; }
.testimonial-author { display:flex; align-items:center; gap:13px; }.testimonial-avatar { display:grid; place-items:center; width:45px; height:45px; border-radius:50%; background:var(--accent); color:var(--primary); font-weight:700; flex-shrink:0; }
.testimonial-author h3 { margin:0 0 4px; font-size:18px; }.testimonial-author p { margin:0; color:var(--muted-foreground); font-size:12px; }
.testimonial-controls { display:flex; justify-content:center; align-items:center; gap:18px; margin-top:28px; }.testimonial-counter { font-size:13px; color:var(--muted-foreground); min-width:36px; text-align:center; }
.contact-popup { width:calc(100% - 32px); max-height:calc(100svh - 32px); overflow-y:auto; gap:10px; border-radius:6px; }.contact-popup .eyebrow { margin:0; }.contact-popup h2 { font:700 29px var(--font-display); }.popup-form { gap:12px; margin-top:10px; }.popup-note { font-size:12px; color:var(--muted-foreground); margin:0; }.floating-chat svg { width:27px; height:27px; }
@media(max-width:760px){ .testimonial-grid { grid-template-columns:1fr; }.testimonial-card:not(:first-child) { display:none; }.testimonial-card { min-height:260px; }.contact-popup { padding:21px; }.contact-popup h2 { font-size:25px; } }

/* ---- Added for the plain-HTML version ---- */
/* All reviews live in the HTML; only three show at a time. */
.testimonial-card:nth-child(n+4) { display:none; }
.testimonial-author p + p { color:var(--primary); font-weight:500; margin-top:2px; }
/* Contact popup: fits any screen, scrolls inside itself, no zoom-on-focus on phones. */
.contact-popup { --dialog-gap:10px; max-height:calc(100dvh - 32px); overscroll-behavior:contain; }
@media(max-width:760px){ .booking-form input,.booking-form select,.booking-form textarea { font-size:16px; } }
@media(max-height:560px){ .contact-popup { padding:16px; }.contact-popup h2 { font-size:22px; }.popup-form { gap:8px; }.popup-form input,.popup-form select,.popup-form textarea { padding:8px 10px; } }