:root { --ink:#24332d; --deep:#1c2721; --paper:#f6f5f0; --sage:#a8cdb7; --muted:#b8c4bd; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--deep); color:var(--paper); font-family:"Work Sans",Arial,sans-serif; } a { color:inherit; } .header { width:min(1280px,calc(100% - 52px)); height:90px; margin:auto; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(168,205,183,.25); } .brand { display:flex; align-items:center; gap:10px; color:var(--paper); text-decoration:none; font-size:17px; font-weight:800; letter-spacing:.16em; padding-left:.16em; } .brand svg { width:28px; height:22px; fill:var(--sage); } .header-link { color:#dce3d8; text-decoration:none; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; } .hero { position:relative; width:min(1280px,calc(100% - 52px)); min-height:510px; margin:auto; padding:115px 0 82px; overflow:hidden; } .hero:after { content:""; position:absolute; top:60px; right:-190px; width:590px; height:590px; border:1px solid rgba(168,205,183,.34); border-radius:50%; } .hero:before { content:"MG"; position:absolute; right:-18px; top:115px; color:#243a31; font-size:420px; font-weight:800; line-height:.7; letter-spacing:-.19em; z-index:-1; } .hero-copy { position:relative; z-index:1; } .eyebrow { margin:0 0 18px; color:var(--sage); font-size:10px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; } h1,h2 { margin-top:0; font-family:"Instrument Serif",Georgia,serif; font-weight:400; letter-spacing:-.035em; } h1 { max-width:920px; margin-bottom:25px; font-size:clamp(55px,7vw,98px); line-height:.9; } h1 em,h2 em { font-style:italic; color:var(--sage); } .hero-copy > p:not(.eyebrow) { max-width:440px; color:var(--muted); font-size:16px; line-height:1.7; } .hero-index { position:absolute; z-index:1; right:10px; bottom:75px; display:flex; align-items:center; gap:13px; color:var(--sage); font-size:11px; font-weight:700; letter-spacing:.12em; } .hero-index i { width:54px; height:1px; background:rgba(168,205,183,.8); } .gallery-section { padding:76px 0 90px; background:var(--paper); color:var(--ink); overflow:hidden; } .gallery-heading { width:min(1280px,calc(100% - 52px)); margin:0 auto 37px; display:flex; align-items:end; justify-content:space-between; gap:24px; } .gallery-heading .eyebrow { color:#6b746d; } h2 { margin:0; font-size:clamp(38px,4.5vw,62px); line-height:.95; } .carousel-controls { display:flex; gap:10px; } .carousel-button { width:47px; height:47px; border:1px solid #a8cdb7; border-radius:50%; background:transparent; color:var(--ink); font-size:21px; cursor:pointer; transition:background .2s,color .2s; } .carousel-button:hover { background:var(--ink); color:var(--paper); } .carousel { display:flex; gap:18px; overflow-x:auto; padding:0 max(26px,calc((100% - 1280px)/2)) 20px; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:#a8cdb7 transparent; } .carousel::-webkit-scrollbar { height:8px; } .carousel::-webkit-scrollbar-thumb { background:#a8cdb7; border-radius:8px; } .testimonial-card { flex:0 0 clamp(210px,19.2vw,275px); scroll-snap-align:start; } .testimonial { position:relative; display:block; width:100%; aspect-ratio:1206 / 2622; padding:0; overflow:hidden; border:0; background:var(--deep); box-shadow:0 16px 28px rgba(36,51,45,.16); cursor:zoom-in; } .testimonial img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease,opacity .2s ease; } .testimonial:hover img { transform:scale(1.035); opacity:.83; } .testimonial span { position:absolute; left:15px; bottom:14px; display:grid; width:32px; height:32px; place-items:center; background:var(--paper); color:var(--ink); font-size:10px; font-weight:800; letter-spacing:.08em; } .gallery-note { width:min(1280px,calc(100% - 52px)); margin:18px auto 0; color:#6b746d; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; } .gallery-note span { margin-left:5px; color:#608d70; font-size:15px; } .cta { padding:120px max(26px,calc((100% - 1280px)/2)); background:#24332d; } .cta h2 { max-width:760px; margin-bottom:31px; font-size:clamp(50px,6vw,85px); line-height:.9; } .cta a { display:inline-block; padding:0 0 8px; border-bottom:1px solid var(--sage); color:var(--paper); font-size:12px; font-weight:700; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; } .cta a span { color:var(--sage); margin-left:7px; font-size:17px; } footer { width:min(1280px,calc(100% - 52px)); min-height:112px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:20px; color:#b8c4bd; font-size:10px; font-weight:700; letter-spacing:.13em; } footer a { text-decoration:none; } footer b { color:var(--sage); margin:0 4px; } dialog { width:min(650px,calc(100vw - 32px)); max-height:92vh; padding:0; overflow:visible; border:0; background:transparent; } dialog::backdrop { background:rgba(10,17,14,.88); backdrop-filter:blur(5px); } dialog img { display:block; max-width:100%; max-height:88vh; margin:auto; box-shadow:0 20px 50px rgba(0,0,0,.45); } #close-modal { position:absolute; z-index:2; top:-15px; right:-15px; display:grid; width:39px; height:39px; place-items:center; border:1px solid var(--sage); border-radius:50%; background:var(--deep); color:var(--paper); font-size:25px; cursor:pointer; }
@media (max-width:700px) { .header,.hero,.gallery-heading,footer,.gallery-note { width:calc(100% - 32px); } .header { height:73px; } .header-link { font-size:10px; } .hero { min-height:490px; padding:82px 0 70px; } .hero:before { top:180px; right:-4px; font-size:255px; } .hero:after { width:350px; height:350px; top:120px; right:-200px; } h1 { font-size:55px; } .hero-copy > p:not(.eyebrow) { font-size:15px; } .hero-index { right:4px; bottom:62px; } .gallery-section { padding:62px 0; } .gallery-heading { display:block; margin-bottom:28px; } h2 { font-size:44px; } .carousel-controls { margin-top:24px; } .carousel { gap:14px; padding-left:16px; padding-right:16px; } .testimonial-card { flex-basis:226px; } .cta { padding:84px 16px; } .cta h2 { font-size:55px; } footer { min-height:105px; align-items:flex-start; justify-content:center; flex-direction:column; } }