/* =====================================================================
   THE PLAN: the loader, the hero, and the dawn into the garden room.
   Markup is written by hero_build.py, motion is gate.js.
   ===================================================================== */
:root{
  --gate-gold:#cdb07a;         /* antique gilt: the hairline, never the CTA gold */
  --gate-ivory:#efe6d4;
}

/* ---------- the loader: a site plan, drawn ---------------------------------
   Hidden unless the head script turned it on (JS present, motion allowed,
   first visit this session). With no JS the page simply starts. */
.gate{display:none;position:fixed;inset:0;z-index:9998;color:var(--gate-ivory);overflow:hidden;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.gate-on .gate{display:block}
.gate-lock body{overflow:hidden}
.gate-ground{position:absolute;inset:0;
  background:radial-gradient(120% 95% at 50% 46%,#1c2c22 0%,#132119 52%,#0b140f 100%)}
/* the faint grid of drafting paper */
.gate-ground::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(205,176,122,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(205,176,122,.07) 1px,transparent 1px);
  background-size:36px 36px;background-position:center}
.gate-ground::after{content:"";position:absolute;inset:0;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .72 0 0 0 0 .55 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.gate-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gate-art .ln{fill:none;stroke:var(--gate-gold);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1}
.gate-art .ln.bold{stroke-width:3.4}
.gate-art .ln.dim{stroke-width:1.6;opacity:.8}
.gate.go .gate-art .ln{animation:plan-draw var(--t,1s) cubic-bezier(.65,0,.3,1) calc(var(--d,0s) + var(--plan-at,.6s)) forwards}
@keyframes plan-draw{to{stroke-dashoffset:0}}
.gate-art .hb{fill:none;stroke:rgba(205,176,122,.34);stroke-width:1.6}
/* the pavers are laid from the far edge toward you */
.gate-art .hb-wipe{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0)}
.gate.go .gate-art .hb-wipe{animation:plan-lay 1.3s cubic-bezier(.5,0,.3,1) calc(1.05s + var(--plan-at,.6s)) forwards}
@keyframes plan-lay{to{transform:scaleY(1)}}
.gate-art .lb{font:600 21px/1 var(--body);letter-spacing:.2em;fill:rgba(239,230,212,.82);opacity:0}
.gate.go .gate-art .lb{animation:plan-note .6s ease calc(var(--d,1.7s) + var(--plan-at,.6s)) forwards}
@keyframes plan-note{to{opacity:1}}

/* the title block, bottom right, as on any drawing sheet */
.gate-block{position:absolute;right:clamp(14px,1.6vw,24px);bottom:clamp(14px,calc(var(--sh,100vh) * .02),22px);
  display:grid;gap:8px;width:218px;padding:13px 15px 12px;
  background:rgba(11,20,15,.72);border:1px solid rgba(205,176,122,.5);outline:1px solid rgba(205,176,122,.22);outline-offset:4px;
  opacity:0;transform:translateY(10px);transition:opacity .8s ease .3s,transform .9s cubic-bezier(.215,.61,.355,1) .3s}
.gb-logo{display:block;width:100%;height:auto}
/* the monogram opens the loader, alone in the middle, as ERA opens on its mark;
   the plan starts drawing behind it as it goes */
.gate-mono{position:absolute;left:50%;top:50%;width:min(30vw,280px);height:auto;opacity:0;
  transform:translate(-50%,-50%) scale(.97);filter:blur(6px)}
.gate.go .gate-mono{animation:mono-in .8s cubic-bezier(.215,.61,.355,1) .05s forwards,mono-out .7s cubic-bezier(.4,0,.2,1) 1.35s forwards}
@keyframes mono-in{to{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}}
@keyframes mono-out{from{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}to{opacity:0;transform:translate(-50%,-50%) scale(1.04);filter:blur(4px)}}
.gb-sub,.gb-row{font:600 9.5px/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;color:rgba(239,230,212,.6)}
.gb-row{display:flex;justify-content:space-between;gap:14px;padding-top:8px;border-top:1px solid rgba(205,176,122,.3)}
.gb-row span:last-child{color:var(--gate-gold);font-variant-numeric:lining-nums tabular-nums}
.gate-bar{display:block;position:relative;height:1px;background:rgba(205,176,122,.2);overflow:hidden}
.gate-bar b{position:absolute;inset:0;background:var(--gate-gold);transform:scaleX(0);transform-origin:0 50%}
.gate.go .gate-block{opacity:1;transform:none}

/* then the plan dips to black, and the film opens out of the dark */
.gate::after{content:"";position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;
  transition:opacity .7s cubic-bezier(.4,0,.2,1)}
.gate.dark::after{opacity:1}
.gate.dark .gate-block{opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
.gate.gone{opacity:0;transition:opacity .35s linear .15s;pointer-events:none}
@media(max-width:700px){
  .gate-block{left:16px;right:16px;bottom:16px;width:auto}
  .gb-logo{width:min(100%,260px)}
  .gate-mono{width:52vw}
}

/* ---------- the hero -------------------------------------------------------
   The film is one screen tall (--sh: the screen's height, held while a
   phone's toolbar comes and goes; see nav.js). Under it, below the fold, its
   dark turns to the plaster of the room below: scroll and it dawns, no line. */
.hero-stage{position:relative;--melt:calc(var(--sh,100svh) * .22)}
.hero-stage .hero{height:calc(var(--sh,100svh) + var(--melt));min-height:calc(560px + var(--melt));background:transparent;
  display:block;overflow:hidden}
.hero-stage .hero-media{inset:0 0 auto;height:var(--sh,100svh);min-height:560px;background:#0e1712}
.hero-stage .hero-media::after{display:none}
.hero-melt{position:absolute;left:0;right:0;top:max(var(--sh,100svh),560px);height:var(--melt);pointer-events:none;
  background:linear-gradient(to bottom,#0e1712 0.0%,#141c17 8.3%,#232a23 16.7%,#3a3f36 25.0%,#55574b 33.3%,#706f62 41.7%,
    #888677 50.0%,#9f9b8d 58.3%,#b5b1a4 66.7%,#cbc7bc 75.0%,#dfdbd2 83.3%,#eeeae3 91.7%,#f4f0e9 100.0%)}
.hero-reel{position:absolute;inset:0;transform-origin:50% 45%}
.hs{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:1}
/* the film carries its own camera moves, grade and transitions */
.hs-film{background:#0e1712}


/* film: a fine grain that never sits still, and a gentle grade */
.hero-grain{position:absolute;inset:-12%;z-index:1;pointer-events:none;opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation:grain .9s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-7%,4%)}33%{transform:translate(5%,-6%)}
  50%{transform:translate(-4%,-3%)}67%{transform:translate(6%,5%)}83%{transform:translate(-2%,7%)}100%{transform:translate(0,0)}}
.hero-shade{position:absolute;left:0;right:0;top:0;height:var(--sh,100svh);z-index:1;pointer-events:none;
  background:
    radial-gradient(62% 24% at 50% 34%,rgba(8,16,11,.5) 0%,rgba(8,16,11,.22) 60%,rgba(8,16,11,0) 100%),
    linear-gradient(to bottom,rgba(8,16,11,.55) 0%,rgba(8,16,11,.1) 16%,rgba(8,16,11,0) 34%,rgba(8,16,11,.12) 58%,rgba(8,16,11,.72) 88%,#0e1712 100%)}

/* the headline, ERA's way: one big word, the rest of the line in small
   capitals either side of it. It still reads straight across: Charleston
   HARDSCAPE & Landscape. */
.hero-stage .hero-in{position:absolute;left:0;right:0;top:0;height:var(--sh,100svh);min-height:560px;z-index:2}
.hero-title{position:absolute;left:0;right:0;top:34%;margin:0;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;gap:clamp(18px,2.6vw,48px);
  color:#f7f0e3;text-align:center;pointer-events:none;will-change:transform,opacity}
.ht-main{font:600 min(8.4vw,calc(var(--sh,100vh) * .155))/.92 var(--display);letter-spacing:.01em;text-transform:uppercase;
  display:inline-flex;text-shadow:0 2px 30px rgba(8,16,11,.35)}
.ht-main .c{display:inline-block;overflow:hidden;padding:0 .005em .06em}
.ht-main .c>i{display:inline-block;font-style:normal;transform:translateY(108%)}
.ht-l,.ht-r{font:600 clamp(12px,1.22vw,18px)/1 var(--display);letter-spacing:.34em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:16px;color:#f7f0e3;opacity:0;
  text-shadow:0 0 2px rgba(8,16,11,.9),0 1px 4px rgba(8,16,11,.85),0 2px 20px rgba(8,16,11,.7)}
.ht-l::after,.ht-r::before{content:"";display:block;width:clamp(28px,3.4vw,64px);height:1px;background:var(--gate-gold);
  transform:scaleX(0);transition:transform 1.2s cubic-bezier(.65,0,.3,1) .5s}
.ht-l::after{transform-origin:0 50%}
.ht-r::before{transform-origin:100% 50%}
.ht-l{transform:translateX(24px)}
.ht-r{transform:translateX(-24px)}
.hero-title.in .ht-main .c>i{transform:none;transition:transform 1.05s cubic-bezier(.215,.61,.355,1) var(--cd,0s)}
.hero-title.in .ht-l,.hero-title.in .ht-r{opacity:1;transform:none;
  transition:opacity 1.1s ease .55s,transform 1.4s cubic-bezier(.215,.61,.355,1) .55s}
.hero-title.in .ht-l::after,.hero-title.in .ht-r::before{transform:none}
/* the ERA line under the big word: a single gilt rule with a sunburst */
.hero-title::after{content:"";position:absolute;left:50%;top:calc(50% + min(4.9vw,calc(var(--sh,100vh) * .09)));width:22px;height:12px;
  transform:translateX(-50%);opacity:0;transition:opacity 1s ease 1.2s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 13' fill='none' stroke='%23cdb07a' stroke-width='1.1'%3E%3Cpath d='M12 12L1 12M12 12L2.5 6.5M12 12L6.5 2.5M12 12V1M12 12L17.5 2.5M12 12L21.5 6.5M12 12H23'/%3E%3C/svg%3E") center/contain no-repeat}
.hero-title.in::after{opacity:.9}

.hero-stage .hero-foot,.hero-stage .scroll-cue{opacity:0;transform:translateY(18px)}
.hero-stage .hero-foot.in,.hero-stage .scroll-cue.in{opacity:1;transform:none;
  transition:opacity .9s cubic-bezier(.215,.61,.355,1),transform .9s cubic-bezier(.215,.61,.355,1)}
.hero-stage .hero-foot.in{transition-delay:.35s}
.hero-stage .scroll-cue.in{transition-delay:.8s}
/* the bar stays out of the way until the headline has landed */
.gate-on .nav{opacity:0}
.nav.nav-in{opacity:1;transition:opacity .9s ease .4s}

/* ---------- sunrise --------------------------------------------------------
   Scrolling raises a warm bloom over the film as it goes. */
.hero-sun{position:absolute;left:0;right:0;top:0;height:var(--sh,100svh);z-index:1;pointer-events:none;opacity:0;
  background:radial-gradient(56% 46% at 50% 34%,rgba(255,236,200,.9) 0%,rgba(255,222,168,.42) 40%,rgba(255,214,150,0) 74%);
  transform-origin:50% 34%}
@media(max-width:760px){
  .hero-stage{--melt:calc(var(--sh,100svh) * .18)}
  .hero-title{flex-direction:column;gap:16px;top:36%}
  .ht-main{font-size:min(12.2vw,calc(var(--sh,100vh) * .08))}
  .ht-l,.ht-r{font-size:11px;letter-spacing:.34em;gap:12px}
  .ht-l::after,.ht-r::before{width:26px}
  .hero-title::after{display:none}
  .ht-l{transform:translateY(12px)}
  .ht-r{transform:translateY(-12px)}
}
@media(prefers-reduced-motion:reduce){
  .hero-grain{animation:none}
  .ht-main .c>i{transform:none}
  .ht-l,.ht-r,.hero-title::after,.hero-stage .hero-foot,.hero-stage .scroll-cue{opacity:1;transform:none}
  .ht-l::after,.ht-r::before{transform:none}
}


/* the room below starts close under the film, with the whole moss branch in view */
.hero-stage + main > .parlor{padding-top:clamp(48px,5vw,84px);overflow:visible;clip-path:inset(-420px 0 0 0)}
.hero-stage + main > .parlor .pl-oak{top:-10px}
@media(max-width:900px){ .hero-stage + main > .parlor{padding-top:150px} .hero-stage + main > .parlor .pl-oak{top:-150px;width:92vw;right:-30vw} }
/* on a phone the branch holds still (data-speed-phone) and hangs across the
   top of the plaster, both cut ends out past the screen's edges, the moss
   falling clear of the heading */
@media(max-width:560px){
  .hero-stage + main > .parlor{padding-top:266px}
  .hero-stage + main > .parlor .pl-oak{top:-34px;left:-9vw;right:auto;width:118vw;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
}

/* screen readers get the headline word whole; the rising letters are hidden from them */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* pause / play for the film (it loops, so it needs a way to stop) */
.hero-pause{position:absolute;right:clamp(14px,2.2vw,36px);bottom:calc(clamp(28px,calc(var(--sh,100vh) * .042),54px) + 104px);z-index:4;
  width:34px;height:34px;padding:0;cursor:pointer;background:rgba(8,16,11,.28);border:1px solid rgba(239,230,212,.45);
  color:#f3ecdd;display:grid;place-items:center;opacity:0;transition:opacity .6s ease .9s,background .3s ease;
  clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px)}
.hero-foot.in ~ .hero-pause,.hero-pause:focus-visible{opacity:1}
.hero-pause:hover{background:rgba(8,16,11,.5)}
.hero-pause:focus-visible{outline:2px solid #e2c992;outline-offset:3px}
.hero-pause i{width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.hero-pause.held i{width:0;height:0;border:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
@media(max-width:760px){ .hero-pause{bottom:auto;top:calc(64px + 14px);right:14px;width:30px;height:30px} }

/* ---------- the sunrise on the browser's own scroll timeline ----------------
   Where the browser can (Chrome, Edge, Safari 26 and so Chrome on iPhone), the
   film's push, the bloom, the headline's drift and fade and the foot's fade run
   as scroll-driven animations: tied to the scroll itself, off the main thread,
   so they never lag a frame behind the page on a busy moment or jump when a
   phone's toolbar comes and goes. gate.js draws the same thing by hand in the
   browsers that cannot. Distances match gate.js: p runs 0 to 1 over 95% of --sh (nav.js). */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-reel{animation:hero-reel both cubic-bezier(.45,0,.55,1);animation-timeline:scroll(root);animation-range:0 calc(var(--sh,100vh) * .95)}
    .hero-sun{animation:hero-sun both cubic-bezier(.45,0,.55,1);animation-timeline:scroll(root);animation-range:calc(var(--sh,100vh) * .038) calc(var(--sh,100vh) * .665)}
    .hero-title{animation:hero-title-fade both cubic-bezier(.45,0,.55,1),hero-title-drift both linear;
      animation-timeline:scroll(root),scroll(root);animation-range:0 calc(var(--sh,100vh) * .323),0 var(--sh,100vh)}
    .hero-stage .hero-foot.in>*{animation:hero-foot-fade both cubic-bezier(.45,0,.55,1);animation-timeline:scroll(root);animation-range:0 calc(var(--sh,100vh) * .228)}
  }
}
@keyframes hero-reel{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes hero-sun{from{opacity:0;transform:scale(.75)}to{opacity:.9;transform:scale(1.65)}}
@keyframes hero-title-fade{from{opacity:1}to{opacity:0}}
@keyframes hero-title-drift{from{transform:translateY(-50%)}to{transform:translateY(calc(-50% + var(--sh,100vh) * .5))}}
@keyframes hero-foot-fade{from{opacity:1}to{opacity:0}}