/* ============================================================================
   Drenin V4 · showcase: THE IMPOSSIBLE WINDOW 2.0
   One browser window. Its inside is deeper than its frame, and on V4 it opens
   into the same hex field the visitor is standing on (the host draws it as a
   portal behind the well; without the host the module draws its own room).

   Two kinds of motion, kept on separate elements on purpose:
     --open (0..1)  camera tilt, plate lift, push-in. Driven directly by the
                    visitor's drag or by a JS tween. NEVER transitioned.
     .s-* stages    classes accumulate on the root and drive CSS transitions.
   Finish is composited: draft and final surfaces are two layers that crossfade
   (opacity), and the big soft shadows live on pseudo-elements that fade in, so
   the payoff does not repaint a window-sized area every frame.
   Geometry is in design units: the old page is 1200x720; the new page is 1200
   wide on desktop and a 390-wide column on phones (--m = 1).

   Host hooks (optional): --rest (resting turn), --win-hmax (tallest glass while
   staged), .has-portal (the host draws the interior; the well turns clear).
   ========================================================================== */

@property --open{syntax:"<number>";inherits:false;initial-value:0}
@property --fit-a{syntax:"<number>";inherits:false;initial-value:.8}
@property --fit-b{syntax:"<number>";inherits:false;initial-value:.8}
@property --fit-m{syntax:"<number>";inherits:false;initial-value:.8}
@property --tx{syntax:"<number>";inherits:false;initial-value:0}
@property --ty{syntax:"<number>";inherits:false;initial-value:0}
@property --fx{syntax:"<length>";inherits:false;initial-value:0px}
@property --fy{syntax:"<length>";inherits:false;initial-value:0px}

.iw{
  --m:0;
  --rx:50deg; --rz:-26deg; --shrink:.45; --drop:150; --zk:1;
  --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --draft:rgba(206,220,236,.78); --draft-faint:rgba(206,220,236,.14); --draft-fill:rgba(18,34,52,.58);
  --amber:#F4A83A;
  /* Wrenfield Plumbing (fictional): paper, teal, copper */
  --m-bg:#F7F2E9; --m-ink:#14201F; --m-ink-2:#45524F; --m-teal:#0F3B3A; --m-teal-2:#1D5A54; --m-copper:#C8693A; --m-copper-btn:#A9532B; --m-copper-d:#9A4A21; --m-mist:#EAF0ED; --m-line:#E0D8C9;
  --win-w:min(100cqw - 8px,(var(--win-hmax,78svh - 120px)) * 5 / 3);
  --win-h:calc(var(--win-w) * 3 / 5 + 46px);
  position:relative;container-type:inline-size;font-family:var(--font,"Archivo",system-ui,sans-serif)}
.iw *,.iw *::before,.iw *::after{box-sizing:border-box}
.iw [hidden]{display:none!important}
.iw-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:900px),(max-height:520px) and (pointer:coarse){
  .iw{--m:1;--rx:46deg;--rz:-12deg;--shrink:.08;--drop:40;--zk:.55;--rig-a:560;--rig-m:170;
    --win-w:min(100cqw - 4px,460px);--win-h:min(74svh,700px)}
  .iw .iw-seg{display:none}
}
@media (max-height:520px) and (pointer:coarse){.iw{--win-h:min(560px,100svh - 16px);--rig-a:60;--rig-m:0}}
.iw.is-phone{--m:1;--rx:46deg;--rz:-12deg;--shrink:.08;--drop:40;--zk:.55;--rig-a:560;--rig-m:170;--win-w:min(412px,100cqw);--win-h:min(78svh,760px)}
.iw.is-grown{--win-h:var(--win-h-live)}

/* ── the exterior: a graphite window standing on the field ───────────────── */
.iw-stage{position:relative;perspective:2600px;perspective-origin:50% 45%;display:grid;place-items:center;padding:6px 0 34px}
.iw-shadow{position:absolute;left:50%;top:50%;width:var(--win-w);height:var(--win-h);translate:-50% -50%;border-radius:24px;
  background:rgba(0,0,0,.62);filter:blur(44px);pointer-events:none;
  transform:translate3d(calc(18px - var(--tx) * 38px),calc(48px - var(--ty) * 20px),0) scale(calc(.94 + var(--open) * .08));
  opacity:calc(.75 - var(--open) * .2)}
.iw-window{position:relative;width:var(--win-w);height:var(--win-h);transform-style:preserve-3d;
  transform:rotateX(calc(var(--ty) * -4deg)) rotateY(calc(var(--tx) * 6deg)) scale(calc(1 + var(--open) * .05));
  rotate:y var(--rest,0deg);transition:rotate 1.2s var(--ease)}
.iw.is-resizing .iw-window{transition:rotate 1.2s var(--ease),width .6s var(--ease),height .6s var(--ease)}
.iw.is-resizing .iw-shadow{transition:width .6s var(--ease),height .6s var(--ease)}
.iw.s-apart .iw-window,.iw.is-phone .iw-window{rotate:y 0deg}
.iw-edge{position:absolute;background:linear-gradient(90deg,#1E232B,#3C434E 40%,#171B21)}
.iw-edge--r{top:12px;bottom:12px;left:100%;width:16px;transform-origin:0 50%;transform:rotateY(90deg)}
.iw-edge--l{top:12px;bottom:12px;right:100%;width:16px;transform-origin:100% 50%;transform:rotateY(-90deg)}
.iw-edge--b{left:12px;right:12px;top:100%;height:16px;transform-origin:50% 0;transform:rotateX(-90deg);background:linear-gradient(#171B21,#30363F)}
.iw-edge--t{left:12px;right:12px;bottom:100%;height:16px;transform-origin:50% 100%;transform:rotateX(90deg);background:linear-gradient(#4A525D,#22272E)}
.iw-face{position:absolute;inset:0;border-radius:14px;overflow:clip;display:flex;flex-direction:column;background:#161A20;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 1px 0 rgba(255,255,255,.14) inset}

.iw-chrome{flex:none;height:46px;display:flex;align-items:center;gap:14px;padding:0 10px 0 16px;
  background:linear-gradient(#262B33,#1B1F26);border-bottom:1px solid #0A0C10;position:relative;z-index:3}
.iw-lights{display:flex;gap:7px;flex:none}
.iw-lights i{width:11px;height:11px;border-radius:50%;background:#48505B}
.iw-lights i:first-child{background:#E0594A}.iw-lights i:nth-child(2){background:#E6B53E}.iw-lights i:nth-child(3){background:#53B45C}
.iw-address{flex:1;min-width:0;max-width:540px;margin-inline:auto;height:28px;border-radius:8px;background:#11151A;
  display:flex;align-items:center;gap:8px;padding:0 5px 0 12px;font:500 13px/1 var(--font);color:#A9B2BE;white-space:nowrap;overflow:hidden}
.iw-lock{width:12px;height:12px;flex:none;opacity:0;transform:scale(.6);transition:opacity .5s,transform .5s var(--ease)}
.iw-scheme{color:#7D8795}
.iw-url{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.iw-chip{flex:none;font:650 11px/1 var(--font);letter-spacing:.02em;color:#D6DCE4;background:#262C35;border-radius:5px;padding:4px 7px}
@container (max-width:520px){.iw-chip-more{display:none}}
.iw-badge{flex:none;font:650 11px/1 var(--font);font-stretch:112%;letter-spacing:.06em;text-transform:uppercase;padding:6px 9px;
  border-radius:6px;background:#353C47;color:#D6DCE4;transition:background-color .5s,color .5s}
.iw-seg{flex:none;display:inline-flex;gap:2px;padding:3px;border-radius:9px;background:#11151A}
.iw-seg button{all:unset;cursor:pointer;font:650 12.5px/1 var(--font);color:#C9D0DA;padding:7px 10px;border-radius:6px;white-space:nowrap}
.iw-seg button:hover{color:#fff}
.iw-seg button[aria-pressed="true"]{background:#E9EDF2;color:#14171C}
.iw-seg button:focus-visible{outline:3px solid var(--amber);outline-offset:1px}
.iw.is-phone .iw-lights,.iw.is-phone .iw-badge{display:none}
@container (max-width:520px){.iw-lights{display:none}.iw-chrome{gap:10px;padding:0 12px}}

/* the well. With a host portal the well turns clear and the page's own field shows the room */
.iw-well{position:relative;flex:1;overflow:hidden;background:#BCBEC2;
  perspective:1250px;perspective-origin:calc(50% - var(--tx) * 9%) calc(34% - var(--ty) * 7%)}
.iw-room{position:absolute;inset:0;pointer-events:none;opacity:var(--open);
  background:radial-gradient(60% 50% at 62% 40%,rgba(152,170,196,.2),transparent 70%),radial-gradient(120% 90% at 50% 100%,#161B22 0%,#0B0E13 60%)}
.iw.has-portal .iw-well,.iw.has-portal .iw-face{background:transparent}
.iw.has-portal .iw-room,.iw.has-portal .iw-floor{display:none}
.iw-fitter{position:absolute;left:50%;top:0;width:0;height:0;transform-style:preserve-3d;transform-origin:0 0;
  transform:scale(var(--fit-a));transition:transform 1.6s var(--ease-io),opacity .2s}
.iw-fitter.no-anim-f{transition:none!important}
.iw.is-swapping .iw-fitter{opacity:0}
.iw-rig{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;transition:transform 1.3s var(--ease-io)}
.s-apart .iw-rig{transform:translateY(calc(var(--rig-a,0) * 1px))}
.s-layout .iw-fitter{transform:scale(var(--fit-m,var(--fit-a)))}
.s-layout .iw-rig{transform:translateY(calc(var(--rig-m,0) * 1px))}
.s-assemble .iw-fitter{transform:scale(var(--fit-b))}
.s-assemble .iw-rig{transform:none}
.iw-world{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;
  transform:translateY(calc(360px + var(--open) * var(--drop) * 1px)) rotateX(calc(var(--open) * var(--rx)))
            rotateZ(calc(var(--open) * var(--rz))) scale(calc(1 - var(--open) * var(--shrink)))}
/* fallback floor (no host field): the same hex material, drawn in SVG */
.iw-floor{position:absolute;left:-2400px;top:-2160px;width:4800px;height:4320px;transform:translateZ(-150px);opacity:var(--open);pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='48.5' viewBox='0 0 84 48.5'%3E%3Cpath d='M14 0h28l14 24.25L42 48.5H14L0 24.25zM56 24.25h28' fill='none' stroke='%23C4CBD5' stroke-opacity='.3' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size:84px 48.5px;
  -webkit-mask-image:radial-gradient(closest-side at calc(50% + var(--fx,0px)) calc(50% + var(--fy,0px)),#000 0,rgba(0,0,0,.55) 24%,transparent 62%);
          mask-image:radial-gradient(closest-side at calc(50% + var(--fx,0px)) calc(50% + var(--fy,0px)),#000 0,rgba(0,0,0,.55) 24%,transparent 62%)}
.s-live .iw-floor{display:none}

/* ── the page ──────────────────────────────────────────────────────────────── */
.iw-page{position:absolute;left:-600px;top:-360px;width:1200px;height:720px;transform-style:preserve-3d}
.iw-base{position:absolute;inset:0;transform-style:preserve-3d}
.iw-base-shadow{position:absolute;inset:-20px;transform:translateZ(-148px);background:#000;filter:blur(40px);opacity:calc(var(--open) * .7)}
.b-old,.b-grid,.b-new{position:absolute;transition:opacity .9s var(--ease)}
.b-old,.b-grid{inset:0}
.b-old{background:linear-gradient(#C9CBCE,#B9BCC0)}
.b-old::after{content:"";position:absolute;left:150px;right:150px;top:0;bottom:0;background:#fff;box-shadow:0 0 0 1px #8E9297}
.b-grid{opacity:0;background:repeating-linear-gradient(90deg,transparent 0 47px,var(--draft-faint) 47px 48px),
    repeating-linear-gradient(0deg,transparent 0 47px,var(--draft-faint) 47px 48px),rgba(12,22,34,.55);box-shadow:0 0 0 1.5px var(--draft) inset}
/* column guides light up while the layout is set: the grid the new page snaps to */
.b-cols{position:absolute;top:0;bottom:0;left:calc(48px + 357px * var(--m));right:calc(48px + 357px * var(--m));opacity:0;transition:opacity .6s var(--ease);
  background:repeating-linear-gradient(90deg,rgba(244,168,58,.13) 0 calc((100% - 11 * 24px) / 12),transparent calc((100% - 11 * 24px) / 12) calc((100% - 11 * 24px) / 12 + 24px))}
.b-new{opacity:0;background:var(--m-bg);top:0;left:calc(405px * var(--m));width:calc(1200px - 810px * var(--m));height:calc(720px + 410px * var(--m))}
.s-redraw .b-old{opacity:0}
.s-redraw .b-grid{opacity:1}
.s-layout .b-cols{opacity:1}
.s-finish .b-cols{opacity:0}
.s-finish .b-grid{opacity:0}
.s-finish .b-new{opacity:1}

/* below the fold of the 2011 page (phones show the whole shrunk page) */
.o-below{display:none;position:absolute;left:150px;top:720px;width:900px;height:1320px;background:#fff;
  box-shadow:0 0 0 1px #8E9297;padding:26px 30px;color:#222;font:12px/19px Verdana,Geneva,sans-serif;transition:opacity .3s}
.o-below .o-h{margin:0 0 8px;font:700 21px/28px "Times New Roman",Times,serif;color:#7A1F1F}
.o-below p{margin:0 0 14px}
.o-below u{color:#0000CC}
.o-below hr{border:0;border-top:1px dotted #999;margin:22px 0}
.o-below table{border-collapse:collapse;width:100%;margin:0 0 6px}
.o-below td{border:1px solid #A9A9A9;padding:6px 9px;vertical-align:top}
.o-below .o-map{height:230px;border:3px ridge #9C9C9C;background:repeating-linear-gradient(45deg,#EFEFEF 0 12px,#E4E4E4 12px 24px);
  display:grid;place-items:center;font:italic 13px/1.4 "Times New Roman",Times,serif;color:#333}
.o-below .o-blink{font:700 15px/1 "Times New Roman",Times,serif;color:#CC0000;text-align:center;margin:18px 0}
@media (max-width:900px),(max-height:520px) and (pointer:coarse){.o-below{display:block}}
.iw.is-phone .o-below{display:block}
.s-apart .o-below{opacity:0}
.s-diagnose .o-below{display:none}
.s-live .o-below{display:none}

/* ── plates ────────────────────────────────────────────────────────────────── */
.iw-plate{
  --ex:calc(var(--nx) + (var(--mx,var(--nx)) - var(--nx)) * var(--m));
  --ey:calc(var(--ny) + (var(--my,var(--ny)) - var(--ny)) * var(--m));
  --ew:calc(var(--nw) + (var(--mw,var(--nw)) - var(--nw)) * var(--m));
  --eh:calc(var(--nh) + (var(--mh,var(--nh)) - var(--nh)) * var(--m));
  position:absolute;left:calc(var(--ex) * 1px);top:calc(var(--ey) * 1px);width:calc(var(--ew) * 1px);height:calc(var(--eh) * 1px);
  transform-style:preserve-3d;transform:translateZ(calc(var(--z) * var(--zk) * var(--open) * 1px))}
.p-body{position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform 1s var(--ease) calc(var(--i) * 55ms),opacity .7s var(--ease) calc(var(--i) * 55ms)}
.p-lower{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(calc(var(--z) * var(--zk) * var(--open) * -1px))}
.p-flat{position:absolute;inset:0;transform-style:flat}
.p-shadow,.p-surface,.p-wire{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;
  transform:translate(calc((var(--ox) - var(--ex)) * 1px),calc((var(--oy) - var(--ey)) * 1px)) scale(calc(var(--ow) / var(--ew)),calc(var(--oh) / var(--eh)));
  transition:transform 1.05s var(--ease-io) calc(var(--i) * 70ms)}
.p-shadow{background:#000;filter:blur(22px);opacity:calc(var(--open) * var(--sh,.28));border-radius:14px}
.p-surface{border-radius:3px;background:var(--obg,transparent)}
/* draft and final surfaces: two layers that crossfade (no repainting box-shadow per frame) */
.ps-a,.ps-b{position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .7s var(--ease) calc(var(--i) * 60ms)}
.ps-a{background:var(--draft-fill);box-shadow:0 0 0 1.5px var(--draft) inset}
.ps-b{background:var(--nbg,transparent)}
.s-redraw .ps-a{opacity:1}
.s-redraw .p-surface{background:transparent}
.s-finish .ps-a{opacity:0}
.s-finish .ps-b{opacity:1}
.p-old{position:absolute;left:calc((var(--ox) - var(--ex)) * 1px);top:calc((var(--oy) - var(--ey)) * 1px);
  width:calc(var(--ow) * 1px);height:calc(var(--oh) * 1px);overflow:hidden;transition:opacity .55s var(--ease) calc(var(--i) * 45ms)}
/* the skeleton: what each part will hold, drawn while it is being redrawn and laid out */
.p-wire{display:grid;align-content:center;gap:9%;padding:10px 12px;opacity:0;transition:transform 1.05s var(--ease-io) calc(var(--i) * 70ms),opacity .45s var(--ease) calc(var(--i) * 50ms)}
.p-wire i{display:block;border-radius:4px;background:rgba(214,226,240,.78)}
.p-wire .w-bar{height:12%;min-height:5px;width:var(--w)}
.p-wire .w-thin{height:9%;min-height:5px;background:rgba(214,226,240,.58)}
.p-wire .w-thick{height:28%;min-height:10px}
.p-wire .w-dot{width:12%;aspect-ratio:1;border-radius:50%;position:absolute;left:10px;top:50%;translate:0 -50%;min-width:14px}
.p-wire:has(.w-dot){padding-left:calc(12% + 22px)}
.p-wire .w-pill{height:56%;width:var(--w);border-radius:999px;background:transparent;box-shadow:0 0 0 2.5px rgba(214,226,240,.8) inset;justify-self:end}
.p-wire .w-fill{background:rgba(244,168,58,.6);box-shadow:none}
.p-wire:has(.w-img){align-content:stretch;grid-template-rows:1fr;padding:14px}
.p-wire .w-img{height:100%;border-radius:12px;background:rgba(244,168,58,.07);box-shadow:0 0 0 2.5px rgba(214,226,240,.75) inset;
  background-image:linear-gradient(to top right,transparent calc(50% - 1.5px),rgba(214,226,240,.6) 50%,transparent calc(50% + 1.5px)),linear-gradient(to top left,transparent calc(50% - 1.5px),rgba(214,226,240,.6) 50%,transparent calc(50% + 1.5px))}
.p-wire.w-3{grid-template-columns:repeat(calc(3 - 2 * var(--m)),1fr);align-content:stretch;gap:12px}
.p-wire .w-box{border-radius:10px;background:rgba(214,226,240,.06);box-shadow:0 0 0 2.5px rgba(214,226,240,.7) inset}
[data-part="links"] .p-wire{grid-auto-flow:column;align-items:center;justify-content:end;gap:18px}
[data-part="links"] .p-wire .w-bar{height:6px;width:64px}
[data-part="links"] .p-wire .w-pill{height:24px;width:90px}
.s-redraw .p-wire{opacity:1}
.s-type .p-wire{opacity:0}
.p-new{position:absolute;inset:0;opacity:0;clip-path:inset(0 100% 0 0);color:#EAF0FF;
  transition:opacity .5s var(--ease) calc(var(--i) * 80ms),clip-path .75s var(--ease-io) calc(var(--i) * 80ms),color .6s var(--ease)}
.p-old,.p-surface,.p-shadow,.p-lower,.p-wire{pointer-events:none}
.p-new{pointer-events:none}
.s-live .p-new{pointer-events:auto}
.s-redraw .p-old{opacity:0}
.s-layout .p-surface,.s-layout .p-shadow,.s-layout .p-wire{transform:none}
.s-type .p-new{opacity:1;clip-path:inset(0 0 0 0)}
.s-finish .p-new{color:var(--m-ink)}

[data-part="junk"] .p-body{transition:transform 1.1s cubic-bezier(.5,0,.75,0) .15s,opacity .9s ease .35s}
.s-redraw [data-part="junk"] .p-body{transform:translate3d(-60px,260px,-520px) rotateX(-48deg) rotateZ(-8deg);opacity:0}
[data-part="quote"] .p-body{opacity:0;transform:translateZ(-60px) scale(.8)}
.s-layout [data-part="quote"] .p-body{opacity:1;transform:none}

/* ── OLD SKINS: a very real kind of 2011 website ───────────────────────────── */
.o-banner{height:100%;background:linear-gradient(#3B5E97,#6E93C9 55%,#4C71AB);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;color:#fff;border-bottom:2px solid #22416F}
.o-banner b{font:italic 700 36px/1 "Times New Roman",Times,serif;text-shadow:2px 2px 0 #1D365E,0 0 12px rgba(255,255,255,.35)}
.o-banner span{font:14px/1 "Times New Roman",Times,serif;color:#E6EEFA;letter-spacing:.04em}
.o-nav{height:100%;background:#E3E3E3;border-bottom:1px solid #A9A9A9;display:flex;align-items:center;justify-content:center;
  font:15px/1 "Times New Roman",Times,serif;color:#0000CC}
.o-nav u{padding:0 11px}.o-nav i{font-style:normal;color:#777}
.o-head{font:700 23px/30px "Times New Roman",Times,serif;color:#7A1F1F;white-space:nowrap}
.o-para{margin:0;font:11.5px/18.6px Verdana,Geneva,sans-serif;color:#333;text-align:justify}
.o-photo{height:100%;border:3px ridge #9C9C9C;background:#F4F4F4;display:grid;place-items:center;grid-template-rows:1fr auto;padding:8px}
.o-photo svg{width:180px;height:140px}
.o-photo span{font:italic 12px/1.4 "Times New Roman",Times,serif;color:#333}
.o-phone{font:700 23px/36px "Times New Roman",Times,serif;color:#CC0000;text-align:center;white-space:nowrap}
.o-svc{font:12px/19px Verdana,Geneva,sans-serif;color:#222}
.o-svc b{font:700 15px/24px "Times New Roman",Times,serif;color:#7A1F1F}
.o-svc ul{margin:2px 0 0;padding-left:22px}
.o-foot{height:100%;display:flex;align-items:center;justify-content:center;gap:14px;border-top:1px dotted #999;font:10.5px/1 Verdana,Geneva,sans-serif;color:#666}
.o-count{font:700 13px/1 "Courier New",monospace;background:#111;color:#4CFF4C;padding:4px 6px;letter-spacing:2px}

/* ── NEW SKINS: Wrenfield Plumbing, rebuilt (drafting white first, then its own colors) ── */
.n-brand{height:100%;display:flex;align-items:center;gap:12px}
.n-brand svg{width:40px;height:40px;flex:none}
.n-brand .n-mark{fill:currentColor;transition:fill .6s var(--ease)}
.s-finish .n-brand .n-mark{fill:var(--m-teal)}
.n-brand b{display:block;font:800 calc(24px - 3px * var(--m))/1 var(--font);font-stretch:118%;letter-spacing:.005em}
.n-brand span{display:block;font:600 12px/1.3 var(--font);letter-spacing:.06em;opacity:.8;margin-top:4px}
.n-links{position:relative;height:100%}
.n-links .d{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;gap:26px;font:620 16px/1 var(--font);opacity:calc(1 - var(--m))}
.n-links .n-links-cta{padding:8px 14px;border-radius:9px;box-shadow:0 0 0 1.5px currentColor inset}
.s-finish .n-links .n-links-cta{background:var(--m-teal);color:#F7F2E9;box-shadow:none}
.n-links .mm{position:absolute;inset:0;display:grid;place-items:center;opacity:var(--m)}
.n-links .mm svg{width:26px;height:26px}
.n-links .mm{visibility:hidden}
@media (max-width:900px),(max-height:520px) and (pointer:coarse){.iw .n-links .d{visibility:hidden}.iw .n-links .mm{visibility:visible}}
.iw.is-phone .n-links .d{visibility:hidden}.iw.is-phone .n-links .mm{visibility:visible}
.n-head{font:800 calc(74px - 26px * var(--m))/.94 var(--font);font-stretch:116%;letter-spacing:-.028em}
.n-head span{display:block}
.n-head em{display:block;font-family:var(--serif,"Newsreader",Georgia,serif);font-style:italic;font-weight:420;font-stretch:100%;letter-spacing:-.01em;
  font-size:1.06em;line-height:1.02;transition:color .6s var(--ease)}
.s-finish .n-head em{color:var(--m-copper-d)}
.n-sub{margin:0;font:400 calc(19px - 1px * var(--m))/1.5 var(--font);max-width:34em}
.s-finish .n-sub{color:var(--m-ink-2)}
.n-call,.n-quote{position:relative;height:100%;display:flex;align-items:center;gap:16px;padding:0 24px;border-radius:14px;
  box-shadow:0 0 0 1.5px var(--draft) inset;transition:background-color .6s var(--ease),color .6s var(--ease)}
.n-call::after,.n-illo::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .8s var(--ease) .15s}
.n-call::after{box-shadow:0 20px 34px -16px rgba(154,74,33,.75)}
.s-finish .n-call::after,.s-finish .n-illo::after{opacity:1}
.n-call svg{width:30px;height:30px;flex:none}
.n-call b{display:block;font:800 28px/1 var(--font);font-stretch:106%;letter-spacing:.005em}
.n-call span{display:block;font:650 13px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;margin-top:6px}
.n-quote{justify-content:center;font:720 18px/1 var(--font);font-stretch:106%}
.s-finish .n-call{background:var(--m-copper-btn);box-shadow:none}   /* white small text needs 4.5:1: #A9532B gives 5.4 */
.s-finish .p-new .n-call{color:#fff}
.s-finish .n-quote{box-shadow:0 0 0 2px var(--m-teal) inset;color:var(--m-teal)}
.n-illo{position:relative;height:100%;border-radius:20px;overflow:hidden;box-shadow:0 0 0 1.5px var(--draft) inset}
.n-illo::after{box-shadow:0 34px 60px -30px rgba(15,59,58,.65)}
.n-illo svg{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .9s var(--ease) .2s}
.s-finish .n-illo{box-shadow:none;overflow:visible}
.s-finish .n-illo svg{opacity:1;border-radius:20px}
.n-svc{height:100%;display:flex;flex-wrap:wrap;gap:16px;align-content:stretch}
.n-svc>div{position:relative;flex:1 1 300px;display:flex;align-items:center;gap:14px;padding:0 20px;border-radius:14px;box-shadow:0 0 0 1.5px var(--draft) inset;
  transition:background-color .6s var(--ease)}
.n-svc p{margin:0}
.n-svc svg{width:30px;height:30px;flex:none;transition:color .6s var(--ease)}
.n-svc b{display:block;font:720 17px/1.2 var(--font)}
.n-svc span{display:block;font:400 14.5px/1.35 var(--font);opacity:.9}
.s-finish .n-svc>div{background:var(--m-mist);box-shadow:none}
.s-finish .n-svc svg{color:var(--m-copper-d)}

/* live controls inside the demo: real buttons in the rebuilt site */
.iw-page button.iw-hit{all:unset;position:absolute;inset:0;cursor:pointer;border-radius:14px}
.iw-page button.iw-hit:focus-visible{outline:3px solid var(--m-teal);outline-offset:3px}
.iw-page button.iw-hit{pointer-events:none}
.s-live .iw-page button.iw-hit{pointer-events:auto}
.iw-link{all:unset;cursor:pointer;border-radius:6px;padding:4px 2px;pointer-events:none}
.s-live .iw-link{pointer-events:auto}
.iw-link:hover{color:var(--m-copper-d)}
.iw-link:focus-visible{outline:3px solid var(--m-teal);outline-offset:2px}

/* ── below the fold of the rebuilt site ───────────────────────────────────── */
.iw-more{position:absolute;left:calc(405px * var(--m));top:calc(720px + 410px * var(--m));width:calc(1200px - 810px * var(--m));
  background:var(--m-bg);color:var(--m-ink);padding:24px calc(48px - 30px * var(--m)) 56px;opacity:0;visibility:hidden;transition:opacity .6s var(--ease)}
.s-live .iw-more{opacity:1;visibility:visible}
.iw-more h3{margin:0 0 14px;font:800 calc(38px - 10px * var(--m))/1 var(--font);font-stretch:114%;letter-spacing:-.015em}
.iw-more p{margin:0 0 12px;font:400 19px/1.55 var(--font);color:var(--m-ink-2);max-width:60ch}
.iw-more section{padding:36px 0;border-top:1px solid var(--m-line)}
.iw-more section:first-child{border-top:0}
.iw-cols{display:flex;flex-wrap:wrap;gap:18px}
.iw-cols>div{flex:1 1 280px;background:#fff;border-radius:16px;padding:20px 22px;box-shadow:0 0 0 1px var(--m-line)}
.iw-cols b{display:block;font:720 19px/1.25 var(--font);margin-bottom:6px}
.iw-cols p{font-size:17px;margin:0}
.iw-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:18px;counter-reset:st}
.iw-steps li{flex:1 1 260px;counter-increment:st;padding:18px 20px 18px 64px;position:relative;border-radius:16px;background:var(--m-mist)}
.iw-steps li::before{content:counter(st);position:absolute;left:20px;top:18px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--m-teal);color:#F7F2E9;font:760 16px/1 var(--font)}
.iw-steps b{display:block;font:720 18px/1.25 var(--font)}
.iw-steps span{display:block;font-size:16px;color:var(--m-ink-2);margin-top:4px}
.iw-areas{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 0;padding:0;list-style:none}
.iw-areas li{padding:9px 15px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--m-line);font:620 17px/1 var(--font)}
.iw-form{display:grid;gap:14px;max-width:560px}
.iw-form label{display:grid;gap:6px;font:620 16px/1.2 var(--font)}
.iw-form input,.iw-form select,.iw-form textarea{font:400 17px/1.4 var(--font);color:var(--m-ink);background:#fff;border:1.5px solid #8C9591;border-radius:10px;padding:11px 12px}
.iw-form input:focus,.iw-form select:focus,.iw-form textarea:focus{outline:3px solid var(--m-teal);outline-offset:1px;border-color:var(--m-teal)}
.iw-form button{justify-self:start;font:720 17px/1 var(--font);color:#fff;background:var(--m-copper-btn);border:0;border-radius:12px;padding:15px 22px;cursor:pointer}
.iw-form button:focus-visible{outline:3px solid var(--m-teal);outline-offset:3px}
.iw-form button:disabled{cursor:default}
.iw-form [aria-invalid="true"]{border-color:#C0392B}
.iw-err{font:500 15px/1.3 var(--font);color:#B42318;min-height:1em}
.iw-sent{font:600 17px/1.45 var(--font);color:var(--m-ink);background:#FFF1D6;border-radius:10px;padding:12px 14px}
.iw-demo-foot{padding:26px 0 0;border-top:1px solid var(--m-line);font:500 16px/1.5 var(--font);color:var(--m-ink-2)}

.iw-toast{position:absolute;left:50%;bottom:18px;z-index:9;translate:-50% 12px;opacity:0;pointer-events:none;
  background:var(--m-ink);color:#fff;border-radius:12px;padding:12px 16px;font:600 14px/1.4 var(--font);max-width:min(92%,420px);text-align:center;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.6);transition:opacity .3s var(--ease),translate .3s var(--ease)}
.iw-toast.on{opacity:1;translate:-50% 0}

/* ── callouts ─────────────────────────────────────────────────────────────── */
.iw-notes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:4}
.iw-notes polyline{fill:none;stroke:#FFD08A;stroke-width:1.25;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset .6s var(--ease) var(--d)}
.iw-notes circle{fill:var(--amber);opacity:0;transition:opacity .3s var(--d)}
.iw-note{position:absolute;z-index:5;width:236px;padding:9px 12px 10px;border-radius:9px;background:rgba(9,12,16,.9);
  box-shadow:0 0 0 1px rgba(244,168,58,.5) inset,0 18px 30px -18px rgba(0,0,0,.8);color:#EEF0F3;font:500 13.5px/1.35 var(--font);
  opacity:0;translate:0 6px;transition:opacity .45s var(--ease) var(--d),translate .45s var(--ease) var(--d);pointer-events:none}
.iw-note b{display:block;font:700 12px/1.2 var(--font);font-stretch:80%;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin-bottom:3px}
.notes-in .iw-notes polyline{stroke-dashoffset:0}
.notes-in .iw-notes circle{opacity:1}
.notes-in .iw-note{opacity:1;translate:0 0}

/* ── glass ────────────────────────────────────────────────────────────────── */
.iw-glass{position:absolute;inset:46px 0 0;pointer-events:none;overflow:hidden;z-index:6}
.iw-glass::before{content:"";position:absolute;top:-20%;bottom:-20%;left:-40%;width:44%;--tx:inherit;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.06) 40%,rgba(255,255,255,.11) 50%,rgba(255,255,255,.035) 62%,transparent);
  transform:translateX(calc(var(--tx) * 80% + 140%)) skewX(-12deg)}
.s-live .iw-glass{opacity:.45}
/* desktop: the plates are their own layers before the pull, so the first frames of the event only move them */
@media (min-width:900px) and (pointer:fine){.iw.is-mounted .iw-plate{will-change:transform}}
.iw.is-grown .iw-glass{display:none}
/* grown down the page on a phone: the address bar, with its Fictional chip, rides along under the host's header */
.iw.is-grown .iw-chrome{position:sticky;top:var(--iw-sticky-top,0px);z-index:9}

.s-live .iw-lock{opacity:1;transform:none}
.s-live .iw-badge{background:var(--amber);color:#1E1300}
.s-live .iw-well{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#9AA4B2 transparent}
.iw.is-grown .iw-well,.iw:not(.is-mounted) .iw-well{overflow:hidden}
.iw.is-capped .iw-window::after{content:"";position:absolute;left:0;right:0;bottom:0;height:72px;pointer-events:none;z-index:8;
  border-radius:0 0 14px 14px;background:linear-gradient(rgba(246,241,232,0),rgba(246,241,232,.96))}
.s-live .iw-window,.s-live .iw-fitter,.s-live .iw-rig,.s-live .iw-world,.s-live .iw-page,.s-live .iw-plate,
.s-live .p-body,.s-live .p-lower,.s-live .iw-base{transform-style:flat}

/* ── the handle ───────────────────────────────────────────────────────────── */
.iw-handle{position:absolute;left:50%;bottom:-22px;z-index:8;translate:-50% 0;transform:translateZ(60px);display:inline-flex;align-items:center;gap:10px;height:46px;
  padding:0 20px 0 15px;border:0;border-radius:23px;cursor:grab;touch-action:none;white-space:nowrap;
  background:linear-gradient(#FFD27A,var(--amber) 50%,#E4922A);color:#1E1300;font:750 15px/1 var(--font);font-stretch:106%;
  box-shadow:0 1px 0 rgba(255,255,255,.65) inset,0 -2px 0 rgba(110,60,0,.28) inset,0 12px 24px -8px rgba(0,0,0,.7);
  transition:transform .25s var(--ease),opacity .4s,visibility .4s}
.iw-handle:hover{transform:translateZ(60px) translateY(-2px)}
.iw-handle:active{cursor:grabbing}
.iw-handle svg{width:18px;height:18px}
.iw-handle:focus-visible{outline:3px solid #EEF0F3;outline-offset:3px}
.s-apart .iw-handle{opacity:0;visibility:hidden}

/* ── the construction scrubber ────────────────────────────────────────────── */
.iw-deck{display:flex;align-items:center;justify-content:center;gap:10px 18px;flex-wrap:wrap;margin-top:18px;padding:10px 16px 12px;border-radius:18px;
  background:rgba(8,10,13,.72);box-shadow:0 0 0 1px rgba(196,203,213,.12) inset}   /* labels keep their contrast whatever the floor is doing */
.iw-deck[hidden]{display:none}
.iw-slot{display:grid;flex:none;justify-items:start}
.iw-slot>*{grid-area:1/1}
.iw .is-off{visibility:hidden}
.iw-scrub{position:relative;flex:1 1 480px;max-width:760px;height:56px;touch-action:pan-y;cursor:pointer}
.iw-scrub:focus-visible{outline:3px solid var(--amber);outline-offset:4px;border-radius:8px}
.iw-rail{position:absolute;left:10px;right:10px;top:16px;height:2px;background:rgba(196,203,213,.22);border-radius:2px}
.iw-rail i{position:absolute;left:0;top:0;height:100%;width:var(--p,0%);background:var(--amber);border-radius:2px}
.iw-ticks{position:absolute;left:10px;right:10px;top:0;height:100%;display:flex;justify-content:space-between;list-style:none;margin:0;padding:0}
.iw-ticks li{position:relative;width:0;display:flex;flex-direction:column;align-items:center}
.iw-ticks li::before{content:"";width:1.5px;height:12px;margin-top:11px;background:rgba(196,203,213,.4)}
.iw-ticks [data-go]{all:unset;cursor:pointer;margin-top:6px;white-space:nowrap;font:600 12.5px/1 var(--font);font-stretch:94%;color:#C3CAD4;padding:4px 6px;border-radius:6px}
.iw-ticks [data-go]:hover{color:#EEF0F3}
.iw-ticks li.on [data-go]{color:#EEF0F3;font-weight:750}
.iw-knob{position:absolute;top:7px;left:calc(10px + (100% - 20px) * var(--k,0));width:20px;height:20px;translate:-50% 0;pointer-events:none;
  background:var(--amber);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.iw-btn{font:650 14px/1 var(--font);color:#EEF0F3;background:rgba(255,255,255,.07);border:0;border-radius:999px;padding:12px 16px;cursor:pointer;white-space:nowrap;
  box-shadow:0 0 0 1px rgba(196,203,213,.22) inset}
.iw-btn:hover{background:rgba(255,255,255,.12)}
.iw-btn:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
@container (max-width:620px){
  .iw-ticks [data-go]{font-size:0;padding:10px 8px}
  .iw-ticks li.on [data-go]{font-size:12px}
  .iw-scrub{flex-basis:100%}
  .iw-slot{justify-items:center}
}
.iw.no-anim,.iw.no-anim *{transition:none!important}
@media (prefers-reduced-motion:reduce){
  .iw *{transition-duration:.2s!important;transition-delay:0s!important}
  .iw-handle:hover{transform:translateZ(60px)}
}