:root{
  /* palette */
  --bark:#140E06;
  --ground:#F4EDE0;
  --paper:#FFFFFF;
  --rule:#1E1509;
  --line:#D8C8AC;
  --ink:#2A1C0B;
  --ink-2:#6A5738;
  --tan:#B87325;
  --tan-bright:#D89340;
  --onbark:#F6EFE1;
  --onbark-2:#B7A382;
  /* type */
  --d:"Archivo Black","Archivo",Helvetica,Arial,sans-serif;
  --b:"Archivo","Helvetica Neue",Arial,sans-serif;
  /* spacing scale - every gap on the page comes from here */
  --s1:8px; --s2:14px; --s3:22px; --s4:34px; --s5:52px; --s6:78px;
  --maxw:1240px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bark:#0A0703; --ground:#171006; --paper:#211809; --rule:#F4EDE0; --line:#3B2D19;
    --ink:#F4EDE0; --ink-2:#A9926B; --tan:#D89340; --tan-bright:#EBAA5B;
    --onbark:#F6EFE1; --onbark-2:#A9926B;
  }
}
:root[data-theme="dark"]{
  --bark:#0A0703; --ground:#171006; --paper:#211809; --rule:#F4EDE0; --line:#3B2D19;
  --ink:#F4EDE0; --ink-2:#A9926B; --tan:#D89340; --tan-bright:#EBAA5B;
  --onbark:#F6EFE1; --onbark-2:#A9926B;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--b);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--d);font-weight:400;line-height:1.02;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s3)}
.kicker{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--tan)}

/* the bold rule that separates every band */
.rule{border-top:3px solid var(--rule)}

.notice{background:var(--bark);color:var(--onbark-2);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:var(--s1) 0;text-align:center}
.notice b{color:var(--tan-bright)}

/* nav bar */
.bar{background:var(--ground);border-bottom:3px solid var(--rule);position:sticky;top:0;z-index:20}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-top:var(--s2);padding-bottom:var(--s2);flex-wrap:wrap}
.brand{font-family:var(--d);font-size:19px;letter-spacing:-.02em;text-transform:uppercase;line-height:1;text-decoration:none}
.brand{display:flex;align-items:center;gap:14px}
.bar .brand{display:block}
.bar .brand .wordmark{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:35px;line-height:1;letter-spacing:.07em;text-transform:uppercase;color:#8A6037;margin-bottom:5px}
footer .brand{display:block}
footer .brand .mark{width:240px;height:auto;display:block;margin-bottom:var(--s2)}
footer .brand small{letter-spacing:.04em;text-transform:none;font-size:12.5px}
.brand small{display:block;font-family:var(--b);font-weight:700;font-size:9.5px;letter-spacing:.2em;color:var(--ink-2);line-height:1.5}
.nav{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.nav a.jump{
  text-decoration:none;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);padding:4px 0;border-bottom:2px solid transparent;
}
.nav a.jump:hover{border-bottom-color:var(--tan)}
.nav a.jump.on{border-bottom-color:var(--tan);color:var(--tan)}
.nav .num{font-family:var(--d);font-size:19px;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.nav .num:hover{color:var(--tan)}

/* hero - cream ground, brown type, full height on desktop */
.hero{background:var(--ground);border-bottom:3px solid var(--rule)}
.hero .inner{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1fr;gap:var(--s5);
  padding:var(--s5) var(--s3);
}
.hero h1{font-size:clamp(32px,4.4vw,56px);color:var(--ink);max-width:16ch}
.hero .lede{font-size:clamp(16.5px,1.7vw,21px);max-width:38ch;margin-top:var(--s3);color:var(--ink-2);font-weight:500}
.hero .four{
  margin-top:var(--s3);display:flex;flex-wrap:wrap;gap:var(--s2);
  font-family:var(--d);font-size:clamp(13px,1.25vw,16px);text-transform:uppercase;letter-spacing:-.01em;
}
.hero .four span{border:2px solid var(--ink);padding:9px 15px;border-radius:2px}
.cta{
  display:inline-block;margin-top:var(--s3);background:var(--ink);color:var(--ground);
  text-decoration:none;font-weight:700;font-size:16px;padding:16px 30px;border-radius:2px;
}
.cta:hover{background:var(--tan);color:#1a1206}
.hero figure{margin:0;align-self:stretch}
.hero figure img{width:100%;height:100%;min-height:320px;object-fit:cover;border:3px solid var(--rule);border-radius:2px}

/* band heading strip */
.strip{background:var(--rule);color:var(--ground)}
.strip .wrap{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);flex-wrap:wrap;padding-top:var(--s3);padding-bottom:var(--s3)}
.strip h2{font-size:clamp(20px,2.3vw,28px);color:var(--ground)}
.strip p{font-size:14.5px;font-weight:500;opacity:.72}

/* services */
#services{padding:var(--s6) 0;border-bottom:3px solid var(--rule)}
.shead{margin-bottom:var(--s5)}
.shead h2{font-size:clamp(27px,3.2vw,40px);margin:var(--s2) 0 var(--s3);max-width:22ch}
.shead .sub{color:var(--ink-2);max-width:56ch}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.tile{background:var(--paper);border:3px solid var(--rule);border-radius:2px;display:flex;flex-direction:column;overflow:hidden}
.tile img{width:100%;height:260px;object-fit:cover;border-bottom:3px solid var(--rule)}
.tile .body{padding:var(--s4) var(--s3);display:flex;flex-direction:column;gap:var(--s2);flex:1}
.tile h3{font-size:clamp(19px,1.8vw,24px)}
.tile p{color:var(--ink-2);font-size:15px;line-height:1.55}
.tile p.hook{color:var(--ink);font-weight:700;font-size:17px;line-height:1.35}

/* about */
.about{padding:var(--s6) 0;border-bottom:3px solid var(--rule)}
.about .grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s5);align-items:start}
.about figure{margin:0}
.about figure img{width:100%;height:420px;object-fit:cover;border:3px solid var(--rule);border-radius:2px}
.about h2{font-size:clamp(27px,3.2vw,40px);margin:var(--s2) 0 var(--s3);max-width:16ch}
.about .points{display:grid;gap:0;border-top:2px solid var(--rule)}
.point{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.point b{font-family:var(--d);font-size:14px;color:var(--tan);letter-spacing:-.01em;font-weight:400;padding-top:2px}
.point h3{font-size:18px;margin-bottom:6px;text-transform:none;letter-spacing:-.01em}
.point p{color:var(--ink-2);font-size:15.5px;max-width:56ch}

/* work */
.work{padding:var(--s6) 0;border-bottom:3px solid var(--rule);background:var(--paper)}
.work h2{font-size:clamp(27px,3.2vw,40px);margin:var(--s2) 0 var(--s4)}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.gal figure{margin:0}
.gal img{width:100%;height:300px;object-fit:cover;border:3px solid var(--rule);border-radius:2px}
.gal figcaption{font-size:14px;color:var(--ink-2);padding-top:var(--s2);line-height:1.5}
.gal figcaption b{display:block;font-family:var(--d);font-weight:400;font-size:15px;color:var(--ink);text-transform:uppercase;letter-spacing:-.01em;margin-bottom:5px}

/* audience */
.aud{padding:var(--s6) 0;border-bottom:3px solid var(--rule)}
.aud .grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.aud .kicker{margin-bottom:var(--s4)}
.acell h2{font-size:clamp(24px,2.7vw,34px);margin-bottom:var(--s3)}
.acell p{color:var(--ink-2);max-width:46ch}
.acell ul{margin:var(--s3) 0 0;padding-left:20px;color:var(--ink-2);font-size:15.5px}
.acell li{margin-bottom:var(--s1)}
.acell .now{margin-top:var(--s3);padding-top:var(--s3);border-top:2px solid var(--rule);font-size:15px;color:var(--ink-2);max-width:46ch}
.acell .now b{color:var(--ink);font-weight:700}

/* proof */
.proof{background:var(--bark);color:var(--onbark);padding:var(--s4) 0}
.proof .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.pcell strong{display:block;font-family:var(--d);font-size:clamp(15px,1.5vw,19px);color:#FFF7E9;margin-bottom:6px;letter-spacing:-.01em;font-weight:400}
.pcell span{color:var(--onbark-2);font-size:13.5px;font-weight:500}

/* close */
.close{padding:var(--s6) 0}
.close .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s5);align-items:center}
.close h2{font-size:clamp(30px,4vw,52px);margin-bottom:var(--s3);max-width:14ch}
.close p{color:var(--ink-2);max-width:44ch}
.bigphone{text-align:right}
.bigphone a.num{font-family:var(--d);font-size:clamp(30px,4.4vw,54px);text-decoration:none;letter-spacing:-.03em;display:block;line-height:1;font-weight:400}
.bigphone a.num:hover{color:var(--tan)}
.bigphone .mail{font-family:var(--b);font-weight:600;font-size:17px;color:var(--ink-2);margin-top:var(--s3);display:inline-block;text-decoration:none}
.bigphone .mail:hover{color:var(--tan)}

/* footer */
footer{border-top:3px solid var(--rule);padding:var(--s5) 0 var(--s6)}
footer .grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:var(--s5)}
footer .brand{font-size:17px}
footer h4{margin:0 0 var(--s2);font-family:var(--b);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
footer ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--s1)}
footer a{text-decoration:none;color:var(--ink);font-weight:500;font-size:15px}
footer a:hover{color:var(--tan)}
footer .fine{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;color:var(--ink-2);font-size:13px}
footer .fine a{font-size:13px;font-weight:700;color:var(--ink)}

/* before & after */
.ba{padding:var(--s6) 0;border-bottom:3px solid var(--rule);background:var(--paper)}
.ba h2{font-size:clamp(27px,3.2vw,40px);margin:var(--s2) 0 var(--s3)}
.ba .lead{color:var(--ink-2);max-width:56ch;margin-bottom:var(--s4)}
.ba .pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.ba figure{margin:0;position:relative}
.ba img{width:100%;height:440px;object-fit:cover;border:3px solid var(--rule);border-radius:2px}
.ba .tag{position:absolute;top:var(--s2);left:var(--s2);background:var(--rule);color:var(--ground);font-family:var(--d);font-size:12px;letter-spacing:.06em;padding:7px 12px;border-radius:2px;text-transform:uppercase}
.ba figcaption{font-size:14.5px;color:var(--ink-2);padding-top:var(--s2);line-height:1.5}
@media (max-width:760px){.ba img{height:320px}}

a:focus-visible{outline:2px solid var(--tan);outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

@media (min-width:1000px){
  .hero .inner{
    grid-template-columns:1.05fr .95fr;align-items:center;
    min-height:calc(100vh - 84px);
  }
  .ba h2,.ba .lead{max-width:50%}
  /* about photo rides along while the points scroll past */
  .about figure{position:sticky;top:110px}
  .about figure img{height:min(620px,calc(100vh - 150px))}
}
@media (max-width:1000px){
  .tiles{grid-template-columns:1fr}
  .ba .pair{grid-template-columns:1fr}
  .about .grid,.close .grid{grid-template-columns:1fr}
  .about figure img{height:300px}
  .gal{grid-template-columns:1fr}
  .gal img{height:280px}
  .proof .grid{grid-template-columns:1fr 1fr;gap:var(--s3)}
  footer .grid{grid-template-columns:1fr 1fr}
  .bigphone{text-align:left}
}
@media (max-width:760px){
  .aud .grid{grid-template-columns:1fr;gap:var(--s4)}
  /* phone header: logo + a tappable number, nothing else - the page is one scroll */
  .bar .wrap{gap:var(--s2);flex-wrap:nowrap}
  .bar .brand .wordmark{font-size:23px;margin-bottom:2px;letter-spacing:.05em}
  .brand small{display:none}
  .nav{gap:var(--s2);width:auto;order:0}
  .nav a.jump{display:none}
  .nav .num{font-size:18.5px;width:auto;order:0;margin:0;white-space:nowrap}
}
@media (max-width:560px){
  .proof .grid{grid-template-columns:1fr}
  footer .grid{grid-template-columns:1fr;gap:var(--s4)}
}

/* ---------- inner pages ---------- */
.page{padding:var(--s6) 0}
.page h1{font-size:clamp(30px,4vw,50px);margin-bottom:var(--s3)}
.page h2{font-size:clamp(22px,2.6vw,32px);margin:var(--s5) 0 var(--s2)}
.page h3{font-size:20px;margin:var(--s4) 0 var(--s1);text-transform:none;letter-spacing:-.01em}
.prose{max-width:68ch}
.prose p{margin:0 0 var(--s3);color:var(--ink-2);font-size:17px}
.prose p.stand{color:var(--ink);font-weight:600}
.prose a{color:var(--tan);text-decoration:underline;text-underline-offset:3px}
.lead-in{font-size:clamp(17px,1.7vw,20px);color:var(--ink-2);max-width:52ch;margin-bottom:var(--s4)}
.pagehead{background:var(--rule);color:var(--ground);padding:var(--s5) 0 var(--s5)}
.pagehead h1{color:var(--ground);margin:0}
.pagehead p{color:var(--onbark-2);margin-top:var(--s2);max-width:52ch;font-weight:500}
.backlink{display:inline-block;margin-top:var(--s5);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--tan);text-decoration:none}
.backlink:hover{color:var(--ink)}

/* two-up before/after inside articles */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin:0 0 var(--s4)}
.duo figure{margin:0}
.duo img{width:100%;height:320px;object-fit:cover;border:3px solid var(--rule);border-radius:2px}
.duo figcaption{font-size:14px;color:var(--ink-2);padding-top:var(--s2)}
@media(max-width:760px){.duo{grid-template-columns:1fr}.duo img{height:250px}}

/* post cards */
.posts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.post{background:var(--paper);border:3px solid var(--rule);border-radius:2px;display:flex;flex-direction:column}
.post img{width:100%;height:240px;object-fit:cover;border-bottom:3px solid var(--rule)}
.post .body{padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);flex:1}
.post h3{font-family:var(--d);font-size:20px;text-transform:uppercase;letter-spacing:-.01em;margin:0}
.post p{color:var(--ink-2);font-size:15px}
.post a.more{margin-top:auto;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--tan);text-decoration:none}
.post a.more:hover{color:var(--ink)}
@media(max-width:760px){.posts{grid-template-columns:1fr}}

/* form */
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:start}
@media(max-width:860px){.formgrid{grid-template-columns:1fr;gap:var(--s4)}}
.field{margin-bottom:var(--s3)}
.field label{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.field input,.field textarea{
  width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--paper);
  border:2px solid var(--rule);border-radius:2px;padding:12px 14px;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--tan)}
button.cta{border:0;cursor:pointer;font-family:var(--b)}
.contactlines{display:grid;gap:var(--s3);border-top:2px solid var(--rule);padding-top:var(--s3)}
.contactlines a{font-family:var(--d);font-size:clamp(22px,2.6vw,30px);text-decoration:none;letter-spacing:-.02em}
.contactlines a:hover{color:var(--tan)}
.contactlines span{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);display:block;margin-bottom:4px}

/* ---------- gallery ---------- */
.gsec.alt{background:var(--paper)}
.gintro{color:var(--ink-2);max-width:60ch;margin:calc(-1 * var(--s2)) 0 var(--s4)}
.gal a.shot{display:block;cursor:zoom-in}
.gal a.shot img{transition:border-color .15s}
.gal a.shot:hover img{border-color:var(--tan)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s4)}
.chips a{border:2px solid var(--onbark-2);color:var(--ground);padding:8px 14px;border-radius:2px;text-decoration:none;font-weight:600;font-size:14px}
.chips a:hover{border-color:var(--tan-bright);color:var(--tan-bright)}
.more-link{display:inline-block;margin-top:var(--s4);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--tan);text-decoration:none}
.more-link:hover{color:var(--ink)}
dialog.lb{border:0;padding:0;background:transparent;max-width:94vw;max-height:94vh;overflow:visible}
dialog.lb::backdrop{background:rgba(20,14,8,.93)}
dialog.lb img{display:block;max-width:94vw;max-height:84vh;width:auto;height:auto;margin:0 auto;border:3px solid #F4EDE0;border-radius:2px}
dialog.lb p{color:#F4EDE0;text-align:center;padding:12px 8px 0;font-size:15px;max-width:70ch;margin:0 auto}
dialog.lb button{position:fixed;background:#F4EDE0;color:#1a1206;border:0;font:700 13px/1 var(--b);letter-spacing:.12em;text-transform:uppercase;padding:12px 16px;cursor:pointer;border-radius:2px}
dialog.lb .x{top:14px;right:14px}
dialog.lb .prev{left:14px;top:50%;transform:translateY(-50%)}
dialog.lb .next{right:14px;top:50%;transform:translateY(-50%)}
@media (max-width:760px){dialog.lb .prev,dialog.lb .next{top:auto;bottom:14px;transform:none}}