/* =====================================================================
   THE ESTATE: every inner page, in the house style. Pass 6.

   Art Deco Revival in a downtown Charleston house: each page opens on a
   FOYER, a deep green room with a gilt chamfered frame, a sunburst and an
   arched window holding a photograph on a stepped plinth; the facts are
   set under it as a numbered LEGEND; every section after it has a centred
   head under a numeral medallion and the sections alternate plaster and
   parchment, divided by a gilt rule with a fan at its centre; mid-page a
   LOGGIA of three arched photographs on green; the call to action is the
   green room with the telephone; the city is engraved over the foot.
   The markup comes from estate_build.py; the motion from estate.js.
   ===================================================================== */
:root{
  --ink-forest:#2c3a2b;--sage:#7d8b6a;--tan:#a38a66;--tan-soft:#c4ae8b;--plaster:#f1ebe0;
  --gilt:#d8bc88;--brass:#b08d4f;--band:#12231a;--band-2:#0f1d15;--cream:#efe7d6;--cream-dim:rgba(239,231,214,.76);
  /* a chamfered double frame, laid on as a border image so its corners keep their shape at any size */
  --frame-gilt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80' fill='none'%3E%3Cpath d='M14 .5H66L79.5 14V66L66 79.5H14L.5 66V14Z' stroke='%23d8bc88' stroke-opacity='.8'/%3E%3Cpath d='M16.07 5.5H63.93L74.5 16.07V63.93L63.93 74.5H16.07L5.5 63.93V16.07Z' stroke='%23d8bc88' stroke-opacity='.38'/%3E%3Cpath d='M7.2 7.2l2.3 2.3M72.8 7.2l-2.3 2.3M7.2 72.8l2.3-2.3M72.8 72.8l-2.3-2.3' stroke='%23d8bc88' stroke-opacity='.8'/%3E%3C/svg%3E");
  --frame-tan:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80' fill='none'%3E%3Cpath d='M14 .5H66L79.5 14V66L66 79.5H14L.5 66V14Z' stroke='%23a38a66' stroke-opacity='.75'/%3E%3Cpath d='M16.07 5.5H63.93L74.5 16.07V63.93L63.93 74.5H16.07L5.5 63.93V16.07Z' stroke='%23a38a66' stroke-opacity='.4'/%3E%3Cpath d='M7.2 7.2l2.3 2.3M72.8 7.2l-2.3 2.3M7.2 72.8l2.3-2.3M72.8 72.8l-2.3-2.3' stroke='%23a38a66' stroke-opacity='.75'/%3E%3C/svg%3E");
}
.foyer-frame,.loggia-frame{position:absolute;pointer-events:none;border:30px solid transparent;border-image:var(--frame-gilt) 30 / 30px stretch}

/* ---------- plaster, over the whole page ------------------------------ */
.page:has(.foyer){padding-top:0}
.page,.ty{position:relative;isolation:isolate;background:var(--surface)}
.page::before,.ty::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.36;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .29 0 0 0 0 .2 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1600' viewBox='0 0 1600 1600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0032' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .52 0 0 0 0 .36 1.3 0 0 0 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  background-size:260px 260px,1600px 1600px}
.page .fan{width:24px;height:13px;fill:none;stroke:currentColor;stroke-width:1.1;flex:none}
.page .eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--tan-text)}
.page .eyebrow::before{width:26px;height:1px;background:currentColor}

/* =====================================================================
   THE FOYER
   ===================================================================== */
.foyer{position:relative;isolation:isolate;overflow:hidden;background:var(--band);color:var(--cream);
  padding:calc(64px + clamp(64px,7vw,110px)) 0 clamp(80px,8vw,120px)}
.foyer::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .85 0 0 0 0 .7 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:260px 260px}
/* Deco reeding down the left of the room, very faint */
.foyer::after{content:"";position:absolute;left:0;top:0;bottom:0;width:32%;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(216,188,136,.07) 0 1px,transparent 1px 14px);
  -webkit-mask-image:linear-gradient(90deg,#000,transparent);mask-image:linear-gradient(90deg,#000,transparent)}
.foyer-frame{inset:calc(64px + 18px) clamp(14px,1.6vw,24px) clamp(14px,1.6vw,24px)}
.foyer-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(40px,6vw,100px);align-items:center}
.foyer .eyebrow{color:var(--gilt)}
.foyer .intro-h{font-family:var(--display);font-weight:600;font-size:clamp(46px,5.4vw,84px);line-height:1.02;
  letter-spacing:-.025em;color:var(--cream);margin:24px 0 28px;max-width:13ch;text-wrap:balance}
.foyer-words p{font-size:17.5px;line-height:1.68;color:var(--cream-dim);max-width:52ch;margin:0 0 16px}
.foyer-words p:first-child{color:var(--cream);font-size:18.5px}
.foyer-words p.second{font-size:15.5px}
.foyer-words p a{color:var(--cream);border-bottom-color:rgba(216,188,136,.5)}
.foyer .btns{margin-top:30px}
.foyer .btn-on-dark{border-color:rgba(216,188,136,.55)}

/* the arched window, on its plinth, under its keystone, before the sun */
.foyer-arch{position:relative;margin:0;justify-self:center;width:min(100%,430px);padding-top:26px}
.arch-sun{position:absolute;left:50%;top:44%;width:190%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(216,188,136,.2) 0deg .7deg,transparent .7deg 7.5deg);
  -webkit-mask-image:radial-gradient(circle,#000 20%,rgba(0,0,0,.5) 40%,transparent 64%);
          mask-image:radial-gradient(circle,#000 20%,rgba(0,0,0,.5) 40%,transparent 64%);
  animation:sunturn 220s linear infinite}
@keyframes sunturn{to{transform:translate(-50%,-50%) rotate(360deg)}}
.arch-win{position:relative;aspect-ratio:3/4.1;border-radius:999px 999px 0 0;overflow:hidden;background:var(--band-2);
  box-shadow:0 0 0 1px rgba(216,188,136,.95),0 0 0 11px var(--band),0 0 0 12px rgba(216,188,136,.5),0 40px 70px -30px rgba(0,0,0,.6)}
.arch-win img{position:absolute;left:0;top:-9%;width:100%;height:118%;object-fit:cover;display:block;
  transform:translateY(var(--ay,0px)) scale(1.1);transition:transform 2.6s cubic-bezier(.2,.7,.2,1)}
.foyer-arch.in .arch-win img{transform:translateY(var(--ay,0px)) scale(1)}
.arch-key{position:absolute;left:50%;top:-6px;transform:translateX(-50%);color:var(--gilt);z-index:2;
  width:48px;height:28px;display:grid;place-items:center;background:var(--band)}
.arch-key .fan{width:34px;height:18px;stroke-width:1}
.arch-plinth{display:block;height:20px;margin:22px -22px 0;
  background:
    linear-gradient(rgba(216,188,136,.85),rgba(216,188,136,.85)) 50% 0/100% 1px no-repeat,
    linear-gradient(rgba(216,188,136,.55),rgba(216,188,136,.55)) 50% 7px/88% 1px no-repeat,
    linear-gradient(rgba(216,188,136,.35),rgba(216,188,136,.35)) 50% 14px/74% 1px no-repeat}
.foyer-arch figcaption,.lg-item figcaption{display:flex;justify-content:center;align-items:baseline;gap:12px;margin-top:12px;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(239,231,214,.55)}
.foyer-arch figcaption span,.lg-item figcaption span{font-family:var(--display);font-size:14px;letter-spacing:.04em;text-transform:none;color:var(--gilt)}
.foyer-arch figcaption em,.lg-item figcaption em{font-family:var(--display);font-style:italic;font-weight:500;font-size:14px;letter-spacing:0;text-transform:none;color:var(--cream-dim)}

/* =====================================================================
   THE LEGEND: the page's facts, numbered, on parchment
   ===================================================================== */
.legend-strip{position:relative;background:rgba(214,196,160,.22);padding:clamp(40px,4.4vw,60px) 0}
.legend-list{counter-reset:fact;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin:0;padding:0;gap:0}
.legend-list>div{counter-increment:fact;position:relative;padding:4px clamp(16px,2vw,30px) 4px;display:grid;
  grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:baseline}
.legend-list>div+div{border-left:1px solid rgba(163,138,102,.4)}
.legend-list>div::before{content:counter(fact,upper-roman);grid-row:1 / span 2;font-family:var(--display);font-size:26px;
  font-weight:600;color:var(--tan-text);line-height:1;min-width:30px}
.legend-list dt{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--outline);margin:0 0 6px}
.legend-list dd{margin:0;font-family:var(--display);font-size:16.5px;line-height:1.4;color:var(--ink-forest)}
.legend-list dd a{color:var(--ink-forest)}

/* =====================================================================
   THE ROOMS OF THE PAGE: a centred head under a medallion, alternating grounds
   ===================================================================== */
.page .sec{position:relative;padding-top:clamp(96px,9vw,140px);padding-bottom:clamp(90px,8.5vw,130px)}
.page .sec.alt::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:rgba(214,196,160,.2)}
.sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin:0 auto clamp(40px,4vw,60px);max-width:760px}
.sec-no{display:grid;place-items:center;width:52px;height:52px;margin-bottom:22px;font-family:var(--display);font-size:17px;font-weight:600;
  color:var(--tan-text);letter-spacing:.04em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52' fill='none' stroke='%23a38a66'%3E%3Cpath d='M16 .5H36L51.5 16V36L36 51.5H16L.5 36V16Z' stroke-opacity='.8'/%3E%3Cpath d='M17.8 4.5H34.2L47.5 17.8V34.2L34.2 47.5H17.8L4.5 34.2V17.8Z' stroke-opacity='.35'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.sec-head .eyebrow{justify-content:center;margin:0}
.sec-head .eyebrow::after{content:"";width:26px;height:1px;background:currentColor}
.sec-head .headline-md{font-size:clamp(30px,3.2vw,46px);line-height:1.12;letter-spacing:-.018em;color:var(--ink-forest);
  margin:18px auto 0!important;max-width:24ch!important;text-wrap:balance}
.sec-head .lede{margin:22px auto 0;max-width:62ch;color:var(--on-surface-variant)}
.sec-no-in{font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--tan-text);margin-right:4px}
.page .headline-md{color:var(--ink-forest)}

/* between rooms: a gilt rule with a fan medallion, straddling the join */
.page hr.rule{border:0;height:0;margin:0;position:relative;z-index:3;overflow:visible;max-width:none;background:none;opacity:1}
.page hr.rule::before{content:"";position:absolute;left:50%;top:0;width:min(360px,60vw);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(163,138,102,.6) 22%,rgba(163,138,102,.6) calc(50% - 30px),transparent calc(50% - 30px),transparent calc(50% + 30px),rgba(163,138,102,.6) calc(50% + 30px),rgba(163,138,102,.6) 78%,transparent)}
.page hr.rule::after{content:"";position:absolute;left:50%;top:0;width:40px;height:40px;transform:translate(-50%,-50%) rotate(45deg);
  background:#f1ebdf url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='rotate(-45 20 20)' fill='none' stroke='%23a38a66' stroke-width='1.1'%3E%3Cpath d='M20 25L11 25M20 25L12.3 20.5M20 25L15.5 17M20 25V15M20 25L24.5 17M20 25L27.7 20.5M20 25H29'/%3E%3C/g%3E%3C/svg%3E") center/100% 100%;
  box-shadow:inset 0 0 0 1px rgba(163,138,102,.7),inset 0 0 0 5px #f1ebdf,inset 0 0 0 6px rgba(163,138,102,.3)}
.loggia + hr.rule,.band + hr.rule{display:none}

/* ---------- the contents ---------------------------------------------- */
.page .intro-copy p{color:var(--on-surface-variant);font-size:16.5px;line-height:1.72}
.page .intro-copy p:first-child{color:var(--on-surface)}
.page .intro-copy b,.page .intro-copy strong{font-family:var(--display);font-weight:600;color:var(--ink-forest);font-size:1.06em}
.page .facts{counter-reset:fact}
.page .facts>div{counter-increment:fact}
.page .facts dt{display:flex;align-items:baseline;gap:12px;color:var(--outline)}
.page .facts dt::before{content:counter(fact,upper-roman);font-family:var(--display);font-size:14px;font-weight:600;
  letter-spacing:.04em;text-transform:none;color:var(--tan-text);min-width:22px}
.page .facts dd{padding-left:34px;font-family:var(--display);font-size:17px}
.page hr.hair{border:0;height:1px;background:rgba(163,138,102,.35)}
.page .spec{border-top:1px solid rgba(163,138,102,.4)}
.page .spec li{border-bottom-color:rgba(163,138,102,.28)}
.page .spec li::before{content:"";position:absolute;left:2px;top:23px;width:7px;height:7px;border:1px solid var(--tan);
  transform:rotate(45deg);background:transparent}
/* the price note: a framed cartouche */
.page .price-note{position:relative;border:0;margin:0;padding:44px 34px 40px;text-align:center;background:#f9f5ec;align-self:start;
  box-shadow:0 30px 50px -40px rgba(40,34,22,.5)}
.page .price-note::before{content:"";position:absolute;inset:0;pointer-events:none;border:30px solid transparent;border-image:var(--frame-tan) 30 / 30px stretch}
.page .price-note::after{content:"";position:absolute;left:50%;top:0;width:34px;height:18px;transform:translate(-50%,-50%);background:#f9f5ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 13' fill='none' stroke='%23a38a66' 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/24px 13px no-repeat}
.page .price-note .big{display:block;font-family:var(--display);font-size:clamp(28px,2.6vw,36px);color:var(--ink-forest);margin-bottom:12px}
.page .price-note p{margin:0 auto;max-width:34ch}
/* the price table: a framed plate */
.page .ptable{position:relative;background:#f9f5ec;border:0;padding:24px clamp(22px,3vw,48px) 30px;margin-top:0;
  box-shadow:0 34px 60px -46px rgba(40,34,22,.6)}
.page .ptable::before{content:"";position:absolute;inset:0;pointer-events:none;border:30px solid transparent;border-image:var(--frame-tan) 30 / 30px stretch}
.page .prow{border-bottom-color:rgba(163,138,102,.28);transition:background .4s ease,padding .4s ease}
.page .prow:hover{background:rgba(255,255,255,.6)}
.page .pname{font-family:var(--display);font-weight:600;color:var(--ink-forest)}
.page .pprice{font-family:var(--display);font-style:italic;font-weight:500;color:var(--tan-text);letter-spacing:0;text-transform:none}
.page .pfoot{font-family:var(--display);font-style:italic;color:var(--on-surface-variant);text-align:center;max-width:64ch;margin:24px auto 0}
/* straight answers */
.page .qa{border-top:1px solid rgba(163,138,102,.4);margin-top:0}
.page .qa-item{border-bottom-color:rgba(163,138,102,.28)}
.page .qa-item h3{position:relative;color:var(--ink-forest);padding-left:24px}
.page .qa-item h3::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border:1px solid var(--tan);transform:rotate(45deg);transition:background .35s ease}
.page .qa-item:hover h3::before{background:var(--tan)}
/* the index of other services */
.page .also{border-top:1px solid rgba(163,138,102,.4);margin-top:0}
.page .also a{border-bottom-color:rgba(163,138,102,.28);transition:padding .45s cubic-bezier(.2,.7,.2,1),background .4s ease}
.page .also a:hover{padding-left:14px;background:rgba(255,255,255,.45)}
.page .also .n{font-family:var(--display);font-size:15px;letter-spacing:.04em;color:var(--tan-text)}
.page .also .t{color:var(--ink-forest)}
.page .also .d{font-family:var(--display);font-style:italic;color:var(--tan-text)}
/* the service groups on the hub */
.page .sx{border-top:1px solid rgba(163,138,102,.4)}
.page .sx-h{color:var(--tan-text)}
.page .sx a{border-bottom-color:rgba(163,138,102,.28)}
/* a section that was waiting on a photograph now has one, beside its words */
.page .split--ph{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)!important;align-items:start}
.page .split-fig{margin:0;position:sticky;top:110px}
.page .split-fig .lg-win{aspect-ratio:3/4.2;box-shadow:0 0 0 1px rgba(163,138,102,.7),0 0 0 9px #f4efe5,0 0 0 10px rgba(163,138,102,.35),0 30px 50px -34px rgba(40,34,22,.55)}
.page .split-fig figcaption{display:flex;justify-content:center;gap:10px;margin-top:16px;font-family:var(--display);font-style:italic;font-size:14px;color:var(--on-surface-variant)}
.page .split-fig figcaption span{font-style:normal;color:var(--tan-text)}
@media(max-width:900px){ .page .split--ph{grid-template-columns:minmax(0,1fr)!important} .page .split-fig{position:static;max-width:340px;margin:30px auto 0} }
/* pictures in the body: a gilt keyline and a mat */
.page .split > figure,.page .job .ba{position:relative;box-shadow:0 0 0 1px rgba(163,138,102,.55),0 0 0 8px rgba(249,245,236,.9),0 0 0 9px rgba(163,138,102,.3),0 30px 50px -36px rgba(40,34,22,.6)}
.page .split > figure:hover img{filter:none;transform:scale(1.04)}

/* =====================================================================
   THE LOGGIA: three arched photographs on green
   ===================================================================== */
.loggia{position:relative;isolation:isolate;overflow:hidden;background:var(--band);color:var(--cream);padding:clamp(90px,8vw,130px) 0 clamp(80px,7vw,110px);text-align:center}
.loggia::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 70% at 50% 110%,rgba(216,188,136,.14),transparent 70%),
    repeating-linear-gradient(90deg,rgba(216,188,136,.05) 0 1px,transparent 1px 16px)}
.loggia-frame{inset:clamp(14px,1.6vw,24px)}
.loggia .eyebrow{color:var(--gilt);justify-content:center}
.loggia .eyebrow::after{content:"";width:26px;height:1px;background:currentColor}
.lg-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);margin-top:clamp(48px,5vw,70px);padding:0 clamp(0px,2vw,30px)}
.lg-item{margin:0}
.lg-item:nth-child(2){transform:translateY(-26px)}
.lg-win{position:relative;aspect-ratio:3/4;border-radius:999px 999px 0 0;overflow:hidden;background:var(--band-2);
  box-shadow:0 0 0 1px rgba(216,188,136,.9),0 0 0 9px var(--band),0 0 0 10px rgba(216,188,136,.42),0 30px 50px -30px rgba(0,0,0,.6)}
.lg-win img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.lg-item:hover .lg-win img{transform:scale(1.06)}
.lg-item figcaption{flex-direction:column;align-items:center;gap:6px;margin-top:22px}
.lg-item figcaption em{font-size:14.5px;line-height:1.45;max-width:30ch}

/* =====================================================================
   THE CALL TO ACTION: the green room, with its telephone
   ===================================================================== */
.band{position:relative;isolation:isolate;overflow:hidden;background:var(--band);color:var(--cream)}
.band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .85 0 0 0 0 .7 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:260px 260px}
.band::after{content:"";position:absolute;inset:clamp(14px,1.6vw,24px);pointer-events:none;border:30px solid transparent;border-image:var(--frame-gilt) 30 / 30px stretch}
.band .eyebrow{color:var(--gilt)}
.band .eyebrow::before{background:currentColor}
.band .display-lg{color:var(--cream);font-weight:600}
.band .lede{color:var(--cream-dim)}
.band .btn-primary{background:var(--secondary-container);color:var(--primary);border:1px solid var(--secondary-container)}
.band .btn-on-dark{border-color:rgba(216,188,136,.55)}
.band .wrap.has-phone{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);column-gap:clamp(30px,5vw,80px);align-items:center}
.band .wrap.has-phone>*:not(.band-phone){grid-column:1}
.band-phone{grid-column:2;grid-row:1 / span 6;position:relative;justify-self:center;width:min(100%,340px);aspect-ratio:1;display:grid;place-items:center}
.burst{position:absolute;inset:-12%;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(216,188,136,.22) 0deg .8deg,transparent .8deg 6deg);
  -webkit-mask-image:radial-gradient(circle,#000 18%,rgba(0,0,0,.6) 42%,transparent 70%);
          mask-image:radial-gradient(circle,#000 18%,rgba(0,0,0,.6) 42%,transparent 70%);
  animation:burst 160s linear infinite}
.burst::after{content:"";position:absolute;inset:26%;border-radius:50%;background:radial-gradient(circle,rgba(216,188,136,.2),rgba(216,188,136,0) 70%)}
@keyframes burst{to{transform:rotate(360deg)}}
.phone{position:relative;display:block;width:58%;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.phone img{width:100%;height:auto;display:block;transform-origin:50% 100%;filter:drop-shadow(0 22px 24px rgba(0,0,0,.45))}
.phone:hover{transform:translateY(-6px)}
.phone:focus-visible{outline:2px solid var(--gilt);outline-offset:8px}
.phone.ringing img{animation:ring 1.1s cubic-bezier(.36,.07,.19,.97) both}
@keyframes ring{0%,100%{transform:none}10%{transform:rotate(-2.4deg)}20%{transform:rotate(2.4deg)}30%{transform:rotate(-2deg)}
  40%{transform:rotate(2deg)}50%{transform:rotate(-1.4deg)}60%{transform:rotate(1.4deg)}70%{transform:rotate(-.6deg)}80%{transform:rotate(.6deg)}}
.ring{position:absolute;left:var(--rx,62%);top:var(--ry,20%);width:80px;height:80px;margin:-40px 0 0 -40px;border-radius:50%;
  border:1px solid var(--gilt);opacity:0;pointer-events:none}
.phone.ringing .r1{animation:ringout 1.3s ease-out}
.phone.ringing .r2{animation:ringout 1.3s ease-out .35s}
@keyframes ringout{0%{opacity:.8;transform:scale(.4)}100%{opacity:0;transform:scale(1.7)}}

/* ---------- a painted plant comes in from the edge of the screen ---------- */
.edge-plant{position:absolute;z-index:4;pointer-events:none;top:var(--pt,-120px);right:calc(50% - 50vw - var(--pr,60px));
  width:var(--pw,300px);height:auto;transform-origin:var(--po,100% 20%);animation:plantsway 10s ease-in-out infinite alternate;
  filter:drop-shadow(0 16px 20px rgba(20,32,22,.22))}
.edge-plant.left{right:auto;left:calc(50% - 50vw - var(--pr,60px));--po:0% 20%}
@keyframes plantsway{from{transform:rotate(-1.2deg) translateY(var(--py,0px))}to{transform:rotate(1.1deg) translateY(var(--py,0px))}}
.legend-strip>.wrap{position:relative;z-index:1}

/* ---------- the thank-you page: a quiet green room, the city at its foot -- */
main.ty{background:var(--band);color:var(--cream);overflow:hidden}
main.ty::before{opacity:.12;filter:invert(1)}
main.ty .eyebrow{color:var(--gilt)}
main.ty .eyebrow::before{background:var(--gilt)}
main.ty h1{color:var(--cream)}
main.ty p{color:var(--cream-dim)}
.ty-in{position:relative;z-index:1}
.ty-sky{position:absolute;left:0;right:0;bottom:0;width:100%;height:min(calc(var(--sh,100vh) * .46),41vw);object-fit:cover;object-position:50% 100%;opacity:.34;mix-blend-mode:screen;pointer-events:none;
  -webkit-mask-image:linear-gradient(transparent,#000 60%);mask-image:linear-gradient(transparent,#000 60%)}
.ty .edge-plant{top:-60px;right:-40px;--pw:240px;z-index:0}

/* ---------- the footer: the city from the harbour, engraved, at dusk ----- */
footer.gr-foot{background:#0f1d15;color:rgba(239,231,214,.66);padding:0 0 40px;position:relative;overflow:hidden}
.skyline{position:relative;width:100%;max-width:1680px;margin:0 auto;padding-top:clamp(40px,4vw,70px)}
.sky-in{position:relative}
.skyline img{display:block;width:100%;height:auto;opacity:.62;mix-blend-mode:screen}
.clock{position:absolute;height:auto;overflow:visible;transform:translate(-50%,-50%)}
.clock circle{fill:#0f1d15;stroke:none}
.clock line{stroke:rgba(239,231,214,.72);stroke-width:1.4;stroke-linecap:round;transform-origin:0 0;vector-effect:non-scaling-stroke}
footer.gr-foot .foot-grid{padding-top:clamp(40px,4vw,64px);border-top:1px solid rgba(216,188,136,.22)}
footer.gr-foot .mark{color:var(--cream)}
footer.gr-foot p{color:rgba(239,231,214,.6)!important}
footer.gr-foot h3,footer.gr-foot h4{color:var(--gilt);opacity:.8}
footer.gr-foot a{color:rgba(239,231,214,.66)}
footer.gr-foot a:hover{color:var(--gilt)}
.foot-base{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-top:48px;padding-top:24px;border-top:1px solid rgba(216,188,136,.14)}
.foot-time{font-size:10px;color:rgba(239,231,214,.45)}
.foot-time b{font-weight:600;color:rgba(239,231,214,.7);margin-left:6px}
.motto{position:relative;display:inline-grid;font-family:var(--display);cursor:help;outline:none}
.motto>span,.motto::after{grid-area:1/1;transition:opacity .5s ease,transform .5s ease}
.motto::after{content:attr(data-en);opacity:0;transform:translateY(6px);white-space:nowrap}
.motto:hover>span,.motto:focus>span{opacity:0;transform:translateY(-6px)}
.motto:hover::after,.motto:focus::after{opacity:1;transform:none}
.foot-motto{font-style:italic;font-size:16px;font-weight:500;color:rgba(239,231,214,.55)}

/* ---------- tablets and phones ---------------------------------------- */
@media(max-width:900px){
  .foyer{padding-top:calc(64px + 56px)}
  .foyer-in{grid-template-columns:minmax(0,1fr)}
  .foyer-arch{width:min(76%,330px);margin-top:10px}
  .foyer .intro-h{max-width:none}
  .band .wrap.has-phone{grid-template-columns:minmax(0,1fr)}
  .band-phone{grid-column:1;grid-row:auto;width:min(70%,260px);margin-top:36px}
  .lg-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:26px;padding:10px 12% 30px;margin:36px -24px 0;scrollbar-width:none}
  .lg-row::-webkit-scrollbar{display:none}
  .lg-item{flex:0 0 76%;scroll-snap-align:center}
  .lg-item:nth-child(2){transform:none}
  .legend-list{grid-template-columns:1fr 1fr;row-gap:22px}
  .legend-list>div:nth-child(odd){border-left:0}
  .foot-base{flex-direction:column;gap:8px}
}
@media(max-width:700px){
  .foyer-frame,.loggia-frame,.band::after{inset:10px;border-width:22px;border-image-width:22px}
  .foyer .intro-h{font-size:40px}
  .foyer-words p:first-child{font-size:17px}
  .legend-list{grid-template-columns:1fr}
  .legend-list>div+div{border-left:0;border-top:1px solid rgba(163,138,102,.3);padding-top:18px}
  .sec-head .headline-md{font-size:28px}
  .page .price-note{padding:40px 22px 34px}
  .page .facts dd{padding-left:0}
  .edge-plant{width:calc(var(--pw,300px) * .45);--pr:30px}
  .sky-in{width:170%;margin-left:-35%}
}
@media (prefers-reduced-motion: reduce){
  .edge-plant,.burst,.arch-sun{animation:none}
  .arch-win img{transform:none!important;transition:none}
  .phone.ringing img,.phone.ringing .ring{animation:none}
}
.band .display-lg{margin-bottom:18px!important;font-size:clamp(38px,4.4vw,60px);line-height:1.06}
.band .lede{margin-bottom:28px}

/* pass 7: deeper floors and ceilings where a green room meets the plaster, so they dissolve (seams.js) */
.foyer{padding-bottom:clamp(120px,12vw,190px)}
.loggia{padding-top:clamp(130px,13vw,200px);padding-bottom:clamp(120px,12vw,190px)}
.band{padding-top:clamp(130px,13vw,200px)!important;padding-bottom:clamp(130px,13vw,200px)!important}
.legend-strip{padding-top:clamp(56px,6vw,90px);padding-bottom:clamp(56px,6vw,90px)}

/* ---------- the footer map: the area served, in the house colours ---------- */
.foot-map{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:center;
  margin-top:clamp(40px,4vw,60px);padding-top:clamp(32px,3vw,44px);border-top:1px solid rgba(216,188,136,.14)}
.fm-words h3{margin:0 0 14px;color:var(--gilt,#d8bc88);opacity:.8}
.fm-words p{margin:0 0 18px;max-width:40ch;font-size:15px;line-height:1.6;color:rgba(239,231,214,.6)}
.fm-link{font-family:var(--display);font-style:italic;font-size:16px;color:rgba(239,231,214,.85)!important;border-bottom:1px solid rgba(216,188,136,.45)}
.fm-link:hover{color:var(--gilt,#d8bc88)!important}
.fm-map{position:relative;height:clamp(200px,20vw,260px);background:#1b2a20;
  box-shadow:0 0 0 1px rgba(216,188,136,.5),0 0 0 7px #0f1d15,0 0 0 8px rgba(216,188,136,.25)}
.fm-map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.55) sepia(.3) contrast(.92) brightness(.92)}
@media(max-width:800px){ .foot-map{grid-template-columns:1fr} }