/* ==========================================================================
   CAROLOGY - main.css
   Dark-only site. Tokens from the logo: acid lime #B2D235 + chrome on ink.
   House rules: 1px hairlines not boxes, one lime element per viewport,
   radius <= 2px, no shadows, no gradient text (chrome headline excepted),
   nothing reveals faster than .35s.
   ========================================================================== */

:root{
  --ink:#0A0A0B; --ink-2:#101013; --ink-3:#16161A;
  --bone:#F0F0EC;
  --bone-60:rgba(240,240,236,.62);
  --bone-40:rgba(240,240,236,.56);
  --lime:#B2D235; --lime-dim:#8FAE22;
  --chrome-hi:#E8E8E8; --chrome-lo:#A7A7A7;
  --hair:rgba(240,240,236,.12);
  --hair-soft:rgba(240,240,236,.07);

  --disp:"Archivo",Arial,sans-serif;
  --body:"Hanken Grotesk","Segoe UI",sans-serif;
  --mono:"JetBrains Mono",Consolas,monospace;

  --gutter:clamp(20px,5vw,88px);
  --pad-y:clamp(88px,13vh,180px);
  --maxw:1440px;
  --nav-h:76px;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-inout:cubic-bezier(.87,0,.13,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
body.is-locked{overflow:hidden}
img,video,canvas{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
::selection{background:var(--lime);color:var(--ink)}

.skip-link{position:fixed;top:-100px;left:16px;z-index:10000;background:var(--ink);border:1px solid var(--hair);padding:10px 16px;font-family:var(--mono);font-size:13px}
.skip-link:focus{top:16px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
main:focus{outline:none}

/* ---- fixed atmosphere layers ---- */
.grain{position:fixed;inset:-100%;z-index:5;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.vignette{position:fixed;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.35) 100%)}
@media (max-width:768px){.grain{display:none}}

/* ---- type utilities ---- */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);display:flex;align-items:center;gap:14px;margin:0 0 22px}
.eyebrow::after{content:"";height:1px;flex:0 0 56px;background:var(--hair);transform:scaleX(0);transform-origin:left}
.in-view .eyebrow::after,.no-js .eyebrow::after{transition:transform .9s var(--ease-out) .15s;transform:scaleX(1)}
.chap-num{font-family:var(--mono);font-size:12px;color:var(--bone-40);letter-spacing:.1em}

.h-disp{font-family:var(--disp);font-weight:900;font-stretch:125%;text-transform:uppercase;line-height:.94;letter-spacing:.005em;margin:0;text-wrap:balance}
.h-xl{font-size:clamp(34px,5.4vw,88px)}
/* keep every hero mask to a single line on narrow phones so the staggered
   reveal stays in sync (a wrapped mask travels twice the distance) */
@media (max-width:430px){.hero h1.h-xl{font-size:clamp(30px,8.2vw,40px);font-stretch:115%}}
.h-lg{font-size:clamp(32px,4.6vw,60px)}
.h-md{font-family:var(--disp);font-weight:800;font-stretch:110%;text-transform:uppercase;font-size:clamp(17px,1.6vw,21px);letter-spacing:.04em;line-height:1.2;margin:0}
.lead{font-size:clamp(16px,1.35vw,19px);color:var(--bone-60);max-width:60ch}
.mono-label{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--bone-40)}

/* masked line reveal (wrap-inner-span pattern; descender-safe) */
.reveal-lines{--rl-mb:0em}
.reveal-lines .rl{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:calc(var(--rl-mb) - .14em)}
.reveal-lines .rl>span{display:block;transform:translateY(112%)}
.js .reveal-lines.is-in .rl>span{transition:transform 1.1s var(--ease-out);transform:translateY(0)}
.js .reveal-lines.is-in .rl:nth-child(2)>span{transition-delay:.08s}
.js .reveal-lines.is-in .rl:nth-child(3)>span{transition-delay:.16s}
.no-js .reveal-lines .rl>span{transform:none}

/* scroll reveal */
.js .reveal{opacity:0;transform:translateY(26px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.js .reveal[data-d="1"].is-in{transition-delay:.08s}
.js .reveal[data-d="2"].is-in{transition-delay:.16s}
.js .reveal[data-d="3"].is-in{transition-delay:.24s}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
section{position:relative}
.section-pad{padding-top:var(--pad-y);padding-bottom:var(--pad-y)}
.hairline-top{border-top:1px solid var(--hair)}

/* ==========================================================================
   PRELOADER + FILM
   ========================================================================== */
/* return visit in this session: no opening ceremony, nothing paints, and the
   hero is simply present rather than performing its entrance again */
.is-returning .preloader,.is-returning .film{display:none!important}
.is-returning .hero .reveal-lines .rl>span{transform:none!important;transition:none!important}
.js.is-returning .hero__standfirst,.js.is-returning .hero__ctas,.js.is-returning .hero__eyebrow,.js.is-returning .hero__chips{opacity:1!important;transform:none!important;transition:none!important}
.is-returning .hero.is-ken .hero__media img{animation:none}
.preloader{position:fixed;inset:0;z-index:9700;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.preloader__speedo{width:min(310px,58vw);aspect-ratio:16/9;height:auto;opacity:0}
.preloader__count{font-family:var(--mono);font-size:13px;letter-spacing:.22em;color:var(--bone-60);font-variant-numeric:tabular-nums}
.preloader__count .pct{color:var(--lime)}

.film{position:fixed;inset:0;z-index:9600;background:#000}
.film__video{width:100%;height:100%;object-fit:cover}
.film__skip{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-60);border:1px solid var(--hair);padding:10px 18px;border-radius:2px;transition:color .35s,border-color .35s}
.film__skip:hover{color:var(--bone);border-color:var(--bone-60)}
.film__progress{position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--lime)}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;height:var(--nav-h);display:flex;align-items:center;transition:background .5s,border-color .5s;border-bottom:1px solid transparent;padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
.nav.is-solid{background:rgba(10,10,11,.82);backdrop-filter:blur(14px) saturate(1.2);border-color:var(--hair)}
/* Three columns rather than space-between, so the page nav sits on the true
   centre line instead of wherever the logo and the CTA cluster happen to leave
   it. The two 1fr side tracks take equal width when there is room, which is
   what centres the middle one; when there is not, grid shrinks the lighter
   side rather than letting anything overlap. */
.nav__inner{width:100%;max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.nav__logo{justify-self:start}
.nav__inner>nav{justify-self:center}
.nav__cta{justify-self:end}
.nav__logo img{height:30px;width:auto}
.nav__links{display:flex;gap:26px;list-style:none;margin:0;padding:0;white-space:nowrap}
.nav__links a{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-60);position:relative;padding:6px 0;transition:color .35s}
.nav__links a:hover,.nav__links a.is-active{color:var(--bone)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1)}
.nav__cta{display:flex;align-items:center;gap:18px}
/* Grid would happily shrink this cluster to centre the nav, wrapping the phone
   number onto two lines. Nothing in here may be squeezed to buy centring. */
.nav__cta>*{flex:none}
.nav__cta .btn{white-space:nowrap}
.nav__tel{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--bone-60);display:flex;align-items:center;gap:9px;transition:color .35s;white-space:nowrap}
.nav__tel:hover{color:var(--bone)}
.nav__tel .dot{width:6px;height:6px;border-radius:50%;background:var(--lime);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;border-radius:2px;padding:13px 26px;position:relative;overflow:hidden;transition:color .45s}
.btn--solid{background:var(--lime);color:var(--ink)}
.btn--solid::before{content:"";position:absolute;inset:0;background:var(--bone);transform:translateY(101%);transition:transform .5s var(--ease-out)}
.btn--solid:hover::before{transform:translateY(0)}
.btn--solid span{position:relative;z-index:1}
.btn--ghost{border:1px solid var(--hair);color:var(--bone-60)}
.btn--ghost:hover{border-color:var(--lime);color:var(--bone)}
.nav__burger{display:none;width:44px;height:44px;position:relative}
.nav__burger i{position:absolute;left:11px;right:11px;height:1.5px;background:var(--bone);transition:transform .4s var(--ease-out),top .4s,opacity .3s}
.nav__burger i:nth-child(1){top:17px}.nav__burger i:nth-child(2){top:26px}
.nav__burger[aria-expanded="true"] i:nth-child(1){top:21px;transform:rotate(45deg)}
.nav__burger[aria-expanded="true"] i:nth-child(2){top:21px;transform:rotate(-45deg)}
@media (max-width:960px){
  .nav__links,.nav__tel{display:none}
  .nav__burger{display:block}
}
.menu{position:fixed;inset:0;z-index:850;background:rgba(10,10,11,.96);backdrop-filter:blur(18px);display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter);visibility:hidden;opacity:0;transition:opacity .5s,visibility 0s .5s}
.menu.is-open{visibility:visible;opacity:1;transition:opacity .5s}
.menu__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.menu__list a{display:flex;align-items:baseline;gap:16px;font-family:var(--disp);font-weight:800;font-stretch:118%;text-transform:uppercase;font-size:clamp(28px,7.5vw,44px);color:var(--bone);padding:6px 0}
.menu__list .n{font-family:var(--mono);font-size:12px;color:var(--lime)}
.menu__foot{margin-top:36px;padding-top:22px;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:8px;font-family:var(--mono);font-size:13px;color:var(--bone-60)}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-start;overflow:clip}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover}
.js .hero.is-ken .hero__media img{animation:ken 14s var(--ease-out) forwards}
@keyframes ken{to{transform:scale(1.045)}}
.hero__scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(10,10,11,.86) 0%,rgba(10,10,11,.55) 34%,rgba(10,10,11,0) 62%),
  linear-gradient(78deg,rgba(10,10,11,.72) 0%,rgba(10,10,11,.34) 40%,rgba(10,10,11,0) 66%),
  linear-gradient(0deg,rgba(10,10,11,.5) 0%,rgba(10,10,11,0) 26%)}
.hero__content{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:calc(var(--nav-h) + clamp(28px,6vh,64px)) var(--gutter) clamp(56px,9vh,110px)}
.hero__eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--lime);margin:0 0 18px}
.hero h1{margin:0 0 20px}
.hero__standfirst{max-width:52ch;color:var(--bone-60);font-size:clamp(15px,1.3vw,18px);margin:0 0 28px}
.hero__chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 34px;padding:0;list-style:none}
.hero__chips li{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--bone-60);border:1px solid var(--hair);border-radius:2px;padding:7px 13px;background:rgba(10,10,11,.35)}
.hero__chips .star{color:var(--lime)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.textlink{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-60);display:inline-flex;gap:10px;align-items:center;transition:color .35s}
.textlink:hover{color:var(--lime)}
.textlink svg{width:14px;height:14px;transition:transform .35s var(--ease-out)}
.textlink:hover svg{transform:translateX(4px)}
/* hero entrance choreography: headline leads fast, support staggers behind it.
   Delays chain off .rl siblings rather than nth-child, so the screen-reader
   span at the start of the H1 cannot shift the sequence. Each .rl holds ONE
   visual line, so every mask travels the same distance and they stay in sync. */
.hero .reveal-lines.is-in .rl>span{transition-duration:.75s;transition-delay:0s}
.hero .reveal-lines.is-in .rl ~ .rl>span{transition-delay:.07s}
.hero .reveal-lines.is-in .rl ~ .rl ~ .rl>span{transition-delay:.14s}
.hero .reveal-lines.is-in .rl ~ .rl ~ .rl ~ .rl>span{transition-delay:.21s}
/* Scoped to .hero deliberately. The show rule below requires .hero.is-live, which
   only the homepage hero ever gets. The service pages use .phero but reuse the
   .hero__ctas class, so an unscoped hide rule left their primary CTA at opacity 0
   permanently, in the first viewport, on desktop and phone alike. */
.js .hero .hero__eyebrow,.js .hero .hero__standfirst,.js .hero .hero__chips,.js .hero .hero__ctas{opacity:0;transform:translateY(14px)}
.js .hero.is-live .hero__eyebrow,.js .hero.is-live .hero__standfirst,.js .hero.is-live .hero__chips,.js .hero.is-live .hero__ctas{opacity:1;transform:none;transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.js .hero.is-live .hero__eyebrow{transition-delay:.05s}
.js .hero.is-live .hero__standfirst{transition-delay:.22s}
.js .hero.is-live .hero__chips{transition-delay:.32s}
.js .hero.is-live .hero__ctas{transition-delay:.42s}
.hero__cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:1px;height:52px;overflow:hidden;z-index:2}
.hero__cue::before{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background:linear-gradient(180deg,transparent,var(--lime));will-change:transform;animation:cue 2.2s var(--ease-inout) infinite}
/* transform, not `top`: keeps this on the compositor instead of relayouting */
@keyframes cue{from{transform:translateY(-100%)}to{transform:translateY(100%)}}
.is-engaged .hero__cue{display:none}

/* ==========================================================================
   TICKER
   ========================================================================== */
.ticker{overflow:hidden;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:18px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker__track{display:flex;gap:0;width:max-content;animation:tick 36s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__seq{display:flex;white-space:nowrap}
.ticker__seq span{font-family:var(--disp);font-weight:800;font-stretch:120%;text-transform:uppercase;font-size:clamp(15px,1.5vw,20px);letter-spacing:.08em;color:var(--bone-40);padding:0 18px;display:flex;align-items:center;gap:36px}
.ticker__seq span::after{content:"";width:5px;height:5px;background:var(--lime);transform:rotate(45deg);flex:none}
@keyframes tick{to{transform:translateX(-50%)}}

/* ==========================================================================
   01 WORKSHOP (statement + stats)
   ========================================================================== */
.chap-head{display:flex;align-items:baseline;gap:18px;border-bottom:1px solid var(--hair);padding-bottom:16px;margin-bottom:clamp(36px,6vh,64px)}
.statement{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px)}
/* "transformation." is a single unbreakable word on its own .rl line, and .rl is
   an overflow:hidden reveal mask, so anything too wide is cut rather than wrapped.
   At 3.9vw/54px the word needed ~3.6% more width than the 7fr column at EVERY
   width swept from 880px to 2160px except a narrow band at 1440. Backing the
   scale off ~7% clears it everywhere with room to spare. */
.statement .h-lg{font-size:clamp(26px,3.63vw,50px)}
.statement .lead{margin:0 0 18px}
.statement__aside p{margin:0 0 16px;color:var(--bone-60);font-size:15.5px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);margin-top:clamp(44px,7vh,80px)}
.stat{background:var(--ink);padding:26px 22px}
.stat__num{font-family:var(--disp);font-weight:800;font-stretch:110%;font-size:clamp(30px,3.4vw,46px);line-height:1;color:var(--bone);font-variant-numeric:tabular-nums}
.stat__num .star{color:var(--lime)}
.stat__label{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-40);margin-top:10px}
@media (max-width:860px){.statement{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}}
/* A phone held landscape (932x430) clears the 860px breakpoint, so the statement
   keeps two columns and its 7fr column falls to 462px. "transformation." needs
   478px at that size and .rl clips rather than wraps, so it lost its tail.
   Bounded to short viewports so no desktop or tablet layout moves. */
@media (max-width:960px) and (max-height:520px){.statement{grid-template-columns:1fr}}

/* ==========================================================================
   02 TRANSFORMATION (pinned canvas scrub)
   ========================================================================== */
.scrub{position:relative}
.scrub__stage{position:relative;height:100svh;overflow:clip;display:flex;align-items:center;justify-content:center}
.scrub__canvas{position:absolute;inset:0;width:100%;height:100%;will-change:transform;transform:translateZ(0)}
/* The scrub is a seeked <video> now, not a canvas sequence. It inherits the
   canvas class for position and sizing; object-fit:cover reproduces the
   cover-fit the canvas used to compute by hand. */
.scrub__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform;transform:translateZ(0);transition:opacity .4s var(--ease-out);pointer-events:none}
.scrub__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.js .scrub__poster{display:none}
.scrub__shade{position:absolute;inset:0;background:radial-gradient(ellipse 52% 46% at 26% 50%,rgba(10,10,11,.8) 0%,rgba(10,10,11,.5) 45%,rgba(10,10,11,0) 80%),linear-gradient(0deg,rgba(10,10,11,.55),rgba(10,10,11,0) 35%,rgba(10,10,11,0) 70%,rgba(10,10,11,.45))}
.scrub__overlay{position:absolute;inset:0;display:grid;place-items:center start;text-align:left;pointer-events:none;padding:0 var(--gutter)}
.scrub__beat{grid-area:1/1;opacity:0;transform:translateY(18px);max-width:min(52vw,620px);padding:0}
.scrub__beat .h-disp{font-size:clamp(34px,5.6vw,72px)}
.scrub__beat p{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-60);margin:16px 0 0}
.scrub__rail{position:absolute;left:var(--gutter);bottom:34px;width:min(220px,30vw);height:1px;background:var(--hair)}
.scrub__rail i{position:absolute;left:0;top:0;height:100%;width:100%;background:var(--lime);transform:scaleX(0);transform-origin:left}
.no-js .scrub__overlay,.rm .scrub__overlay{position:relative;padding:40px 0}
.no-js .scrub__beat,.rm .scrub__beat{opacity:1;transform:none;grid-area:auto}

/* ==========================================================================
   03 SERVICES
   ========================================================================== */
.svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.svc{grid-column:span 2}
.svc:nth-child(4),.svc:nth-child(5){grid-column:span 3}
.svc{position:relative;background:var(--ink);display:flex;flex-direction:column;min-height:300px;overflow:clip}
.svc__media{position:absolute;inset:0;opacity:.55;transition:opacity .6s,transform 1.2s var(--ease-out)}
.svc__media img,.svc__media video{width:100%;height:100%;object-fit:cover}
.svc:hover .svc__media{opacity:.8;transform:scale(1.03)}
.svc__body{position:relative;z-index:2;margin-top:auto;padding:22px;background:linear-gradient(0deg,rgba(10,10,11,.88) 30%,rgba(10,10,11,0))}
.svc__num{font-family:var(--mono);font-size:11.5px;color:var(--lime);letter-spacing:.1em}
.svc__body h3{margin:8px 0 6px}
.svc__body p{margin:0;font-size:14px;color:var(--bone-60);max-width:40ch}
.svc__arrow{position:absolute;top:18px;right:18px;z-index:2;width:34px;height:34px;border:1px solid var(--hair);border-radius:2px;display:grid;place-items:center;color:var(--bone-60);transition:border-color .4s,color .4s,background .4s}
.svc:hover .svc__arrow{border-color:var(--lime);color:var(--ink);background:var(--lime)}
@media (max-width:1020px){.svc-grid{grid-template-columns:repeat(2,1fr)}.svc,.svc:nth-child(4),.svc:nth-child(5){grid-column:span 1}}
@media (max-width:640px){.svc-grid{grid-template-columns:1fr}.svc{min-height:240px}}

.acc{border-top:1px solid var(--hair);margin-top:clamp(44px,7vh,72px)}
.acc__item{border-bottom:1px solid var(--hair)}
.acc__btn{width:100%;display:flex;align-items:baseline;gap:18px;padding:18px 4px;text-align:left;transition:color .35s}
.acc__btn .n{font-family:var(--mono);font-size:12px;color:var(--bone-40);flex:none;width:30px}
.acc__btn .t{font-family:var(--disp);font-weight:700;font-stretch:112%;text-transform:uppercase;font-size:clamp(15px,1.5vw,18px);letter-spacing:.04em}
.acc__btn .d{margin-left:auto;font-family:var(--mono);font-size:16px;color:var(--bone-40);transition:transform .45s var(--ease-out)}
.acc__btn:hover .n{color:var(--lime)}
.acc__btn[aria-expanded="true"] .d{transform:rotate(45deg)}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease-out)}
.acc__panel>div{overflow:hidden}
.acc__panel p{margin:0 0 20px;padding:0 4px 0 52px;color:var(--bone-60);font-size:15px;max-width:68ch}
.acc__item.is-open .acc__panel{grid-template-rows:1fr}
.no-js .acc__panel{grid-template-rows:1fr}

/* ==========================================================================
   04 BEFORE / AFTER
   ========================================================================== */
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
@media (max-width:900px){.ba-pair{grid-template-columns:1fr}}
.compare{position:relative;aspect-ratio:16/9;overflow:clip;border:1px solid var(--hair);border-radius:2px;touch-action:none;--split:50%}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.compare__after{clip-path:inset(0 0 0 var(--split))}
.compare__handle{position:absolute;top:0;bottom:0;left:var(--split);width:1px;background:var(--lime);cursor:ew-resize}
.compare__handle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border:1px solid var(--lime);border-radius:50%;background:rgba(10,10,11,.6);backdrop-filter:blur(4px)}
.compare__tag{position:absolute;top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone);background:rgba(10,10,11,.78);border:1px solid var(--hair);border-radius:2px;padding:5px 10px;pointer-events:none}
.compare__tag--b{left:14px}.compare__tag--a{right:14px}
.compare figcaption{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:11.5px;color:var(--bone-60);background:rgba(10,10,11,.55);padding:5px 10px;border-radius:2px;pointer-events:none}

/* ==========================================================================
   05 SECURITY (pinned video scrub)
   ========================================================================== */
.security{background:var(--ink-2)}
.booth{position:relative}
.booth__stage{position:relative;height:100svh;overflow:clip}
.booth__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.booth__canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .4s var(--ease-out);will-change:transform;transform:translateZ(0)}
.booth__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,11,.78) 0%,rgba(10,10,11,.25) 55%,rgba(10,10,11,.1))}
.booth__copy{position:absolute;inset:0;display:flex;align-items:center}
.booth__inner{max-width:var(--maxw);margin:0 auto;width:100%;padding:0 var(--gutter)}
.booth__steps{position:relative;max-width:440px;min-height:240px}
.booth__step{position:absolute;inset:0;opacity:0;transform:translateY(16px)}
.booth__step .k{font-family:var(--mono);font-size:12px;color:var(--lime);letter-spacing:.14em}
.booth__step h3{margin:10px 0 12px;font-size:clamp(26px,3vw,40px)}
.booth__step p{margin:0;color:var(--bone-60);font-size:15.5px;max-width:44ch}
.booth__progress{display:flex;gap:8px;margin-top:26px}
.booth__progress i{width:34px;height:1px;background:var(--hair)}
.booth__progress i.on{background:var(--lime)}
/* service links parked in the film's empty bottom-right corner */
.no-js .booth__step,.rm .booth__step,.booth--static .booth__step{position:relative;opacity:1;transform:none;margin-bottom:28px}
.no-js .booth__stage,.rm .booth__stage,.booth--static .booth__stage{height:auto;min-height:60vh}
.booth--static .booth__copy{position:relative;padding:48px 0}
.booth--static .booth__progress{display:none}

/* ==========================================================================
   06 WORK
   ========================================================================== */
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.work-grid figure{margin:0;position:relative;overflow:clip;border-radius:2px}
.work-grid img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.work-grid figure:hover img{transform:scale(1.045)}
.work-grid figcaption{position:absolute;left:12px;bottom:10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-60);background:rgba(10,10,11,.55);padding:4px 9px;border-radius:2px}
.w-8{grid-column:span 8;aspect-ratio:16/9}
.w-4{grid-column:span 4;aspect-ratio:4/5}
.w-6{grid-column:span 6;aspect-ratio:3/2}
@media (max-width:760px){.w-8,.w-4,.w-6{grid-column:span 12;aspect-ratio:16/10}}

/* ==========================================================================
   07 REVIEWS
   ========================================================================== */
.rev-lockup{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:clamp(34px,5vh,56px)}
.rev-lockup .score{font-family:var(--disp);font-weight:900;font-stretch:118%;font-size:clamp(56px,7vw,96px);line-height:1}
.stars{position:relative;display:inline-block;font-size:20px;letter-spacing:3px;color:var(--hair);line-height:1}
.stars::before{content:"★★★★★"}
.stars i{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:var(--lime);width:var(--rate,96%)}
.stars i::before{content:"★★★★★"}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.rev{background:var(--ink);padding:26px 24px;display:flex;flex-direction:column;gap:14px}
.rev p{margin:0;font-size:15px;color:var(--bone-60);flex:1}
.rev .who{font-family:var(--mono);font-size:12px;color:var(--bone)}
.rev .spec{font-family:var(--mono);font-size:11.5px;color:var(--bone-40);letter-spacing:.05em}
@media (max-width:900px){.rev-grid{grid-template-columns:1fr}}

/* ==========================================================================
   08 BOOK
   ========================================================================== */
.book{position:relative;overflow:clip}
.book__bg{position:absolute;inset:0}
.book__bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.book__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,11,.92) 20%,rgba(10,10,11,.55))}
.book__inner{position:relative;z-index:2;text-align:center;max-width:720px;margin:0 auto;padding:clamp(96px,16vh,200px) var(--gutter)}
.book__inner .lead{margin:18px auto 34px}
.book__ctas{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.book__note{margin-top:26px;font-family:var(--mono);font-size:12px;color:var(--bone-40);letter-spacing:.06em}

/* ==========================================================================
   09 VISIT
   ========================================================================== */
.visit{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:start}
.visit__rows{display:flex;flex-direction:column}
.visit__row{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--hair-soft);font-size:15px}
.visit__row dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-40);margin:0;padding-top:3px}
.visit__row dd{margin:0;color:var(--bone-60)}
.visit__row dd a{color:var(--bone);border-bottom:1px solid var(--hair);transition:border-color .35s}
.visit__row dd a:hover{border-color:var(--lime)}
.visit__map{position:relative;aspect-ratio:4/3;border:1px solid var(--hair);border-radius:2px;overflow:clip}
.visit__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:invert(.92) hue-rotate(180deg) saturate(.5) brightness(.9)}
.visit__map a.pill{position:absolute;left:14px;bottom:14px;z-index:2;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:rgba(10,10,11,.8);border:1px solid var(--hair);border-radius:2px;padding:9px 14px;backdrop-filter:blur(6px)}
.visit__map a.pill:hover{border-color:var(--lime)}
@media (max-width:900px){.visit{grid-template-columns:1fr}}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{border-top:1px solid var(--hair);position:relative;overflow:clip}
.foot{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:clamp(28px,4vw,64px);padding-top:clamp(56px,8vh,96px);padding-bottom:40px}
.foot h3{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-40);margin:0 0 16px;font-weight:500}
/* Touch hit areas. 12px of padding left these links at 43px tall, one pixel under
   the 44px target; 13px clears it. The negative margins keep the visual rhythm
   identical, so this grows the hit box without moving anything on screen. */
@media (pointer:coarse){
  .textlink,.visit__row dd a,.menu__foot a,.foot address a,.foot__legal a{padding-top:13px;padding-bottom:13px;margin-top:-13px;margin-bottom:-13px;display:inline-block}
  /* the logo anchor hugged its 30px image; the nav bar is taller than 44px so
     this only grows the hit area, it does not change the bar height */
  .nav__logo{display:flex;align-items:center;min-height:44px}
}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot a{color:var(--bone-60);font-size:14.5px;transition:color .35s}
.foot a:hover{color:var(--lime)}
.foot address{font-style:normal;color:var(--bone-60);font-size:14.5px;line-height:1.8}
.foot__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:22px 0 30px;border-top:1px solid var(--hair-soft);font-family:var(--mono);font-size:11.5px;color:var(--bone-40)}
.foot__wordmark{display:block;width:100%;overflow:hidden;line-height:0}
.foot__wordmark img{width:100%;height:auto;display:block;opacity:.14}
@media (max-width:860px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot{grid-template-columns:1fr}}

/* ==========================================================================
   CURSOR
   ========================================================================== */
.cursor{position:fixed;inset:0;z-index:9800;pointer-events:none;opacity:0;transition:opacity .3s}
.cursor.is-active{opacity:1}
.cursor__dot{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;mix-blend-mode:difference}
.cursor__ring{position:absolute;width:34px;height:34px;border-radius:50%;border:1px solid #fff;mix-blend-mode:difference;display:grid;place-items:center;transition:width .35s var(--ease-out),height .35s var(--ease-out)}
.cursor.is-link .cursor__ring{width:48px;height:48px}
.cursor.is-view .cursor__ring{width:76px;height:76px;background:#fff}
.cursor__label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#000;opacity:0}
.cursor.is-view .cursor__label{opacity:1}
@media (pointer:coarse){.cursor{display:none}}
.js.has-cursor *{cursor:none}
.js.has-cursor iframe{cursor:auto}

/* ==========================================================================
   WRAP PREVIEW EMBED
   Locked to the studio's full height so the section never resizes while people
   click finishes and swatches. The !important beats the inline height the embed
   sets over postMessage. Heights carry headroom over the measured maximum.
   ========================================================================== */
tint-wrap-tester{display:block}
tint-wrap-tester iframe{display:block;width:100%;border:0}

/* ==========================================================================
   SERVICE PAGES
   ========================================================================== */
.phero{position:relative;min-height:64svh;display:flex;align-items:flex-end;overflow:clip;padding-top:var(--nav-h)}
.phero__media{position:absolute;inset:0}
.phero__media img{width:100%;height:100%;object-fit:cover}
.phero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease-out)}
.phero__video.is-on{opacity:1}
.rm .phero__video{display:none}
.phero__scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(10,10,11,.6) 0%,rgba(10,10,11,0) 24%),
  linear-gradient(0deg,rgba(10,10,11,.92) 0%,rgba(10,10,11,.25) 55%)}
.phero__content{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(48px,8vh,96px) var(--gutter) clamp(40px,7vh,72px)}
.phero__crumb{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-60);margin:0 0 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.phero__crumb a,.phero__crumb span{white-space:nowrap}
.phero__crumb a{color:var(--lime)}
.phero h1{margin:0 0 16px;font-size:clamp(34px,5.4vw,72px)}
/* .rl is the line-reveal mask and carries overflow:hidden, so a heading line that
   does not fit is CUT, not wrapped. The 34px clamp floor is wider than a 360px
   phone can hold: "Ghost Immobilisers" needed 336px against 320px available and
   lost its tail (56px lost at 320px wide). The homepage hero already has this
   shrink at the same breakpoint; the service-page hero never got one. */
@media (max-width:430px){.phero h1{font-size:clamp(26px,8vw,38px);font-stretch:115%}}
.phero__standfirst{max-width:56ch;color:var(--bone-60);font-size:clamp(15px,1.3vw,18px);margin:0 0 26px}
.pbody{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:start}
.pbody__main p{color:var(--bone-60);max-width:62ch;margin:0 0 16px}
.pbody__main h2{font-family:var(--disp);font-weight:800;font-stretch:112%;text-transform:uppercase;font-size:clamp(19px,2vw,26px);letter-spacing:.03em;margin:36px 0 14px}
.pbody__main h2:first-child{margin-top:0}
.specs{border:1px solid var(--hair);border-radius:2px;position:sticky;top:calc(var(--nav-h) + 20px)}
.specs h3{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-40);font-weight:500;margin:0;padding:14px 18px;border-bottom:1px solid var(--hair)}
.specs ul{list-style:none;margin:0;padding:6px 0}
.specs li{display:flex;gap:12px;align-items:baseline;padding:10px 18px;font-size:14.5px;color:var(--bone-60)}
.specs li::before{content:"";width:5px;height:5px;background:var(--lime);transform:rotate(45deg);flex:none;position:relative;top:-2px}
.specs .specs__cta{padding:14px 18px;border-top:1px solid var(--hair)}
@media (max-width:900px){.pbody{grid-template-columns:1fr}.specs{position:static}}
.pmedia{position:relative;border:1px solid var(--hair);border-radius:2px;overflow:clip;aspect-ratio:16/9;margin:clamp(36px,6vh,64px) 0}
.pmedia video,.pmedia img{width:100%;height:100%;object-fit:cover}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.tier{background:var(--ink);padding:24px 22px;display:flex;flex-direction:column;gap:10px}
.tier--hot{background:var(--ink-2);outline:1px solid rgba(178,210,53,.4);outline-offset:-1px}
.tier .t-name{font-family:var(--disp);font-weight:800;font-stretch:112%;text-transform:uppercase;font-size:16px;letter-spacing:.04em}
.tier .t-price{font-family:var(--mono);font-size:13px;color:var(--lime);letter-spacing:.06em}
.tier p{margin:0;font-size:14px;color:var(--bone-60);flex:1}
.tier .t-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-40)}
@media (max-width:820px){.tiers{grid-template-columns:1fr}}
.faq .acc__btn .t{text-transform:none;font-stretch:100%;font-family:var(--body);font-weight:600;font-size:clamp(15px,1.4vw,17px);letter-spacing:0}
.area-block{border:1px solid var(--hair);border-radius:2px;background:var(--ink-2);padding:22px 24px;margin-top:clamp(36px,6vh,64px)}
.area-block p{margin:0;color:var(--bone-60);font-size:14.5px;max-width:none}
.pcta{border-top:1px solid var(--hair);background:var(--ink-2);text-align:center;padding:clamp(64px,10vh,120px) var(--gutter)}
.pcta h2{margin:0 0 14px}
.pcta .lead{margin:0 auto 30px}
.pcta__row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.crosssell{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}

/* ==========================================================================
   REDUCED MOTION + NO-JS
   ========================================================================== */
.rm *,.rm *::before,.rm *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
.rm .grain,.rm .cursor{display:none}
.no-js .preloader,.no-js .film,.no-js .cursor{display:none}
.no-js .reveal,.no-js .reveal-lines .rl>span{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .grain,.hero__cue{display:none}
}

/* ==========================================================================
   SOCIAL ICONS + LEGAL PAGES
   ========================================================================== */
.socials{flex-direction:row!important;flex-wrap:wrap;gap:10px!important}
.socials a{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--hair);border-radius:2px;padding:9px 13px;color:var(--bone-60);transition:color .35s,border-color .35s,background .35s}
.socials a:hover{color:var(--ink);background:var(--lime);border-color:var(--lime)}
.socials svg{width:15px;height:15px;fill:currentColor;flex:none}
.socials span{font-family:var(--mono);font-size:12px;letter-spacing:.06em}
/* Must sit AFTER the .socials a / a.pill base rules: a media query adds no
   specificity, so an override placed above them loses on source order.
   Both measured 40px tall on touch; 11px of padding clears the 44px target. */
@media (pointer:coarse){
  .socials a{padding-top:12px;padding-bottom:12px}
  .visit__map a.pill{padding-top:12px;padding-bottom:12px}
  /* .textlink carries -13px margins, so a visual 16px gap leaves only 3px between
     the hit boxes: a tap just under the primary button landed on the FAQ link. */
  .hero__ctas{gap:24px}
}

.foot__legal-links{display:flex;gap:18px}
.foot__legal-links a{color:var(--bone-40);transition:color .35s}
.foot__legal-links a:hover{color:var(--lime)}

.legal{max-width:70ch;margin-top:clamp(34px,6vh,58px)}
.legal h2{font-family:var(--disp);font-weight:800;font-stretch:112%;text-transform:uppercase;font-size:clamp(16px,1.7vw,20px);letter-spacing:.04em;margin:clamp(32px,5vh,48px) 0 12px;padding-top:clamp(20px,3vh,28px);border-top:1px solid var(--hair)}
.legal h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal p{color:var(--bone-60);margin:0 0 14px;font-size:15.5px}
.legal a{color:var(--lime);border-bottom:1px solid rgba(178,210,53,.3)}
.legal a:hover{border-color:var(--lime)}
.legal .mono{font-family:var(--mono);font-size:13.5px;color:var(--bone);background:var(--ink-2);border:1px solid var(--hair);border-radius:2px;padding:1px 6px}

/* ---- booking portal embed ---- */
.booking{margin:clamp(30px,5vh,52px) auto 0;max-width:900px;border:1px solid var(--hair);border-radius:2px;background:var(--ink-2);overflow:hidden}
.booking iframe{display:block;width:100%;height:min(78vh,820px);border:0;background:var(--ink-2)}
@media (max-width:700px){.booking iframe{height:min(84vh,680px)}}

/* ---- review cards ---- */
.stars--sm{font-size:14px;letter-spacing:2px}
.rev .who{font-family:var(--mono);font-size:12.5px;color:var(--bone);letter-spacing:.04em}
.rev-more{display:flex;justify-content:center;margin-top:clamp(26px,4vh,40px)}
@media (max-width:900px){.rev-grid{grid-template-columns:1fr}}

@media (max-width:760px){.scrub__beat{max-width:min(92vw,620px)}
  .scrub__shade{background:radial-gradient(ellipse 90% 40% at 50% 46%,rgba(10,10,11,.78) 0%,rgba(10,10,11,.45) 55%,rgba(10,10,11,0) 92%),linear-gradient(0deg,rgba(10,10,11,.55),rgba(10,10,11,0) 35%,rgba(10,10,11,0) 70%,rgba(10,10,11,.45))}}

/* ---- reviews marquee (infinite right-to-left ticker) ----
   The track carries the full set of cards TWICE. Translating it by exactly
   -50% therefore lands the duplicate where the original started, so the loop
   has no seam. The duplicate set is aria-hidden so screen readers read each
   review once. Hover or keyboard focus pauses it, and reduced-motion turns it
   into a plain horizontal scroller instead of animating. */
.rev-marquee{position:relative;overflow:hidden;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.rev-marquee__track{display:flex;align-items:center;width:max-content;will-change:transform;animation:rev-scroll var(--rev-dur,160s) linear infinite}
.rev-marquee:hover .rev-marquee__track,.rev-marquee:focus-within .rev-marquee__track{animation-play-state:paused}
@keyframes rev-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.rev-marquee .rev{flex:0 0 clamp(280px,26vw,400px);border:1px solid var(--hair);border-radius:2px;margin:0 14px 0 0}
.rev-marquee .rev blockquote{margin:0;flex:none}
.rev blockquote p{margin:0}
.rev blockquote p+p{margin-top:.72em}
/* On a narrow screen the longest reviews would otherwise run to ~780px tall.
   Wider cards and slightly smaller type keep them readable without cutting
   a single word of anyone's review. */
@media (max-width:768px){
  .rev-marquee .rev{flex:0 0 min(84vw,340px)}
  .rev-marquee .rev blockquote p{font-size:14px;line-height:1.55}
}
.rev-marquee .rev figcaption{display:flex;flex-direction:column;gap:5px}
@media (prefers-reduced-motion:reduce){
  .rev-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .rev-marquee__track{animation:none}
}

/* ---- social icons in the nav ---- */
.nav__socials{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.nav__socials a{display:grid;place-items:center;width:32px;height:32px;border-radius:2px;color:var(--bone-60);transition:color .35s,background .35s}
.nav__socials svg{width:15px;height:15px;fill:currentColor;display:block}
.nav__socials a:hover{color:var(--lime);background:rgba(178,210,53,.1)}
/* This has to live AFTER the display:flex above: media queries add no
   specificity, so a copy of this rule higher up the file never won. */
/* Socials need ~1210px of inner width before the link row can still sit on the
   true centre line alongside them. Below that they come off rather than
   shoving the nav off centre and crowding the Book now button. The footer
   carries them on every page regardless. */
@media (max-width:1343px){.nav__socials{display:none}}