/* =====================================================================
   THE GROUNDS: redesign pass 5, the rest of the house.

   After the garden room, the rooms, the work and the reviews, the page
   walks on through the house: a tariff plate with a surveyor's tape run
   out across it, three arched niches with the sun crossing them, a garden
   muse for the straight answers, a green room with a gilt sunburst and a
   telephone that rings, an old chart of the Lowcountry, and a letter to
   seal. The footer is the city itself, engraved, with St. Michael's clock
   keeping Charleston time. Motion is slow and small, and everything stops
   for anyone who asked for less.
   ===================================================================== */
:root{--gilt:#d8bc88;--brass:#b08d4f;--band:#12231a;--cream:#efe7d6;--cream-dim:rgba(239,231,214,.74)}

/* shared: the heading, the lede, the plate caption */
.gr-h{font-family:var(--display);font-weight:600;font-size:clamp(36px,4.3vw,64px);line-height:1.04;
  letter-spacing:-.022em;color:var(--ink-forest);margin:22px 0 24px;max-width:17ch;text-wrap:balance}
.gr-h span{color:var(--tan-text)}
.gr-lede{font-size:17px;line-height:1.65;color:var(--on-surface-variant);max-width:48ch;margin:0 0 22px}
.gr-aside{font-size:15px;line-height:1.6;color:var(--on-surface-variant);margin:0}
.gr-aside .inline-link{white-space:normal}
[class^="gr-"] .eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--tan-text);margin:0}
[class^="gr-"] .eyebrow::before{background:currentColor;width:26px;height:1px}
[class^="gr-"] .fan{width:24px;height:13px;fill:none;stroke:currentColor;stroke-width:1.1}
.gr-cap{display:flex;align-items:baseline;gap:14px;margin-top:14px;font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--outline)}
.gr-cap span{white-space:nowrap;font-family:var(--display);font-size:14px;letter-spacing:.04em;text-transform:none;color:var(--tan-text)}
.gr-cap em{font-family:var(--display);font-style:italic;font-weight:500;font-size:14px;letter-spacing:0;text-transform:none;color:var(--on-surface-variant)}
.gr-price,.gr-how,.gr-ask,.gr-promise,.gr-map,.gr-quote{position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(100px,10vw,150px) 0}

/* =====================================================================
   HOW WE PRICE IT: a tariff plate, with the tape run out across it
   ===================================================================== */
.gr-price{background:var(--surface)}
.gp-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,7vw,120px);align-items:end}
.gp-fig{margin:0;justify-self:end;width:min(100%,380px)}
/* a stepped Deco corner, the same cut as the rooms' pictures */
.gp-frame{position:relative;aspect-ratio:3/4;background:var(--surface-container);
  clip-path:polygon(0 14px,7px 14px,7px 7px,14px 7px,14px 0,calc(100% - 14px) 0,calc(100% - 14px) 7px,calc(100% - 7px) 7px,calc(100% - 7px) 14px,100% 14px,100% calc(100% - 14px),calc(100% - 7px) calc(100% - 14px),calc(100% - 7px) calc(100% - 7px),calc(100% - 14px) calc(100% - 7px),calc(100% - 14px) 100%,14px 100%,14px calc(100% - 7px),7px calc(100% - 7px),7px calc(100% - 14px),0 calc(100% - 14px))}
.gp-frame img{width:100%;height:100%;object-fit:cover;display:block}

.tariff{position:relative;margin-top:clamp(84px,8vw,120px);background:#f9f5ec;
  border:1px solid var(--outline-variant);outline:1px solid rgba(163,138,102,.4);outline-offset:-10px;
  padding:clamp(60px,6vw,84px) clamp(22px,4vw,60px) clamp(40px,4vw,56px);
  box-shadow:0 34px 60px -44px rgba(40,34,22,.55)}
/* small Deco brackets in the four corners of the plate */
.tariff::after{content:"";position:absolute;inset:18px;pointer-events:none;
  background:
    linear-gradient(var(--tan),var(--tan)) 0 0/22px 1px no-repeat,linear-gradient(var(--tan),var(--tan)) 0 0/1px 22px no-repeat,
    linear-gradient(var(--tan),var(--tan)) 100% 0/22px 1px no-repeat,linear-gradient(var(--tan),var(--tan)) 100% 0/1px 22px no-repeat,
    linear-gradient(var(--tan),var(--tan)) 0 100%/22px 1px no-repeat,linear-gradient(var(--tan),var(--tan)) 0 100%/1px 22px no-repeat,
    linear-gradient(var(--tan),var(--tan)) 100% 100%/22px 1px no-repeat,linear-gradient(var(--tan),var(--tan)) 100% 100%/1px 22px no-repeat;
  opacity:.7}
/* the surveyor's tape: the reel sits on the plate's corner and its tape runs out
   along the plate's head. The painting was turned so its stub of tape runs level:
   the stub's centre is 69.8% down the picture and it is 6.6% of its width thick. */
.tariff-top{--rw:clamp(104px,10vw,150px);position:absolute;left:clamp(-34px,-2.2vw,-12px);right:clamp(22px,4vw,60px);
  top:calc(var(--rw) * -.3777);height:calc(var(--rw) * .541);pointer-events:none;z-index:2;--tape:0}
.reel{position:absolute;left:0;top:0;width:var(--rw);padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;z-index:2}
.reel img{width:100%;height:auto;display:block;filter:drop-shadow(0 8px 10px rgba(40,34,22,.25))}
.tape{position:absolute;left:calc(var(--rw) - 4px);top:calc(var(--rw) * .3447);height:calc(var(--rw) * .066);
  width:calc(var(--tape) * (100% - var(--rw) + 4px));
  background:
    repeating-linear-gradient(90deg,rgba(70,56,32,.6) 0 1px,transparent 1px 48px) 0 0/100% 58% no-repeat,
    repeating-linear-gradient(90deg,rgba(70,56,32,.38) 0 1px,transparent 1px 12px) 0 0/100% 32% no-repeat,
    linear-gradient(#f1e8d1,#e3d6b8);
  border-top:1px solid rgba(120,98,60,.3);border-bottom:1px solid rgba(120,98,60,.42);
  box-shadow:0 3px 6px -2px rgba(40,34,22,.28)}
.tape-hook{position:absolute;right:-5px;top:-35%;width:6px;height:170%;
  background:linear-gradient(90deg,#8a6b35,#d9bd7c 45%,#9c7a3f);box-shadow:1px 1px 2px rgba(40,34,22,.35)}

.tariff-title{text-align:center;color:var(--tan-text);margin:0 0 30px;font-size:11px}
.tariff-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--outline-variant)}
.tariff-list li{position:relative;padding:28px clamp(18px,2.2vw,30px) 30px;border-bottom:1px solid var(--outline-variant);
  transition:background .4s ease}
.tariff-list li:not(:nth-child(3n+1)){border-left:1px solid var(--outline-variant)}
.tariff-list li:hover{background:rgba(255,255,255,.55)}
.tn{display:block;font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.06em;color:var(--tan-text);margin-bottom:10px}
.tariff-list h3{position:relative;display:inline-block;font-family:var(--display);font-size:clamp(20px,1.8vw,24px);font-weight:600;
  line-height:1.2;color:var(--ink-forest);margin:0 0 6px}
/* hover: a hairline is measured out under the name */
.tariff-list h3::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--tan);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tariff-list li:hover h3::after{transform:none}
.td{font-family:var(--display);font-style:italic;font-size:16px;line-height:1.4;color:var(--tan-text);margin:0 0 12px}
.tx{font-size:14.5px;line-height:1.62;color:var(--on-surface-variant);margin:0}
.tariff-foot{max-width:62ch;margin:36px auto 0;text-align:center;font-family:var(--display);font-style:italic;
  font-size:17px;line-height:1.6;color:var(--on-surface-variant)}

/* =====================================================================
   HOW IT WORKS: three arched niches, and the sun crossing over them
   ===================================================================== */
.gr-how{background:linear-gradient(#f6f1e8,var(--surface) 60%)}
.gh-head{text-align:center}
.gh-head .gr-h{margin-left:auto;margin-right:auto;max-width:20ch}
.colonnade{position:relative;margin-top:clamp(40px,5vw,70px)}
.sun-path{position:absolute;left:4%;right:4%;top:0;width:92%;height:110px;overflow:visible;pointer-events:none}
.sun-path path{fill:none;stroke:var(--tan);stroke-width:1;stroke-dasharray:.004 .01;opacity:.55;vector-effect:non-scaling-stroke}
.sun{position:absolute;left:0;top:0;width:52px;height:52px;margin:-26px 0 0 -26px;pointer-events:none;z-index:3;
  transform:translate(var(--sx,0px),var(--sy,90px));opacity:var(--so,0);transition:opacity .6s ease}
.sun svg{width:100%;height:100%;overflow:visible}
.sun circle{fill:#d9b35e;filter:drop-shadow(0 0 8px rgba(233,195,90,.75))}
.sun .rays path{stroke:#c9a24a;stroke-width:1.4;stroke-linecap:round;fill:none}
.sun .rays{transform-origin:0 0;animation:sunturn 40s linear infinite}
@keyframes sunturn{to{transform:rotate(360deg)}}
.niches{list-style:none;margin:0;padding:120px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,4vw,64px)}
.niche-step{text-align:center}
/* an arched niche in the wall, lit from inside, with a keystone */
.arch{position:relative;aspect-ratio:4/5;border-radius:999px 999px 0 0;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 100%,#fbf7ef 0%,#efe6d4 55%,#e4d8c1 100%);
  box-shadow:inset 0 0 0 1px rgba(163,138,102,.45),inset 0 22px 40px -24px rgba(90,70,40,.35);
  display:flex;align-items:flex-end;justify-content:center}
.arch::before{content:"";position:absolute;inset:10px 10px 0;border-radius:999px 999px 0 0;
  border:1px solid rgba(163,138,102,.35);border-bottom:0;pointer-events:none}
.arch::after{content:"";position:absolute;left:50%;top:0;width:16px;height:12px;margin-left:-8px;
  background:linear-gradient(#cdb58c,#a38a66);clip-path:polygon(0 0,100% 0,78% 100%,22% 100%)}
.arch img{position:relative;width:84%;height:auto;max-height:86%;object-fit:contain;display:block;margin-bottom:6%;
  transform:translateY(24px);opacity:0;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),opacity 1s ease;
  filter:drop-shadow(0 12px 14px rgba(60,48,28,.2))}
.niche-step.in .arch img{transform:none;opacity:1;transition-delay:.25s}
.sn{display:block;margin:26px 0 8px;font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.06em;color:var(--tan-text)}
.niche-step h3{font-family:var(--display);font-size:clamp(22px,2vw,27px);font-weight:600;color:var(--ink-forest);margin:0 0 12px}
.niche-step p{font-size:15.5px;line-height:1.62;color:var(--on-surface-variant);margin:0 auto;max-width:34ch}

/* =====================================================================
   STRAIGHT ANSWERS: five questions, a muse reading over them
   ===================================================================== */
.gr-ask{background:var(--surface)}
.ga-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,110px);align-items:start}
.ga-in{align-items:stretch}
.ga-head{display:flex;flex-direction:column;align-items:flex-start}
/* the muse stands at the foot of the column, on the ground of the section */
.muse{display:block;margin:auto 0 calc(-1 * clamp(100px,10vw,150px)) clamp(-30px,-2vw,0px);padding-top:36px;
  height:clamp(340px,31vw,470px);width:auto;pointer-events:none;
  transform:translateY(var(--my,0px));filter:drop-shadow(0 20px 26px rgba(40,34,22,.18))}
.asks{align-self:start}
.asks{border-top:1px solid var(--outline-variant)}
.ask{border-bottom:1px solid var(--outline-variant)}
.ask h3{margin:0}
.ask button{width:100%;display:grid;grid-template-columns:52px minmax(0,1fr) 28px;align-items:center;gap:10px;
  padding:26px 0;border:0;background:none;cursor:pointer;text-align:left;font:inherit;color:inherit}
.an{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.06em;color:var(--tan-text)}
.aq{font-family:var(--display);font-size:clamp(20px,1.9vw,26px);font-weight:600;line-height:1.25;color:var(--ink-forest);
  transition:color .3s ease}
.ask button:hover .aq{color:#1f2a1f}
/* a Deco lozenge that fills when the answer is open */
.ask button i{justify-self:end;width:11px;height:11px;border:1px solid var(--tan);transform:rotate(45deg);
  transition:background .35s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.ask.open button i{background:var(--tan);transform:rotate(225deg)}
.ask button:focus-visible{outline:2px solid var(--tan);outline-offset:4px}
.aa{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1)}
.aa>div{overflow:hidden}
.ask.open .aa{grid-template-rows:1fr}
.aa p{margin:0;padding:0 38px 28px 62px;font-size:16px;line-height:1.7;color:var(--on-surface-variant);max-width:64ch;
  opacity:0;transform:translateY(-6px);transition:opacity .45s ease,transform .55s ease}
.ask.open .aa p{opacity:1;transform:none;transition-delay:.12s}

/* =====================================================================
   THE PROMISE: a green room, a gilt sunburst, a telephone that rings
   ===================================================================== */
.gr-promise{background:var(--band);color:var(--cream)}
.gr-promise::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}
.gw-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,100px);align-items:center}
.gr-promise .eyebrow{color:var(--gilt)}
.gw-h{font-family:var(--display);font-weight:600;font-size:clamp(44px,5.6vw,88px);line-height:1;letter-spacing:-.025em;
  color:var(--cream);margin:22px 0 26px;max-width:11ch}
.gw-lede{font-size:17px;line-height:1.7;color:var(--cream-dim);max-width:46ch;margin:0 0 34px}
.gw-phone{position:relative;justify-self:center;width:min(100%,440px);aspect-ratio:1;display:grid;place-items:center}
/* the sunburst: fine gilt rays, fading out, turning very slowly */
.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:62%;transform-origin:50% 96%;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.phone img{width:100%;height:auto;display:block;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)}}
.phone img{transform-origin:50% 100%}
.ring{position:absolute;left:var(--rx,62%);top:var(--ry,26%);width:90px;height:90px;margin:-45px 0 0 -45px;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)}}

/* =====================================================================
   WHERE WE WORK: an old chart of the Lowcountry
   ===================================================================== */
.gr-map{background:#efe7d6}
.gr-map::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background:radial-gradient(70% 60% at 70% 40%,rgba(255,252,244,.8),rgba(255,252,244,0) 70%)}
.gm-in{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(40px,6vw,96px);align-items:center}
.places{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--outline-variant)}
.places a{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--outline-variant);
  font-family:var(--display);font-size:clamp(19px,1.7vw,23px);font-weight:600;color:var(--ink-forest);transition:color .3s ease,padding .4s ease}
.places a span{min-width:34px;font-size:14px;letter-spacing:.06em;color:var(--tan-text)}
.places a:hover,.places a.lit{color:var(--tan-text);padding-left:8px}
.places .and{padding:14px 0 0 50px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--outline)}
.chart{margin:0}
.chart-plate{position:relative;padding:14px;background:#e6dbc4;border:1px solid rgba(120,98,60,.35);
  outline:1px solid rgba(120,98,60,.3);outline-offset:-7px;box-shadow:0 34px 60px -40px rgba(40,34,22,.6)}
.chart-img{display:block;width:100%;height:auto}
.pins{position:absolute;inset:14px}
.pin{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.pin i{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--ink-forest);
  box-shadow:0 0 0 3px rgba(250,245,234,.9),0 2px 6px rgba(40,34,22,.35);transition:transform .4s ease,background .3s ease}
.pin i::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid var(--brass);opacity:0}
.pin span{position:absolute;left:12px;top:-9px;white-space:nowrap;padding:3px 7px;background:rgba(250,245,234,.92);
  border:1px solid rgba(120,98,60,.3);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-forest);
  transition:background .3s ease,color .3s ease}
.pin.left span{left:auto;right:12px}
.pin.town i{width:8px;height:8px;left:-4px;top:-4px;border-radius:0;transform:rotate(45deg);background:var(--brass)}
.pin.town span{left:-40px;top:9px;background:none;border:0;font-family:var(--display);font-style:italic;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-forest)}
.pin.town:hover i{transform:rotate(45deg)}
.pin:hover i,.pin.lit i{transform:scale(1.25);background:#8a6b35}
.pin:hover span,.pin.lit span{background:var(--ink-forest);color:var(--cream)}
.pin.lit i::after,.pin:hover i::after{animation:pinring 1.6s ease-out infinite}
@keyframes pinring{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(1.6)}}

/* =====================================================================
   REQUEST AN ESTIMATE: a letter on laid paper, and a seal
   ===================================================================== */
.gr-quote{background:var(--surface);padding-bottom:clamp(130px,12vw,180px)}
.sprig{position:absolute;z-index:0;top:-30px;right:clamp(-90px,-4vw,-30px);width:clamp(170px,19vw,290px);height:auto;
  pointer-events:none;transform-origin:50% 0;animation:sway 11s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-1.6deg)}to{transform:rotate(1.4deg)}}
.gq-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(40px,6vw,100px);align-items:start}
.gq-copy{position:sticky;top:calc(var(--navh,72px) + 40px)}
.qform.letter{max-width:none;margin:0;border:1px solid var(--outline-variant);gap:44px;
  outline:1px solid rgba(163,138,102,.4);outline-offset:-10px;padding:clamp(36px,4vw,60px) clamp(24px,4vw,60px);
  background:repeating-linear-gradient(0deg,rgba(120,100,60,.04) 0 1px,transparent 1px 5px),#fbf8f1;
  box-shadow:0 34px 60px -44px rgba(40,34,22,.55)}
.letterhead{display:flex;flex-direction:column;align-items:center;gap:6px;padding-bottom:26px;margin-bottom:-10px;
  border-bottom:3px double rgba(163,138,102,.55);text-align:center}
.letterhead img{width:54px;height:auto}
.letterhead span{font-family:var(--display);font-size:20px;font-weight:600;color:var(--ink-forest)}
.letterhead em{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--tan-text)}
.qform.letter .qstep{grid-template-columns:150px minmax(0,1fr);gap:36px}
.qform.letter .qstep-n{color:var(--tan-text)}
.qform.letter .fig{font-size:1.35em}
.qform.letter .qf input,.qform.letter .qf textarea{border-bottom-color:rgba(44,58,43,.55)}
.qform.letter .qf input:focus,.qform.letter .qf textarea:focus{border-bottom-color:var(--tan)}
.qform.letter .pick{padding:14px 0}
.qform.letter .pick span{font-size:19px}
.qform.letter .pick input:checked{background:var(--ink-forest);border-color:var(--ink-forest)}
.qsend{position:relative}
.qform.letter{position:relative}
.qsend{position:static}
.wax{position:absolute;left:50%;bottom:-46px;width:92px;height:auto;margin-left:-46px;z-index:2;
  filter:drop-shadow(0 8px 8px rgba(20,32,22,.3));transform:rotate(-8deg);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.qform.letter:hover .wax{transform:rotate(-3deg) scale(1.03)}
.qform.sealing .wax{animation:press .8s cubic-bezier(.3,0,.2,1) both}
@keyframes press{0%{transform:translateY(0) rotate(-8deg)}35%{transform:translateY(-26px) scale(1.25) rotate(-14deg);filter:drop-shadow(0 26px 18px rgba(20,32,22,.25))}
  70%{transform:translateY(2px) scale(.94) rotate(0)}100%{transform:scale(1) rotate(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%)}
/* a disc of the footer's own green hides the painted hands; the live ones go on top */
.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)}
.foot-brand p{color:rgba(239,231,214,.6);max-width:34ch;margin:0}
footer.gr-foot h3{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-motto{font-style:italic;font-size:16px;font-weight:500;color:rgba(239,231,214,.55);cursor:default}
.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}

/* ---------- tablets and phones ---------------------------------------- */
@media(max-width:1100px){
  .tariff-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tariff-list li:not(:nth-child(3n+1)){border-left:0}
  .tariff-list li:nth-child(2n){border-left:1px solid var(--outline-variant)}
}
@media(max-width:900px){
  .gp-head,.ga-in,.gw-in,.gm-in,.gq-in{grid-template-columns:minmax(0,1fr)}
  .gp-fig{justify-self:start;width:min(100%,340px)}
  .niches{grid-template-columns:1fr;gap:56px;padding-top:40px;max-width:420px;margin:0 auto}
  .sun-path,.sun{display:none}
  .ga-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:8px}
  .ga-head .eyebrow,.ga-head .gr-h{grid-column:1}
  .muse{grid-column:2;grid-row:1 / span 2;height:230px;margin:0 -30px -6px 0;padding:0}
  .gw-phone{width:min(80%,340px)}
  .gq-copy{position:static}
  .qform.letter .qstep{grid-template-columns:1fr;gap:18px}
  .sprig{width:150px;right:-50px;opacity:.9}
  .foot-base{flex-direction:column;gap:8px}
}
@media(max-width:700px){
  .tariff-list{grid-template-columns:1fr}
  .tariff-list li:nth-child(2n){border-left:0}
  .tariff{padding-left:20px;padding-right:20px}
  .aa p{padding:0 0 24px 0}
  .ask button{grid-template-columns:40px minmax(0,1fr) 22px}
  /* on a phone the names crowd each other: the dots stay, a name shows for the pin in hand */
  .pin span{font-size:9px;letter-spacing:.1em;padding:2px 5px;opacity:0;transition:opacity .3s ease}
  .pin.lit span,.pin:hover span{opacity:1}
  .pin.town span{opacity:1;font-size:11px;left:-30px;top:8px}
  .sky-in{width:170%;margin-left:-35%}
}
@media (prefers-reduced-motion: reduce){
  .burst,.sprig,.sun .rays{animation:none}
  .arch img{transform:none;opacity:1}
  .phone.ringing img,.phone.ringing .ring{animation:none}
}

/* =====================================================================
   PASS 6: more Art Deco Revival (owner, 2026-09-24: "not enough art deco
   revival"). Chamfered double gilt frames laid on as border images, octagon
   numeral medallions, a stepped-arch loggia for the three steps with real
   photographs of one job, a niche for the muse.
   ===================================================================== */
:root{
  --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");
}

/* ---- the tariff: a chamfered plate, numerals in octagons -------------- */
.tariff{border:0;outline:0}
.tariff::after{inset:0;background:none;opacity:1;border:30px solid transparent;border-image:var(--frame-tan) 30 / 30px stretch}
.tn{display:grid;place-items:center;width:40px;height:40px;margin-bottom:14px;font-size:14px;letter-spacing:.02em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23a38a66'%3E%3Cpath d='M12.3 .5H27.7L39.5 12.3V27.7L27.7 39.5H12.3L.5 27.7V12.3Z' stroke-opacity='.75'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.tariff-title{display:flex;align-items:center;justify-content:center;gap:16px}
.tariff-title::before,.tariff-title::after{content:"";width:60px;height:1px;background:currentColor;opacity:.6}

/* ---- how it works: a loggia on green, three arched windows ------------- */
.gr-how{background:var(--band);color:var(--cream)}
.gr-how::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 70% at 50% 108%,rgba(216,188,136,.14),transparent 70%),
    repeating-linear-gradient(90deg,rgba(216,188,136,.05) 0 1px,transparent 1px 16px)}
.gr-how::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}
.gr-how .eyebrow{color:var(--gilt)}
.gr-how .gr-h{color:var(--cream)}
.gr-how .gr-h span{color:var(--gilt)}
.gr-how .sun-path path{stroke:var(--gilt);opacity:.5}
.arch{aspect-ratio:3/4;background:var(--band-2,#0f1d15);align-items:stretch;
  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 34px 60px -30px rgba(0,0,0,.65)}
.arch::before{display:none}
.arch::after{top:-1px;width:22px;height:14px;margin-left:-11px;background:linear-gradient(#e3c887,#b08d4f);z-index:2}
.arch img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;margin:0;filter:none;
  transform:scale(1.08);opacity:1;transition:transform 2.2s cubic-bezier(.2,.7,.2,1)}
.niche-step.in .arch img{transform:scale(1)}
.niche-step:hover .arch img{transform:scale(1.04);transition-duration:1.2s}
.arch-cap{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;white-space:nowrap;
  padding:6px 12px;background:rgba(18,35,26,.82);border:1px solid rgba(216,188,136,.45);
  font-family:var(--display);font-style:italic;font-size:13px;color:var(--cream)}
.niches{gap:clamp(26px,4vw,64px)}
.niche-step:nth-child(2){transform:translateY(-22px)}
.gr-how .sn{color:var(--gilt)}
.gr-how .niche-step h3{color:var(--cream)}
.gr-how .niche-step p{color:rgba(239,231,214,.72)}

/* ---- straight answers: the muse stands in an arched niche ------------- */
.gr-ask{background:rgba(214,196,160,.14)}
.muse{box-sizing:content-box;padding:34px 34px 0;border-radius:999px 999px 0 0;
  background:radial-gradient(90% 60% at 50% 26%,rgba(255,252,244,.9),rgba(233,223,202,.9) 60%,rgba(214,198,166,.95));
  box-shadow:inset 0 0 0 1px rgba(163,138,102,.6),inset 0 0 0 8px rgba(246,240,229,.7),inset 0 0 0 9px rgba(163,138,102,.3),inset 0 30px 40px -24px rgba(90,70,40,.35)}
.asks{position:relative;background:#f9f5ec;padding:10px clamp(20px,3vw,40px) 16px;border:0}
.asks::before{content:"";position:absolute;inset:0;pointer-events:none;border:30px solid transparent;border-image:var(--frame-tan) 30 / 30px stretch}
.ask:last-child{border-bottom:0}

/* ---- the promise: a gilt frame, and reeding on the left --------------- */
.gr-promise::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}
.gw-in{position:relative}
.gw-in::before{content:"";position:absolute;left:-12vw;top:-40px;bottom:-40px;width:34vw;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)}

/* ---- the chart: a chamfered gilt mount ---------------------------------- */
.chart-plate{outline:0;border:0;background:#e9dfc8}
.chart-plate::after{content:"";position:absolute;inset:0;pointer-events:none;border:30px solid transparent;border-image:var(--frame-tan) 30 / 30px stretch}
.chart-img{position:relative;z-index:0}

@media(max-width:900px){
  .niche-step:nth-child(2){transform:none}
  .muse{height:210px;padding:16px 14px 0}
}
@media(max-width:700px){
  .gr-how::after,.gr-promise::after{inset:10px;border-width:22px;border-image-width:22px}
}

/* ---- pass 7: longer, softer joins between the rooms (seams.js) -------- */
.gr-price,.gr-how,.gr-ask,.gr-promise,.gr-map{padding-top:clamp(120px,13vw,210px);padding-bottom:clamp(120px,13vw,210px)}
.gr-quote{padding-top:clamp(120px,13vw,210px)}
/* the muse stands on solid ground, above the blend into the promise */
.seamed .muse{margin-bottom:calc(var(--fb,0px) - clamp(120px,13vw,210px) + 24px)}

/* pass 8: eleven places, in two columns; the ones without a page of their own still light their pin */
.places{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(18px,2vw,30px)}
.places .pl{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--outline-variant);cursor:default;outline:none;
  font-family:var(--display);font-size:clamp(19px,1.7vw,23px);font-weight:600;color:var(--ink-forest);transition:color .3s ease,padding .4s ease}
.places .pl span{min-width:34px;font-size:14px;letter-spacing:.06em;color:var(--tan-text)}
.places .pl:hover,.places .pl.lit,.places .pl:focus-visible{color:var(--tan-text);padding-left:8px}
.places a span,.places .pl span{min-width:30px}
.places .and{grid-column:1 / -1;padding-left:0}
@media(max-width:700px){ .places a,.places .pl{font-size:17px;gap:10px} .places a span,.places .pl span{min-width:26px;font-size:12px} }
/* eleven pins would crowd the chart with labels: each name shows only when its place is pointed at, in the list or on the chart */
.pin:not(.town) span{opacity:0;transform:translateY(3px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.pin:not(.town).lit span,.pin:not(.town):hover span{opacity:1;transform:none}
.pin{z-index:1}.pin.lit,.pin:hover{z-index:3}
.places a,.places .pl{font-size:clamp(17px,1.3vw,20px)}

/* ---------- 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} }

/* pass 8: on a phone the tariff is a folded list, not nine long cards */
@media(max-width:700px){
  .tariff{padding-top:64px;padding-bottom:30px}
  .tariff-list li{display:grid;grid-template-columns:34px minmax(0,1fr) 16px;column-gap:14px;align-items:center;
    padding:16px 4px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .tariff-list li .tn{grid-row:1 / span 2;width:32px;height:32px;margin:0;font-size:12px}
  .tariff-list li h3{grid-column:2;font-size:19px;margin:0}
  .tariff-list li h3::after{display:none}
  .tariff-list li .td{grid-column:2;margin:2px 0 0;font-size:14.5px}
  .tariff-list li::after{content:"";grid-column:3;grid-row:1 / span 2;width:9px;height:9px;border:1px solid var(--tan);
    transform:rotate(45deg);transition:background .3s ease,transform .4s ease}
  .tariff-list li.open::after{background:var(--tan);transform:rotate(225deg)}
  .tariff-list li .tx{grid-column:1 / -1;display:none;margin-top:12px;font-size:14.5px}
  .tariff-list li.open .tx{display:block}
  .tariff-list li:focus-visible{outline:2px solid var(--tan);outline-offset:2px}
  .tariff-foot{font-size:15px}
}