/* Azarie Services: the shared look for every page */
:root{--cream:#F6EFE5;--ivory:#FBF5EC;--plum:#5C4232;--plum2:#4A3226;--ink:#3A2A20;--text:#3F3129;--gold:#9C7A3C;--gold2:#D8B877;--gold3:#7A5A22;
  --night:#2E2019;--night2:#241912;--serif:"DM Serif Display",Georgia,serif;--sans:"Inter Tight",system-ui,sans-serif;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box;margin:0;padding:0}
/* the cream paper is one seamless sheet that scrolls with the page, so words and paintings sit on it like print */
html{background:#E3DCD2 url("paper-tile.jpg") 0 0/720px 720px repeat;-webkit-text-size-adjust:100%}
body{background:transparent;color:var(--ink);font:300 17px/1.65 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul{list-style:none}
::selection{background:var(--plum);color:var(--ivory)}
:focus-visible{outline:2px solid var(--gold2);outline-offset:4px}
/* while the home hero plays, the page can't scroll (the scrollbar stays, so nothing shifts when it unlocks) */
html.lock,html.lock body{overscroll-behavior:none}
/* names, labels, buttons and the page heroes can't be selected or dragged, so they never look like a document */
.phero,.nav,.mnav,.cue,.eyebrow2,.eyebrow3,.crumbs,.btn,.more,.badges,.card .num,.item em,.row .n,.sep,.quote .mark,.faq summary,.note label span,.stamp{-webkit-user-select:none;user-select:none}
.phero img,.bot,.arch img,.stroke img,.shot img,.brand img,footer .logo{-webkit-user-drag:none}
/* the paintings and hero layers let clicks through, so right-clicking anywhere gives the normal browser menu (back, reload, print...) */
.hero .layer,.phero .bg,.arch img,.shot img,.emblem,.vig-in{pointer-events:none}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,56px)}
.center{text-align:center}

/* ---------- the menu: a dark glass oval at the top, with the links inside ---------- */
.nav{position:fixed;z-index:20;left:0;right:0;top:clamp(12px,1.8vw,26px);display:flex;justify-content:center;padding:0 16px;pointer-events:none}
.pill{pointer-events:auto;display:flex;align-items:center;gap:clamp(16px,2.2vw,40px);padding:7px 7px 7px clamp(16px,1.6vw,24px);border-radius:999px;
  background:rgba(30,20,15,.56);border:1px solid rgba(226,197,138,.26);-webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);
  box-shadow:0 16px 46px -18px rgba(10,6,4,.6),inset 0 1px 0 rgba(255,246,226,.08);transition:transform .7s var(--ease),opacity .5s ease}
.nav.hide .pill{transform:translateY(calc(-100% - 40px));opacity:0}
.pill{transition:transform .7s var(--ease),opacity .5s ease,background .5s ease,border-color .5s ease}
.nav.solid .pill{background:rgba(46,32,25,.95);border-color:rgba(226,197,138,.34)}
.brand{display:flex;align-items:center}
.brand img{height:clamp(34px,2.9vw,44px);width:auto}
.links{display:flex;align-items:center;gap:clamp(16px,2vw,34px)}
.links a{position:relative;display:block;font:500 11.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;padding:10px 0;white-space:nowrap;
  color:rgba(251,245,236,.8);transition:color .4s}
.links a:hover,.links a.on{color:#F3E3BF}
.links>a::after,.dd>a::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:linear-gradient(90deg,var(--gold),var(--gold2));
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.links>a:hover::after,.links>a.on::after,.dd>a:hover::after,.dd>a.on::after{transform:scaleX(1)}
/* the services list that opens under Services */
.dd{position:relative}
.dd .sub{position:absolute;left:50%;top:calc(100% + 16px);min-width:250px;padding:10px;border-radius:18px;background:rgba(30,20,15,.86);
  border:1px solid rgba(226,197,138,.22);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 24px 50px -20px rgba(10,6,4,.7);
  opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .35s,transform .45s var(--ease),visibility .35s}
.dd .sub::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.dd:hover .sub,.dd:focus-within .sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
.dd .sub a{padding:13px 14px;border-radius:12px;font-size:11px;letter-spacing:.14em}
.dd .sub a:hover{background:rgba(243,227,191,.08)}
.cta{display:flex;align-items:center;gap:12px;font:500 11.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  padding:13px 18px 13px 22px;border:1px solid rgba(243,227,191,.42);border-radius:999px;color:#F7EBD0;white-space:nowrap;transition:background .4s,color .4s}
.arr{position:relative;display:inline-block;width:20px;height:1px;background:currentColor;flex:none}
.arr::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.cta:hover{background:#F3E3BF;color:#33241B}
.menu-btn{display:none;font:500 11.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;padding:13px 20px;
  border:1px solid rgba(243,227,191,.42);border-radius:999px;background:none;color:#F7EBD0;cursor:pointer}
@media (max-width:980px){.links,.cta{display:none}.menu-btn{display:block}}
/* phone menu: a full screen panel on the cream paper */
.mnav{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;padding:22px clamp(18px,5vw,40px) 40px;overflow:auto;
  background:#E3DCD2 url("paper-tile.jpg") 0 0/720px 720px;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.mnav.open{opacity:1;visibility:visible}
.mnav .top{display:flex;justify-content:space-between;align-items:center}
.mnav .top img{height:46px;width:auto}
.mnav .list{margin:auto 0;display:flex;flex-direction:column}
.mnav .list>a{font:400 clamp(32px,9vw,52px)/1.15 var(--serif);color:var(--plum);padding:12px 0;border-bottom:1px solid rgba(92,66,50,.14)}
.mnav .msub{display:flex;flex-wrap:wrap;gap:6px 18px;padding:12px 0 14px;border-bottom:1px solid rgba(92,66,50,.14)}
.mnav .msub a{font:500 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold3);padding:4px 0}
.mnav .menu-btn{display:block;color:var(--plum);border-color:rgba(92,66,50,.45)}

/* ---------- words and parts used on every page ---------- */
.eyebrow2{display:inline-flex;align-items:center;gap:14px;font:600 12px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--gold3)}
.eyebrow2::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,rgba(156,122,60,0),var(--gold))}
.center .eyebrow2::after{content:"";width:34px;height:1px;background:linear-gradient(90deg,var(--gold),rgba(156,122,60,0))}
.h2{font:400 clamp(32px,4.1vw,64px)/1.08 var(--serif);color:var(--plum);letter-spacing:.005em}
.h3{font:400 clamp(28px,3.1vw,48px)/1.12 var(--serif);color:var(--plum)}
.ln{display:block;width:fit-content}
.center .ln{margin-inline:auto}
.lead{font:300 clamp(16px,1.35vw,19.5px)/1.78 var(--sans);color:var(--text)}
.lead.big{font:400 clamp(21px,2vw,29px)/1.45 var(--serif);color:var(--plum)}
.rule{display:flex;align-items:center;justify-content:center;gap:14px;margin:clamp(24px,2.6vw,36px) auto}
.rule::before,.rule::after{content:"";width:72px;height:1px;background:linear-gradient(90deg,rgba(156,122,60,0),var(--gold))}
.rule::after{transform:scaleX(-1)}
.rule i{width:7px;height:7px;background:var(--gold2);transform:rotate(45deg)}
.btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:clamp(32px,3.4vw,46px)}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:12px;font:500 12.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  padding:18px 30px;border-radius:999px;transition:background .4s,color .4s,box-shadow .4s,transform .4s}
/* a soft band of light crosses the button on hover */
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-80%;width:50%;background:linear-gradient(105deg,rgba(255,255,255,0),rgba(255,255,255,.3),rgba(255,255,255,0));
  transform:skewX(-18deg);transition:left .9s var(--ease);pointer-events:none}
.btn:hover::after{left:130%}
.b1{background:var(--plum);color:var(--ivory);box-shadow:0 12px 30px -14px rgba(92,66,50,.6)}
.b1:hover{background:var(--plum2);transform:translateY(-1px)}
.b2{border:1px solid rgba(92,66,50,.45);color:var(--plum)}
.b2:hover{background:rgba(92,66,50,.06)}
.more{display:inline-flex;align-items:center;gap:12px;font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--plum);padding:6px 0}
.more .arr{transition:width .4s}
.more:hover .arr,a:hover .more .arr{width:30px}
/* paintings sit in tall arches with a fine gold line inside */
.arch{position:relative;aspect-ratio:4/5;border-radius:50% 50% 16px 16px/40% 40% 16px 16px;overflow:hidden;box-shadow:0 30px 60px -34px rgba(70,48,36,.45);background:#E9DFD0}
.arch img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform 1.6s var(--ease)}
.arch img[data-parallax]{transition:none}
.arch::after{content:"";position:absolute;inset:10px;border:1px solid rgba(243,226,188,.75);border-radius:inherit;pointer-events:none}
a:hover .arch img:not([data-parallax]),.arch:hover img:not([data-parallax]){transform:scale(1.07)}
/* the line between sections: two fine gold lines and a small diamond, drawn outward from the middle */
/* a little thicker and almost edge to edge, so two sections are always clearly divided, even where their flowers sit */
.sep{position:relative;z-index:2;display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);max-width:1440px;margin:0 auto;padding:0 clamp(16px,3vw,40px)}
.sep::before,.sep::after{content:"";flex:1;height:1.5px;background:rgba(156,122,60,.72);transform-origin:right;transition:transform 1.6s var(--ease)}
.sep::after{transform-origin:left}
.sep i{flex:none;width:11px;height:11px;border:1.4px solid var(--gold);background:radial-gradient(var(--gold2) 0 2px,transparent 2.6px);transform:rotate(45deg);transition:transform .9s var(--ease) .25s}
.js.ready .sep:not(.in)::before,.js.ready .sep:not(.in)::after{transform:scaleX(0)}
.js.ready .sep:not(.in) i{transform:rotate(45deg) scale(0)}
.sec{padding:clamp(60px,7vw,110px) 0}
.sec .head{max-width:820px;margin:0 auto clamp(36px,4.5vw,64px)}
.sec .head .h2,.sec .head .h3{margin-top:18px}
.statement{padding:clamp(60px,7vw,110px) 0}
.statement p{max-width:920px;margin:0 auto;text-align:center;font:400 clamp(24px,2.6vw,38px)/1.45 var(--serif);color:var(--plum)}
.statement .ln,.quote .ln{margin-inline:auto}

/* ---------- home ---------- */
.intro{padding:clamp(96px,12vw,170px) 0 clamp(56px,7vw,100px)}
.intro .wrap{max-width:1000px}
.intro .lead{max-width:640px;margin:0 auto}
.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,2.6vw,38px);max-width:780px;
  margin:clamp(46px,5vw,66px) auto 0;padding-top:clamp(28px,3vw,38px);border-top:1px solid rgba(156,122,60,.3)}
.badges li{display:flex;align-items:center;gap:10px;font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#5A4120}
.badges svg{width:20px;height:20px;fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.who{padding:clamp(56px,7vw,100px) 0}
.who .grid,.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,100px);align-items:center}
.who .arch,.split .arch{max-width:480px;width:100%}
.who .h3,.split .h3{margin-top:18px}
.who .lead,.split .lead{max-width:560px;margin-top:20px}
.split .lead.big{margin-top:22px}
.who .more,.split .more{margin-top:28px}
.svc{padding:clamp(56px,7vw,100px) 0 clamp(90px,11vw,150px)}
.svc .head{margin-bottom:clamp(40px,5vw,72px)}
.svc .h3{margin-top:18px}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.2vw,32px)}
.card{display:flex;flex-direction:column}
.card .num{font:400 16px/1 var(--serif);color:var(--gold);margin-top:24px;letter-spacing:.08em}
.card h4{font:400 clamp(22px,1.8vw,27px)/1.18 var(--serif);color:var(--plum);margin-top:10px;min-height:2.36em}
@media (max-width:600px){.card h4{min-height:0}}
.card p{font:300 15.5px/1.7 var(--sans);color:var(--text);margin-top:12px;flex:1}
.card .more{margin-top:20px;align-self:flex-start;font-size:11px;letter-spacing:.14em;white-space:nowrap}

/* ---------- inner pages: the header ---------- */
.phead{padding:clamp(128px,13vw,190px) 0 clamp(56px,6vw,90px)}
.phead .grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(32px,6vw,96px);align-items:center}
.crumbs{display:flex;gap:12px;align-items:center;font:500 11.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold3);margin-bottom:26px}
.crumbs a{opacity:.72;transition:opacity .3s}
.crumbs a:hover{opacity:1}
.crumbs i{width:5px;height:5px;background:var(--gold2);transform:rotate(45deg)}
.ptitle{font:400 clamp(36px,4.2vw,66px)/1.06 var(--serif);color:var(--plum);letter-spacing:-.005em}
.phead .lead{max-width:540px;margin-top:26px}
.phead .btns{justify-content:flex-start}
.phead .arch{width:100%;max-width:460px;justify-self:end}

/* ---------- inner pages: parts ---------- */
.story .grid2{display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,1fr);gap:clamp(24px,5vw,80px)}
.story .lead+.lead{margin-top:20px}
.list{border-top:1px solid rgba(156,122,60,.32)}
.item{display:grid;grid-template-columns:70px minmax(0,1fr) 44px;gap:clamp(14px,2.5vw,40px);align-items:center;padding:clamp(22px,2.6vw,34px) 4px;
  border-bottom:1px solid rgba(156,122,60,.32);transition:background .5s,padding .5s var(--ease)}
.item em{font:400 clamp(22px,2vw,30px)/1 var(--serif);color:var(--gold);font-style:normal}
.item h3{font:400 clamp(22px,2.1vw,32px)/1.15 var(--serif);color:var(--plum)}
.item p{font:300 15.5px/1.7 var(--sans);color:var(--text);margin-top:8px;max-width:720px}
.item .go{justify-self:end;width:44px;height:44px;border:1px solid rgba(92,66,50,.3);border-radius:50%;display:grid;place-items:center;color:var(--plum);transition:background .4s,color .4s,border-color .4s}
.item .go .arr{width:16px}
.item:hover{background:rgba(251,245,236,.5);padding-left:18px}
.item:hover .go{background:var(--plum);border-color:var(--plum);color:var(--ivory)}
.vals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,34px)}
.val{position:relative;padding-top:26px;border-top:1px solid rgba(156,122,60,.45)}
.val::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;background:var(--gold2);transform:rotate(45deg)}
.val h3{font:400 clamp(21px,1.8vw,26px)/1.2 var(--serif);color:var(--plum)}
.val p{font:300 15.5px/1.7 var(--sans);color:var(--text);margin-top:10px}
.night{background:var(--night);color:#F3E2BC}
.night .h2,.night .h3{color:#F3E2BC}
.night .eyebrow2{color:#E8CF9A}
.night .val{border-top-color:rgba(232,207,154,.3)}
.night .val h3{color:#F3E2BC}
.night .val p{color:rgba(251,245,236,.74)}
.mv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,36px)}
.mv .box{padding:clamp(30px,4vw,56px);border:1px solid rgba(156,122,60,.34);border-radius:24px;background:rgba(251,245,236,.45)}
.mv .box p{font:400 clamp(20px,1.9vw,27px)/1.5 var(--serif);color:var(--plum);margin-top:20px}
.quote{max-width:920px;text-align:center}
.quote .mark{display:block;height:54px;margin-top:20px;font:400 120px/1 var(--serif);color:var(--gold2)}
.quote p{font:400 clamp(24px,2.6vw,38px)/1.45 var(--serif);color:var(--plum)}
.quote .sig{margin-top:30px;font:600 12px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold3)}
.quote .sig small{display:block;margin-top:10px;font-weight:400;letter-spacing:.16em;color:var(--text)}
/* services, one row each, painting and words side by side */
.rows{display:flex;flex-direction:column;gap:clamp(80px,10vw,150px)}
.row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,100px);align-items:center}
.row.flip .media{order:2}
.row .media{position:relative}
.row .media .arch{position:relative;z-index:1;max-width:460px;width:100%}
.row.flip .media .arch{margin-left:auto}
.row .n{position:absolute;z-index:0;top:-.5em;left:-.16em;font:400 clamp(110px,13vw,200px)/1 var(--serif);color:rgba(216,184,119,.1);-webkit-text-stroke:1.2px rgba(156,122,60,.78);pointer-events:none}
.row.flip .n{left:auto;right:-.08em}
.row .tag{font:400 clamp(19px,1.6vw,23px)/1.5 var(--serif);color:var(--plum);margin-top:18px}
.row .lead{margin-top:14px}
.ticks{display:grid;grid-template-columns:1fr 1fr;gap:11px 28px;margin-top:26px}
.ticks li{position:relative;padding-left:20px;font:400 15px/1.5 var(--sans);color:var(--ink)}
.ticks li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;background:var(--gold2);transform:rotate(45deg)}
.row .btns{justify-content:flex-start;margin-top:30px}

/* ---------- closing invitation and footer ---------- */
.close{position:relative;overflow:hidden;background:var(--night);color:#F3E2BC;padding:clamp(84px,10vw,140px) 0}
.close .eyebrow2{color:#E8CF9A}
.close .h2{color:#F3E2BC;margin-top:20px}
.close .lead{color:rgba(251,245,236,.8);max-width:640px;margin:22px auto 0}
.close .b1{background:#F3E2BC;color:var(--night);box-shadow:none}
.close .b1:hover{background:#fff}
.close .b2{border-color:rgba(243,226,188,.5);color:#F3E2BC}
.close .b2:hover{background:rgba(243,226,188,.08)}
/* the closing invitation over a painting */
.close.paint{padding:clamp(110px,13vw,190px) 0}
.close.paint .bg{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover}
.close.paint::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(36,25,19,.62),rgba(36,25,19,.72) 60%,rgba(36,25,19,.84))}
.close.paint .wrap{position:relative;z-index:2}
footer{background:var(--night2);color:rgba(251,245,236,.78);padding:clamp(60px,7vw,90px) 0 28px;font:300 15px/1.7 var(--sans)}
footer .top{display:grid;grid-template-columns:1.45fr .8fr 1.15fr 1.1fr .9fr;gap:40px}
/* her crest with the name beside it */
footer .fbrand{display:inline-flex;align-items:center;gap:16px}
footer .logo{height:64px;width:auto}
footer .fbrand b{display:block;font:400 29px/1 Italiana,serif;letter-spacing:.14em;color:#E8CF9A}
footer .fbrand small{display:block;margin-top:8px;font:500 10.5px/1 var(--sans);letter-spacing:.52em;color:rgba(232,207,154,.75)}
footer .col span{display:block;padding:3px 0}
footer .line{margin-top:18px;font:400 22px/1.3 var(--serif);color:#E8CF9A;max-width:260px}
footer h5{font:600 11.5px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:#E8CF9A;margin-bottom:18px}
footer .col a{display:block;padding:3px 0;transition:color .3s}
footer .col a:hover{color:#F3E3BF}
footer .tbc{color:rgba(251,245,236,.45);font-style:italic}
footer .soc{display:flex;gap:12px}
footer .soc a{width:42px;height:42px;border:1px solid rgba(232,207,154,.35);border-radius:50%;display:grid;place-items:center;transition:background .3s}
footer .soc a:hover{background:rgba(232,207,154,.12)}
footer .soc svg{width:17px;height:17px;fill:none;stroke:#E8CF9A;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
footer .bottom{margin-top:56px;padding-top:22px;border-top:1px solid rgba(232,207,154,.18);font-size:13px;color:rgba(251,245,236,.5);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ---------- phones and tablets ---------- */
@media (max-width:1100px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.vals{grid-template-columns:repeat(2,minmax(0,1fr))}
  footer .top{grid-template-columns:repeat(3,minmax(0,1fr))}footer .top>div:first-child{grid-column:1/-1}}
@media (max-width:900px){
  .who .grid,.split,.row,.phead .grid,.story .grid2,.mv{grid-template-columns:1fr}
  .who .arch,.split .arch,.phead .arch,.row .media .arch,.row.flip .media .arch{margin:0 auto;justify-self:center}
  .phead .arch{max-width:420px}
  .row.flip .media{order:0}
  .row .n{left:0;right:auto}
  .item{grid-template-columns:46px minmax(0,1fr)}
  .item .go{display:none}}
@media (max-width:600px){.cards,.vals,.ticks{grid-template-columns:1fr}footer .top{grid-template-columns:1fr 1fr}}

/* ---------- the paint reveal: words and paintings appear left to right through a rough, grainy edge, like paint soaking into paper ---------- */
.js .pr,.js [data-lines]:not(.lined){opacity:0}
.js.ready .pr{opacity:1;-webkit-mask-image:var(--pmask);mask-image:var(--pmask);-webkit-mask-size:300% 100%;mask-size:300% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0;
  transition:-webkit-mask-position 1.5s cubic-bezier(.33,.5,.2,1),mask-position 1.5s cubic-bezier(.33,.5,.2,1)}
.js.ready .pr.big{-webkit-mask-image:var(--pmask2);mask-image:var(--pmask2);transition-duration:2.1s}
.js.ready .pr.in{-webkit-mask-position:0 0;mask-position:0 0}
/* the picture inside an arch paints in; the frame keeps its soft shadow */
.js.ready .arch img.pr{transition:-webkit-mask-position 2.1s cubic-bezier(.33,.5,.2,1),mask-position 2.1s cubic-bezier(.33,.5,.2,1),transform 1.6s var(--ease)}
.js.ready .arch img.pr[data-parallax]{transition:-webkit-mask-position 2.1s cubic-bezier(.33,.5,.2,1),mask-position 2.1s cubic-bezier(.33,.5,.2,1)}
@media (prefers-reduced-motion: reduce){.js .pr,.js [data-lines]{opacity:1!important;-webkit-mask-image:none!important;mask-image:none!important}}

/* ---------- inner pages: the full-screen painted hero (a slow push-in, drifting petals, the page name in gold) ---------- */
.phero{position:relative;height:100vh;min-height:560px;overflow:hidden;background:var(--night)}
.phero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.02);
  animation:fadeIn 1.6s ease forwards,pushIn 34s cubic-bezier(.25,.6,.3,1) forwards}
@keyframes fadeIn{to{opacity:1}}
@keyframes pushIn{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.phero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 72% 52% at 50% 52%,rgba(20,13,9,.58),rgba(20,13,9,.36) 68%,rgba(20,13,9,.3))}
.phero canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
.phero-in{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 16px}
.eyebrow3{display:flex;align-items:center;gap:clamp(12px,1.5vw,26px);margin-bottom:clamp(18px,2.4vw,40px);
  font:500 clamp(11px,1.2vw,20px)/1 var(--sans);letter-spacing:.55em;text-transform:uppercase;color:#F4E7C9}
.eyebrow3 span{padding-left:.55em}
.eyebrow3 i{display:block;width:clamp(28px,5.5vw,104px);height:1px;background:linear-gradient(90deg,rgba(226,197,138,0),rgba(226,197,138,.95))}
.eyebrow3 i:last-child{transform:scaleX(-1)}
.ptitle2{font:400 clamp(34px,6.6vw,136px)/1.05 Italiana,"DM Serif Display",serif;letter-spacing:.12em;
  /* a close shadow for crisp edges, and a wide soft halo so the fine letters stay clear over bright paintings */
  filter:drop-shadow(0 .02em .05em rgba(14,9,6,.7)) drop-shadow(0 0 .3em rgba(20,13,9,.55))}
.ptitle2>span{display:block;white-space:nowrap;padding-left:.12em;color:#F3E2BC;
  background-image:linear-gradient(100deg,rgba(255,250,238,0) 42%,rgba(255,250,238,.92) 50%,rgba(255,250,238,0) 58%),
                   linear-gradient(180deg,#FFF8EA 0%,#F6E8C8 40%,#DDBA7A 76%,#F2E0B6 100%);
  background-size:260% 100%,100% 100%;background-repeat:no-repeat;background-position:94% 0,0 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ptitle2>span+span{margin-top:.12em}
/* longer page names are set a little smaller, so they keep a margin from the edges */
.ptitle2.long{font-size:clamp(30px,5.4vw,112px)}
/* hero titles are written in: each letter is traced in fine gold, one after another, then filled */
.js .ptitle2:not(.written)>span{opacity:0}
.ptitle2 svg,.title h1 svg{display:block;margin:0 auto;overflow:visible}
.wt text{font:400 200px Italiana,serif;fill-opacity:0;stroke:#F6E8C8;stroke-width:1.6;stroke-linejoin:round;stroke-dasharray:1200;stroke-dashoffset:1200;
  animation:wtDraw 1.2s cubic-bezier(.45,.05,.3,1) forwards,wtFill .9s ease forwards}
.wt.still text{animation:none;fill-opacity:1;stroke-opacity:.12;stroke-dashoffset:0}
/* a flowing script is written like a pen moving left to right, so its joined letters stay connected */
.wt.script text{fill-opacity:1;stroke:none;stroke-dasharray:none;animation:none}
.wt.script .wm{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);animation:wmGrow 2.6s cubic-bezier(.3,.12,.4,1) forwards}
.wt.script.still .wm{animation:none;transform:none}
@keyframes wmGrow{to{transform:scaleX(1)}}
@keyframes wtDraw{to{stroke-dashoffset:0}}
@keyframes wtFill{to{fill-opacity:1;stroke-opacity:.12}}
@keyframes sheen{to{background-position:6% 0,0 0}}
.phero-in>*{opacity:0;transform:translateY(34px);animation:riseIn 1.7s cubic-bezier(.16,1,.3,1) forwards}
.phero-in>:nth-child(1){animation-delay:.5s}
.phero-in>:nth-child(2){animation-delay:.72s}
.phero-in>.ptitle2{opacity:1;transform:none;animation:none}
@keyframes riseIn{to{opacity:1;transform:none}}
.phero .cue{position:absolute;z-index:3;left:50%;bottom:clamp(18px,3.2vh,36px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;
  font:500 10px/1 var(--sans);letter-spacing:.42em;padding-left:.42em;text-transform:uppercase;color:rgba(251,245,236,.82);opacity:0;animation:fadeIn 1.2s ease 1.8s forwards}
.phero .cue i{position:relative;width:1px;height:46px;background:rgba(243,227,191,.22);overflow:hidden}
.phero .cue i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:linear-gradient(rgba(243,227,191,0),#F3E3BF);animation:drip2 2.4s cubic-bezier(.6,0,.4,1) infinite}
@keyframes drip2{to{top:100%}}
.phero+.phead{padding-top:clamp(70px,8vw,120px)}
@media (prefers-reduced-motion: reduce){.phero .bg,.phero-in>*,.phero .cue{animation:none;opacity:1;transform:none}.js .ptitle2:not(.written)>span{opacity:1}}

/* ---------- painted botanical details on the paper's edges, like a luxury invitation ---------- */
.has-bot{position:relative}
.has-bot>.wrap{position:relative;z-index:1}
.bot{position:absolute;z-index:0;pointer-events:none;mix-blend-mode:multiply;opacity:.55;width:clamp(150px,19vw,330px);height:auto}
.bot.l{left:clamp(-60px,-2vw,-10px)}
.bot.r{right:clamp(-60px,-2vw,-10px)}
.bot.t{top:5%}
.bot.m{top:28%}
.bot.b{bottom:4%}
.bot.corner{left:0;top:0;width:clamp(170px,22vw,380px)}
.bot.corner.r{left:auto;right:0;scale:-1 1}
.bot.fx{scale:-1 1}
.bot.sm{width:clamp(120px,14vw,240px)}
@media (max-width:900px){.bot{opacity:.3;width:clamp(110px,30vw,200px)}.bot.corner{width:clamp(130px,36vw,220px)}}

/* ---------- home: a wide painted brush stroke with a handshake, faded into the paper behind the opening words ---------- */
.stroke{position:absolute;z-index:0;left:50%;top:50%;width:min(1500px,112vw);aspect-ratio:1600/686;transform:translate(-50%,-47%);pointer-events:none;mix-blend-mode:multiply}
/* warmed toward the paper's sepia, so the dark sleeves read as painting, not as a grey smudge */
.stroke img{display:block;width:100%;height:100%;opacity:.32;filter:sepia(.55) saturate(1.15) brightness(1.12) contrast(.92);
  /* the hands stay clear; the sleeves soften away toward both ends */
  -webkit-mask-image:radial-gradient(ellipse 44% 78% at 50% 56%,#000 38%,rgba(0,0,0,.55) 64%,rgba(0,0,0,.18) 84%,transparent 100%);
  mask-image:radial-gradient(ellipse 44% 78% at 50% 56%,#000 38%,rgba(0,0,0,.55) 64%,rgba(0,0,0,.18) 84%,transparent 100%)}
/* it sweeps across fast, then the words paint in */
.js.ready .stroke.pr{transition-duration:.85s;transition-timing-function:cubic-bezier(.7,0,.2,1)}
@media (max-width:700px){.stroke{width:170vw}.stroke img{opacity:.2}}

/* ---------- a sheet of sketch paper, slightly tilted, with a gold clip: leave your name and number ---------- */
.letter{padding:clamp(70px,8vw,130px) 0 clamp(100px,12vw,170px)}
.letter .grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,110px);align-items:center}
.letter .h2{margin-top:18px}
.letter .lead{max-width:470px;margin-top:22px}
.letter .more{margin-top:26px}
.sheet{position:relative;width:100%;max-width:540px;justify-self:center}
.sheet.wide{max-width:960px;margin:0 auto}
/* a second sheet underneath, turned the other way */
.sheet::before{content:"";position:absolute;inset:0;border-radius:4px;background:#ECE4D6 url("paper-tile.jpg") 0 0/560px;
  transform:rotate(3.2deg) translate(12px,10px);box-shadow:0 22px 44px -26px rgba(70,48,36,.45)}
.sheet.wide::before{transform:rotate(1.2deg) translate(10px,8px)}
.note{position:relative;padding:clamp(46px,5vw,66px) clamp(26px,4vw,54px) clamp(36px,4vw,50px);border-radius:4px;
  background:linear-gradient(rgba(252,243,225,.6),rgba(252,243,225,.6)),url("paper-tile.jpg") 0 0/560px;
  transform:rotate(-2.2deg);box-shadow:0 36px 64px -32px rgba(70,48,36,.55),0 2px 10px rgba(40,25,30,.08)}
/* a fine gold line inside the edge, like good stationery */
.note::after{content:"";position:absolute;inset:14px;border:1px solid rgba(156,122,60,.26);border-radius:2px;pointer-events:none}
.note>*{position:relative;z-index:1}
.sheet.wide .note{transform:rotate(-.6deg)}
/* the note on Home: one wide sheet, the words on the left and the form on the right */
.sheet.wide2{max-width:1180px;margin:0 auto}
.sheet.wide2::before{transform:rotate(1.1deg) translate(10px,10px)}
.sheet.wide2 .note{transform:rotate(-.6deg);padding:clamp(52px,5.6vw,84px) clamp(26px,5vw,84px) clamp(42px,4.6vw,66px)}
.lgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}
.lside{padding-right:clamp(28px,4.6vw,76px)}
.lside .h2{margin-top:18px;font-size:clamp(32px,3.4vw,52px)}
.lside .lead{margin-top:20px;max-width:440px}
.lside .more{margin-top:24px}
.lform{padding-left:clamp(28px,4.6vw,76px);border-left:1px solid rgba(156,122,60,.3)}
.note label span em{font-style:normal;font-weight:500;letter-spacing:.08em;text-transform:none;color:rgba(122,90,34,.62)}
.note .clip{position:absolute;top:-34px;left:44px;width:28px;height:auto;transform:rotate(7deg);filter:drop-shadow(1px 3px 2px rgba(60,40,20,.3))}
.note-title{font:400 clamp(26px,2.4vw,34px)/1.2 var(--serif);color:var(--plum)}
.note-sub{margin-top:8px;font:300 15.5px/1.6 var(--sans);color:var(--text)}
.note label{display:block;margin-top:26px}
.note label span{display:block;font:600 11px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold3)}
.note input,.note select,.note textarea{display:block;width:100%;border:0;border-bottom:1px solid rgba(58,42,32,.42);border-radius:0;background:transparent;
  padding:12px 2px 10px;font:400 21px/1.35 var(--serif);color:var(--plum);outline:none;transition:border-color .3s}
.note select{-webkit-appearance:none;appearance:none;font-size:19px;padding-right:28px;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%239C7A3C' stroke-width='1.4'/%3E%3C/svg%3E") right 4px center/13px no-repeat}
.note textarea{min-height:120px;resize:vertical;font-size:19px}
.note input:focus,.note select:focus,.note textarea:focus{border-bottom-color:var(--plum)}
.note input::placeholder,.note textarea::placeholder{color:rgba(92,66,50,.34)}
.note .btn{margin-top:34px;border:0;cursor:pointer}
.note-msg{margin-top:18px;font:400 15px/1.6 var(--sans);color:var(--plum);min-height:1.6em}
.note .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,44px)}
.fgrid .full{grid-column:1/-1}
/* the sheets are laid down on the paper instead of painted in */
.js.ready .pr.drop{-webkit-mask-image:none;mask-image:none;opacity:0;transform:translateY(46px) rotate(-4deg);transition:opacity 1s ease,transform 1.4s cubic-bezier(.2,.8,.2,1)}
.js.ready .pr.drop.in{opacity:1;transform:none}
@media (max-width:900px){.letter .grid{grid-template-columns:1fr}.note,.sheet.wide2 .note{transform:rotate(-.8deg)}.sheet::before,.sheet.wide2::before{transform:rotate(1.4deg) translate(6px,8px)}
  .lgrid{grid-template-columns:1fr}.lside{padding:0 0 32px}.lform{padding:32px 0 0;border-left:0;border-top:1px solid rgba(156,122,60,.3)}}
@media (max-width:700px){.fgrid{grid-template-columns:1fr}}

/* ---------- inner pages: more parts ---------- */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px)}
.cols2 .lead{margin-top:16px}
.night .lead{color:rgba(251,245,236,.8)}
.night .lead.big{color:#F3E2BC}
.statement .sub{max-width:760px;margin:22px auto 0;text-align:center;font:300 clamp(16px,1.35vw,19px)/1.75 var(--sans);color:var(--text)}
/* panels with a short list of what's included */
.panels{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,36px)}
.panel2{padding:clamp(30px,3.6vw,52px);border:1px solid rgba(156,122,60,.34);border-radius:24px;background:rgba(251,245,236,.5)}
.panel2 .h3{font-size:clamp(26px,2.4vw,36px);margin-top:16px}
.panel2 .tag{font:400 clamp(18px,1.5vw,21px)/1.5 var(--serif);color:var(--plum);margin-top:14px}
.panel2 .lead{margin-top:12px}
.panel2 .ticks{margin-top:24px}
.panel2 .btns{justify-content:flex-start;margin-top:28px}
/* a numbered grid of everything on offer */
.svcgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3vw,48px);border-top:1px solid rgba(156,122,60,.32)}
.svcgrid>div{padding:clamp(22px,2.4vw,32px) 0;border-bottom:1px solid rgba(156,122,60,.32)}
.svcgrid em{display:block;font:400 17px/1 var(--serif);color:var(--gold);font-style:normal;letter-spacing:.08em}
.svcgrid h3{margin-top:12px;font:400 clamp(21px,1.8vw,26px)/1.2 var(--serif);color:var(--plum)}
.svcgrid p{margin-top:8px;font:300 15.5px/1.65 var(--sans);color:var(--text)}
.svcgrid.names h3{margin-top:10px}
.svcgrid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.sec .head .lead{margin-top:18px}
.sec .head .lead.big{margin-top:20px}
/* list rows that are only information, not links */
.item.static{grid-template-columns:70px minmax(0,1fr);align-items:start}
.item.static:hover{background:none;padding-left:4px}
.item.static em{margin-top:4px}
/* one wide panel: words on the left, the list on the right */
.panel2.wide{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:center}
.ticks.one{grid-template-columns:1fr;margin-top:0}
.ticks.one li{padding:14px 0 14px 22px;border-bottom:1px solid rgba(156,122,60,.25);font-size:16px}
.ticks.one li::before{top:1.3em}
/* client reviews */
.saids{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.6vw,36px)}
.said{position:relative;padding:clamp(30px,3.4vw,48px);border:1px solid rgba(156,122,60,.34);border-radius:24px;background:rgba(251,245,236,.5)}
.said::before{content:"\201C";position:absolute;top:10px;left:26px;font:400 92px/1 var(--serif);color:var(--gold2);opacity:.75}
.said p{position:relative;margin-top:36px;font:400 clamp(18px,1.5vw,21px)/1.62 var(--serif);color:var(--plum)}
.said b{display:block;margin-top:24px;font:600 12px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold3)}
.said small{display:block;margin-top:8px;font:300 14px/1.5 var(--sans);color:var(--text)}
.said.solo{max-width:880px;margin:clamp(30px,4vw,56px) auto 0}
.night .said{border-color:rgba(232,207,154,.26);background:rgba(255,255,255,.03)}
.night .said p{color:#F3E2BC}
.night .said b{color:#E8CF9A}
.night .said small{color:rgba(251,245,236,.68)}
/* her real event photos, framed like the paintings */
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.gal figure.wide,.gal figure.pano{grid-column:1/-1}
.shot{position:relative;overflow:hidden;border-radius:18px;background:#E9DFD0;aspect-ratio:4/5}
.gal .wide .shot{aspect-ratio:16/9}
.gal .pano .shot{aspect-ratio:21/9}
.shot::after{content:"";position:absolute;inset:9px;border:1px solid rgba(243,226,188,.7);border-radius:12px;pointer-events:none}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.shot:hover img{transform:scale(1.04)}
.gal figcaption{margin-top:12px;font:500 11.5px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold3)}
.story-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:clamp(26px,3vw,40px)}
.story-head .h3{margin-top:16px}
.story-head p{max-width:420px;font:300 16px/1.7 var(--sans);color:var(--text)}
/* contact: four ways to reach the team */
.info{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.card2{display:flex;flex-direction:column;padding:clamp(26px,2.6vw,36px);border:1px solid rgba(156,122,60,.34);border-radius:22px;background:rgba(251,245,236,.5)}
.card2 .ic{width:48px;height:48px;border-radius:50%;border:1px solid rgba(156,122,60,.5);display:grid;place-items:center}
.card2 .ic svg{width:20px;height:20px;fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.card2 h3{margin-top:22px;font:400 clamp(21px,1.8vw,25px)/1.2 var(--serif);color:var(--plum)}
.card2 p{margin-top:8px;font:300 15px/1.65 var(--sans);color:var(--text);flex:1}
.card2 .val2{margin-top:18px;font:500 15px/1.4 var(--sans);color:var(--plum);word-break:break-word}
.card2 .val2.tbc{color:rgba(58,42,32,.5);font-style:italic;font-weight:400}
.card2 a.val2:hover{color:var(--plum2);text-decoration:underline;text-underline-offset:4px}
/* a call to action band in deep plum */
.band{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;padding:clamp(36px,4.4vw,60px) clamp(28px,4vw,64px);border-radius:28px;background:var(--night);color:#F3E2BC}
.band .h3{color:#F3E2BC;font-size:clamp(28px,2.8vw,42px)}
.band .lead{color:rgba(251,245,236,.78);margin-top:12px;max-width:620px}
.band .btns{margin-top:0}
.band .b1{background:#F3E2BC;color:var(--night);box-shadow:none}
.band .b1:hover{background:#fff}
.band .b2{border-color:rgba(243,226,188,.5);color:#F3E2BC}
/* business hours and the map */
.duo2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px)}
.duo2 .lead{margin-top:18px}
.hours{margin-top:26px;border-top:1px solid rgba(156,122,60,.32)}
.hours div{display:flex;justify-content:space-between;gap:20px;padding:16px 2px;border-bottom:1px solid rgba(156,122,60,.32);font:400 16px/1.4 var(--sans);color:var(--ink)}
.hours dd{color:rgba(58,42,32,.5);font-style:italic}
.small{margin-top:18px;font:300 15px/1.6 var(--sans);color:var(--text)}
.mapbox{position:relative;margin-top:26px;aspect-ratio:16/10;border-radius:22px;overflow:hidden;border:1px solid rgba(156,122,60,.34);display:grid;place-items:center;text-align:center;padding:24px;
  background:repeating-linear-gradient(35deg,rgba(156,122,60,.09) 0 1px,transparent 1px 38px),repeating-linear-gradient(-55deg,rgba(92,66,50,.07) 0 1px,transparent 1px 52px),rgba(251,245,236,.5)}
.mapbox svg{width:34px;height:34px;fill:none;stroke:var(--gold);stroke-width:1.4;margin:0 auto 14px}
.mapbox p{font:400 clamp(18px,1.5vw,21px)/1.45 var(--serif);color:var(--plum);max-width:340px}
/* questions that fold open */
.faq{max-width:920px;margin:0 auto;border-top:1px solid rgba(156,122,60,.32)}
.faq details{border-bottom:1px solid rgba(156,122,60,.32)}
.faq summary{position:relative;list-style:none;cursor:pointer;padding:clamp(20px,2.2vw,28px) 60px clamp(20px,2.2vw,28px) 4px;font:400 clamp(20px,1.9vw,26px)/1.3 var(--serif);color:var(--plum);transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:32px;height:32px;margin-top:-16px;border:1px solid rgba(92,66,50,.3);border-radius:50%;
  background:linear-gradient(var(--plum),var(--plum)) center/12px 1px no-repeat,linear-gradient(var(--plum),var(--plum)) center/1px 12px no-repeat;transition:transform .5s var(--ease)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq summary:hover{color:var(--plum2)}
.faq .a{overflow:hidden}
.faq .a p{padding:0 60px 26px 4px;font:300 16.5px/1.75 var(--sans);color:var(--text);max-width:780px}
@media (max-width:1100px){.info{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1000px){.svcgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.cols2,.panels,.saids,.duo2,.panel2.wide{grid-template-columns:1fr}.story-head{display:block}.story-head p{margin-top:14px}.band{grid-template-columns:1fr}.band .btns{justify-content:flex-start}}
@media (max-width:700px){.gal{grid-template-columns:1fr}.gal .wide .shot,.gal .pano .shot{aspect-ratio:4/3}}
@media (max-width:600px){.info,.svcgrid,.svcgrid.two{grid-template-columns:1fr}.item.static{grid-template-columns:46px minmax(0,1fr)}}

/* ---------- small painted objects: an emblem above a list, or a still life beside the words ---------- */
.emblem{display:block;height:clamp(118px,11vw,176px);width:auto;margin:0 auto clamp(14px,1.6vw,22px);mix-blend-mode:multiply}
.vig-in{display:block;width:min(100%,280px);height:auto;margin-top:clamp(28px,3vw,46px);mix-blend-mode:multiply}
@media (max-width:900px){.vig-in{width:170px;margin:24px 0 8px}}

/* ---------- the dark sections are printed on the same paper, so they have its grain too ---------- */
.night,.close:not(.paint),.band,footer{background-image:url("paper-tile.jpg");background-size:720px 720px;background-blend-mode:multiply}

/* ---------- cards and panels get a fine inner line, like good stationery ---------- */
.panel2,.said,.card2,.mv .box{box-shadow:inset 0 0 0 7px rgba(251,245,236,.32),inset 0 0 0 8px rgba(156,122,60,.15)}
.night .said{box-shadow:inset 0 0 0 7px rgba(255,255,255,.015),inset 0 0 0 8px rgba(232,207,154,.13)}

/* ---------- page transitions: a sheet of cream paper sweeps in when you leave a page, and fades away on the next one ---------- */
.veil{position:fixed;inset:0;z-index:90;display:grid;place-items:center;pointer-events:none;background:#EFE7DA url("paper-tile.jpg") 0 0/720px 720px;
  transition:opacity .65s ease;animation:veilAuto 0s linear 3s forwards}
.veil img{width:clamp(64px,6vw,88px);height:auto;transition:opacity .3s ease}
.veil.gone{opacity:0;visibility:hidden;transition:opacity .65s ease,visibility 0s linear .65s;animation:none}
.veil.prep{opacity:1;visibility:visible;animation:none;transition:none;pointer-events:auto;
  -webkit-mask-image:var(--pmask2);mask-image:var(--pmask2);-webkit-mask-size:300% 100%;mask-size:300% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0}
.veil.prep img{opacity:0}
.veil.prep.cover{-webkit-mask-position:0 0;mask-position:0 0;
  transition:-webkit-mask-position .5s cubic-bezier(.6,0,.3,1),mask-position .5s cubic-bezier(.6,0,.3,1)}
.veil.prep.cover img{opacity:1;transition:opacity .25s ease .28s}
/* the first visit to Home has its own loading screen */
html:not(.seen) body.home .veil:not(.prep){display:none}
@keyframes veilAuto{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion: reduce){.veil{display:none!important}}

/* the map on Contact, softened a little toward the site's warm colors */
.mapbox.map{padding:0;display:block}
.mapbox.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:sepia(.22) saturate(.85)}

/* phone fields: the country code sits in front, locked in place, with a fine line between it and the number */
.note .tel{display:flex;align-items:stretch;border-bottom:1px solid rgba(58,42,32,.42);transition:border-color .3s}
.note .tel:focus-within{border-bottom-color:var(--plum)}
.note .tel input{border-bottom:0;flex:1;min-width:0;padding-left:12px}
.note .tel input::placeholder{color:rgba(58,42,32,.3)}
.note .cc{position:relative;flex:none;display:flex;align-items:center;gap:8px;padding:12px 12px 10px 2px;border-right:1px solid rgba(156,122,60,.3);
  font:400 21px/1.35 var(--serif);color:var(--plum);cursor:pointer}
.note .cc::after{content:"";width:7px;height:7px;margin-top:-4px;border-right:1.3px solid var(--gold);border-bottom:1.3px solid var(--gold);transform:rotate(45deg)}
.note .cc select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.note .tel,.note .cc{letter-spacing:0;text-transform:none}
.note .cc b{font-weight:400;letter-spacing:.02em}

/* flags: phones and Macs draw them natively; this small free font draws them on Windows too (it is only used for flags) */
@font-face{font-family:"Twemoji Country Flags";font-display:swap;
  unicode-range:U+1F1E6-1F1FF,U+1F3F4,U+E0062-E0063,U+E0065,U+E0067,U+E006C,U+E006E,U+E0073-E0074,U+E0077,U+E007F;
  src:url("https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1.8/dist/TwemojiCountryFlags.woff2") format("woff2")}
.note .cc b{font-family:"Twemoji Country Flags","DM Serif Display",Georgia,serif}
.note .cc select{font-family:"Twemoji Country Flags","Inter Tight",system-ui,sans-serif}
/* phones: decorations never sit behind headings, and lists breathe a little more */
@media (max-width:700px){
  .sec .head{position:relative;z-index:1}
  .faq summary{padding-right:52px}
  .faq summary::after{right:2px}
  .item{grid-template-columns:34px minmax(0,1fr);gap:12px}
  .item em{font-size:18px}}
/* light mode (weaker laptops and phones): a solid menu instead of the blurred glass */
.lite .pill,.lite .dd .sub{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(40,28,21,.86)}

/* phones: paintings sit beside the words instead of filling the screen */
@media (max-width:700px){
  .who .grid,.split{display:block}
  .who .grid::after,.split::after{content:"";display:block;clear:both}
  .who .grid>div:first-child,.split>div:first-child{float:right;width:42%;margin:6px 0 14px 18px}
  .who .grid .arch,.split .arch{max-width:none}
  .card{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);column-gap:18px;align-items:start}
  .card .arch{grid-row:1/span 4}
  .card .num{margin-top:4px}
  .card h4{font-size:21px}
  .card p{font-size:14.5px}
  .card .more{white-space:normal}
  .phead .arch,.row .media .arch,.row.flip .media .arch{max-width:280px}}
/* the form's dropdown lists: a cream, rounded list with room before each word (browsers without this keep their normal list) */
.note label>select option{padding:8px 14px}
@supports (appearance: base-select){
  .note label>select,.note label>select::picker(select){appearance:base-select}
  .note label>select{display:flex;align-items:center}
  .note label>select::picker-icon{display:none}
  .note label>select::picker(select){margin-top:6px;padding:6px;border:1px solid rgba(156,122,60,.35);border-radius:14px;
    background:#FBF6EC;box-shadow:0 22px 44px -20px rgba(70,48,36,.5)}
  .note label>select option{padding:11px 16px;border-radius:9px;font:400 18px/1.3 var(--serif);color:var(--plum);cursor:pointer}
  .note label>select option::checkmark{display:none}
  .note label>select option:hover,.note label>select option:focus-visible{background:rgba(92,66,50,.08)}
  .note label>select option:checked{background:var(--plum);color:var(--ivory)}}
/* the country code list: the same cream style, scrolling inside a box, with flags */
@supports (appearance: base-select){
  .note .cc select,.note .cc select::picker(select){appearance:base-select}
  .note .cc select::picker-icon{display:none}
  .note .cc select::picker(select){width:min(340px,86vw);max-height:340px;overflow-y:auto;margin-top:8px;padding:6px;
    border:1px solid rgba(156,122,60,.35);border-radius:14px;background:#FBF6EC;box-shadow:0 22px 44px -20px rgba(70,48,36,.5)}
  .note .cc select option{padding:9px 14px;border-radius:9px;font:400 15.5px/1.35 "Twemoji Country Flags","Inter Tight",system-ui,sans-serif;
    color:var(--plum);letter-spacing:0;text-transform:none;cursor:pointer}
  .note .cc select option::checkmark{display:none}
  .note .cc select option:hover,.note .cc select option:focus-visible{background:rgba(92,66,50,.08)}
  .note .cc select option:checked{background:var(--plum);color:var(--ivory)}}
/* Chrome's autofill keeps the field's own look: no blue box, the same plum serif font */
.note input:-webkit-autofill,.note input:-webkit-autofill:hover,.note input:-webkit-autofill:focus,.note textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--plum);caret-color:var(--plum);-webkit-box-shadow:0 0 0 1000px transparent inset;
  transition:background-color 600000s 0s,color 600000s 0s}
.note input:-webkit-autofill::first-line{font:400 21px/1.35 "DM Serif Display",Georgia,serif}
.note .tel input:-webkit-autofill::first-line{font-size:21px}

/* the contact method list: a small gold icon before each word */
.note select .mi{flex:none;width:18px;height:18px;margin-right:12px;fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.note select option:has(.mi){display:flex;align-items:center}
.note select option:checked .mi{stroke:var(--gold2)}
.note label>select>button{display:flex;align-items:center;width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.note select selectedcontent{display:flex;align-items:center}.note label select span{display:inline;font:inherit;letter-spacing:inherit;text-transform:none;color:inherit}
.note select .mi{width:23px;height:23px;margin-right:14px;stroke-width:1.4}

/* the country picker with a search box */
.note .tel{position:relative}
.note .cc:focus-visible{outline:2px solid var(--gold2);outline-offset:3px;border-radius:6px}
.ccp{position:absolute;z-index:40;left:0;top:calc(100% + 8px);width:min(360px,86vw);padding:8px;border:1px solid rgba(156,122,60,.35);border-radius:14px;
  background:#FBF6EC;box-shadow:0 22px 44px -20px rgba(70,48,36,.5);letter-spacing:0;text-transform:none}
.ccp[hidden]{display:none}
.note .ccp .ccq{display:block;width:100%;margin:0 0 6px;padding:11px 14px 11px 38px;border:1px solid rgba(156,122,60,.35);border-radius:10px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C7A3C' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") 12px center/17px no-repeat;
  font:400 15.5px/1.3 "Inter Tight",system-ui,sans-serif;color:var(--ink);outline:none}
.note .ccp .ccq:focus{border-color:var(--plum)}
.ccl{max-height:300px;overflow-y:auto;list-style:none;margin:0;padding:0}
.ccl li{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:9px;cursor:pointer;font:400 15.5px/1.35 "Inter Tight",system-ui,sans-serif;color:var(--plum)}
.ccl li .f{font-family:"Twemoji Country Flags",sans-serif;font-size:18px;line-height:1}
.ccl li .n{flex:1}
.ccl li .c{color:rgba(58,42,32,.55);font-size:14px}
.ccl li:hover,.ccl li.on{background:rgba(92,66,50,.08)}
.ccl li[aria-selected="true"]{background:var(--plum);color:var(--ivory)}
.ccl li[aria-selected="true"] .c{color:rgba(251,245,236,.75)}
.ccn{padding:12px;font:400 15px/1.4 "Inter Tight",system-ui,sans-serif;color:rgba(58,42,32,.6)}.note label .ccl li span{display:inline;font:inherit;letter-spacing:0;text-transform:none;color:inherit}
.note label .ccl li .f{font-family:"Twemoji Country Flags",sans-serif;font-size:18px;line-height:1}
.note label .ccl li .n{flex:1}
.note label .ccl li .c{color:rgba(58,42,32,.55);font-size:14px}
.note label .ccl li[aria-selected="true"] .c{color:rgba(251,245,236,.75)}
.note>*:has(.ccp:not([hidden])),.note .fgrid>label:has(.ccp:not([hidden])){position:relative;z-index:6}
.note .ccp .ccq::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.note label .ccl li.sep{height:1px;margin:6px 10px;padding:0;background:rgba(156,122,60,.35);border-radius:0;cursor:default;pointer-events:none}

/* on the Contact page, the Contact us button shows you are there */
.cta.on{background:rgba(243,227,191,.16);border-color:#F3E3BF;color:#F3E3BF}

/* Services in the menu: a small arrow that flips up when the list opens, and the 4 services arrive one after another */
.dd>a{display:flex;align-items:center}
.dd .car{display:block;width:6px;height:6px;margin:0 0 0 9px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .4s var(--ease)}
.dd:hover .car,.dd:focus-within .car{transform:translateY(2px) rotate(-135deg)}
.dd .sub a{opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .45s var(--ease),background .3s}
.dd:hover .sub a,.dd:focus-within .sub a{opacity:1;transform:none}
.dd:hover .sub a:nth-child(1),.dd:focus-within .sub a:nth-child(1){transition-delay:.06s}
.dd:hover .sub a:nth-child(2),.dd:focus-within .sub a:nth-child(2){transition-delay:.13s}
.dd:hover .sub a:nth-child(3),.dd:focus-within .sub a:nth-child(3){transition-delay:.2s}
.dd:hover .sub a:nth-child(4),.dd:focus-within .sub a:nth-child(4){transition-delay:.27s}
/* the services list: each name centered in the box (the extra left space balances the letter spacing) */
.dd .sub a{text-align:center;padding-left:calc(14px + .14em)}

/* the services list reads like a menu card: a short fine gold line between the names */
.dd .sub a{position:relative}
.dd .sub a+a::before{content:"";position:absolute;top:0;left:30%;right:30%;height:1px;background:rgba(226,197,138,.3)}

/* option 2: the services list left-aligned, a small gold diamond before each name, and a snug box */
.dd .sub{min-width:0;width:max-content;padding:8px}
.dd .sub a{display:flex;align-items:center;text-align:left;padding:12px 20px 12px 16px}
.dd .sub a::before,.dd .sub a+a::before{content:"";position:static;flex:none;display:block;width:5px;height:5px;margin-right:13px;
  background:var(--gold2);transform:rotate(45deg);transition:background .3s,transform .3s}
.dd .sub a:hover::before{background:#F3E3BF;transform:rotate(45deg) scale(1.3)}
/* a gentle note under a field that needs attention */
.note label .ferr{display:block;margin-top:8px;font:italic 400 15px/1.4 "DM Serif Display",Georgia,serif;letter-spacing:0;text-transform:none;color:#A2465A}
.note label.bad input,.note label.bad textarea,.note label.bad .tel,.note label.bad select{border-bottom-color:#A2465A}
/* inner page heroes: the painting fades in sooner */
.phero .bg{animation:fadeIn .7s ease forwards,pushIn 34s cubic-bezier(.25,.6,.3,1) forwards}