/* ===== FONTS ===== */ @font-face{ font-family:"FiraGO"; src:url("assets/fonts/FiraGO-Regular.otf") format("opentype"); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:"FiraGO"; src:url("assets/fonts/FiraGO-Medium.otf") format("opentype"); font-weight:500;font-style:normal;font-display:swap; } @font-face{ font-family:"FiraGO"; src:url("assets/fonts/FiraGO-SemiBold.otf") format("opentype"); font-weight:600;font-style:normal;font-display:swap; } @font-face{ font-family:"FiraGO"; src:url("assets/fonts/FiraGO-Bold.otf") format("opentype"); font-weight:700;font-style:normal;font-display:swap; } /* ===== DESIGN TOKENS ===== */ :root{ /* brand ramp */ /* the blues are sampled from the hero artwork: its sky gradient gives the tints, its splash gives the saturated end */ --primary-50:#eaf6fe; --primary-100:#d3ebfd; --primary-300:#7fcaf9; --primary:#1590cf; --primary-600:#1379b3; --primary-700:#0f6a9c; --primary-800:#0b5079; --primary-rgb:21,144,207; --accent-100:#eef7dd; --accent:#7fb837; --accent-600:#52791e; /* semantic surfaces & text */ --surface:#ffffff; --surface-2:#e9f4fd; --surface-3:#dcedfb; --surface-inverse:#08243d; --on-surface:#0d2436; --on-surface-muted:#4a6579; --on-inverse:#dceefb; --on-inverse-muted:#8fb4cf; --border:#d6e9f7; --border-strong:#bcdcf1; --danger:#d94a5f; /* spacing scale (4 / 8) */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;--sp-16:64px;--sp-20:80px; /* radius scale */ --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:999px; /* elevation scale */ --e1:0 1px 2px rgba(13,36,54,.05), 0 1px 3px rgba(13,36,54,.04); --e2:0 4px 10px -4px rgba(13,36,54,.10), 0 2px 6px -2px rgba(13,36,54,.06); --e3:0 14px 30px -14px rgba(13,36,54,.20), 0 4px 12px -6px rgba(13,36,54,.08); --e4:0 28px 60px -28px rgba(13,36,54,.32), 0 10px 24px -12px rgba(13,36,54,.12); /* motion */ --dur-fast:150ms; --dur:220ms; --dur-slow:320ms; --dur-reveal:560ms; --ease-out:cubic-bezier(.22,.9,.28,1); --ease-enter:cubic-bezier(.16,1,.3,1); --maxw:1200px; --header-h:74px; } /* ===== BASE ===== */ *{box-sizing:border-box;margin:0;padding:0;letter-spacing:0} html{ scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px); -webkit-text-size-adjust:100%; /* hidden on alone leaves iOS laying the page out at the widest descendant; clip does the same job without creating a scroll container, with hidden kept as the pre-Safari-16 fallback */ overflow-x:hidden; overflow-x:clip; } body{ font-family:"FiraGO",system-ui,sans-serif; font-size:16px; color:var(--on-surface); background:var(--surface-2); line-height:1.6; letter-spacing:0; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; overflow-x:clip; max-width:100%; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} svg{display:block} .container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-6)} /* focus visibility — never removed */ :focus-visible{ outline:3px solid rgba(var(--primary-rgb),.45); outline-offset:3px; border-radius:6px; } .skip-link{ position:absolute;left:var(--sp-4);top:-100px;z-index:200; background:var(--surface);color:var(--primary-700);font-weight:600;font-size:15px; padding:12px 18px;border-radius:var(--r-full);box-shadow:var(--e3); transition:top var(--dur) var(--ease-out); } .skip-link:focus{top:var(--sp-3)} /* ===== BUTTONS ===== */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2); min-height:48px;padding:0 var(--sp-6); border-radius:var(--r-full);border:0;cursor:pointer; font-family:inherit;font-weight:600;font-size:15px;line-height:1;white-space:nowrap; transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } /* the fill starts at primary-600, not primary: white on primary is only 3.4:1 and this text has to clear 4.5:1 */ .btn-primary{ background:linear-gradient(135deg,var(--primary-600),var(--primary-800)); color:#fff; box-shadow:0 8px 18px -8px rgba(var(--primary-rgb),.6); transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),filter var(--dur) var(--ease-out); } .btn-primary:hover{filter:brightness(1.12);transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(var(--primary-rgb),.55)} .btn-primary:active{transform:translateY(0);filter:brightness(.95)} .btn-ghost{background:var(--surface);color:var(--on-surface);border:1.5px solid var(--border-strong)} .btn-ghost:hover{border-color:var(--primary);color:var(--primary-700);transform:translateY(-2px)} .btn-ghost:active{transform:translateY(0)} .btn-block{width:100%} /* ===== HEADER ===== */ .site-header{ position:sticky;top:0;z-index:100; background:rgba(233,244,253,.78); backdrop-filter:blur(16px) saturate(180%); -webkit-backdrop-filter:blur(16px) saturate(180%); border-bottom:1px solid transparent; transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out); } .site-header.scrolled{background:rgba(233,244,253,.9);border-color:var(--border);box-shadow:var(--e1)} .nav-inner{display:flex;align-items:center;gap:var(--sp-6);height:var(--header-h)} .brand{display:flex;align-items:center;gap:var(--sp-3);border-radius:var(--r-sm)} .brand-logo{width:40px;height:40px;object-fit:contain} /* stacked instead of one long bilingual line — the nav row already runs with 0px to spare (see note below), so the wider of the two words sets the brand's width instead of both languages side by side */ .brand-name{display:flex;flex-direction:column;line-height:1.2;white-space:nowrap} .brand-name strong{font-size:17px;font-weight:700;color:var(--primary)} .brand-name small{font-size:11px;font-weight:500;color:var(--on-surface-muted)} /* the container caps at --maxw (1200px) on every desktop width, wide monitor or not — so the nav needs real slack at its default size, not only once a media query narrows things. 7 links + brand + CTA at 14px padding measured out to exactly the available width with 0px to spare, one font-metric difference from wrapping on any machine. */ .nav-links{display:flex;align-items:center;gap:3px;margin-inline:auto} .nav-links a{ position:relative;white-space:nowrap; padding:9px 11px;border-radius:var(--r-full); font-size:14.5px;font-weight:500;color:var(--on-surface-muted); transition:color var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out); } .nav-links a:hover{color:var(--on-surface);background:var(--surface-3)} .nav-links a.active{color:var(--primary-700);background:var(--primary-50)} .nav-cta{min-height:42px;padding:0 var(--sp-5);font-size:14.5px} .burger{ display:none;flex-direction:column;justify-content:center;gap:5px; width:44px;height:44px;background:none;border:0;cursor:pointer;border-radius:var(--r-sm); } .burger span{ width:24px;height:2.5px;background:var(--on-surface);border-radius:2px;margin-inline-start:auto;margin-inline-end:auto; transition:transform var(--dur) var(--ease-out),opacity var(--dur-fast) var(--ease-out); } .burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} /* ===== HERO ===== */ .hero{position:relative;isolation:isolate;padding:var(--sp-16) 0 calc(var(--sp-20) + var(--sp-4));background:var(--surface-2);overflow:hidden} .hero-glow{ position:absolute;inset:-30% -10% auto -10%;height:120%;z-index:-1;pointer-events:none; background: radial-gradient(46% 42% at 78% 12%,rgba(127,184,55,.20),transparent 62%), radial-gradient(52% 46% at 10% 4%,rgba(var(--primary-rgb),.22),transparent 60%), radial-gradient(40% 40% at 60% 82%,rgba(var(--primary-rgb),.10),transparent 65%); } /* named areas (not just source order) so the mobile media query can restack into a single column — headline, then photo, then stats — without touching the DOM order */ .hero-inner{ display:grid; grid-template-columns:1.02fr .98fr; grid-template-areas:"copy media" "stats media"; gap:var(--sp-8) var(--sp-16); align-items:center; } /* grid items default to min-width:auto, which lets a wide descendant (two nowrap buttons side by side, at narrow widths) stretch the whole track past the viewport instead of wrapping inside it */ .hero-copy{grid-area:copy;min-width:0} .hero-stats{grid-area:stats;min-width:0} .hero-media{grid-area:media;min-width:0} .hero h1{font-size:clamp(34px,4.6vw,58px);line-height:1.1;font-weight:700} .hero h1 .hl{color:var(--primary-700)} .hero .lead{margin:var(--sp-5) 0 var(--sp-8);font-size:17.5px;color:var(--on-surface-muted);max-width:52ch} .hero-actions{display:flex;gap:var(--sp-3);flex-wrap:wrap} .hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);max-width:520px} .hero-stat{position:relative;padding-inline-start:var(--sp-4);min-width:0} .hero-stat::before{ content:"";position:absolute;inset-inline-start:0;top:4px;bottom:4px;width:3px;border-radius:2px; background:linear-gradient(180deg,var(--primary),var(--accent)); } .hero-stat-icon{display:none} .hero-stats strong{display:block;font-size:27px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap} .hero-stats strong.stat-static{font-size:23px} .hero-stats span{font-size:13px;color:var(--on-surface-muted);overflow-wrap:break-word} .hero-media{position:relative} .hero-frame{ position:relative;border-radius:var(--r-xl);overflow:hidden; box-shadow:var(--e4); border:1px solid rgba(255,255,255,.6); } .hero-frame::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(13,36,54,0) 62%,rgba(13,36,54,.16) 100%); } .hero-img{width:100%;height:clamp(340px,42vw,500px);object-fit:cover;object-position:center 55%} .hero-badge{ position:absolute;inset-inline-start:-14px;bottom:26px; background:rgba(255,255,255,.92); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1px solid var(--border);border-radius:var(--r-lg); padding:var(--sp-3) var(--sp-4); display:flex;align-items:center;gap:var(--sp-3); box-shadow:var(--e3);max-width:86%; } .hero-badge .dot{ width:10px;height:10px;border-radius:50%;background:var(--accent);flex:0 0 auto; box-shadow:0 0 0 4px rgba(127,184,55,.22); } .hero-badge strong{display:block;font-size:14px;font-weight:600} .hero-badge small{color:var(--on-surface-muted);font-size:12.5px} .eyebrow{ display:inline-flex;align-items:center; font-weight:600;font-size:13px;line-height:1; color:var(--accent-600);background:var(--accent-100); border:1px solid rgba(127,184,55,.28); padding:8px 14px;border-radius:var(--r-full);margin-bottom:var(--sp-5); } /* ===== SECTION SHELL ===== */ .section{padding:clamp(72px,8.5vw,112px) 0} .section-head{text-align:center;max-width:720px;margin:0 auto var(--sp-12)} .section-head h2{font-size:clamp(28px,3.4vw,42px);font-weight:700;line-height:1.2;margin-top:var(--sp-1)} .section-head p{color:var(--on-surface-muted);margin-top:var(--sp-4);font-size:17px;text-wrap:pretty} .grid{display:grid;gap:var(--sp-6)} .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--e1); } /* ===== SERVICES ===== */ /* arch-topped photo inset in a white card, on a deep blue band */ .services{background:var(--surface-inverse)} .services .section-head h2{color:var(--on-inverse)} .services .section-head p{color:var(--on-inverse-muted)} .services-grid{grid-template-columns:repeat(4,1fr)} .service-card{ position:relative;display:flex;flex-direction:column; padding:var(--sp-3) var(--sp-3) var(--sp-5); border-radius:24px;border-color:transparent; transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out); } .service-card:hover{transform:translateY(-5px);box-shadow:var(--e4)} .service-media{ position:relative;flex:0 0 auto;aspect-ratio:4/5;overflow:hidden; border-radius:96px 96px 18px 18px;background:var(--surface-3); } /* base bundled photo is .service-slide #1; admin-uploaded extras from service_photos get appended and crossfaded by site-content.js — same "extra slides only, JS never runs otherwise" fallback as .doctor-slide */ .service-slides{position:absolute;inset:0} .service-slide{ position:absolute;inset:0; background-repeat:no-repeat;background-size:cover;background-position:center; opacity:1;transition:opacity .6s ease,transform var(--dur-slow) var(--ease-out); } .service-card:hover .service-slide{transform:scale(1.05)} .service-body{padding:var(--sp-4) var(--sp-3) 0;display:flex;flex-direction:column;flex:1} .service-card h3{font-size:16.5px;font-weight:600;line-height:1.3;margin-bottom:6px} .service-card p{color:var(--on-surface-muted);font-size:13px;line-height:1.45} /* ===== ABOUT ===== */ .about{background:var(--surface-3)} .section.about{padding-bottom:0} .about-inner{display:grid;grid-template-columns:1fr 1.08fr;gap:var(--sp-16);align-items:center} .about-media{position:relative} .about-media::before{ content:"";position:absolute;inset:18px -18px -18px 18px;border-radius:var(--r-xl); background:linear-gradient(140deg,rgba(var(--primary-rgb),.16),rgba(127,184,55,.16)); } /* the room photo is portrait (704x955), so it gets a taller frame than a landscape shot would and is anchored to the certificate wall */ .about-media img{ position:relative;width:100%;height:clamp(360px,42vw,560px);object-fit:cover;object-position:center 38%; border-radius:var(--r-xl);box-shadow:var(--e4); } .about-copy h2{font-size:clamp(26px,3.2vw,40px);font-weight:700;line-height:1.2;margin:var(--sp-1) 0 var(--sp-4)} .about-copy p{color:var(--on-surface-muted);font-size:16.5px;max-width:62ch} .about-lead-people{margin-top:var(--sp-4)} .about-lead-people strong{color:var(--on-surface);font-weight:600} .ticks{list-style:none;margin:var(--sp-6) 0;display:grid;gap:var(--sp-3)} .ticks li{position:relative;padding-inline-start:34px;font-weight:500;font-size:15.5px} .ticks li::before{ content:"";position:absolute;inset-inline-start:0;top:2px; width:22px;height:22px;border-radius:50%;background:var(--accent); } .ticks li::after{ content:"";position:absolute;inset-inline-start:8px;top:7px; width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg); } .about-brands{margin-top:var(--sp-5);font-size:15.5px} .about-brands strong{color:var(--on-surface);font-weight:600} .stats-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);margin-top:var(--sp-8)} /* number over label: side by side the long Georgian labels crowd the figure and the columns start colliding */ .stat{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2)} .stat strong{font-size:38px;font-weight:700;color:var(--primary-700);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap} .stat span{font-size:12.5px;color:var(--on-surface-muted);line-height:1.35;overflow-wrap:break-word} .stat{min-width:0} /* ===== BRAND MARQUEE ===== */ .brand-strip{margin-top:clamp(56px,7vw,84px);background:var(--surface-inverse);padding:var(--sp-8) 0;overflow:hidden} .brand-strip-title{ color:var(--on-inverse-muted);font-size:13px;font-weight:500;text-align:center;margin-bottom:var(--sp-6); } .marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); } .marquee-track{display:flex;width:max-content;animation:marquee-scroll 40s linear infinite} .marquee-group{display:flex;align-items:center;gap:58px;padding-inline-end:58px} .marquee img{ width:148px;height:50px;object-fit:contain;flex:0 0 auto; filter:brightness(0) invert(1);opacity:.66; transition:opacity var(--dur) var(--ease-out); } .marquee:hover .marquee-track{animation-play-state:paused} .marquee img:hover{opacity:1} @keyframes marquee-scroll{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} } /* ===== DOCTORS ===== */ .doctors{background:var(--surface-2)} .doctors-grid{grid-template-columns:repeat(3,1fr);align-items:stretch} .doctor-card{ overflow:hidden;display:flex;flex-direction:column; transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out); } .doctor-card:hover{transform:translateY(-4px);box-shadow:var(--e3);border-color:var(--primary-100)} /* doctor-photo is now a carousel: .doctor-slides holds one or more .doctor-slide layers, crossfaded by inline opacity from site-content.js. With only the built-in photo (no admin-uploaded extras) this renders identically to the old single static photo — the carousel JS never even runs. */ .doctor-carousel{ position:relative;height:340px;width:100%; background-color:var(--surface-3);overflow:hidden;flex:0 0 auto; } .doctor-slides{position:absolute;inset:0} .doctor-slide{ position:absolute;inset:0; background-repeat:no-repeat;background-size:cover;background-position:center; opacity:1;transition:opacity .6s ease; } .doctor-carousel::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:1; background:linear-gradient(180deg,rgba(13,36,54,0) 66%,rgba(13,36,54,.22) 100%); } /* face-first crops — tuned per photo */ .photo-galaktion{background-image:url("assets/doctor-galaktion.jpg");background-size:120%;background-position:55% 6%} .photo-beka{background-image:url("assets/doctor-beka.jpg");background-size:135%;background-position:74% 18%} .photo-lika{background-image:url("assets/doctor-lika.jpg");background-size:195%;background-position:44% 34%} .doctor-dots{ position:absolute;z-index:2;bottom:12px;left:50%;transform:translateX(-50%); display:flex;gap:6px; } .doctor-dots button{ width:7px;height:7px;border-radius:50%;border:0;padding:0;cursor:pointer; background:rgba(255,255,255,.5);transition:background var(--dur) var(--ease-out),transform var(--dur) var(--ease-out); } .doctor-dots button.is-active{background:#fff;transform:scale(1.3)} .doctor-nav-btn{ position:absolute;z-index:2;top:50%;transform:translateY(-50%); width:32px;height:32px;border-radius:50%;border:0;cursor:pointer; display:grid;place-items:center;color:#fff; background:rgba(13,36,54,.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); opacity:0;transition:opacity var(--dur) var(--ease-out),background var(--dur) var(--ease-out); } .doctor-nav-btn svg{width:18px;height:18px} .doctor-carousel:hover .doctor-nav-btn,.doctor-nav-btn:focus-visible{opacity:1} .doctor-nav-btn:hover{background:rgba(13,36,54,.55)} .doctor-nav-prev{left:10px} .doctor-nav-next{right:10px} @media(hover:none){ /* no hover on touch screens — keep the arrows reachable */ .doctor-nav-btn{opacity:1;background:rgba(13,36,54,.3)} } .doctor-body{padding:var(--sp-6);display:flex;flex-direction:column;flex:1} .doctor-body h3{font-size:19px;font-weight:600;line-height:1.3} .doctor-body .role{ display:inline-flex;align-self:flex-start;margin-top:var(--sp-2); padding:5px 11px;border-radius:var(--r-full); background:var(--primary-50);color:var(--primary-700); font-size:13px;font-weight:600;line-height:1.35; } .doctor-facts{list-style:none;margin:var(--sp-4) 0 var(--sp-5);display:grid;gap:var(--sp-3)} .doctor-facts li{position:relative;padding-inline-start:20px;font-size:14px;color:var(--on-surface-muted);line-height:1.55} .doctor-facts li::before{ content:"";position:absolute;inset-inline-start:0;top:8px;width:7px;height:7px;border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--accent)); } .langs{ margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--border); font-size:13px;color:var(--on-surface-muted);font-weight:500; } /* ===== RESULTS ===== */ /* empty by default — populated by site-content.js once an admin uploads photos through the admin panel; the placeholder message is the whole .results-content markup until then */ .results{background:var(--surface-3)} .results-empty{ text-align:center;color:var(--on-surface-muted);font-size:16px; padding:var(--sp-10) 0; } .results-content{display:flex;flex-direction:column;gap:var(--sp-10)} .case-card:last-child{margin-bottom:0} .case-title{font-size:19px;font-weight:600;margin-bottom:var(--sp-5)} .case-compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)} .case-frame{ position:relative;aspect-ratio:4/3;overflow:hidden; border-radius:var(--r-lg);background:var(--surface-3);box-shadow:var(--e1); } .case-slides{position:absolute;inset:0} .case-slide{ position:absolute;inset:0; background-repeat:no-repeat;background-size:cover;background-position:center; opacity:1;transition:opacity .6s ease; } .case-label{ position:absolute;z-index:2;top:12px;left:12px; background:rgba(13,36,54,.72);color:#fff;font-size:12px;font-weight:700; padding:6px 12px;border-radius:var(--r-full); backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); } /* ===== WHY US ===== */ .why{background:var(--surface-3)} .why-grid{grid-template-columns:repeat(3,1fr)} .why-card{ position:relative;padding:var(--sp-8) var(--sp-6);overflow:hidden; transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out); } .why-card::before{ content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--primary),var(--accent)); transform:scaleY(0);transform-origin:top; transition:transform var(--dur-slow) var(--ease-out); } .why-card:hover{transform:translateY(-4px);box-shadow:var(--e3);border-color:var(--primary-100)} .why-card:hover::before{transform:scaleY(1)} .why-card .num{ display:inline-flex;align-items:center;justify-content:center; min-width:38px;height:28px;padding:0 10px;margin-bottom:var(--sp-4); border-radius:var(--r-full);background:var(--primary-50);color:var(--primary-700); font-size:13px;font-weight:700;font-variant-numeric:tabular-nums; } .why-card h3{font-size:18px;font-weight:600;line-height:1.35;margin-bottom:var(--sp-3)} .why-card p{color:var(--on-surface-muted);font-size:15px} /* ===== CONTACT ===== */ .contact{background:var(--surface-2)} .contact-inner{display:grid;grid-template-columns:1fr 1.02fr;gap:var(--sp-16);align-items:start} .contact-info h2{font-size:clamp(26px,3.2vw,40px);font-weight:700;line-height:1.2;margin:var(--sp-1) 0 var(--sp-4)} .contact-info p{color:var(--on-surface-muted);font-size:16.5px;max-width:52ch} .contact-list{list-style:none;margin-top:var(--sp-8);display:grid;gap:var(--sp-3)} .contact-list li{ display:flex;align-items:center;gap:var(--sp-4); padding:var(--sp-3) var(--sp-4); border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2); font-weight:500;word-break:break-word; transition:border-color var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out); } .contact-list li:hover{border-color:var(--primary-100);background:var(--primary-50)} .contact-list .ci{ display:grid;place-items:center;width:42px;height:42px;flex:0 0 auto; border-radius:var(--r-sm);color:var(--primary-700); background:var(--surface);border:1px solid var(--border); } .contact-list .ci svg{width:20px;height:20px} .contact-list a{transition:color var(--dur) var(--ease-out)} .contact-list a:hover{color:var(--primary-700)} .contact-multi{display:flex;flex-direction:column;line-height:1.5} .contact-multi a{padding:4px 0} .booking-form{padding:var(--sp-8);box-shadow:var(--e3)} .field{margin-bottom:var(--sp-4)} .field label{display:block;font-size:14px;font-weight:600;margin-bottom:var(--sp-2)} .field input,.field select,.field textarea{ width:100%;min-height:48px;padding:12px 14px; border:1.5px solid var(--border-strong);border-radius:var(--r-md); font-family:inherit;font-size:16px;color:var(--on-surface);background:var(--surface); letter-spacing:0;resize:vertical; transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out); } .field textarea{min-height:96px} .field ::placeholder{color:#8aa7bc} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(var(--primary-rgb),.14); } .field input.invalid,.field select.invalid{border-color:var(--danger);box-shadow:0 0 0 4px rgba(217,74,95,.12)} .form-note{margin-top:var(--sp-4);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);font-weight:500;font-size:15px} .form-note.ok{background:var(--accent-100);color:var(--accent-600)} /* ===== FOOTER ===== */ .site-footer{background:var(--surface-inverse);color:var(--on-inverse-muted);padding-top:var(--sp-16)} .footer-inner{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--sp-10);padding-bottom:var(--sp-12)} /* the mark is transparent now, so it no longer needs a white plate to sit on over the dark footer */ .footer-brand img{ width:60px;height:60px;object-fit:contain;margin-bottom:var(--sp-4); } .footer-brand p{max-width:34ch;font-size:14.5px;line-height:1.65} .footer-col h4{color:var(--on-inverse);margin-bottom:var(--sp-4);font-size:15px;font-weight:600} .footer-col p{ display:block;font-size:14.5px;margin-bottom:var(--sp-3);color:var(--on-inverse-muted); word-break:break-word; } .footer-col a{ display:block;font-size:14.5px;padding:8px 0;color:var(--on-inverse-muted); word-break:break-word;transition:color var(--dur) var(--ease-out); } .footer-col a:hover{color:var(--accent)} .footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:var(--sp-5) 0;font-size:14px;color:#7fa2be} .footer-social{margin-top:var(--sp-5)} .footer-social a{ display:inline-flex;align-items:center;gap:var(--sp-3); min-height:44px;padding:0 var(--sp-4) 0 var(--sp-3); border:1px solid rgba(255,255,255,.16);border-radius:var(--r-full); font-size:14.5px;font-weight:500;color:var(--on-inverse); transition:background-color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out); } .footer-social a:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)} .footer-social svg{width:22px;height:22px;flex:0 0 auto} /* ===== FLOATING WHATSAPP ===== */ .fab-whatsapp{ position:fixed;z-index:90; inset-inline-end:clamp(16px,2.4vw,28px); bottom:clamp(16px,2.4vw,28px); display:grid;place-items:center; width:58px;height:58px;border-radius:50%; background:#25d366;color:#fff; box-shadow:0 12px 26px -10px rgba(37,211,102,.75),var(--e2); transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out); } .fab-whatsapp svg{width:30px;height:30px} .fab-whatsapp:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 18px 34px -12px rgba(37,211,102,.8),var(--e3)} .fab-whatsapp:active{transform:translateY(0) scale(.98)} /* a slow ring so the button reads as live without nagging */ .fab-whatsapp::after{ content:"";position:absolute;inset:0;border-radius:50%; border:2px solid rgba(37,211,102,.55); animation:fab-ping 2.8s cubic-bezier(.2,.6,.3,1) infinite; } @keyframes fab-ping{ 0%{transform:scale(1);opacity:.7} 70%,100%{transform:scale(1.5);opacity:0} } @media(max-width:760px){ .fab-whatsapp{width:54px;height:54px} .fab-whatsapp svg{width:28px;height:28px} } /* ===== REVEAL + STAGGER ===== */ .reveal{ opacity:0;transform:translate3d(0,22px,0); transition:opacity var(--dur-reveal) var(--ease-enter),transform var(--dur-reveal) var(--ease-enter); } .reveal.visible{opacity:1;transform:none} .grid > .reveal:nth-child(2){transition-delay:60ms} .grid > .reveal:nth-child(3){transition-delay:120ms} .grid > .reveal:nth-child(4){transition-delay:180ms} .grid > .reveal:nth-child(5){transition-delay:60ms} .grid > .reveal:nth-child(6){transition-delay:120ms} .grid > .reveal:nth-child(7){transition-delay:180ms} .grid > .reveal:nth-child(8){transition-delay:240ms} /* hero cascade follows the VISUAL order (photo, then stats, then the pitch on a phone) rather than DOM order, so explicit selectors instead of nth-child — same staggerChildren idea as Motion, just expressed as fixed per-element delays since this isn't React */ .hero-copy.reveal{transition-delay:0ms} .hero-media.reveal{transition-delay:90ms} .hero-stats.reveal{transition-delay:170ms} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} .reveal{opacity:1;transform:none} html{scroll-behavior:auto} .marquee-track{animation:none} .marquee{mask-image:none;-webkit-mask-image:none;overflow-x:auto} } /* ===== RESPONSIVE ===== */ @media(max-width:1120px){ .nav-links{gap:0} .nav-links a{padding:9px 8px;font-size:13.5px} .services-grid{grid-template-columns:repeat(3,1fr)} .about-inner,.contact-inner{gap:var(--sp-12)} .hero-inner{gap:var(--sp-12)} } @media(max-width:1000px){ .nav-cta{display:none} } @media(max-width:960px){ .hero-inner,.about-inner,.contact-inner{grid-template-columns:1fr;gap:var(--sp-10)} /* headline first, then the photo, then the stats — same order the phone breakpoint below uses */ .hero-inner{grid-template-areas:"copy" "media" "stats"} .hero-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)} .hero-stats strong{font-size:24px} .hero-stats span{font-size:12.5px} .about-media{order:2} .about-media::before{inset:14px -14px -14px 14px} .services-grid,.doctors-grid,.why-grid{grid-template-columns:repeat(2,1fr)} .footer-inner{grid-template-columns:1fr 1fr;gap:var(--sp-8)} } @media(max-width:760px){ .container{padding:0 var(--sp-5)} .nav-cta{display:none} /* the nav is absolutely positioned on phones, so without this the burger sits immediately after the logo instead of at the edge */ .burger{display:flex;margin-inline-start:auto} .nav-links{ position:absolute;top:var(--header-h);inset-inline:0; flex-direction:column;align-items:stretch;gap:0;margin:0; background:rgba(255,255,255,.97); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); padding:var(--sp-2) var(--sp-5) var(--sp-5); border-bottom:1px solid var(--border);box-shadow:var(--e3); transform:translate3d(0,-160%,0); transition:transform var(--dur-slow) var(--ease-out); } .nav-links.open{transform:translate3d(0,0,0)} .nav-links a{padding:15px 12px;border-radius:var(--r-sm);font-size:15.5px;border-bottom:1px solid var(--border)} .nav-links a:last-child{border-bottom:0} .hero{padding:var(--sp-10) 0 var(--sp-16)} /* headline and CTA lead, then the photo, then the stats card — matches the desktop reading order, just stacked. */ .hero-inner{grid-template-areas:"copy" "media" "stats";row-gap:var(--sp-6)} .hero-copy{padding:0 var(--sp-1)} .hero h1{font-size:clamp(30px,8.2vw,38px);line-height:1.18} .hero .lead{margin:var(--sp-4) 0 var(--sp-6);font-size:15.5px} /* wrap, not nowrap: below ~340px two full-text pill buttons cannot both fit on one line without spilling past the edge, so let the second one drop to its own line instead of overflowing */ .hero-actions{gap:var(--sp-2);flex-wrap:wrap} .hero-actions .btn{flex:1;min-width:0;min-height:46px;padding:0 var(--sp-4);font-size:14px} /* the stats were three cramped columns with wrapping labels — now an elevated card with an icon chip per stat and real dividers */ .hero-stats{ max-width:none;gap:0; background:var(--surface);border-radius:var(--r-lg); box-shadow:var(--e3);border:1px solid var(--border); padding:var(--sp-5) var(--sp-2); } .hero-stat{ display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px; padding-inline:var(--sp-2); } .hero-stat::before{content:none} .hero-stat + .hero-stat{border-inline-start:1px solid var(--border)} .hero-stat-icon{ display:grid;place-items:center;width:34px;height:34px;margin-bottom:2px; border-radius:var(--r-full);color:var(--primary-700); background:linear-gradient(150deg,var(--primary-50),var(--accent-100)); } .hero-stat-icon svg{width:17px;height:17px} .hero-stats strong{font-size:19px;white-space:nowrap} .hero-stats strong.stat-static{font-size:16.5px} .hero-stats span{font-size:10.5px;line-height:1.3} .hero-media{margin-top:0} .hero-img{height:280px} /* used to hang -16px below the photo; now the stats card follows immediately after, so the badge stays inside the frame instead of overlapping the card's top edge */ .hero-badge{inset-inline-start:var(--sp-3);bottom:var(--sp-3);padding:var(--sp-3)} .eyebrow{margin-bottom:var(--sp-4);font-size:12.5px;padding:6px 12px} .doctors-grid,.why-grid{grid-template-columns:1fr} /* services stay two-up: one column makes the arch cards enormous */ /* one full-width card per row, wide photo — matches the reference at narrow widths */ .services-grid{grid-template-columns:1fr;gap:var(--sp-4)} .service-card{padding:var(--sp-3) var(--sp-3) var(--sp-5);border-radius:20px} .service-media{aspect-ratio:16/10;border-radius:70px 70px 14px 14px} .service-body{padding:var(--sp-4) var(--sp-2) 0;text-align:center} .case-compare{grid-template-columns:1fr;gap:var(--sp-3)} .service-card h3{font-size:17px;margin-bottom:6px} .service-card p{font-size:13.5px;line-height:1.5} .footer-inner{grid-template-columns:1fr;gap:var(--sp-8)} .about-media img{height:340px} .doctor-carousel{height:330px} .doctor-facts li{font-size:13.5px} /* "15 000+" is the widest of the three and was landing flush against the next column with zero clearance at common phone widths — same font-size everywhere (per the client), just small enough that the widest one has real breathing room, not just a technical non-overlap */ .stats-row{gap:var(--sp-6)} .stat span{font-size:12px} .stat strong{font-size:25px} .booking-form{padding:var(--sp-6)} .brand-strip{padding:var(--sp-6) 0} .marquee-group{gap:38px;padding-inline-end:38px} .marquee img{width:112px;height:42px} .marquee-track{animation-duration:28s} } @media(min-width:520px) and (max-width:760px){ .hero h1{font-size:min(7.4vw,46px)} .hero .lead{font-size:16px} .hero-img{height:360px} } @media(max-width:400px){ .hero-stats{padding:var(--sp-4) var(--sp-1)} .hero-stat{padding-inline:6px} .hero-stats strong{font-size:17px} .hero-stats strong.stat-static{font-size:15px} .hero-stats span{font-size:10px} }