/* Tasteful Expectations. Built to DESIGN.md. Responsive rules live at the end and nowhere else. */
/* fonts are served from this site, no third party request */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:500 600;font-display:swap;src:url(/assets/fonts/fraunces-display.735a849f.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:500;font-display:swap;src:url(/assets/fonts/fraunces-display-italic.647afa9e.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/source-sans-3.0bcb44eb.woff2) format("woff2")}
:root{
  --ink:#231F20;--ink2:#1A1617;--wine:#B33951;--winedk:#8E2A3F;--gold:#E8A33D;
  --blush:#F5D7C4;--cream:#FEFAF0;--rule:#D9CBBF;--soft:#5B5253;--mute:#8A7F80;
  --wrap:1240px;--gut:clamp(20px,4vw,56px);
  --disp:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Source Sans 3","Source Sans Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sp:clamp(56px,7vw,88px);
  --hdr:104px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.6 var(--body);overflow-x:hidden}
img,video,iframe{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0;font-weight:600}
h1,h2,h3{font-family:var(--disp);font-variation-settings:"opsz" 144;letter-spacing:-.02em;line-height:.98;text-wrap:balance}
h1{font-size:clamp(56px,8vw,104px)}
h2{font-size:clamp(44px,5.4vw,72px)}
h3{font-size:clamp(30px,3.2vw,44px)}
h4,.fh{font:700 13px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;margin:0}
em{font-style:italic;font-weight:500}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sec{padding:var(--sp) 0}
.sec.tight{padding-top:calc(var(--sp) * .6)}
.lede{font-size:clamp(19px,1.6vw,22px);line-height:1.5;color:var(--soft);max-width:36em}
.measure{max-width:62ch}
.soft{color:var(--soft)}
.label{font:700 13px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase}
.hl{color:var(--wine)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- buttons, arrow links, phone ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--wine);color:#fff;border:2px solid var(--wine);
  font:700 14px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:18px 28px;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s;white-space:nowrap}
.btn:hover{background:var(--winedk);border-color:var(--winedk)}
.btn-ink{background:var(--ink);border-color:var(--ink)}
.btn-ink:hover{background:#000;border-color:#000}
.btn-ghost{background:transparent;border-color:rgba(254,250,240,.7);color:var(--cream)}
.btn-ghost:hover{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.btn svg{width:18px;height:18px;fill:currentColor}
.arrow{display:inline-flex;align-items:center;gap:10px;font:700 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);padding-bottom:7px;position:relative}
.arrow::before{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--gold);transform-origin:left;transition:transform .25s}
.arrow::after{content:"\2192";font-size:18px;line-height:1;transition:transform .2s}
.arrow:hover::after{transform:translateX(5px)}
.arrow:hover::before{transform:scaleX(.5)}
.arrow.lt{color:var(--cream)}
.tel{font-family:var(--body);font-weight:700;font-size:19px;letter-spacing:.03em;line-height:1;color:var(--ink);white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
.tel.big{font-size:clamp(28px,3.2vw,40px);letter-spacing:.02em}
.tel.lt{color:var(--cream)}
.pair{display:flex;flex-wrap:wrap;align-items:center;gap:22px 36px;margin-top:34px}

/* ---------- utility bar and header ---------- */
.util{background:var(--ink);color:var(--cream);font-size:14px;line-height:1}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;gap:20px}
.util a:hover{color:var(--gold)}
.util .r{display:flex;align-items:center;gap:26px}
.util .soc{display:inline-flex;gap:10px;margin-left:6px}
.util .soc a{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px}
.util .soc i{display:block;width:22px;height:22px;background:var(--cream);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transition:background .18s,transform .18s}
.util .soc a:hover i{background:var(--gold);transform:translateY(-1px)}
header.site{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:4px solid var(--gold)}
header.site .wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;height:var(--hdr);gap:24px;max-width:none}
.brand{display:flex;align-items:center;gap:14px;height:var(--hdr)}
.brand .mono{display:block;flex:none;height:calc(var(--hdr) - 8px)}
.brand .mono img{display:block;height:100%;width:auto;max-width:none}
.brand .bname{font-family:var(--disp);font-variation-settings:"opsz" 144;font-weight:600;font-size:25px;line-height:.98;letter-spacing:-.02em;color:var(--ink);transition:color .18s}
.brand:hover .bname{color:var(--wine)}
nav.main{display:flex;justify-content:center;gap:clamp(16px,2vw,30px)}
nav.main a{font:700 12px/1 var(--body);letter-spacing:.13em;white-space:nowrap;text-transform:uppercase;padding:8px 0;position:relative}
nav.main a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .22s}
nav.main a:hover::after,nav.main a[aria-current="page"]::after{transform:scaleX(1)}
.hright{display:flex;align-items:center;gap:26px;grid-column:3;justify-self:end}
nav.main{grid-column:2}
.hright .btn{padding:16px 22px}
.callsq{display:none;width:48px;height:48px;background:var(--wine);color:#fff;align-items:center;justify-content:center}
.callsq svg{width:22px;height:22px;fill:currentColor}
.burger{display:none;width:48px;height:48px;border:0;background:transparent;padding:0;flex-direction:column;justify-content:center;gap:6px;align-items:center;cursor:pointer}
.burger span{display:block;width:26px;height:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- hero: pinned, the page slides over it ---------- */
.hero{position:sticky;top:0;height:calc(100vh - var(--hdr));min-height:560px;max-height:960px;z-index:0;color:var(--cream);
  display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.hero .media{position:absolute;inset:0}
.hero .media img,.hero .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .media video{opacity:0;transition:opacity .9s}
.hero .media video.on{opacity:1}
.hero .media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(35,31,32,.05) 0%,rgba(35,31,32,.2) 45%,rgba(35,31,32,.78) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-bottom:clamp(40px,6vw,76px)}
.hero h1{max-width:12ch;color:var(--cream)}
.hero h1 em{color:var(--blush)}
.hero .lede{color:var(--cream);opacity:.92;margin:26px 0 0;max-width:30em}
.hero .pair{margin-top:30px}
main{position:relative;z-index:1;background:var(--cream)}

/* ---------- section one: photo with a hanging panel ---------- */
.lead{display:grid;grid-template-columns:1.05fr .95fr;gap:0;align-items:stretch}
.lead .photo{position:relative;min-height:560px;overflow:hidden}
.lead .photo picture{position:absolute;inset:-14% 0}
.lead .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.lead .copy{padding:clamp(48px,6vw,96px) var(--gut) clamp(48px,6vw,96px) clamp(40px,5vw,80px);display:flex;flex-direction:column;justify-content:center}
.lead .copy h2{color:var(--wine);max-width:11ch}
.lead .copy p{margin-top:22px}
.hangpanel{position:relative;z-index:2;background:var(--wine);color:var(--cream);padding:clamp(30px,3.6vw,46px) clamp(30px,3.6vw,48px);
  max-width:560px;margin:-150px 0 0 var(--gut)}
.hangpanel h3{color:var(--cream)}
.hangpanel p{margin:16px 0 0;font-size:18px;opacity:.95}
.hangpanel .pair{margin-top:24px}
.hangpanel .btn-ink{background:var(--ink);border-color:var(--ink)}
.hangpanel.ink{background:var(--ink)}
.panelrow{display:grid;grid-template-columns:560px 1fr;gap:clamp(28px,5vw,80px);align-items:end}
.panelrow .hangpanel{margin-left:0}
.panelrow .intro h2{color:var(--wine);font-size:clamp(40px,4.4vw,60px)}
.panelrow .intro .lede{margin:18px 0 0}
.panelrow .intro{padding-bottom:8px}

/* ---------- typographic rows (services on home, steps, differences) ---------- */
.rows{border-top:1px solid var(--rule)}
.row{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,4vw,64px);padding:clamp(28px,3.6vw,48px) 0;border-bottom:1px solid var(--rule);align-items:start}
.row h3{color:var(--ink)}
.row h3 small{display:block;font:700 13px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--wine);margin-top:12px}
.row p{margin:0 0 18px;max-width:58ch}
.row .num{font-family:var(--disp);font-variation-settings:"opsz" 144;font-weight:600;font-size:clamp(40px,4vw,56px);line-height:1;color:var(--wine);letter-spacing:-.02em}
.row.step{grid-template-columns:72px 1fr;gap:20px}
.rows.lt{border-color:rgba(254,250,240,.18)}
.rows.lt .row{border-color:rgba(254,250,240,.18)}
.rows.lt .row h3,.rows.lt .row p{color:var(--cream)}
.rows.lt .row p{opacity:.9}
.split{display:grid;grid-template-columns:.42fr .58fr;gap:clamp(28px,5vw,80px);align-items:start}
.split h2{color:var(--wine);font-size:clamp(40px,4.4vw,60px)}
.split.lt h2{color:var(--cream)}

/* ---------- ink price block ---------- */
.ink{background:var(--ink);color:var(--cream)}
.ink h2,.ink h3{color:var(--cream)}
.ink .lede{color:var(--cream);opacity:.85}
.ink p{color:var(--cream)}
.prices{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(36px,4vw,56px);border-top:1px solid rgba(254,250,240,.18)}
.price{padding:clamp(24px,3vw,40px) clamp(18px,2.6vw,36px) clamp(24px,3vw,40px) 0;border-bottom:1px solid rgba(254,250,240,.18)}
.price b{display:block;font-family:var(--disp);font-variation-settings:"opsz" 144;font-weight:600;font-size:clamp(52px,6vw,88px);line-height:1;color:var(--gold);letter-spacing:-.03em}
.price b sup{font-size:.42em;vertical-align:top;top:.35em;position:relative;margin-right:2px}
.price b i{font-style:normal;font-size:.26em;letter-spacing:0;color:var(--cream);opacity:.7;margin-left:8px;font-family:var(--body);font-weight:600}
.price>span{display:block;margin-top:14px;font:700 13px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase}
.price p{margin:10px 0 0;font-size:16px;opacity:.82;max-width:30ch}

/* ---------- full bleed photo band with a hanging panel ---------- */
.band{position:relative}
.band .bg{position:relative;height:clamp(260px,34vw,460px);overflow:hidden;background:var(--ink2)}
.band .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band .bg .pxl{position:absolute;inset:-12% 0}
.band .bg .pxl picture,.band .bg .pxl img{display:block;width:100%;height:100%}

/* ---------- 3D strip: fixed media seen through a clipped window ---------- */
.strip{position:relative;height:clamp(420px,72vh,760px);clip-path:inset(0);overflow:hidden;background:var(--ink2);color:var(--cream)}
.strip .fixed{position:fixed;top:0;left:0;width:100%;height:100vh;height:100dvh;display:grid;grid-template-columns:repeat(3,1fr)}
.strip .cell{position:relative;overflow:hidden;background:var(--ink2)}
.strip .cell img,.strip .cell video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.strip .cell video{opacity:0;transition:opacity .9s}
.strip .cell video.on{opacity:1}
.strip .cell+.cell{border-left:4px solid var(--cream)}
.strip.one .fixed{grid-template-columns:1fr}
.rows.lt .row h3 a{color:var(--cream);border-bottom:2px solid var(--gold)}
.cols2 a{border-bottom:1px solid var(--gold)}
.strip .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 0 clamp(28px,4vw,48px);background:linear-gradient(180deg,rgba(35,31,32,0) 0%,rgba(35,31,32,.72) 100%);padding-top:80px}
.strip .cap h2{color:var(--cream);font-size:clamp(34px,4vw,56px);max-width:16ch}
.strip .cap .arrow{margin-top:18px}
.banner{background:var(--ink);color:var(--cream);padding:clamp(26px,3.2vw,40px) 0;text-align:center}
.banner p{margin:0;font-family:var(--disp);font-variation-settings:"opsz" 144;font-weight:500;font-size:clamp(22px,2.6vw,36px);letter-spacing:-.01em;line-height:1.2}
.banner p em{color:var(--gold);font-style:italic}

/* ---------- wine review block ---------- */
.wine{background:var(--wine);color:var(--cream)}
.wine h2,.wine h3{color:var(--cream)}
.quote{display:grid;grid-template-columns:.38fr .62fr;gap:clamp(28px,5vw,80px);align-items:start}
.quote .g{display:flex;align-items:center;gap:14px;margin-top:26px}
.quote .g img{height:28px;width:auto}
.quote .g span{font:700 13px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase}
.stars{display:inline-flex;gap:2px;margin-bottom:22px}
.stars svg{width:22px;height:22px;fill:var(--gold)}
.qslide{display:none}
.qslide.on{display:block;animation:qin .55s ease both}
@keyframes qin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.no-js .qslide{display:block;margin-bottom:40px}
blockquote{margin:0;font-family:var(--disp);font-variation-settings:"opsz" 144;font-weight:500;font-size:clamp(23px,2.5vw,34px);line-height:1.3;letter-spacing:-.01em;color:var(--cream)}
blockquote+.who{margin-top:22px;font-size:16px}
.who b{display:block;font-size:17px}
.who span{opacity:.92}
.who .reply{margin-top:14px;padding-left:18px;border-left:2px solid rgba(254,250,240,.5);font-size:15px;opacity:.9}
.qnav{display:flex;align-items:center;gap:18px;margin-top:32px}
.qnav button{width:48px;height:48px;border:2px solid rgba(254,250,240,.7);background:transparent;color:var(--cream);font-size:20px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .18s,color .18s}
.qnav button:hover{background:var(--cream);color:var(--wine)}
.qnav .count{font:700 13px/1 var(--body);letter-spacing:.2em}
.no-js .qnav{display:none}
.wine .arrow.lt::before{background:var(--gold)}

/* ---------- offset frame photo ---------- */
.frame picture,.gallery figure picture{display:block;width:100%;height:100%}
.frame{position:relative;isolation:isolate;display:block;margin:0}
.frame img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.frame::after{content:"";position:absolute;inset:18px -18px -18px 18px;border:2px solid var(--ink);z-index:0}
.frame.lt::after{border-color:var(--cream)}
.frame.sq{aspect-ratio:1/1}
.frame.tall{aspect-ratio:4/5}
.frame.wide{aspect-ratio:16/10}

/* ---------- service compositions (services page) ---------- */
.comp{display:grid;grid-template-columns:.9fr 1fr 1.1fr;gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(36px,4.5vw,64px) 0;border-top:1px solid var(--rule)}
.comp:last-of-type{border-bottom:1px solid var(--rule)}
.comp h2{color:var(--wine);font-size:clamp(40px,4.4vw,60px)}
.comp .frame{max-width:420px;margin:0 auto;padding:0 18px 18px 0}
.comp .frame::after{inset:18px 0 0 18px}
.comp.flip .frame{order:3}
.comp.flip .text{order:2}
.comp.flip h2{order:1}
.comp .text p{margin-bottom:20px}

/* ---------- about composition ---------- */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,6vw,96px);align-items:center}
.about .frame{padding:0 18px 18px 0}
.about .frame::after{inset:18px 0 0 18px}
.about h2{color:var(--wine);font-size:clamp(40px,4.6vw,62px)}
.about .text p{margin-top:18px}
.marks{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.marks>*{display:flex;align-items:center;gap:22px;padding:30px clamp(16px,2.6vw,36px);border-left:1px solid var(--rule)}
.marks>*:first-child{border-left:0;padding-left:0}
.marks img{height:64px;width:auto;flex:none}
.marks b{display:block;font-family:var(--disp);font-variation-settings:"opsz" 144;font-weight:600;font-size:22px;letter-spacing:-.01em;line-height:1.1}
.marks small{display:block;color:var(--soft);font-size:15px;margin-top:6px}

/* ---------- gallery (our work) ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.gallery figure{margin:0;position:relative;overflow:hidden;background:var(--rule);aspect-ratio:1/1}
.gallery figure:nth-child(2){margin-top:56px}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery figcaption{position:absolute;left:0;bottom:0;background:var(--ink);color:var(--cream);font:700 12px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;padding:12px 16px}

/* ---------- map with ink hanging panel ---------- */
.mapblock{position:relative}
.mapblock iframe{width:100%;height:clamp(360px,48vw,560px);border:0;display:block;filter:grayscale(.15)}
.mapblock .hangpanel{margin:-110px 0 0 var(--gut);max-width:480px}
.cols2{columns:2;column-gap:40px;font-size:18px;line-height:1.9}
.cols2 li{break-inside:avoid}
.plain li{padding:14px 0;border-bottom:1px solid var(--rule);font-family:var(--disp);font-variation-settings:"opsz" 144;font-weight:500;font-size:24px;letter-spacing:-.01em}
.plain li:first-child{border-top:1px solid var(--rule)}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:24px 56px 24px 0;position:relative;font-family:var(--disp);font-variation-settings:"opsz" 144;font-weight:500;font-size:clamp(21px,2vw,27px);letter-spacing:-.01em;line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-family:var(--body);font-weight:400;font-size:34px;line-height:1;color:var(--wine);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq .ans{padding:0 0 26px;max-width:62ch;color:var(--soft);font-size:17px}

/* ---------- forms ---------- */
form.quote{display:grid;grid-template-columns:1fr 1fr;gap:26px 32px}
form.quote label{display:block;font:700 12px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
form.quote .full{grid-column:1/-1}
form.quote input,form.quote select,form.quote textarea{width:100%;margin-top:8px;border:0;border-bottom:2px solid var(--ink);background:transparent;padding:12px 0;font:400 17px/1.4 var(--body);color:var(--ink);border-radius:0;-webkit-appearance:none;appearance:none}
form.quote select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23231F20' stroke-width='2'/%3E%3C/svg%3E") no-repeat right center/18px;padding-right:28px}
form.quote textarea{min-height:120px;resize:vertical}
form.quote input:focus,form.quote select:focus,form.quote textarea:focus{outline:0;border-bottom-color:var(--gold)}
form.quote ::placeholder{color:var(--mute)}
form.quote .btn{margin-top:6px}
.hint{font-size:15px;color:var(--soft);margin-top:18px}
.hint a{border-bottom:1px solid var(--gold)}
fieldset{border:0;padding:0;margin:0 0 clamp(36px,4vw,56px)}
legend{font-family:var(--disp);font-variation-settings:"opsz" 144;font-weight:600;font-size:clamp(28px,3vw,40px);letter-spacing:-.02em;color:var(--wine);padding:0;margin-bottom:6px}
fieldset .sub{color:var(--soft);margin:0 0 26px}
.fgrid2{display:grid;grid-template-columns:1fr 1fr;gap:26px 32px}
.fgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 32px}
.help{font-size:15px;color:var(--soft);margin:12px 0 0}
.grouplabel{display:block;font:700 12px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.opts{display:grid;grid-template-columns:1fr;border-top:1px solid var(--rule)}
.opts.two{grid-template-columns:1fr 1fr}
.opts.three{grid-template-columns:repeat(3,1fr)}
form.quote .opt{display:flex;align-items:flex-start;gap:14px;padding:14px 12px 14px 0;border-bottom:1px solid var(--rule);text-transform:none;letter-spacing:0;font:400 17px/1.4 var(--body);cursor:pointer}
form.quote .opt input{width:20px;height:20px;margin:3px 0 0;flex:none;appearance:auto;-webkit-appearance:auto;accent-color:var(--wine);border:0}
.opt b{font-weight:700}
.opt .soft{display:block;font-size:14px;color:var(--soft)}
.steps{display:flex;gap:30px;font:700 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-bottom:22px}
.steps .on{color:var(--wine)}
.reqnote{border-left:3px solid var(--gold);padding:6px 0 6px 18px;margin:0 0 36px;color:var(--soft);max-width:70ch}
.reqnote b{color:var(--ink)}
.formwrap{max-width:900px}

/* contact section, blush block with two columns */
.blush{background:var(--blush)}
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,6vw,96px);align-items:start}
.contact h2{color:var(--wine)}
.nap{margin-top:30px;font-size:18px;line-height:1.5}
.nap .tel{margin:14px 0 6px;display:block}
.nap a:not(.tel){border-bottom:1px solid var(--gold)}
.contact form.quote{margin-top:6px}

/* video background section (contact page) */
.vidsec{position:relative;color:var(--cream);overflow:hidden;background:var(--ink)}
.vidsec .vbg{position:absolute;inset:0}
.vidsec .vbg img,.vidsec .vbg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vidsec .vbg video{opacity:0;transition:opacity .9s}
.vidsec .vbg video.on{opacity:1}
.vidsec .vbg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(35,31,32,.86) 0%,rgba(35,31,32,.66) 55%,rgba(35,31,32,.5) 100%)}
.vidsec .wrap{position:relative;z-index:2}
.vidsec h2{color:var(--cream)}
.vidsec .nap{color:var(--cream)}
.vidsec .nap .tel{color:var(--cream)}
.vidsec .nap a:not(.tel){border-bottom-color:var(--gold)}
.vidsec form.quote{background:var(--cream);color:var(--ink);padding:clamp(24px,3vw,40px)}
.vidsec form.quote h3{grid-column:1/-1;color:var(--ink);font-size:28px}
.vidsec form.quote input,.vidsec form.quote select,.vidsec form.quote textarea{background:#fff;border:1px solid var(--ink);padding:12px 14px}
.vidsec form.quote select{background-color:#fff;background-position:right 12px center}
.vidsec .hint{color:var(--soft);grid-column:1/-1;margin:0}

/* ---------- page head for inner pages ---------- */
.pagehead{padding:clamp(44px,5vw,64px) 0 clamp(36px,4vw,56px);border-bottom:1px solid var(--rule)}
.pagehead .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);align-items:end}
.pagehead .crumbs{font:700 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin:0 0 26px;grid-column:1/-1}
.pagehead .crumbs a{border-bottom:1px solid var(--gold)}
.pagehead h1{color:var(--wine);font-size:clamp(48px,6.6vw,88px)}
.pagehead .lede{margin:0}
.prose{max-width:70ch}
.prose h2{font-size:clamp(30px,3vw,40px);color:var(--wine);margin:38px 0 14px}
.prose ul{list-style:disc;padding-left:22px;margin:0 0 1em}
.prose li{margin:6px 0}
.prose a{border-bottom:1px solid var(--gold)}

/* ---------- footer, two tone ---------- */
footer.site{color:var(--cream)}
footer .fsplit{display:grid;grid-template-columns:1.55fr 1fr}
footer .fmain{background:var(--ink);padding:clamp(48px,5vw,72px) 0 clamp(48px,5vw,72px) 0}
footer .fmain .in{max-width:calc(var(--wrap) * .6);margin-left:auto;padding:0 clamp(28px,4vw,64px) 0 var(--gut)}
footer .fbrand{display:flex;align-items:center;gap:18px;margin-bottom:26px}
footer .fbrand img{height:96px;width:auto}
footer .fbrand b{font-family:var(--disp);font-variation-settings:"opsz" 144;font-weight:600;font-size:26px;letter-spacing:-.02em}
footer .fgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:34px}
footer .fgrid .fh{color:var(--gold);margin-bottom:16px}
footer .fgrid li{margin:8px 0;font-size:16px}
footer .fgrid a:hover{color:var(--gold)}
footer address{font-style:normal;font-size:17px;line-height:1.55}
footer .tel.lt{display:inline-block;margin:12px 0 10px}
footer .fside{background:var(--cream);color:var(--ink);padding:clamp(48px,5vw,72px) var(--gut) clamp(48px,5vw,72px) clamp(28px,4vw,64px);border-top:4px solid var(--gold)}
footer .fside .in{max-width:calc(var(--wrap) * .4)}
footer .fside .fh{color:var(--wine);margin-bottom:22px}
footer .fside ul{display:grid;gap:22px}
footer .fside li{display:flex;align-items:center;gap:16px}
footer .fside li img{height:54px;width:auto;flex:none}
footer .fside li b{display:block;font-size:17px;line-height:1.2}
footer .fside li span{font-size:14px;color:var(--soft)}
footer .fside .g{display:flex;align-items:center;gap:14px;margin-top:30px;padding-top:26px;border-top:1px solid var(--rule)}
footer .fside .g img{height:26px;width:auto}
footer .fside .g .arrow{margin:0}
footer .fbot{background:var(--ink2);font-size:14px}
footer .fbot .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center;min-height:60px;padding-top:12px;padding-bottom:12px}
footer .fbot a:hover{color:var(--gold)}
footer .legal a{margin-right:18px}
footer .credit{display:inline-flex;align-items:center;gap:8px}
footer .credit img{height:22px;width:auto}

/* ---------- sticky calls to action ---------- */
.fab{position:fixed;right:0;bottom:0;z-index:40;background:var(--wine);color:#fff;font:700 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
  padding:20px 26px;display:inline-flex;align-items:center;gap:12px;transform:translateY(110%);transition:transform .3s}
.fab.on{transform:none}
.fab svg{width:18px;height:18px;fill:currentColor}
.fab:hover{background:var(--winedk)}
.mobilebar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:45}
.mobilebar a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:58px;font:700 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#fff}
.mobilebar .call{background:var(--ink)}
.mobilebar .quote{background:var(--wine)}
.mobilebar svg{width:18px;height:18px;fill:currentColor}

/* ---------- motion ---------- */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.12s}.js .rv.d2{transition-delay:.24s}
.js .rows .row.rv:nth-child(2){transition-delay:.1s}.js .rows .row.rv:nth-child(3){transition-delay:.2s}.js .rows .row.rv:nth-child(4){transition-delay:.3s}
.js .price{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.js .prices.in .price{opacity:1;transform:none}
.js .prices.in .price:nth-child(2){transition-delay:.08s}.js .prices.in .price:nth-child(3){transition-delay:.16s}.js .prices.in .price:nth-child(4){transition-delay:.24s}.js .prices.in .price:nth-child(5){transition-delay:.32s}.js .prices.in .price:nth-child(6){transition-delay:.4s}
/* photo wipes: the image is revealed left to right once in view */
/* a cream curtain slides off the photo. Nothing is clipped, so lazy loading and the observer both see the image. */
.js .wipe{position:relative}
.js .wipe::before{content:"";position:absolute;inset:0;z-index:3;background:var(--cream);transform-origin:right;transition:transform 1s cubic-bezier(.7,0,.2,1)}
.js .wipe.in::before{transform:scaleX(0)}
.js .wipe.rv{opacity:1;transform:none}
/* hero entrance, once, on load */
.js .hero h1,.js .hero .lede,.js .hero .pair{opacity:0;transform:translateY(26px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.js .hero .lede{animation-delay:.25s}
.js .hero .pair{animation-delay:.45s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .price{opacity:1;transform:none;transition:none}
  .js .wipe::before{display:none}
  .js .hero h1,.js .hero .lede,.js .hero .pair{animation:none;opacity:1;transform:none}
  .qslide.on{animation:none}
}

/* ======================================================================
   RESPONSIVE. Nothing below this line is a component rule.
   ====================================================================== */
@media (max-width:1439px){
  .hright .tel{display:none}
}
@media (max-width:1180px){
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;background:var(--cream);border-bottom:4px solid var(--gold);flex-direction:column;gap:0;padding:8px 0}
  nav.main.open{display:flex}
  nav.main a{padding:16px var(--gut);border-top:1px solid var(--rule);font-size:15px}
  nav.main a::after{display:none}
  header.site .wrap{grid-template-columns:auto 1fr auto}
  .burger{display:flex}
  .hright .btn{display:none}
  .callsq{display:inline-flex}
  .hright .tel{display:none}
  .hright{gap:10px}
}
@media (max-width:1024px){
  .util .addr{display:none}
  .comp{grid-template-columns:1fr 1fr;row-gap:28px}
  .comp h2{grid-column:1/-1}
  .comp.flip h2{order:0}
  .comp.flip .frame{order:1}
  .comp.flip .text{order:2}
  .prices{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  :root{--hdr:72px}
  .brand{gap:10px}
  .brand .mono{height:calc(var(--hdr) - 8px)}
  .brand .bname{font-size:19px}
  .hero{height:auto;max-height:none;aspect-ratio:auto;padding-top:88px;top:var(--ht,0px);min-height:calc(100vh - var(--hdr) - 42px);min-height:calc(100svh - var(--hdr) - 42px)}
  .hero .wrap{padding-bottom:26px}
  .hero .lede{margin-top:16px;font-size:18px}
  .hero .pair{margin-top:20px}
  .hero h1{font-size:clamp(46px,11vw,72px)}
  .lead{grid-template-columns:1fr}
  .lead .photo{min-height:0;aspect-ratio:4/3}
  .lead .copy{padding:40px var(--gut) 48px}
  .hangpanel{margin:-90px var(--gut) 0;max-width:none}
  .lead+.wrap .hangpanel{margin:0}
  .panelrow{grid-template-columns:1fr;gap:36px}
  .panelrow .hangpanel{margin:0}
  .panelrow .intro{padding:0 var(--gut)}
  .strip{height:clamp(380px,64vh,620px)}
  .strip .fixed{grid-template-columns:1fr}
  .strip .cell+.cell{display:none}
  .row{grid-template-columns:1fr;gap:12px}
  .row.step{grid-template-columns:56px 1fr}
  .split{grid-template-columns:1fr}
  .quote{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .about .frame{max-width:440px}
  .marks{grid-template-columns:1fr}
  .marks>*{border-left:0;padding-left:0;border-top:1px solid var(--rule)}
  .marks>*:first-child{border-top:0}
  .gallery{grid-template-columns:1fr 1fr}
  .gallery figure:nth-child(2){margin-top:0}
  .mapblock .hangpanel{margin:-70px var(--gut) 0;max-width:none}
  .contact{grid-template-columns:1fr}
  .pagehead .wrap{grid-template-columns:1fr}
  footer .fsplit{grid-template-columns:1fr}
  footer .fmain .in,footer .fside .in{max-width:none;margin:0;padding:0 var(--gut)}
  footer .fside{padding-left:0;padding-right:0}
  footer .fside .in{padding:0 var(--gut)}
  .fab{display:none}
}
@media (max-width:760px){
  .util .r{display:none}
  .util .wrap{justify-content:center}
  .prices{grid-template-columns:1fr 1fr}
  .price b{font-size:52px}
  .comp{grid-template-columns:1fr}
  .comp .frame{margin:0 18px 18px 0;max-width:none}
  form.quote,.fgrid2,.fgrid3{grid-template-columns:1fr}
  .opts.two,.opts.three{grid-template-columns:1fr}
  footer .fgrid{grid-template-columns:1fr 1fr}
  .mobilebar{display:flex}
  .hero{min-height:calc(100vh - var(--hdr) - 100px);min-height:calc(100svh - var(--hdr) - 100px)}
  body{padding-bottom:58px}
  .steps{gap:18px;flex-wrap:wrap}
  .hero .pair{gap:16px 24px}
  .pair{gap:16px 24px}
}
@media (max-width:430px){
  .brand .bname{font-size:18px}
  .callsq{display:none}
  header.site .wrap{gap:12px}
  .hero h1{font-size:44px}
  h2{font-size:40px}
  .hangpanel{padding:26px 22px}
  .prices{grid-template-columns:1fr}
  .price{padding-right:0}
  footer .fgrid{grid-template-columns:1fr 1fr}
  footer .fgrid>div:first-child{grid-column:1/-1}
  .gallery{grid-template-columns:1fr}
  .btn{padding:16px 20px;font-size:13px}
  .tel.big{font-size:28px}
}
@media (max-width:900px) and (max-height:620px){
  .hero{padding-top:64px}
  .hero h1{font-size:38px}
  .hero .lede{font-size:17px;margin-top:12px}
  .hero .pair{margin-top:16px}
}
@media (hover:none){
  .btn,.arrow,.qnav button{min-height:44px}
  .tel{display:inline-block;padding:13px 0}
  .tel.big{padding:6px 0}
  nav.main a{min-height:44px}
}