:root{
  --paper:#FCFAF7;
  --bone:#F2EEE8;
  --ink:#1A1613;
  --body:#4B443D;
  --taupe:#AC9281;
  --hair:#DFD8CE;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'Jost',sans-serif;font-weight:300;-webkit-font-smoothing:antialiased}
img{max-width:100%}
.wrap{max-width:1300px;margin:0 auto;padding:0 64px}
.d{font-family:'Cormorant Garamond',serif;font-weight:300;letter-spacing:0}
.label{font-size:9.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--taupe);font-weight:400;display:inline-block}
hr.rule{height:1px;background:var(--hair);border:0}
a{color:inherit;text-decoration:none}

/* masthead */
.top{display:flex;justify-content:space-between;align-items:center;padding:18px 64px;max-width:1300px;margin:0 auto;font-size:9.5px;letter-spacing:.36em;text-transform:uppercase;color:var(--taupe)}
.top a:hover{color:var(--ink)}
.mast{text-align:center;padding:52px 0 46px}
.mast img{width:352px;max-width:72vw;display:inline-block}

/* monogram mark */
.mark{display:block;margin:0 auto 46px;width:180px;opacity:1}
.plate-mark{position:absolute;top:52px;right:0;width:70px;opacity:.55}
.plate .sec{position:relative}
nav{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:60px;padding:19px 0;font-size:10px;letter-spacing:.36em;text-transform:uppercase;color:var(--ink)}
nav a{padding-bottom:2px;border-bottom:1px solid transparent;transition:border-color .25s}
nav a:hover{border-bottom-color:var(--taupe)}
nav a[aria-current="page"]{border-bottom-color:var(--ink)}
.navdd{position:relative;display:inline-block;padding-bottom:21px;margin-bottom:-21px}
.ddmenu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);margin-top:0;display:flex;flex-direction:column;gap:16px;white-space:nowrap;background:var(--paper);border:1px solid var(--hair);padding:22px 30px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease .45s,transform .28s ease .45s,visibility .28s .45s;z-index:60}
.ddmenu a{font-size:10px;letter-spacing:.28em;color:var(--body);border-bottom:1px solid transparent}
.ddmenu a:hover{color:var(--ink);border-bottom-color:var(--taupe)}
.navdd:hover .ddmenu,.navdd:focus-within .ddmenu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);transition-delay:0s}
.ddmenu:hover{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);transition-delay:0s}

/* hero */
.hero{padding:96px 0 0}
.heroline{display:grid;grid-template-columns:1fr 300px;gap:80px;align-items:end;padding-bottom:52px}
.heroline h1,.heroline h2{font-size:88px;line-height:1.02;max-width:18ch;font-weight:300}
.heroline h1 em,.heroline h2 em{font-style:italic;font-weight:300}
.heroaside{font-size:14px;line-height:2.05;color:var(--body);border-top:1px solid var(--hair);padding-top:22px}
.heroimg{width:100%;height:auto;display:block;filter:saturate(.86) contrast(.98)}
.cap{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:14px 0 0}
.cap em{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;color:var(--body)}
.cap span{font-size:9.5px;letter-spacing:.36em;text-transform:uppercase;color:var(--taupe);white-space:nowrap}

/* page header (interior pages) */
.phead{padding:100px 0 76px;text-align:center}
.phead h1{font-size:76px;line-height:1.06;font-weight:300;margin-top:26px}
.phead h1 em{font-style:italic}
.phead .lead{margin:30px auto 0;text-align:center}

/* sections */
.sec{padding:136px 0}
.sec-s{padding:96px 0}
.shead{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap}
.shead .no{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:16px;color:var(--taupe)}
.h2{font-size:56px;line-height:1.14;font-weight:300;max-width:23ch;margin-top:24px}
.h2 em{font-style:italic}
.lead{font-size:14.5px;line-height:2.05;color:var(--body);max-width:44ch;margin-top:22px}

/* three columns */
.three{display:grid;grid-template-columns:repeat(3,1fr);margin-top:76px;border-top:1px solid var(--hair)}
.col{padding:36px 48px 0;border-right:1px solid var(--hair)}
.col:first-child{padding-left:0}
.col:last-child{border-right:0;padding-right:0}
.col .rn{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;color:var(--taupe)}
.col h3{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:30px;margin:20px 0 16px}
.col p{font-size:13.5px;line-height:2;color:var(--body)}

/* split */
.split{display:grid;grid-template-columns:.9fr 1fr;gap:100px;align-items:center}
.split img{width:100%;height:auto;display:block;filter:saturate(.8) contrast(.98)}
.split.rev .imgcol{order:2}
.list{margin-top:44px;border-top:1px solid var(--hair)}
.list div{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:17px 0;border-bottom:1px solid var(--hair)}
.list .k{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:300}
.list .v{font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--taupe);text-align:right;white-space:nowrap}

/* dark plate */
.plate{background:var(--ink);color:var(--bone)}
.plate .lead{color:#D8CCC1}
.plate .cap em{color:#D8CCC1}
.gal{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;margin-top:64px}
.gal>img{width:100%;height:auto;display:block;filter:saturate(.82)}
.galr{display:grid;gap:24px}
.galr img{width:100%;height:auto;display:block;filter:saturate(.82)}

/* quote */
.quote{text-align:center;padding:150px 0}
.quote p{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:46px;line-height:1.42;max-width:25ch;margin:0 auto}
.revs{position:relative}
.rev{opacity:0;visibility:hidden;position:absolute;inset:0;transition:opacity .9s ease}
.rev.is-on{opacity:1;visibility:visible;position:relative}
.revdots{display:flex;justify-content:center;gap:12px;margin-top:54px}
.revdot{width:7px;height:7px;padding:0;border:1px solid var(--taupe);border-radius:50%;background:none;cursor:pointer;transition:background .3s ease}
.revdot.is-on{background:var(--taupe)}
.quote .attr{margin-top:40px;font-size:9.5px;letter-spacing:.38em;text-transform:uppercase;color:var(--taupe)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:72px;border-top:1px solid var(--hair)}
.st{padding:32px 40px 0;border-right:1px solid var(--hair)}
.st:first-child{padding-left:0}
.st:last-child{border-right:0;padding-right:0}
.st .sn{font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--taupe)}
.st b{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:24px;display:block;margin:18px 0 14px}
.st p{font-size:13px;line-height:2;color:var(--body)}

/* pricing */
.tiers{display:block;margin-top:34px;border-top:1px solid var(--hair)}
.tier{display:grid;grid-template-columns:330px 1fr;gap:70px;padding:58px 40px 62px;border-bottom:1px solid var(--hair)}
.tier.feat{background:var(--bone)}
.tier .tierhead{align-self:start}
.tier .tierbody{display:flex;flex-direction:column;align-items:flex-start;max-width:660px}
.tier ul{width:100%}
.tier h3{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:38px;line-height:1.15;margin:14px 0 0}
.tier .price{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;color:var(--taupe);margin-bottom:26px}
.tier ul{list-style:none;border-top:1px solid var(--hair);margin-top:0}
.tier li{font-size:13px;line-height:1.75;color:var(--body);padding:13px 0;border-bottom:1px solid var(--hair);display:flex;gap:12px}
.tier li:before{content:"—";color:var(--taupe);flex:none}
.tier .btn{margin-top:36px;align-self:flex-start}

/* faq */
.faq{margin-top:72px;border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair);padding:26px 0}
.faq summary{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:300;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--taupe);font-family:'Jost',sans-serif;font-size:16px;flex:none}
.faq details[open] summary:after{content:"–"}
.faq p{font-size:13.5px;line-height:2;color:var(--body);max-width:62ch;margin-top:18px}

/* portfolio grid */
.pgrid{column-count:2;column-gap:28px}
.pgrid figure{margin:0 0 28px;break-inside:avoid;-webkit-column-break-inside:avoid}
.pgrid img{width:100%;height:auto;display:block;filter:saturate(.82) contrast(.98)}
figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-top:13px}
figcaption em{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14.5px;color:var(--body)}
figcaption span{font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--taupe);white-space:nowrap}

/* form */
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:44px 56px;margin-top:24px}
.field{display:flex;flex-direction:column}
.field.full{grid-column:1 / -1}
.field label{font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--taupe);margin-bottom:12px}
.field input,.field select,.field textarea{font-family:'Jost',sans-serif;font-weight:300;font-size:15px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--hair);padding:11px 0;border-radius:0}
.field textarea{resize:vertical;min-height:104px;line-height:1.85}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--taupe)}
.field.full .btn{align-self:flex-start}
.formnote{font-size:12px;line-height:1.9;color:var(--taupe);margin-top:34px}
.formnote a{color:var(--taupe);border-bottom:1px solid transparent;transition:border-color .3s,color .3s}
.formnote a:hover{color:var(--ink);border-bottom-color:var(--taupe)}

/* cta */
.cta{text-align:center;padding:160px 0 130px}
.cta h2{font-size:76px;line-height:1.1;font-weight:300;margin-top:30px}
.cta h2 em{font-style:italic}
.btn{display:inline-block;margin-top:54px;border:1px solid var(--ink);padding:19px 54px;font-size:9.5px;letter-spacing:.4em;text-transform:uppercase;background:transparent;cursor:pointer;font-family:'Jost',sans-serif;color:var(--ink);transition:background .3s,color .3s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-sm{margin-top:34px;padding:15px 34px;letter-spacing:.32em}
.terms{margin-top:38px;font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--taupe)}
footer{border-top:1px solid var(--hair);padding:32px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--taupe)}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .wrap{padding:0 40px}
  .top{padding:16px 40px}
  .heroline h1,.heroline h2{font-size:64px}
  .heroline{grid-template-columns:1fr 260px;gap:48px}
  .h2{font-size:44px}
  .split{gap:56px}
  .cta h2,.phead h1{font-size:56px}
  .quote p{font-size:36px}
  nav{gap:38px}
}
@media(max-width:780px){
  .wrap{padding:0 24px}
  .top{padding:14px 24px;font-size:8.5px;letter-spacing:.24em;gap:12px}
  .mast{padding:30px 0 26px}
  .mast img{width:250px;max-width:76vw}
  .mark{width:104px;margin-bottom:30px}
  .plate-mark{position:static;display:block;margin:0 0 30px;width:46px}
  nav{gap:20px 26px;font-size:9px;letter-spacing:.26em;padding:16px 24px}
  .ddmenu{display:none}
  .hero{padding:56px 0 0}
  .heroline{grid-template-columns:1fr;gap:30px;padding-bottom:34px}
  .heroline h1,.heroline h2{font-size:42px;max-width:none}
  .heroaside{font-size:13.5px;line-height:1.95}
  .cap{flex-direction:column;gap:8px}
  .cap span{order:-1}
  .sec,.sec-s{padding:72px 0}
  .phead{padding:56px 0 44px}
  .phead h1,.cta h2{font-size:38px}
  .h2{font-size:32px;max-width:none}
  .lead{max-width:none;font-size:14px}
  .three,.steps{grid-template-columns:1fr;border-top:1px solid var(--hair)}
  .tier{grid-template-columns:1fr;gap:22px;padding:38px 0 44px}
  .tier h3{font-size:31px}
  .col,.st{padding:28px 0 28px;border-right:0;border-bottom:1px solid var(--hair)}
  .col:last-child,.st:last-child{border-bottom:0}
  .col h3{font-size:26px}
  .tier.feat{background:transparent}
  .split{grid-template-columns:1fr;gap:36px}
  .split.rev .imgcol{order:0}
  .gal{grid-template-columns:1fr;gap:16px;margin-top:40px}
  .quote{padding:80px 0}
  .quote p{font-size:27px;max-width:none}
  .revdots{margin-top:34px}
  .quote .attr{margin-top:28px;font-size:9px;letter-spacing:.28em}
  .formgrid{grid-template-columns:1fr;gap:30px}
  .cta{padding:80px 0 70px}
  .btn{margin-top:38px;padding:17px 34px;letter-spacing:.3em}
  footer{flex-direction:column;gap:12px;text-align:left;padding:26px 0}
  .faq summary{font-size:20px}
}
.kicker{font-family:'Jost',sans-serif;font-size:.68rem;letter-spacing:.20em;text-transform:uppercase;color:#AC9281;margin:16px 0 28px}

@media(max-width:780px){.pgrid{column-count:1}}
.pset{margin:0 0 96px}
.psethead{max-width:640px;margin:0 0 40px}
.psethead .h2{margin:10px 0 14px}
.psethead .lead{margin:0}
@media(max-width:780px){.pset{margin:0 0 64px}}

/* section titles (About / How I work / Details) */
.stitle{font-family:'Jost',sans-serif;font-size:.92rem;letter-spacing:.24em;text-transform:uppercase;color:var(--taupe);font-weight:400;display:inline-block}
.shead{margin-bottom:18px}
@media(max-width:780px){.stitle{font-size:.82rem;letter-spacing:.20em}}

/* page-head label matches section titles */
.phead .label{font-size:.92rem;letter-spacing:.24em;margin-bottom:22px}
@media(max-width:780px){.phead .label{font-size:.82rem;letter-spacing:.20em}}

.tier{scroll-margin-top:120px}

.tier .tiernote{font-family:'Cormorant Garamond',serif;font-size:20px;line-height:1.45;color:var(--body);margin-top:16px;max-width:290px}
.tier .tiernote em{font-style:italic;color:var(--taupe)}
.tierstory{grid-column:1/-1;margin-top:56px;padding-top:44px;border-top:1px solid var(--hair)}
.tierstory p{max-width:620px;margin:0 0 40px}
.tierstory img{width:100%;display:block}
.tierstory .cap{margin-top:14px}
@media (max-width:780px){.tierstory{margin-top:36px;padding-top:30px}.tierstory p{margin-bottom:26px}}
/* Content Day feature block */
.tier.cdblock{display:block;padding:58px 40px 66px}
.cdhead h3{font-size:44px;line-height:1.1;margin:14px 0 0}
.cdsteps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px;border-top:1px solid var(--hair)}
.cdsteps .st{padding:30px 38px 0;border-right:1px solid var(--hair)}
.cdsteps .st:first-child{padding-left:0}
.cdsteps .st:last-child{border-right:0;padding-right:0}
.cdsplit{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:start;margin-top:60px}
.cdsplit img{width:100%;display:block}
.cdsplit .cap{margin-top:14px}
.cdlist ul{margin:0}
.cdlist .btn{margin-top:34px}
@media (max-width:780px){
  .tier.cdblock{padding:38px 0 44px}
  .cdhead h3{font-size:31px}
  .cdsteps{grid-template-columns:1fr;margin-top:30px}
  .cdsteps .st{padding:26px 0 0;border-right:0;border-top:1px solid var(--hair)}
  .cdsteps .st:first-child{border-top:0}
  .cdsplit{grid-template-columns:1fr;gap:34px;margin-top:36px}
}
.pblock .cdsplit{grid-template-columns:.8fr 1fr}
@media (max-width:780px){.pblock .cdsplit{grid-template-columns:1fr}}
.cdsteps.four{grid-template-columns:repeat(4,1fr)}
.cdsteps.four .st{padding:30px 30px 0}
.cdsteps.four .st:first-child{padding-left:0}
.cdsteps.four .st:last-child{padding-right:0}
.pblock .cdsplit{grid-template-columns:auto 1fr;gap:56px}
.pblock .cdimg{width:fit-content}
.pblock .cdimg img{max-height:440px;width:auto}
@media (max-width:780px){
  .cdsteps.four{grid-template-columns:1fr}
  .cdsteps.four .st{padding:26px 0 0}
  .pblock .cdsplit{grid-template-columns:1fr}
  .pblock .cdimg{width:100%}
  .pblock .cdimg img{max-height:none;width:100%}
}

/* ---------- mobile side margins ----------
   Section shorthands inside the 780px query were wiping out .wrap's
   horizontal padding, so text ran to both edges. Restore it. */
@media(max-width:780px){
  .wrap{padding-left:26px;padding-right:26px}
  .top{padding-left:26px;padding-right:26px}
  nav{padding-left:26px;padding-right:26px}
}
@media(max-width:430px){
  .top{font-size:8px;letter-spacing:.18em}
  nav{gap:16px 22px}
}
@media(max-width:520px){
  /* three items will not sit on one phone line; keep location + galleries */
  .top span:nth-of-type(2){display:none}
  .top{justify-content:space-between;letter-spacing:.2em;font-size:8.5px}
}

/* ---------- mobile menu ---------- */
.navbar{display:none}
.navclose{display:none}
@media(max-width:780px){
  .navbar{display:flex;justify-content:center;padding:15px 26px}
  .navtoggle{display:inline-flex;align-items:center;gap:12px;background:none;border:0;padding:4px 2px;cursor:pointer;
    font-family:'Jost',sans-serif;font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink)}
  .ntlines{display:inline-flex;flex-direction:column;gap:5px;width:20px}
  .ntlines i{display:block;height:1px;background:var(--ink);transition:transform .3s,opacity .3s}
  body.navopen .ntlines i:first-child{transform:translateY(3px) rotate(45deg)}
  body.navopen .ntlines i:last-child{transform:translateY(-3px) rotate(-45deg)}

  nav#sitenav{position:fixed;inset:0;z-index:200;background:var(--paper);
    display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
    gap:0;padding:88px 34px 60px;overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .32s ease,transform .32s ease,visibility .32s}
  body.navopen nav#sitenav{opacity:1;visibility:visible;transform:none}
  body.navopen{overflow:hidden}

  nav#sitenav > a,nav#sitenav .navdd > a{
    font-family:'Cormorant Garamond',serif;font-weight:300;font-size:31px;line-height:1.15;
    letter-spacing:0;text-transform:none;color:var(--ink);
    padding:13px 0;border-bottom:0;width:100%}
  nav#sitenav > a[aria-current="page"],nav#sitenav .navdd > a[aria-current="page"]{font-style:italic;color:var(--taupe);border-bottom:0}

  nav#sitenav .navdd{display:block;position:static;width:100%;margin:0;padding:0}
  nav#sitenav .ddmenu{display:flex;position:static;transform:none;opacity:1;visibility:visible;
    pointer-events:auto;background:none;border:0;padding:2px 0 14px 2px;gap:14px;margin:0;
    transition:none;white-space:normal}
  nav#sitenav .ddmenu a{font-family:'Jost',sans-serif;font-size:9.5px;letter-spacing:.26em;
    text-transform:uppercase;color:var(--body);border-bottom:0;padding:0}

  .navclose{display:block;position:absolute;top:26px;right:30px;background:none;border:0;padding:6px;
    cursor:pointer;font-family:'Jost',sans-serif;font-size:9px;letter-spacing:.3em;
    text-transform:uppercase;color:var(--taupe)}
}
.navlogo{display:none}
@media(max-width:780px){
  .ntlines{gap:6px;width:22px}
  .navlogo{display:block;position:absolute;top:24px;left:34px}
  .navlogo img{width:132px;display:block}
  nav#sitenav{padding-top:104px}
}

/* ---------- Inquire as a button in the nav ---------- */
.navcta{border:1px solid var(--ink);padding:11px 24px;line-height:1;
  transition:background .3s,color .3s,border-color .3s}
.navcta:hover{background:var(--ink);color:var(--paper);border-bottom-color:var(--ink)}
nav a.navcta[aria-current="page"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
nav{padding:14px 0}
@media(max-width:1080px){nav{gap:34px}}
@media(max-width:780px){
  /* in the panel it reads as a bordered CTA under the serif links */
  nav#sitenav a.navcta{display:inline-block;width:auto;margin-top:22px;
    font-family:'Jost',sans-serif;font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;
    border:1px solid var(--ink);padding:16px 32px;color:var(--ink);font-style:normal}
  nav#sitenav a.navcta[aria-current="page"]{background:var(--ink);color:var(--paper);font-style:normal}
}

.heroline h1{margin:0}