@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500;1,600&family=Inter:wght@400;500;600&display=swap');:root{--ivory:#f5f2ec;--sand:#d8d0c3;--char:#191817;--taupe:#9a8e80;--white:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ivory);color:var(--char);font-family:Inter,Arial,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}.nav{height:92px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid #ddd6cc;background:rgba(245,242,236,.95);position:sticky;top:0;z-index:10}.logo{font-weight:600;letter-spacing:.16em;font-size:20px;line-height:1}.logo span{display:block;font-size:8px;letter-spacing:.23em;font-weight:400;margin-top:8px;color:var(--taupe)}nav{display:flex;gap:28px;font-size:11px;text-transform:uppercase;letter-spacing:.12em}nav a:hover,.text-link:hover{opacity:.55}.btn{display:inline-block;background:var(--char);color:var(--white);padding:15px 25px;text-transform:uppercase;font-size:10px;letter-spacing:.15em;border:0;cursor:pointer}.btn.small{padding:12px 17px;font-size:9px}.btn.light{background:var(--ivory);color:var(--char)}.hero{min-height:calc(100vh - 92px);display:grid;grid-template-columns:1fr 1fr}.hero-copy{padding:12vh 8vw;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.hero h1,.pagehero h1,.contact h1{font:500 clamp(65px,8vw,130px)/.83 'Cormorant Garamond',serif;margin:25px 0 35px;letter-spacing:-.04em}.hero h1 em,.pagehero h1 em,.contact h1 em,h2 em{font-style:italic}.hero-copy>p:not(.eyebrow){max-width:420px;color:#625c55;margin-bottom:32px}.eyebrow{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe);font-weight:600}.hero-image{display:grid;place-items:center;background:transparent;color:#665e55;font-size:10px;letter-spacing:.2em;min-height:600px}.stats{display:flex;gap:28px;margin-top:55px;font-size:9px;letter-spacing:.12em}.statement,.content,.results,.gallery{padding:12vw 9vw}.statement{max-width:1050px}.statement h2,.results h2,.cta h2{font:500 clamp(55px,7vw,105px)/.9 'Cormorant Garamond',serif;margin:20px 0}.statement>p:not(.eyebrow){max-width:600px;color:#655f58}.text-link{display:inline-block;margin-top:25px;border-bottom:1px solid var(--char);padding-bottom:6px;font-size:10px;text-transform:uppercase;letter-spacing:.14em}.dark{background:var(--char);color:var(--ivory)}.feature{padding:11vw 10vw;display:grid;grid-template-columns:1.2fr 1fr;gap:12vw}.feature h2,.experience h2{font:500 clamp(60px,8vw,120px)/.85 'Cormorant Garamond',serif;margin:20px 0}.feature p{margin:0 0 38px;color:#c7c0b7}.feature b{font-size:10px;letter-spacing:.18em;color:var(--ivory)}.grid3{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;margin:55px 0}.portrait{background:linear-gradient(135deg,#d9d1c5,#aaa093);min-height:390px;display:flex;align-items:center;justify-content:center;text-align:center;color:#645c53;letter-spacing:.15em;font-size:11px}.card,.case{background:linear-gradient(135deg,#d9d1c5,#aaa093);display:flex;align-items:center;justify-content:center;text-align:center;color:#645c53;letter-spacing:.15em;font-size:11px}.card{aspect-ratio:3/2;min-height:unset;border-radius:12px;overflow:hidden}.case{aspect-ratio:4/3;min-height:unset}.card small{display:block;margin-top:15px}.experience{padding:14vw 10vw;min-height:650px}.lead{font:italic 38px 'Cormorant Garamond',serif;margin:30px 0 50px}.cta{text-align:center;padding:12vw 8vw}.cta>p:not(.eyebrow){max-width:600px;margin:0 auto 35px;color:#655f58}.pagehero{padding:12vw 9vw 10vw;min-height:65vh;display:flex;flex-direction:column;justify-content:center}.pagehero p:not(.eyebrow){font-size:18px;color:#6b655e}.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:70px}.steps article{border-top:1px solid #c9c0b5;padding-top:20px}.steps b{font:28px 'Cormorant Garamond',serif}.steps h3{font:20px 'Cormorant Garamond',serif}.steps p{font-size:13px;color:#706960}.treatments-hover{display:grid;grid-template-columns:1fr 1fr;background:var(--char);color:var(--ivory);margin-top:20px}.th-list{padding:8vw 5vw 8vw 9vw;display:flex;flex-direction:column;justify-content:center}.th-images{position:sticky;top:15vh;height:auto;aspect-ratio:3/2;overflow:hidden;border-radius:12px;margin-right:5vw;background:#111;box-shadow:0 10px 40px rgba(0,0,0,.5)}.th-img-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transform:scale(1.05);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform 1.2s cubic-bezier(.2,.8,.2,1)}.th-img-wrapper.active{opacity:1;transform:scale(1);z-index:2}.th-img-wrapper img{width:100%;height:100%;object-fit:cover}.th-item{display:grid;grid-template-columns:50px 1fr;padding:45px 0;border-top:1px solid rgba(255,255,255,.1);transition:opacity .4s;opacity:.4}.th-item:hover,.th-item.active{opacity:1}.th-item:first-child{border-top:none;padding-top:0}.th-num{font:italic 22px 'Cormorant Garamond',serif;color:var(--taupe)}.th-content h2{font:50px 'Cormorant Garamond',serif;margin:0 0 12px;line-height:1;transition:transform .4s cubic-bezier(.2,.8,.2,1)}.th-item:hover .th-content h2,.th-item.active .th-content h2{transform:translateX(15px)}.th-content p{margin:0;font-size:13px;color:#a39c94}.th-mobile-img{display:none}.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding-top:3vw}.case{min-height:500px;display:flex;flex-direction:column}.case div{font:20px 'Cormorant Garamond',serif;margin-top:18px;letter-spacing:0}.ba-slider{position:relative;width:100%;height:100%;overflow:hidden;--val:50%}.ba-slider img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.ba-slider .before{z-index:2;clip-path:polygon(0 0,var(--val) 0,var(--val) 100%,0 100%)}.ba-slider input[type="range"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:5;margin:0;-webkit-appearance:none}.ba-slider::after{content:'';position:absolute;top:0;left:var(--val);width:2px;height:100%;background:#fff;z-index:3;pointer-events:none;transform:translateX(-50%)}.slider-btn{position:absolute;top:50%;left:var(--val);transform:translate(-50%,-50%);width:36px;height:36px;background:#fff;border-radius:50%;z-index:4;pointer-events:none;display:flex;align-items:center;justify-content:center;color:#333;font-weight:bold;font-size:12px;box-shadow:0 2px 10px rgba(0,0,0,0.2)}.slider-btn::after{content:'< >';letter-spacing:-1px}.ba-label{position:absolute;top:15px;z-index:4;background:rgba(20,20,20,0.85);color:#fff;padding:6px 14px;font-size:11px;font-weight:500;text-transform:capitalize;border-radius:4px;pointer-events:none;transition:opacity 0.2s}.ba-label.left{left:15px}.ba-label.right{right:15px}.experience-grid{padding:8vw 10vw;display:grid;grid-template-columns:1fr 1fr;gap:1px;background-color:var(--char)}.experience-grid>div{padding:70px;border:1px solid #3d3a37}.experience-grid h2{font:60px 'Cormorant Garamond',serif;margin:0}.experience-grid p{color:#bbb3aa}.doctor{padding:8vw 10vw;display:grid;grid-template-columns:1fr 1fr;gap:10vw;align-items:center}.doctor.reverse{background:var(--sand)}.portrait{min-height:600px}.doctor h2{font:500 80px/.85 'Cormorant Garamond',serif}.doctor p:not(.eyebrow){max-width:480px;color:#655f58}.contact{padding:9vw;display:grid;grid-template-columns:1fr 1fr;gap:10vw;min-height:80vh;align-items:center}.contact ul{padding:0;list-style:none;border-top:1px solid #c9c0b5}.contact li{padding:14px 0;border-bottom:1px solid #c9c0b5;font-size:12px}.contact form{display:flex;flex-direction:column;gap:20px}.contact label{font-size:10px;letter-spacing:.13em;text-transform:uppercase}.contact input,.contact select,.contact textarea{display:block;width:100%;margin-top:8px;border:1px solid #c9c0b5;background:transparent;padding:14px;font:inherit;color:var(--char)}footer{padding:55px 6vw;display:flex;justify-content:space-between;gap:30px;border-top:1px solid #d5cdc2;font-size:10px;letter-spacing:.1em;text-transform:uppercase}@media(max-width:800px){.nav{height:76px;padding:0 5vw}.nav nav{display:none}.nav .btn{display:none}.hero,.feature,.contact,.doctor{grid-template-columns:1fr}.hero-image{min-height:55vh}.hero-copy{padding:15vh 8vw}.stats{flex-wrap:wrap}.grid3,.steps,.gallery{grid-template-columns:1fr}.card{min-height:330px;min-width:0;aspect-ratio:auto}.feature{gap:60px}.pagehero{min-height:60vh;padding:20vw 8vw}.pagehero h1,.contact h1{font-size:70px}.treatments-hover{grid-template-columns:1fr}.th-list{padding:10vw 8vw}.th-images{display:none}.th-item{grid-template-columns:1fr;gap:15px;padding:35px 0;opacity:1}.th-item:hover .th-content h2,.th-item.active .th-content h2{transform:none}.th-mobile-img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;margin-top:20px;border-radius:8px}.experience-grid{grid-template-columns:1fr;padding:10vw 6vw}.doctor{padding:15vw 8vw}.doctor h2{font-size:65px}.contact{padding:15vw 8vw}footer{flex-direction:column}.hero-image{font-size:8px}} /* Custom Added Variables for new components */ :root { --bg-surface: #FAF9F6; --text-muted: #655f58; --border-soft: #d5cdc2; } /* Expanded Footer */ .footer-expanded { display: block; text-transform: none; letter-spacing: normal; background: var(--bg-surface); border-top: 1px solid var(--border-soft); padding: 4rem 1.5rem 2rem; font-size: 0.875rem; } .footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 3rem; border-bottom: 1px solid var(--border-soft); padding-bottom: 3rem; } @media (min-width: 768px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } } /* Footer column titles are h2 (they were h5, which made every page jump from h2 straight to h5). Every font property is set here so a page-level h2 rule (e.g. the homepage's large serif) cannot reach them. */ .footer-expanded h5, .footer-expanded .footer-h { font: 600 0.75rem/1.6 Inter, Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.1em; margin: 1.67em 0 1.5rem; display: flex; align-items: center; color: var(--char); } .footer-expanded h5::before, .footer-expanded .footer-h::before { content: ""; display: inline-block; width: 12px; height: 1px; background: var(--taupe); margin-right: 8px; } .footer-brand .logo { margin-bottom: 1rem; } .footer-brand p { color: var(--text-muted); line-height: 1.6; margin-bottom: 1.5rem; max-width: 300px; } .footer-socials { display: flex; gap: 0.5rem; } .footer-socials a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-soft); color: var(--char); text-decoration: none; font-size: 0.75rem; font-weight: 600; transition: all 0.2s; } .footer-socials a:hover { background: var(--char); color: var(--bg-surface); } .hours-row { display: flex; justify-content: space-between; margin-bottom: 0.5rem; color: var(--text-muted); } .hours-row.emergency { margin-top: 1rem; padding-top: 0.5rem; border-top: 1px solid var(--border-soft); } .hours-row.emergency span:last-child { font-weight: 600; color: var(--taupe); } .footer-contact a, .footer-contact p, .footer-explore a { display: block; color: var(--text-muted); text-decoration: none; margin-bottom: 0.5rem; transition: color 0.2s; } .footer-contact a:hover, .footer-explore a:hover { color: var(--char); } .footer-contact .directions { margin-top: 1rem; font-weight: 600; color: var(--taupe); } .footer-bottom { max-width: 1200px; margin: 2rem auto 0; display: flex; flex-direction: column; gap: 1rem; align-items: center; color: var(--text-muted); font-size: 0.75rem; } @media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; } } .footer-legal { display: flex; gap: 1.5rem; } .footer-legal a { color: var(--text-muted); text-decoration: none; } .footer-legal a:hover { color: var(--char); } /* Dropdown Nav */ .dropdown { position: relative; display: inline-block; } .dropbtn { background: none; border: none; font: inherit; color: inherit; cursor: pointer; text-transform: uppercase; letter-spacing: 0.12em; padding: 0; display: flex; align-items: center; gap: 4px; } .dropbtn:hover { opacity: 0.55; } .dropdown-content { display: none; position: absolute; top: 100%; left: 0; background: var(--bg-surface); min-width: 220px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border: 1px solid var(--border-soft); z-index: 100; border-radius: 8px; padding: 10px 0; } .dropdown-content a { display: block; padding: 12px 20px; font-size: 11px; text-transform: none; letter-spacing: 0.05em; transition: 0.2s; color: var(--text-muted); border-bottom: 1px solid transparent; } .dropdown-content a:hover { background: #f9f6f0; color: var(--char); opacity: 1; } @media (min-width: 801px) { .dropdown:hover .dropdown-content { display: block; } } @media (max-width: 800px) { .nav nav { gap: 20px; overflow-y: auto; padding-bottom: 50px; } .dropdown-content { position: static; display: none; box-shadow: none; border: none; background: transparent; padding: 0 0 0 15px; margin-top: 10px; border-left: 1px solid var(--border-soft); border-radius: 0; } .dropdown.active .dropdown-content { display: block; } .dropdown-content a { font-size: 16px; padding: 10px 0; } } /* Timeline Section */ .timeline-section { padding: 12vw 9vw; background: var(--bg-surface); } .timeline-header { text-align: center; margin-bottom: 80px; } .timeline-header h2 { font: 500 clamp(40px, 6vw, 75px)/1.1 'Playfair Display', serif; margin: 15px 0 0; } .timeline-container { display: flex; gap: 8vw; max-width: 1200px; margin: 0 auto; } .timeline-media { flex: 1; position: relative; } .sticky-media { position: sticky; top: 15vh; height: 60vh; border-radius: 24px; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border-soft); box-shadow: 0 10px 40px rgba(0,0,0,0.1); } .sticky-media video { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease; } .timeline-content { flex: 1; padding: 10vh 0; display: flex; flex-direction: column; gap: 12vh; } .timeline-step { display: flex; gap: 30px; opacity: 0.3; transition: opacity 0.5s ease, transform 0.5s ease; transform: translateX(20px); } .timeline-step.active { opacity: 1; transform: translateX(0); } .step-num { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: center; font: 18px 'Playfair Display', serif; flex-shrink: 0; background: var(--bg-surface); color: var(--text-muted); transition: 0.5s; } .timeline-step.active .step-num { border-color: var(--gold-primary); color: var(--gold-primary); box-shadow: 0 0 20px rgba(184, 151, 88, 0.2); } .step-text h3 { font: 28px 'Playfair Display', serif; margin: 0 0 15px; color: var(--char); } .step-text p { font-size: 15px; color: var(--text-muted); line-height: 1.6; } @media (max-width: 800px) { .timeline-container { flex-direction: column; } .sticky-media { position: relative; top: 0; height: 40vh; margin-bottom: 40px; } .timeline-content { padding: 0; gap: 40px; } .timeline-step { opacity: 1; transform: none; } } /* Hamburger Mobile Menu Additions */ @media (max-width: 800px) { .hamburger { display: block; background: transparent; border: none; cursor: pointer; padding: 10px; z-index: 20; } .hamburger span { display: block; width: 24px; height: 2px; background: var(--gold-primary); margin: 5px 0; transition: 0.3s; } body.menu-open { overflow: hidden; } body.menu-open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.menu-open .hamburger span:nth-child(2) { opacity: 0; } body.menu-open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav .btn { display: none; } .nav nav { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(250,249,246,0.98); backdrop-filter: blur(10px); padding: 100px 5vw 5vw; font-size: 24px; gap: 40px; transform: translateY(-100%); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 10; } body.menu-open .nav nav { transform: translateY(0); } } @media (min-width: 801px) { .hamburger { display: none; } } /* Team Grid Styles */ .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; } .team-card { display: flex; flex-direction: column; text-decoration: none; background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; transition: transform 0.3s; } .team-card:hover { transform: translateY(-5px); border-color: var(--taupe); } .team-img-wrapper { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--border-soft); } .team-img-wrapper img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: grayscale(100%); transition: all 0.5s ease-in-out; } .team-card:hover .team-img-wrapper img { filter: grayscale(0%); transform: scale(1.05); } .team-hover-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 40%); opacity: 0; transition: opacity 0.3s; display: flex; align-items: flex-end; padding: 20px; } .team-card:hover .team-hover-overlay { opacity: 1; } .team-btn { width: 100%; background: var(--white); color: var(--char); text-align: center; padding: 12px; border-radius: 6px; font-weight: 500; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; transition: background 0.2s; } .team-btn:hover { background: var(--taupe); color: var(--white); } .team-info { padding: 24px 20px; text-align: left; } .team-info h3 { font: 400 24px 'Playfair Display', serif; color: var(--char); margin: 0 0 8px; transition: color 0.3s; } .team-card:hover .team-info h3 { color: var(--taupe); } .team-info p { font-size: 14px; color: var(--text-muted); line-height: 1.5; margin: 0; } @keyframes fadeUpAnim { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .fade-up { opacity: 0; animation: fadeUpAnim 0.8s ease-out forwards; } /* History Page Styles */ .history-container { padding: 12vw 9vw; max-width: 1400px; margin: 0 auto; } .history-header { border-bottom: 1px solid var(--border-soft); padding-bottom: 2rem; margin-bottom: 4rem; text-align: left; } .history-header h1 { font: 300 clamp(40px, 5vw, 65px) 'Inter', sans-serif !important; letter-spacing: 0.05em; color: var(--char); margin: 0; } .history-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 8vw; align-items: start; } .history-text h2 { font: 300 clamp(35px, 4vw, 55px)/1.2 'Inter', sans-serif !important; color: var(--char); margin: 0 0 40px; } .history-paragraphs p { font-size: 18px; line-height: 1.8; color: var(--text-muted); margin-bottom: 24px; font-weight: 300; } .history-image-col { margin-top: 2rem; } .history-img-wrapper { border-radius: 4px; overflow: hidden; box-shadow: none; transition: box-shadow 0.5s; cursor: pointer; } .history-img-wrapper:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.1); } .history-img-wrapper img { width: 100%; height: auto; display: block; filter: grayscale(100%) contrast(1.1); transition: transform 1.2s cubic-bezier(0.16,1,0.3,1); } .history-img-wrapper:hover img { transform: scale(1.05); } .history-img-caption { margin-top: 16px; font-size: 13px; color: var(--text-muted); font-weight: 300; letter-spacing: 0.05em; text-transform: uppercase; transition: color 0.3s; } .history-image-col:hover .history-img-caption { color: var(--char); } @media(max-width: 1024px) { .history-grid { grid-template-columns: 1fr; } .history-header { text-align: center; } } /* Home Services Section */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px; max-width: 1400px; margin: 0 auto; } .service-card { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #F0F4F8; border: 1px solid var(--border-soft); border-radius: 24px; padding: 60px 20px; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease; } .service-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); } .service-icon { width: 80px; height: 80px; margin-bottom: 24px; display: flex; align-items: center; justify-content: center; } .service-icon img { max-width: 100%; max-height: 100%; object-fit: contain; } .service-card h3 { font: 300 20px 'Inter', sans-serif; letter-spacing: 0.05em; color: var(--char); margin: 0; text-transform: uppercase; } /* Flipping Services Cards */ .service-card-flip { display: block; perspective: 1000px; height: 320px; text-decoration: none; } .flip-inner { position: relative; width: 100%; height: 100%; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); transform-style: preserve-3d; } .service-card-flip:hover .flip-inner { transform: rotateY(180deg); } .flip-front, .flip-back { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 30px; border: 1px solid var(--border-soft); backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; } .flip-front { background: #F0F4F8; } .flip-back { background: #FAF9F6; transform: rotateY(180deg); } .flip-front h3 { font: 300 22px 'Inter', sans-serif; letter-spacing: 0.1em; color: var(--gold-primary); margin: 0; text-transform: uppercase; text-align: center; } .flip-back ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; } .flip-back li { font-size: 15px; color: var(--text-muted); font-weight: 300; letter-spacing: 0.05em; text-align: center; } /* ══════════════════════════════════════════════════════════════════════════ Treatment-page content components Additive only — built from the existing MINEERS tokens (ivory / char / taupe / sand / border-soft) and the existing type pairing (Cormorant Garamond display + Inter body). No new palette, no new type scale. ══════════════════════════════════════════════════════════════════════════ */ /* ── Hero media slideshow (drops into the existing .hero-image cell) ─────── */ .hero-slideshow { position: absolute; inset: 0; overflow: hidden; background: var(--sand); } .hero-slideshow img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; } .hero-slideshow img.active { opacity: 1; } /* ── Key-facts band ──────────────────────────────────────────────────────── */ .facts { padding: 0 9vw 12vw; } .facts > p:not(.eyebrow) { max-width: 760px; color: var(--text-muted); margin: 0 0 50px; } .facts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-soft); border: 1px solid var(--border-soft); } .fact { background: var(--ivory); padding: 34px 30px; } .fact span { display: block; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); font-weight: 600; margin-bottom: 14px; } .fact strong { font: 500 27px 'Cormorant Garamond', serif; display: block; line-height: 1.1; } /* ── Embedded media frame (YouTube / mp4) ────────────────────────────────── */ .media-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--char); } .media-frame iframe, .media-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ── Vertical patient-story row ──────────────────────────────────────────── */ .shorts-row { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 22px; scroll-snap-type: x mandatory; } .short { flex: 0 0 250px; scroll-snap-align: start; aspect-ratio: 9 / 16; background: var(--char); overflow: hidden; } .short iframe { width: 100%; height: 100%; border: 0; display: block; } /* ── Rule-separated feature list ─────────────────────────────────────────── */ .checklist { list-style: none; padding: 0; margin: 0 0 38px; } .checklist li { border-top: 1px solid var(--border-soft); padding: 22px 0; } .checklist b { display: block; font: 500 23px 'Cormorant Garamond', serif; letter-spacing: 0; margin-bottom: 6px; } .checklist p { margin: 0; font-size: 14px; color: var(--text-muted); } .dark .checklist li { border-top-color: rgba(255, 255, 255, .13); } .dark .checklist b { color: var(--ivory); font-size: 23px; letter-spacing: 0; } .dark .checklist p { color: #c7c0b7; } /* ── Quote cards ─────────────────────────────────────────────────────────── */ .quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; } .quote { border: 1px solid var(--border-soft); background: var(--bg-surface); padding: 38px; display: flex; flex-direction: column; } .quote .stars { font-size: 11px; letter-spacing: .3em; color: var(--taupe); margin: 0 0 20px; } .quote blockquote { font: italic 20px/1.5 'Cormorant Garamond', serif; margin: 0 0 26px; color: var(--char); } .quote cite { margin-top: auto; font-style: normal; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); } /* ── Smile gallery ───────────────────────────────────────────────────────── */ .smile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .smile-grid figure { margin: 0; } .smile-grid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--sand); } .smile-grid figcaption { margin-top: 14px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); } /* ── FAQ accordion ───────────────────────────────────────────────────────── */ .faq { max-width: 900px; } .faq details { border-top: 1px solid var(--border-soft); } .faq details:last-of-type { border-bottom: 1px solid var(--border-soft); } .faq summary { list-style: none; cursor: pointer; position: relative; padding: 30px 50px 30px 0; font: 500 clamp(22px, 2.4vw, 28px) 'Cormorant Garamond', serif; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 300 22px Inter, sans-serif; color: var(--taupe); } .faq details[open] summary::after { content: '–'; } .faq details > p { margin: -6px 0 30px; max-width: 740px; color: var(--text-muted); font-size: 15px; } /* ── Internal link row ───────────────────────────────────────────────────── */ .link-row { display: flex; flex-wrap: wrap; gap: 14px; } .link-row a { border: 1px solid var(--border-soft); padding: 14px 20px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); transition: border-color .25s, color .25s; } .link-row a:hover { border-color: var(--char); color: var(--char); opacity: 1; } /* ── Booking form extras ─────────────────────────────────────────────────── */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .service-detail { border: 1px solid #c9c0b5; background: var(--bg-surface); padding: 20px; } .service-detail .sd-head { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 15px; } .service-detail .sd-head .sd-name { font: 500 21px 'Cormorant Garamond', serif; min-width: 0; } .service-detail .sd-head .sd-price { font: 600 10px Inter, sans-serif; letter-spacing: .12em; color: var(--taupe); white-space: nowrap; } .service-detail p { margin: 10px 0 0; font-size: 13px; color: var(--text-muted); line-height: 1.55; } .form-status { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--taupe); min-height: 16px; } .form-status.error { color: #8a3f3f; } .contact .btn[disabled] { opacity: .5; cursor: progress; } /* ── Map band ────────────────────────────────────────────────────────────── */ .map-band { padding: 0 9vw 12vw; } .map-frame { width: 100%; height: 380px; border: 1px solid var(--border-soft); display: block; } @media (max-width: 800px) { .facts, .map-band { padding: 0 8vw 18vw; } .facts-grid, .quote-grid, .smile-grid, .form-row { grid-template-columns: 1fr; } .fact strong { font-size: 24px; } .short { flex-basis: 210px; } } /* The hamburger bars referenced --gold-primary, which is never defined in this stylesheet, so `background` was dropped and the mobile menu button rendered invisible. Pinned to the nav ink colour — no new palette value. */ .hamburger span { background: var(--char); } /* ── Section headings for content-rich treatment sections ──────────────────── Opt-in classes (not bare `.content h2`) so no existing page changes look. */ .sec-head { margin-bottom: 60px; } .sec-title { font: 500 clamp(38px, 5vw, 66px)/1 'Cormorant Garamond', serif; letter-spacing: -.02em; margin: 18px 0 22px; } .sec-lead { max-width: 700px; color: var(--text-muted); margin: 0; font-size: 17px; } .dark .sec-lead { color: #c7c0b7; } /* 3-up variant of the existing .steps component (collapses on mobile, which a per-instance inline grid-template-columns could not do). */ .steps.cols-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 800px) { .steps.cols-3 { grid-template-columns: 1fr; } } /* ── Media cards: media panel + Cormorant heading + copy ─────────────────── */ .media-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 25px; } .media-card { border: 1px solid var(--border-soft); background: var(--bg-surface); display: flex; flex-direction: column; } .media-card .m { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); } .media-card .m img, .media-card .m video { width: 100%; height: 100%; object-fit: cover; display: block; } .media-card .t { padding: 26px; } .media-card .num { display: block; font: italic 18px 'Cormorant Garamond', serif; color: var(--taupe); margin-bottom: 8px; } .media-card h3 { font: 500 24px 'Cormorant Garamond', serif; margin: 0 0 10px; } .media-card p { margin: 0; font-size: 14px; color: var(--text-muted); white-space: pre-line; } /* Vertical stories can hold a