/* ============================================================================
   Drenin V4 · showcase: THE CLARITY INSTRUMENT 2.0
   A focus ring with a hexagonal iris. Each detent brings the next thing the
   customer needs into focus: that part of the page moves up into its place
   and takes its clean design, while clutter falls back into depth and leaves.
   Who is visiting decides the order. Everything is real DOM, rearranged with
   FLIP transforms; nothing is a picture.
   Scoped under .ci. Legible on any ground: it brings its own dark bench.
   ========================================================================== */
.ci{--ink:#EEF0F3;--ink2:#C4CBD5;--ink3:#98A2AF;--amber:#F4A83A;--ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1);
  width:100%;color:var(--ink);font-family:var(--font,"Archivo",system-ui,sans-serif)}
.ci *,.ci *::before,.ci *::after{box-sizing:border-box}
.ci-bench{position:relative;display:grid;gap:clamp(26px,4vw,64px);align-items:center;justify-items:center;padding:clamp(22px,3vw,44px);border-radius:26px;
  background:radial-gradient(70% 70% at 30% 40%,rgba(34,44,54,.9),rgba(9,12,16,.94) 70%),#0A0D11;
  box-shadow:0 0 0 1px rgba(196,203,213,.14) inset,0 60px 120px -60px rgba(0,0,0,.9)}
@media (min-width:1000px){.ci-bench{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* ── the instrument ───────────────────────────────────────────────────────── */
.ci-inst{display:grid;justify-items:center;gap:22px;width:100%}
.ci-dial{--d:min(420px,78vw);--rot:0deg;position:relative;width:var(--d);height:var(--d);border-radius:50%;touch-action:none;cursor:grab;outline:none;-webkit-user-select:none;user-select:none}
html.ci-turning,html.ci-turning *{-webkit-user-select:none!important;user-select:none!important;cursor:grabbing!important}   /* a drag that leaves the ring never selects the page */
.ci-dial:active{cursor:grabbing}
.ci-dial:focus-visible{box-shadow:0 0 0 4px #0A0D11,0 0 0 7px var(--amber)}
/* the knurl is painted once and turned by the compositor (a conic gradient repainted per frame was the
   most expensive thing on the page); the light on the ring stays put on the dial's own layers */
.ci-dial::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:0 40px 80px -30px #000}
.ci-ring-clip{position:absolute;inset:0;border-radius:50%;overflow:hidden}   /* a turned square box must not widen the page */
.ci-ring{position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(#2A2F37 0deg 1.4deg,#454C57 1.4deg 2.2deg,#1E2228 2.2deg 3.4deg),#262B32;
  transform:rotate(var(--rot));transition:transform .5s var(--ease)}
.ci-dial::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 1px #5A626E inset,0 2px 1px rgba(255,255,255,.2) inset,0 -3px 6px rgba(0,0,0,.6) inset;
  background:conic-gradient(from 210deg,rgba(255,255,255,.2),transparent 22%,transparent 58%,rgba(255,255,255,.1) 78%,rgba(255,255,255,.2));
  -webkit-mask:radial-gradient(circle closest-side,transparent 65.5%,#000 66%);mask:radial-gradient(circle closest-side,transparent 65.5%,#000 66%)}
.ci-scale{position:absolute;inset:0;width:100%;height:100%}
.ci-dial.is-dragging .ci-scale,.ci-dial.is-dragging .ci-ring{transition:none}
.ci-scale text{font:700 12.5px/1 var(--font,"Archivo");font-stretch:112%;letter-spacing:.12em;text-transform:uppercase;fill:#B9C1CC}
.ci-scale text.on{fill:var(--amber)}
.ci-scale text.in{fill:#E8ECF1}
.ci-scale line{stroke:#6A7380;stroke-width:1.6}
.ci-scale line.on{stroke:var(--amber);stroke-width:2.4}
.ci-iris{position:absolute;inset:17%;width:66%;height:66%;filter:drop-shadow(0 10px 18px rgba(0,0,0,.6))}
.ci-readout{position:absolute;inset:34%;display:grid;place-content:center;justify-items:center;text-align:center;gap:4px;pointer-events:none}
.ci-readout b{font:800 clamp(15px,3.4vw,21px)/1.05 var(--font,"Archivo");font-stretch:112%;color:var(--ink);max-width:9em}
.ci-readout span{font:600 12px/1.2 var(--font,"Archivo");letter-spacing:.06em;color:var(--ink2)}
.ci-index{position:absolute;left:50%;top:-14px;width:3px;height:22px;border-radius:2px;background:var(--amber);translate:-50% 0;
  box-shadow:0 0 0 3px #0A0D11}
.ci-dial.is-ticked .ci-index{animation:ci-tick .28s var(--ease)}
@keyframes ci-tick{40%{height:30px;background:#FFD08A}}
.ci-steps{display:flex;gap:10px}
.ci-steps button,.ci-compare{font:680 .95rem/1 var(--font,"Archivo");color:var(--ink);background:rgba(255,255,255,.07);border:0;border-radius:999px;padding:.8rem 1.1rem;cursor:pointer;
  box-shadow:0 0 0 1px rgba(196,203,213,.25) inset;transition:background-color .2s}
.ci-steps button:hover,.ci-compare:hover{background:rgba(255,255,255,.13)}
.ci button:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.ci-who{border:0;margin:0;padding:0;width:100%;max-width:460px}
.ci-who legend{padding:0;margin:0 0 .6rem;font:650 .82rem/1 var(--font,"Archivo");font-stretch:84%;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.ci-chips{display:grid;gap:8px}
.ci-chips button{display:grid;gap:3px;text-align:left;padding:.75rem .95rem;border:0;border-radius:14px;cursor:pointer;color:var(--ink);background:rgba(255,255,255,.04);
  box-shadow:0 0 0 1px rgba(196,203,213,.18) inset;transition:background-color .25s,box-shadow .25s}
.ci-chips button b{font:720 1rem/1.2 var(--font,"Archivo")}
.ci-chips button span{font:500 .88rem/1.2 var(--font,"Archivo");color:var(--ink3)}
.ci-chips button:hover{background:rgba(255,255,255,.08)}
.ci-chips button[aria-checked="true"]{background:rgba(244,168,58,.14);box-shadow:0 0 0 1.5px var(--amber) inset}

/* ── the phone and the page it shows ─────────────────────────────────────── */
.ci-screen-wrap{display:grid;justify-items:center;gap:16px;width:100%}
.ci-phone{position:relative;width:min(372px,100%);height:clamp(560px,64svh,660px);border-radius:40px;padding:14px;
  background:linear-gradient(160deg,#2B3139,#12161B);box-shadow:0 0 0 1px #4A5360 inset,0 0 0 2px #07090C,0 50px 90px -40px #000}
.ci-notch{position:absolute;left:50%;top:22px;width:88px;height:22px;border-radius:12px;background:#07090C;translate:-50% 0;z-index:3}
.ci-page{position:relative;height:100%;overflow:hidden;contain:layout paint;border-radius:28px;background:#F4F1EA;color:#1C2127;
  display:flex;flex-direction:column;gap:10px;padding:48px 14px 16px;perspective:900px}
.ci-fold{position:absolute;left:14px;right:14px;bottom:14px;height:64px;border-radius:0 0 28px 28px;pointer-events:none;
  background:linear-gradient(180deg,rgba(244,241,234,0),rgba(244,241,234,.96));display:grid;place-items:end center;padding-bottom:10px}
.ci-fold span{font:650 10.5px/1 var(--font,"Archivo");letter-spacing:.1em;text-transform:uppercase;color:#5E646B}
/* every movable part: FLIP-animated transform, depth for clutter */
.c-part,.c-junk{position:relative;flex:none;transform-origin:50% 0;will-change:auto}
.ci.is-moving .c-part,.ci.is-moving .c-junk{will-change:transform}
.c-part .old,.c-part .new{transition:opacity .45s var(--ease)}
.c-part .new{display:none}
.c-part.is-clear .old{display:none}
.c-part.is-clear .new{display:block}
.c-junk{transition:filter .5s var(--ease),opacity .5s var(--ease)}
.c-junk.is-sinking{filter:blur(var(--blur,1px));opacity:var(--fade,.7)}
.ci-ghost{position:absolute;z-index:0;pointer-events:none;margin:0;transition:transform .7s var(--ease),filter .7s var(--ease),opacity .7s var(--ease)}
.ci-ghost.go{transform:translateY(24px) scale(.82);filter:blur(7px);opacity:0}

/* the 2011 skins */
.o-marquee{display:block;padding:7px 8px;background:linear-gradient(#2F4E86,#5C80B8);color:#FFE14D;font:700 11.5px/1.3 "Times New Roman",serif;text-align:center;letter-spacing:.02em;border:2px outset #9BB3D9}
.o-list,.o-wall,.o-phones,.o-hours,.o-area,.o-quote{margin:0;font:11.5px/1.45 Verdana,Geneva,sans-serif;color:#333}
.o-list u,.o-quote u{color:#0000CC}
.o-wall{text-align:justify}
.o-phones{color:#B00000;font-weight:700}
.o-phones small{color:#555;font-weight:400}
.j-counter{font:12px/1 Verdana,sans-serif;color:#444}.j-counter b{font:700 12px/1 "Courier New",monospace;background:#111;color:#4CFF4C;padding:2px 5px;letter-spacing:2px}
.j-weather{font:11px/1.3 Verdana,sans-serif;color:#1A4F8A;background:#E6F0FA;border:1px solid #9DB9D8;padding:5px 7px}
.j-badges{display:flex;flex-wrap:wrap;gap:4px}.j-badges i{font:italic 10px/1 Verdana,sans-serif;padding:4px 5px;background:#EEE;border:1px dashed #999;color:#555}
.j-news{font:11px/1.35 Verdana,sans-serif;color:#333;background:#FFFBD6;border:1px solid #E0D276;padding:6px 7px}.j-news u{color:#0000CC}
.j-social{display:flex;align-items:center;gap:5px}.j-social i{width:18px;height:18px;border-radius:50%;background:#7A8FA8}.j-social span{font:italic 11px/1 "Times New Roman",serif;color:#555;margin-left:4px}
.j-specials{font:700 12px/1 "Times New Roman",serif;color:#CC0000;text-align:center;padding:6px;border:2px dashed #CC0000}
.j-foot{font:9.5px/1.3 Verdana,sans-serif;color:#777;text-align:center}

/* the clean skins: what the customer needs, designed */
.c-brand .new{display:none;align-items:center;justify-content:space-between}
.c-brand.is-clear .new{display:flex}
.q-logo{display:flex;align-items:center;gap:7px;color:#0E4D64}
.q-logo svg{width:22px;height:22px;color:#E0763A}
.q-logo b{font:800 17px/1 var(--font,"Archivo");font-stretch:110%;letter-spacing:.005em}
.q-logo small{font:600 10.5px/1 var(--font,"Archivo");letter-spacing:.08em;text-transform:uppercase;color:#5A6570;margin-left:2px}
.q-menu{width:20px;height:12px;border-top:2px solid #1C2127;border-bottom:2px solid #1C2127;position:relative}
.q-menu::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:2px solid #1C2127}
.q-call{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:#B9561F;color:#fff;box-shadow:0 12px 22px -14px rgba(20,24,28,.45)}   /* 4.8:1 with white */
.q-call svg{width:24px;height:24px;flex:none}
.q-call b{display:block;font:800 17px/1.1 var(--font,"Archivo");font-stretch:104%}
.q-call small{display:block;font:600 11.5px/1.2 var(--font,"Archivo");margin-top:2px}
.q-open{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;background:#E3F1EA;color:#1D5C3F;font:650 12px/1.2 var(--font,"Archivo")}
.q-open i{width:8px;height:8px;border-radius:50%;background:#2FA36B;box-shadow:0 0 0 3px rgba(47,163,107,.25)}
.c-services .q-h{margin:0 0 6px;font:780 14px/1 var(--font,"Archivo");font-stretch:108%;color:#1C2127}
.q-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.q-tiles span{display:grid;justify-items:start;gap:4px;padding:9px 8px;border-radius:11px;background:#fff;box-shadow:0 0 0 1px #E4DED2;font:680 11.5px/1.2 var(--font,"Archivo")}
.q-tiles svg{width:18px;height:18px;color:#0E4D64}
.q-proof{display:grid;gap:2px;padding:10px 12px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px #E4DED2}
.q-proof b{font:720 13px/1.25 var(--font,"Archivo")}.q-proof span{font:500 11.5px/1.3 var(--font,"Archivo");color:#5A6570}
.q-area{display:grid;gap:6px}.q-area b{font:720 13px/1.2 var(--font,"Archivo")}
.q-chips{display:flex;flex-wrap:wrap;gap:5px}.q-chips i{font:620 11.5px/1 var(--font,"Archivo");font-style:normal;padding:6px 9px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px #E4DED2}
.q-quote{display:inline-flex;align-items:center;gap:8px;padding:11px 14px;border-radius:12px;background:#0E4D64;color:#fff;font:720 13.5px/1 var(--font,"Archivo")}
.q-quote svg{width:15px;height:15px}

/* the meters */
.ci-meters{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(460px,100%)}
.ci-meters div{display:grid;gap:4px;padding:.8rem .9rem;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px rgba(196,203,213,.16) inset}
.ci-meters b{font:800 1.15rem/1.1 var(--font,"Archivo");font-stretch:106%;color:var(--ink);transition:color .3s}
.ci-meters b.good{color:#FFC266}
.ci-meters span{font:600 .76rem/1.25 var(--font,"Archivo");font-stretch:88%;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3)}
.ci-actions{display:grid;justify-items:center;gap:8px}
.ci-compare[aria-pressed="true"]{background:var(--amber);color:#1E1300}
.ci-fine{margin:0;font-size:.85rem;color:var(--ink3);text-align:center}
.ci-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ci-steps-read{display:none}
/* one column: the demo page comes right after the ring, and the step buttons ride along at the bottom
   of the screen while the page is in view, so every tap shows its effect where the visitor is looking */
@media (max-width:999px){
  .ci-bench{grid-template-columns:minmax(0,1fr)}
  .ci-inst{display:contents}
  .ci-dial{order:1}.ci-who{order:2}.ci-screen-wrap{order:3}
  .ci-steps{order:4;position:sticky;bottom:max(14px,env(safe-area-inset-bottom));z-index:6;align-items:center;gap:4px;padding:5px;border-radius:999px;
    background:rgba(10,13,17,.92);box-shadow:0 0 0 1px rgba(196,203,213,.22),0 16px 34px -14px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .ci-steps-read{display:block;min-width:4.6em;text-align:center;font:700 .9rem/1.1 var(--font,"Archivo");color:var(--ink)}
  .ci-steps button{padding:.75rem .95rem}
}
@media (max-width:999px) and (max-height:520px){
  .ci-dial{--d:min(300px,100svh - 110px)}
  .ci-steps{position:static}   /* a landscape phone has no room for a riding bar */
}
@media (max-width:560px){
  .ci-meters{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .ci-meters div{padding:.6rem .55rem}
  .ci-meters b{font-size:1rem}
  .ci-phone{height:clamp(520px,70svh,600px)}
}
@media (prefers-reduced-motion:reduce){.ci *{transition-duration:.01ms!important;animation:none!important}}

/* without the script: a still of the sorted page, and no controls that cannot work */
.ci:not(.is-mounted) .ci-inst,.ci:not(.is-mounted) .ci-meters,.ci:not(.is-mounted) .ci-compare,.ci:not(.is-mounted) .c-junk,.ci:not(.is-mounted) .c-part .old{display:none}
.ci:not(.is-mounted) .c-part .new{display:block}
.ci:not(.is-mounted) .c-brand .new{display:flex}
.ci:not(.is-mounted) .ci-bench{grid-template-columns:1fr}