/* Holiday Lights of Atlanta
   Same architecture as the Preserve pages, in the Holiday Lights palette.
   Ground #0E1A15, brand green #0D3126, gold #B79153, ivory #F7F2E8. */

:root{
  --ink:#0E1A15; --ink2:#13241D; --green:#0D3126; --ivory:#F7F2E8;
  --gold:#B79153; --gold-soft:rgba(183,145,83,.42);
  --body:rgba(247,242,232,.70); --body-dk:#4C574F;
  --display:"Bodoni Moda",Didot,Georgia,serif;
  --sans:"Jost",-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:#0E1A15;color-scheme:dark}
body{background:#0E1A15;color:var(--ivory);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.eyebrow{font-size:11px;letter-spacing:.24em;color:var(--gold);text-transform:uppercase}
p{line-height:1.85;color:var(--body);font-size:15px}
section{padding:110px 0;background-color:#0E1A15}
.certs,.band,.hero,.inquire{background-color:#0E1A15}
a{color:inherit}

.mark{display:flex;align-items:center;text-decoration:none}
.mark img{width:auto;height:58px}

header{position:absolute;top:0;left:0;right:0;z-index:5}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-top:26px;padding-bottom:26px}
nav{display:flex;gap:30px}
nav a{font-size:11px;letter-spacing:.18em;color:rgba(247,242,232,.8);text-decoration:none;text-transform:uppercase}
nav a:hover,nav a[aria-current="page"]{color:var(--gold)}
.btn{display:inline-block;border:1px solid var(--gold);color:var(--gold);font-size:11px;letter-spacing:.20em;
  padding:13px 26px;text-decoration:none;text-transform:uppercase;background:none;cursor:pointer;
  font-family:var(--sans);transition:background .35s ease,color .35s ease}
.btn:hover{background:var(--gold);color:var(--ink)}
.btn-solid{background:var(--gold);color:var(--ink)}
.btn-solid:hover{background:var(--ivory);border-color:var(--ivory)}

.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden}
.hero-img{position:absolute;inset:0}
.hero-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,18,14,.58) 0%,rgba(9,18,14,.18) 38%,rgba(9,18,14,.86) 100%)}
.hero .wrap{position:relative;padding-bottom:76px;padding-top:170px;max-width:1240px}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(30px,6.1vw,74px);line-height:1.04;
  letter-spacing:.02em;margin:20px 0 16px;text-transform:uppercase;overflow-wrap:break-word;max-width:100%}
.hero h1 em{font-style:italic;letter-spacing:0;text-transform:none;display:block;font-size:.60em;font-weight:400}
.hero p{max-width:470px;margin-bottom:32px}
.hero-tag{font-size:11px;letter-spacing:.22em;color:var(--gold);margin-bottom:28px;text-transform:uppercase}
.crumb{font-size:10px;letter-spacing:.20em;text-transform:uppercase;color:rgba(247,242,232,.5)}
.crumb a{color:rgba(247,242,232,.5);text-decoration:none}
.crumb a:hover{color:var(--gold)}
.hero--page{min-height:66vh}

.certs{border-top:1px solid rgba(247,242,232,.10);border-bottom:1px solid rgba(247,242,232,.10)}
.certs .wrap{display:flex;flex-wrap:wrap;gap:8px 34px;padding:20px 32px}
.certs span{font-size:10px;letter-spacing:.20em;color:rgba(247,242,232,.42);text-transform:uppercase}

.split{display:grid;grid-template-columns:1fr 1.15fr;gap:70px;align-items:start}
.split h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,42px);line-height:1.22;margin-top:20px}
.split p+p{margin-top:18px}
h2.big{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,42px);
  line-height:1.22;margin-top:18px;max-width:640px}

.disciplines{background-color:var(--green)}
.disciplines .eyebrow{color:#E2D5BB}
.d-list{margin-top:44px;border-top:1px solid rgba(247,242,232,.22)}
.d-row{display:grid;grid-template-columns:52px 1fr 1.4fr;gap:26px;align-items:baseline;
  padding:26px 0;border-bottom:1px solid rgba(247,242,232,.22)}
.d-row .num{font-family:var(--display);font-size:15px;color:#D9C6A4;letter-spacing:.1em}
.d-row h3{font-size:12px;font-weight:400;letter-spacing:.20em;text-transform:uppercase;color:var(--ivory)}
.d-row p{margin:0;font-size:14px}

.band{position:relative;height:56vh;min-height:340px}
.band .cap{position:absolute;left:0;right:0;bottom:0;padding:0 0 28px}
.band .cap span{font-size:10px;letter-spacing:.22em;color:rgba(247,242,232,.85);text-transform:uppercase}

.cols{display:grid;grid-template-columns:repeat(3,1fr);margin-top:54px;border-top:1px solid var(--gold-soft)}
.cols div{padding:26px 30px 0 0;border-right:1px solid var(--gold-soft)}
.cols div:last-child{border-right:0;padding-right:0}
.cols h4{font-size:10px;font-weight:400;letter-spacing:.20em;color:var(--gold);text-transform:uppercase;margin-bottom:12px}
.cols p{font-size:14px}

.living{background-color:var(--ink2)}
.living .rules{display:grid;grid-template-columns:repeat(4,1fr);margin-top:52px;border-top:1px solid var(--gold-soft)}
.living .rules div{padding:26px 28px 0 0;border-right:1px solid var(--gold-soft)}
.living .rules div:last-child{border-right:0;padding-right:0}
.living .n{font-family:var(--display);font-size:14px;color:var(--gold);letter-spacing:.1em}
.living h4{font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;margin:10px 0 12px}
.living p{font-size:14px}

.method{background-color:var(--ivory);color:var(--ink)}
.method .eyebrow{color:#8A7B5F}
.method h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,42px);
  line-height:1.22;margin-top:18px;max-width:640px;color:var(--ink)}
.method p{color:var(--body-dk)}
.steps{display:grid;grid-template-columns:repeat(5,1fr);margin-top:50px;border-top:1px solid rgba(14,26,21,.18)}
.steps div{padding:28px 26px 0 0;border-right:1px solid rgba(14,26,21,.18)}
.steps div:last-child{border-right:0;padding-right:0}
.steps .n{font-family:var(--display);font-size:15px;color:var(--green);letter-spacing:.1em}
.steps h3{font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;margin:10px 0 12px;color:var(--ink)}
.steps p{font-size:13.5px}
.steps-3{grid-template-columns:repeat(3,1fr)}
.steps-4{grid-template-columns:1fr;border-top:0}
.steps-4 div{border-right:0;border-bottom:1px solid rgba(14,26,21,.18);padding:22px 0}
.steps-4 div:first-child{padding-top:0}
.steps-4 div:last-child{border-bottom:0}
.steps-4 .n{display:inline-block;min-width:44px}
.steps-4 h3{display:inline-block;font-family:var(--display);font-size:clamp(21px,2.2vw,28px);
  letter-spacing:-.01em;text-transform:none;margin:0}
.steps-4 p{margin-top:8px;padding-left:44px}
.steps-3 div{padding-right:34px}

.price-figure{font-family:var(--display);font-size:clamp(46px,7vw,88px);line-height:1;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:18px}

.work{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:44px}
.work figure{position:relative;aspect-ratio:4/3;overflow:hidden}
.work figure.tall{aspect-ratio:3/4}
.work img{transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.work figure:hover img{transform:scale(1.04)}
.work figcaption{position:absolute;inset:auto 0 0 0;padding:22px;
  background:linear-gradient(0deg,rgba(9,18,14,.86),transparent)}
.work .place{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ivory)}
.work .scope{font-size:11px;letter-spacing:.10em;color:rgba(247,242,232,.62);margin-top:5px}

.cross{border-top:1px solid var(--gold-soft);border-bottom:1px solid var(--gold-soft)}
.cross a{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:40px 0;text-decoration:none;color:var(--ivory)}
.cross h3{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.4vw,40px);
  letter-spacing:.08em;text-transform:uppercase}
.cross .sub{font-size:14px;color:var(--body);margin-top:8px;max-width:440px}
.cross .arw{font-size:11px;letter-spacing:.20em;text-transform:uppercase;color:var(--gold);white-space:nowrap;
  transition:transform .4s ease;display:inline-block}
.cross a:hover .arw{transform:translateX(6px)}

.faq{margin-top:44px;border-top:1px solid var(--gold-soft)}
.faq details{border-bottom:1px solid var(--gold-soft)}
.faq summary{cursor:pointer;list-style:none;position:relative;padding:26px 44px 26px 0;
  font-family:var(--display);font-weight:400;font-size:clamp(19px,2vw,24px);line-height:1.3;color:var(--ivory)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:2px;top:28px;color:var(--gold);
  font-family:var(--sans);font-size:20px;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq .answer{padding:0 44px 30px 0;max-width:56em}

.areas-list{margin-top:44px;border-top:1px solid var(--gold-soft)}
.areas-list a{display:grid;grid-template-columns:52px 1fr 1.4fr 120px;gap:26px;align-items:baseline;
  padding:26px 0;border-bottom:1px solid var(--gold-soft);text-decoration:none}
.areas-list .num{font-family:var(--display);font-size:15px;color:var(--gold);letter-spacing:.1em}
.areas-list h3{font-size:12px;font-weight:400;letter-spacing:.20em;text-transform:uppercase;color:var(--ivory)}
.areas-list p{margin:0;font-size:14px}
.areas-list .arw{font-size:10px;letter-spacing:.20em;text-transform:uppercase;color:var(--gold);
  text-align:right;transition:transform .4s ease}
.areas-list a:hover .arw{transform:translateX(5px)}
.areas-list a:hover h3{color:var(--gold)}

.inquire{display:grid;grid-template-columns:1fr 1fr}
.inquire .photo{position:relative;min-height:100%}
.inquire .panel{padding:96px 60px}
.inquire h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,3.6vw,44px);line-height:1.2;margin:18px 0 16px}
.meta{display:flex;gap:44px;margin:30px 0 40px;flex-wrap:wrap}
.meta h4{font-size:10px;font-weight:400;letter-spacing:.20em;color:var(--gold);text-transform:uppercase;margin-bottom:7px}
.meta p{font-size:14px;color:var(--ivory);margin:0}
form label{display:block;font-size:10px;letter-spacing:.20em;color:var(--gold);text-transform:uppercase;margin-bottom:9px}
form input,form select,form textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--gold-soft);
  color:var(--ivory);font-family:var(--sans);font-weight:300;font-size:15px;padding:8px 0 12px;margin-bottom:26px;
  border-radius:0;-webkit-appearance:none;appearance:none}
form textarea{resize:vertical;min-height:74px}
form input::placeholder,form textarea::placeholder{color:rgba(247,242,232,.32)}
form input:focus,form select:focus,form textarea:focus{outline:0;border-bottom-color:var(--gold)}
form select option{background:var(--ink);color:var(--ivory)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.checkset{display:flex;flex-wrap:wrap;gap:12px 24px;margin:-10px 0 26px}
.checkset label{display:inline-flex;align-items:center;gap:9px;margin:0;letter-spacing:.10em;
  color:rgba(247,242,232,.78);cursor:pointer;font-size:11px}
.checkset input{width:14px;height:14px;margin:0;accent-color:var(--gold)}
.err{color:#E0A38C;font-size:12px;margin:-18px 0 20px;display:none}

footer{background-color:#0A130F;padding:70px 0 34px}
.f-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:44px}
footer h4{font-size:10px;font-weight:400;letter-spacing:.20em;color:var(--gold);text-transform:uppercase;margin-bottom:16px}
footer ul{list-style:none}
footer li{margin-bottom:10px}
footer a{color:rgba(247,242,232,.62);text-decoration:none;font-size:14px}
footer a:hover{color:var(--gold)}
footer .mark img{height:56px}
.legal{margin-top:50px;padding-top:24px;border-top:1px solid rgba(247,242,232,.10);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.08em;color:rgba(247,242,232,.36)}

.rv{opacity:1}
.rv[data-armed="1"]{opacity:0;transform:translateY(16px);
  transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.rv[data-armed="1"].in{opacity:1;transform:none}

.menu-toggle{display:none}
.drawer{position:fixed;inset:0;z-index:40;background:#0B1611;display:flex;flex-direction:column;
  padding:26px 22px 40px;transform:translateY(-100%);transition:transform .5s cubic-bezier(.2,.7,.2,1);visibility:hidden}
.drawer.open{transform:none;visibility:visible}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:44px}
.drawer-close{background:none;border:0;color:var(--ivory);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;padding:6px 0;font-family:var(--sans)}
.drawer nav{display:flex;flex-direction:column;gap:0}
.drawer nav a{font-family:var(--display);font-size:26px;font-weight:400;letter-spacing:.06em;
  color:var(--ivory);text-decoration:none;text-transform:uppercase;padding:16px 0;
  border-bottom:1px solid rgba(183,145,83,.22)}
.drawer nav a:first-child{border-top:1px solid rgba(183,145,83,.22)}
.drawer .foot{margin-top:auto;padding-top:32px}
.drawer .foot a{color:var(--ivory);text-decoration:none;font-size:19px;font-family:var(--display);letter-spacing:.05em}
body.locked{overflow:hidden}
@media (min-width:901px){.drawer{display:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv[data-armed="1"]{opacity:1;transform:none;transition:none}
  .drawer{transition:none}
  .work img{transition:none}
}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--gold);color:var(--ink);padding:12px 18px}

@media (max-width:900px){
  .wrap{padding:0 22px}
  .mark img{height:46px}
  section{padding:74px 0}
  nav{display:none}
  header .btn{display:none}
  .menu-toggle{display:block;font-size:11px;letter-spacing:.18em;color:var(--ivory);
    background:none;border:0;text-transform:uppercase;cursor:pointer;padding:6px 0;font-family:var(--sans)}
  .split{grid-template-columns:1fr;gap:26px}
  .cols,.living .rules,.steps,.work{grid-template-columns:1fr}
  .living .rules{grid-template-columns:1fr}
  .cols div,.living .rules div{border-right:0;border-bottom:1px solid var(--gold-soft);padding:22px 0}
  .steps div{border-right:0;border-bottom:1px solid rgba(14,26,21,.18);padding:22px 0}
  .cols div:last-child,.living .rules div:last-child,.steps div:last-child{border-bottom:0}
  .d-row{grid-template-columns:34px 1fr;gap:14px}
  .d-row p{grid-column:2}
  .areas-list a{grid-template-columns:34px 1fr;gap:14px}
  .areas-list p,.areas-list .arw{grid-column:2;text-align:left}
  .inquire{grid-template-columns:1fr}
  .inquire .photo{height:300px}
  .inquire .panel{padding:60px 22px}
  .field-row{grid-template-columns:1fr;gap:0}
  .f-grid{grid-template-columns:1fr}
  .band{height:40vh}
  .cross a{flex-direction:column;align-items:flex-start;gap:14px;padding:32px 0}
  .work figure.tall{aspect-ratio:4/3}
}

.attrib{font-size:10px;letter-spacing:.22em;color:var(--gold);text-transform:uppercase;
  margin-top:34px;padding-top:18px;border-top:1px solid var(--gold-soft);display:inline-block}
.lede-serif{font-family:var(--display);font-size:clamp(20px,2.2vw,26px);line-height:1.45;
  letter-spacing:-.01em;color:var(--ink)}

/* ---------- checkboxes that read as selected ---------- */
.checkset{gap:10px 14px}
.checkset label{border:1px solid var(--gold-soft);padding:10px 16px;border-radius:2px;
  transition:background .25s ease,border-color .25s ease,color .25s ease}
.checkset label:hover{border-color:var(--gold)}
.checkset input{appearance:none;-webkit-appearance:none;width:15px;height:15px;margin:0;
  border:1px solid var(--gold);border-radius:1px;background:transparent;position:relative;
  flex:0 0 auto;cursor:pointer}
.checkset input:checked{background:var(--gold);border-color:var(--gold)}
.checkset input:checked::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.checkset label:has(input:checked){background:rgba(183,145,83,.14);border-color:var(--gold);color:var(--ivory)}

/* ---------- lighter ground under the hero ---------- */
.certs{background-color:#16261E}
.certs a{text-decoration:none;color:inherit;border-bottom:1px solid var(--gold-soft);
  padding-bottom:1px;white-space:nowrap}
.certs a b{font-weight:600;letter-spacing:.24em;color:rgba(247,242,232,.82)}
.certs a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.certs a:focus-visible{outline:1px solid var(--gold);outline-offset:2px;border-bottom-color:transparent}
/* the opening section takes the ivory from the process block */
#standard{background-color:var(--ivory);color:var(--ink)}
#standard h2{color:var(--green)}
#standard p{color:var(--body-dk)}
#standard .eyebrow{color:#8A7B5F}
#standard .attrib{color:var(--gold);border-top-color:rgba(14,26,21,.18)}

/* ---------- swap: "while it is up" goes light, the process goes dark ---------- */
.living{background-color:var(--ivory);color:var(--body-dk)}
.living h1,.living h2,.living h3{color:var(--green)}
.living .eyebrow{color:#8A7B5F}
.living p{color:var(--body-dk)}
.living .rules{border-top-color:rgba(14,26,21,.18)}
.living .rules div{border-right-color:rgba(14,26,21,.18)}
.living .n{color:var(--gold)}
.living h4{color:var(--green)}

.method{background-color:var(--ink2);color:var(--body)}
.method .eyebrow{color:var(--gold)}
.method h2{color:var(--ivory)}
.method p{color:var(--body)}
.method .steps,.method .steps div{border-color:var(--gold-soft)}
.method .steps-4 div{border-bottom-color:var(--gold-soft)}
.method .steps .n{color:var(--gold)}
.method .steps h3{color:var(--ivory)}
.method .price-figure{color:var(--ivory)}
.method .lede-serif{color:var(--ivory)}

/* ---------- the inquiry panel goes ivory ---------- */
.inquire{background-color:var(--ivory)}
.inquire .panel{color:var(--body-dk)}
.inquire .eyebrow{color:#8A7B5F}
.inquire h2{color:var(--green)}
.inquire .panel p{color:var(--body-dk)}
.inquire .meta h4{color:#8A7B5F}
.inquire .meta p{color:var(--green)}
.inquire form label,.inquire form .field-label{color:#8A7B5F}
.inquire form input,.inquire form select,.inquire form textarea{
  color:var(--ink);border-bottom-color:rgba(14,26,21,.22)}
.inquire form input::placeholder,.inquire form textarea::placeholder{color:rgba(14,26,21,.34)}
.inquire form input:focus,.inquire form select:focus,.inquire form textarea:focus{border-bottom-color:var(--gold)}
.inquire form select option{background:var(--ivory);color:var(--ink)}
.inquire .checkset label{color:var(--ink);border-color:rgba(183,145,83,.55)}
.inquire .checkset label:has(input:checked){background:rgba(183,145,83,.18);color:var(--green)}
.inquire .checkset input:checked::after{border-color:var(--ivory)}
.inquire .btn-solid{background:var(--green);border-color:var(--green);color:var(--ivory)}
.inquire .btn-solid:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.inquire .err{color:#9C4A2B}