:root { --black:#000; --ink:#171717; --paper:#f5f3ef; --gold:#be8c4d; --button:#c4a56d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--paper); color:#000; font-family:Roboto,Arial,sans-serif; }
.rail { width:min(1170px, calc(100% - 110px)); margin:0 auto; }
.site-header { height:123px; background:#000; }
.nav-rail { height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:15px 20px; }
.brand-name { color:#fff; text-decoration:none; font:600 28px/1 Oswald,sans-serif; letter-spacing:.06em; white-space:nowrap; }
.brand-name span { display:block; color:var(--button); font:500 15px/1.5 Barlow,sans-serif; letter-spacing:.34em; }
nav { display:flex; gap:30px; padding-top:20px; font:400 12px/1 Barlow,sans-serif; }
nav a { color:#fff; text-decoration:none; }
.mobile-menu { display:none; position:relative; z-index:30; }
.mobile-menu summary { display:flex; align-items:center; gap:7px; padding:9px 11px; border:1px solid var(--button); color:#fff; cursor:pointer; font:600 15px/1 Barlow,sans-serif; list-style:none; white-space:nowrap; }
.mobile-menu summary::-webkit-details-marker { display:none; }
.mobile-menu-links { position:absolute; top:calc(100% + 8px); right:0; display:grid; width:min(250px,calc(100vw - 40px)); padding:8px; background:#111; box-shadow:0 12px 24px #0006; }
.mobile-menu-links a { padding:12px; color:#fff; text-decoration:none; font:600 16px/1.2 Barlow,sans-serif; }
.mobile-menu-links a:focus-visible,.mobile-menu-links a:hover { background:#333; }
.hero { position:relative; isolation:isolate; height:812px; background:#171717 url('assets/esteban-hero-desktop.png') center/cover no-repeat; }
.hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(15,13,12,.36),rgba(15,13,12,.13) 50%,transparent 70%); }
.hero-content { max-width:760px; margin-left:max(0px, calc((100% - 1170px)/2)); margin-right:auto; padding:150px 20px 0 63px; color:white; }
.script { margin:0; color:var(--gold); font:400 85px/1.3 Petemoss,cursive; }
.hero-script { margin-bottom:-5px; }
h1,h2,h3,p { margin-top:0; }
.hero h1 { margin:0; font:600 clamp(48px,5.1vw,75px)/.98 Oswald,sans-serif; letter-spacing:.5px; }
.eyebrow { margin:28px 0 22px; font:600 34px/1 Oswald,sans-serif; }
.hero-actions,.center-actions { display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.gold-button { display:inline-block; width:max-content; max-width:100%; padding:20px 32px; background:var(--button); border:1px solid rgba(255,255,255,.18); color:#fff; text-decoration:none; font:600 32px/1 Oswald,sans-serif; white-space:nowrap; }
.philosophy { min-height:650px; background:var(--paper); padding:65px 0; }
.center-copy { text-align:center; }
.philosophy-script { font-size:76px; line-height:.72; }
.philosophy h2,.rates h2 { margin:16px 0 35px; font:600 58px/1 Oswald,sans-serif; }
.philosophy-copy { font:300 24px/1.3 Roboto,sans-serif; }
.philosophy-copy p { margin:0 auto 25px; max-width:1130px; }
.center-actions { align-items:center; gap:12px; margin-top:18px; }
.center-actions .gold-button { padding:12px 32px; font-size:23px; }
.philosophy .gold-button { padding:20px 32px; font-size:32px; }
.services { background:var(--paper); }
.service-head { height:344px; padding-top:35px; text-align:center; color:#fff; background:#111 url('assets/services-bg.webp') center/cover fixed; }
.service-head .script { font-size:67px; line-height:1; }
.service-head h2 { margin:8px 0 0; font:500 50px/1 Oswald,sans-serif; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:44px 30px; margin-top:-101px; }
.service-card { min-height:466px; border:1px solid rgba(255,255,255,.7); background:var(--paper); overflow:hidden; }
.service-card img { display:block; width:100%; height:232px; object-fit:cover; }
.service-card > div { padding:20px; }
.service-card h3 { margin:0 0 14px; color:#bf9f68; font:600 27px/1 Oswald,sans-serif; }
.service-card p { margin:0; font:400 20px/1.3 Barlow,sans-serif; }
.service-link { display:inline-block; margin-top:20px; color:#8b642b; font:700 19px/1.2 Barlow,sans-serif; text-underline-offset:4px; }
.service-cta { padding:45px 0 40px; text-align:center; }
.service-cta .gold-button { padding:13px 30px; font-size:23px; }
.logo-break { height:190px; background:#000 center/cover fixed no-repeat; }
.break-one { background-image:url('assets/break-one.webp'); }
.break-two,.break-three { background-image:url('assets/break-two.webp'); }
.rates { min-height:880px; padding:87px 0 60px; background:var(--paper); }
.rates h2 { margin:0 0 9px 65px; text-align:left; font-size:56px; font-weight:500; }
.rates-grid { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:0; min-height:524px; }
.rates-grid > img { width:450px; height:464px; object-fit:contain; justify-self:center; align-self:start; margin-top:25px; }
.price-list { padding:42px 10px 0 15px; font:21px/1.35 Arial,sans-serif; }
.price-list p { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:12px 0; margin:0; border-bottom:1px dashed #00000020; }
.price-list i { height:1px; background:repeating-linear-gradient(to right,#000 0 4px,transparent 4px 10px); }
.price-list b { white-space:nowrap; } .price-gold { color:#b99b61; }
.rates-actions { margin-top:0; }
.rates-actions .gold-button { width:max-content; padding:20px 32px; font-size:32px; text-align:center; }
.meet { min-height:662px; padding:50px 0; background:var(--paper); }
.meet-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:35px; }
.meet-grid > img { display:block; width:100%; aspect-ratio:1 / 1; height:auto; object-fit:cover; object-position:center 15%; }
.meet-mobile-image { display:none; }
.meet-copy { padding:15px 0 0 5px; }
.meet-copy h2 { margin:0 0 40px; color:#000; font:500 50px/1 Oswald,sans-serif; }
.meet-copy p { margin:0 0 28.6px; font:330 22px/28.6px Montserrat,Roboto,sans-serif; }
.contact { min-height:528px; padding:55px 0; background:var(--paper); }
.contact-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:60px; }
.contact h2 { margin:0 0 31px; color:#000; font:400 25px/32.5px Oswald,sans-serif; }
.contact h3 { margin:0 0 8px; font:400 16px/20.8px Oswald,sans-serif; }
.contact p { margin:0 0 25px; font:600 20px/1.35 Barlow,Roboto,sans-serif; }
.contact .gold-button { font-size:21px; padding:13px 22px; }
.hours-panel { padding:28px 34px; background:#eae5dc; }
.hours-panel h3 { margin-bottom:20px; font:500 28px/1 Oswald,sans-serif; }
.hours-panel p { display:flex; justify-content:space-between; gap:15px; margin:0; padding:9px 0; border-bottom:1px solid #cabfae; font:400 17px/1.3 Barlow,sans-serif; }
.hours-panel p b { white-space:nowrap; font-weight:600; }
.hours-panel a { display:inline-block; margin-top:20px; color:#171717; font:600 17px/1 Barlow,sans-serif; }
footer { height:181px; display:flex; align-items:center; justify-content:center; gap:24px; background:#171717; color:#fff; }
.footer-brand { font:600 23px/1 Oswald,sans-serif; letter-spacing:.05em; }
.footer-brand small { display:block; color:var(--button); font:500 12px/1.5 Barlow,sans-serif; letter-spacing:.29em; }
footer p { margin:0; font:400 15px/1 Roboto,sans-serif; }
@media (max-width:900px) { .rail { width:min(100% - 40px, 680px); } .site-header { height:86px; } .nav-rail { align-items:center; padding:8px 0; } .brand-name { font-size:23px; } nav { display:none; } .hero { height:auto; min-height:700px; background-attachment:scroll; background-position:58% center; } .hero-content { padding:100px 5px; } .script { font-size:63px; } .hero h1 { font-size:clamp(43px,9vw,57px); } .eyebrow { font-size:28px; line-height:1.12; } .gold-button { padding:16px 25px; font-size:23px; white-space:normal; } .philosophy,.rates,.meet,.contact { height:auto; } .philosophy { padding:60px 0; } .philosophy-script { font-size:58px; } .philosophy h2,.rates h2 { font-size:48px; } .philosophy-copy,.meet-copy p { font-size:20px; } .service-head { background-attachment:scroll; } .cards { grid-template-columns:1fr; margin-top:-90px; } .service-card { min-height:0; } .service-card img { height:auto; aspect-ratio:1.55; } .logo-break { background-attachment:scroll; } .rates { padding:55px 0; } .rates-grid,.meet-grid,.contact-grid { grid-template-columns:1fr; height:auto; gap:30px; } .rates-grid > img,.meet-grid > img { width:100%; height:auto; max-height:none; } .meet-grid > img { aspect-ratio:4 / 5; object-fit:cover; object-position:center 12%; } .price-list { padding:0; font-size:19px; } .rates-actions { margin-top:35px; } .meet { padding:50px 0; } .meet-copy { padding:0; } .contact { padding:50px 0; } .hours-panel { padding:24px; } footer { height:auto; padding:30px 20px; flex-direction:column; text-align:center; } }
@media (max-width:900px) { .mobile-menu { display:block; } }
@media (max-width:900px) { .rates-actions .gold-button { padding:16px 25px; font-size:23px; } }
@media (max-width:900px) { .philosophy .gold-button { padding:16px 25px; font-size:23px; } }
@media (max-width:900px) { .philosophy-script { font-size:50px; } .philosophy h2 { font-size:42px; } }
@media (max-width:900px) { .brand-name { font-size:clamp(17px,5vw,23px); } .brand-name span { font-size:clamp(8px,2.3vw,12px); letter-spacing:.13em; } }
@media (min-width:601px) and (max-width:900px) {
  .hero-content { max-width:680px; margin:0 auto; padding:100px 5px 0; }
}
@media (max-width:600px) {
  .service-head { height:260px; padding-top:30px; }
  .service-head .script { font-size:clamp(48px, 12vw, 58px); white-space:nowrap; }
  .service-head h2 { font-size:40px; }
  .philosophy { min-height:0; padding:44px 0; }
  .approach-break { display:none; }
  .philosophy-script { font-size:38px; line-height:1; }
  .philosophy h2 { margin:10px 0 22px; font-size:clamp(25px, 7vw, 30px); line-height:1.08; }
  .meet-grid > img { display:none; }
  .meet-mobile-image { display:block; width:100%; aspect-ratio:4 / 5; object-fit:cover; object-position:center 12%; margin:0 0 24px; }
  .meet-copy h2 { margin-bottom:18px; font-size:34px; line-height:1.08; }
  .hero { min-height:760px; background-color:#171717; background-image:url('assets/esteban-hero-mobile-v2.png'); background-size:cover; background-position:center top; }
  .hero::before { background:linear-gradient(180deg,transparent 0%,rgba(10,9,8,.1) 38%,rgba(10,9,8,.45) 62%,rgba(10,9,8,.72) 100%); }
  .hero-content { width:min(100% - 40px, 420px); max-width:none; margin:0 auto; padding:clamp(310px,calc(80vw - 50px),380px) 0 0; }
  .hero-script { font-size:40px; line-height:1.08; margin-bottom:14px; }
  .hero h1 { font-size:clamp(36px,9vw,42px); line-height:1.01; }
  .hero .eyebrow { max-width:340px; margin:12px 0 14px; font-size:18px; line-height:1.2; }
  .hero-actions { gap:10px; }
  .hero-actions .gold-button { padding:11px 16px; font-size:19px; }
  .philosophy .gold-button { padding:11px 16px; font-size:19px; }
  .rates-actions .gold-button { padding:11px 16px; font-size:19px; }
}