*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--bodyf);line-height:1.6}
:root,body{
  --bg:#F5EFE6;--fg:#2A241E;--acc:#C08A2E;--soft:#8A7F70;--line:#E0D6C6;
  --disp:"Playfair Display",serif;--bodyf:"DM Sans",system-ui,sans-serif;
  --dispw:400;--caps:none;--track:0em;--rad:0px;
}
body[data-preset="slate"]{
  --bg:#F7F8F8;--fg:#1E2224;--acc:#4A6B6B;--soft:#78807F;--line:#E2E6E6;
  --disp:"Jost",sans-serif;--dispw:400;--caps:uppercase;--track:.13em;
}
body[data-preset="rosewood"]{
  --bg:#FAF3F1;--fg:#3B2430;--acc:#B4787F;--soft:#8E7480;--line:#EDDFDD;
  --disp:"Cormorant Garamond",serif;--bodyf:"Jost",sans-serif;--dispw:300;--rad:2px;
}
h1{font-size:calc(50px * var(--hs,1))}
h2{font-size:calc(30px * var(--hs,1))}
h1,h2,h3{font-family:var(--disp);font-weight:var(--dispw);text-transform:var(--caps);
  letter-spacing:var(--track);margin:0;line-height:1.14}
p{margin:0;color:var(--soft)}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
.eyebrow{font-family:var(--bodyf);font-size:11px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--acc);margin-bottom:14px}
.ph{background:var(--line);border-radius:var(--rad);overflow:hidden;position:relative}
.wrap{max-width:1100px;margin:0 auto;padding:0 46px}

nav.sn{display:flex;flex-direction:var(--navdir,row);align-items:var(--navalign,center);
  justify-content:var(--navjust,space-between);gap:var(--navgap,0);padding:22px 46px;
  border-bottom:1px solid var(--line);max-width:1100px;margin:0 auto}
nav.sn .lg{font-family:var(--disp);font-size:18px;letter-spacing:var(--track);text-transform:var(--caps)}
nav.sn ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:13px;color:var(--soft)}
nav.sn a[aria-current]{color:var(--acc)}

section{padding:66px 46px;max-width:1100px;margin:0 auto}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;padding-top:74px}
.hero h1{font-size:calc(50px * var(--hs,1))}
.hero p{margin-top:18px;font-size:15px;max-width:36ch}
.hero .cta{display:inline-block;margin-top:26px;padding:12px 26px;background:var(--acc);
  color:#fff;font-size:12px;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--rad)}
.hero .ph{aspect-ratio:4/5}

.gal h2{font-size:calc(29px * var(--hs,1) * var(--hmul,1));margin-bottom:24px}
.gal .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gal .ph{aspect-ratio:3/4}

.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center;
  border-top:1px solid var(--line)}
.about .ph{aspect-ratio:1}
.about h2{font-size:calc(31px * var(--hs,1) * var(--hmul,1));margin-bottom:16px}
.about .sig{margin-top:20px;font-family:var(--disp);font-style:italic;font-size:19px;
  color:var(--acc);text-transform:none;letter-spacing:0}

.svc{border-top:1px solid var(--line)}
.svc h2{font-size:calc(29px * var(--hs,1) * var(--hmul,1))}
.svc .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.svc .card{border:1px solid var(--line);padding:22px 20px;border-radius:var(--rad)}
.svc .card h3{font-size:18px;margin-bottom:6px}
.svc .card .len{font-size:11px;color:var(--soft);letter-spacing:.06em;text-transform:uppercase}
.svc .card .pr{font-family:var(--disp);font-size:25px;color:var(--acc);margin:12px 0 4px;
  letter-spacing:0;text-transform:none}
.svc .card p{font-size:12.5px}

.quote{padding:64px 46px;text-align:center;border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--acc) 6%,var(--bg))}
.quote blockquote{margin:0 auto;max-width:52ch;font-family:var(--disp);font-size:calc(24px * var(--hs,1));
  line-height:1.42;font-weight:var(--dispw);text-transform:none;letter-spacing:0}
.quote cite{display:block;margin-top:18px;font-family:var(--bodyf);font-style:normal;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}

.text h2{font-size:calc(31px * var(--hs,1) * var(--hmul,1));margin-bottom:16px}
.text p{font-size:15px;max-width:64ch}

.cta2{text-align:center;border-top:1px solid var(--line)}
.cta2 h2{font-size:calc(34px * var(--hs,1) * var(--hmul,1))}
.cta2 p{margin:14px auto 0;max-width:42ch;font-size:15px}
.cta2 .btn{display:inline-block;margin-top:24px;padding:13px 30px;background:var(--fg);
  color:var(--bg);font-size:12px;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--rad)}

footer.sf{position:relative;background:transparent;border-top:1px solid var(--footline,var(--line));
  padding:var(--footpad,26px) 46px;max-width:1100px;margin:0 auto;display:flex;
  flex-direction:var(--footdir,row);align-items:center;justify-content:var(--footjust,space-between);
  gap:var(--footgap,0);text-align:var(--foottext,left);
  font-size:11px;color:var(--soft);letter-spacing:.05em}
footer.sf::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;
  background:var(--footbg,transparent);z-index:0}
footer.sf > *{position:relative;z-index:1}

@media(max-width:760px){
  nav.sn{padding:16px 20px;flex-direction:column;gap:12px}
  nav.sn ul{gap:16px;flex-wrap:wrap;justify-content:center;font-size:12px}
  section{padding:40px 20px}
  .hero,.about{grid-template-columns:1fr;gap:26px}
  .hero h1{font-size:33px}
  .gal .grid,.svc .grid{grid-template-columns:1fr}
  .quote{padding:40px 20px}
  .quote blockquote{font-size:19px}
  .cta2 h2{font-size:calc(26px * var(--hmul,1))}
  footer.sf{flex-direction:column;gap:6px;padding:20px;text-align:center}
}

/* banner hero — photo edge to edge with the words on top */
section.hero.banner{display:block;max-width:none;padding:0;position:relative}
section.hero.banner .ph{aspect-ratio:16/9;border-radius:0;width:100%}
section.hero.banner .htext{
  position:absolute;inset:auto 0 0 0;padding:0 46px 8%;max-width:1100px;margin:0 auto;
  text-align:center;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.45)}
section.hero.banner .htext h1,section.hero.banner .htext p{color:#fff}
section.hero.banner .eyebrow{color:#fff;opacity:.9}
section.hero.banner .htext p{margin-left:auto;margin-right:auto}
section.hero.banner::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(transparent 35%,rgba(0,0,0,.5))}
section.hero.banner .htext{z-index:2}
@media(max-width:760px){
  section.hero.banner .ph{aspect-ratio:4/5}
  section.hero.banner .htext{padding:0 20px 12%}
}

/* photo shape and grid size */
.ph.ar-tall{aspect-ratio:3/4}
.ph.ar-sq{aspect-ratio:1}
.ph.ar-wide{aspect-ratio:4/3}
.ph.ar-pano{aspect-ratio:16/9}
.gal .grid.cols-2{grid-template-columns:repeat(2,1fr)}
.gal .grid.cols-3{grid-template-columns:repeat(3,1fr)}
.gal .grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){
  .gal .grid.cols-2,.gal .grid.cols-3,.gal .grid.cols-4{grid-template-columns:1fr}
}

/* logo image */
nav.sn .lg{display:flex;align-items:center}
nav.sn .lg img{height:var(--logoH,52px);width:auto;max-width:min(48vw,560px);object-fit:contain;display:block}

/* edge to edge */
section.full{max-width:none;padding-left:0;padding-right:0}
section.full.hero{grid-template-columns:1fr;gap:0;padding-top:0}
section.full.hero .ph{aspect-ratio:16/9;border-radius:0}
section.full.hero .htext{max-width:1100px;margin:0 auto;padding:44px 46px 0;width:100%}
section.full .grid{gap:0}
section.full .ph{border-radius:0}

/* contact form */
.form{border-top:1px solid var(--line)}
.form h2{font-size:calc(31px * var(--hs,1) * var(--hmul,1));margin-bottom:10px}
.form form{margin-top:26px;display:grid;gap:14px;max-width:560px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--soft);margin-bottom:6px}
.form input,.form textarea{width:100%;padding:12px 14px;font:inherit;font-size:15px;
  border:1px solid var(--line);border-radius:var(--rad);background:#fff;color:var(--fg)}
.form textarea{min-height:120px;resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--acc)}
.form button{padding:14px 30px;background:var(--acc);color:#fff;border:0;cursor:pointer;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--rad);
  justify-self:start;font-family:var(--bodyf)}

/* buy buttons */
.buy{display:inline-block;margin-top:14px;padding:11px 24px;background:var(--acc);color:#fff;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--rad);
  font-family:var(--bodyf)}
.svc .card .buy{display:block;text-align:center;margin-top:16px}
.offer{border-top:1px solid var(--line);text-align:center}
.offer h2{font-size:calc(31px * var(--hs,1) * var(--hmul,1));margin-bottom:12px}
.offer .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px;text-align:left}
.offer .card{border:1px solid var(--line);border-radius:var(--rad);padding:22px 20px;
  display:flex;flex-direction:column}
.offer .card h3{font-size:19px;margin-bottom:6px}
.offer .card p{font-size:12.5px;flex:1}
.offer .card .pr{font-family:var(--disp);font-size:27px;color:var(--acc);margin:12px 0 2px;
  letter-spacing:0;text-transform:none}
@media(max-width:760px){ .offer .grid{grid-template-columns:1fr} }

/* feature: image + copy + button */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.feat.flip .fimg{order:2}
.feat .fimg{display:block;position:relative}
.feat .ftext h2{font-size:calc(31px * var(--hs,1) * var(--hmul,1));margin-bottom:14px}
.feat .ftext p{font-size:15px}
.feat .btn2{display:inline-block;margin-top:22px;padding:12px 28px;background:var(--acc);color:#fff;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--rad);font-family:var(--bodyf)}
.feat.ov{grid-template-columns:1fr;gap:0;position:relative;padding-left:0;padding-right:0}
.feat.ov .fimg .ph{aspect-ratio:21/9;border-radius:0}
.feat.ov .ftext{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;padding:0 46px;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.5);z-index:2}
.feat.ov .ftext h2,.feat.ov .ftext p{color:#fff}
.feat.ov .ftext .eyebrow{color:#fff;opacity:.9}
.feat.ov .fimg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.3)}
@media(max-width:760px){
  .feat{grid-template-columns:1fr;gap:24px}
  .feat.flip .fimg{order:0}
  .feat.ov .fimg .ph{aspect-ratio:4/5}
  .feat.ov .ftext{padding:0 20px}
}

/* social */
.social{display:flex;gap:16px;align-items:center}
.social a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.social a:hover{color:var(--acc)}
@media(max-width:760px){
  .form .row2{grid-template-columns:1fr}
  section.full.hero .htext{padding:30px 20px 0}
}

/* section heading alignment, size and accent line */
html,body{overflow-x:hidden}
section.h-center h2,section.h-center .eyebrow,section.h-center > p{text-align:center}
section.h-center > p{margin-left:auto;margin-right:auto}
section.h-rule h2::after{content:"";display:block;width:58px;height:1px;
  background:var(--acc);margin:16px 0 0}
section.h-rule.h-center h2::after{margin-left:auto;margin-right:auto}

/* section background color, full width of the page */
section.has-bg{position:relative;background:transparent;border-top:0}
section.has-bg::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);
  width:100vw;background:var(--secbg,transparent);z-index:0}
section.has-bg > *{position:relative;z-index:1}