/* ==========================================================================
   DevelopRent - About Us
   Dark premium build. Everything is scoped under .abt.abt so nothing leaks
   into the Palace theme, its header or its footer.

   Brand carried over from the light pages: red #EB2027, Archivo headings,
   Inter body, sharp small radii. What changed is the ground - deep ink
   throughout, with depth from glow, hairlines and glass rather than colour
   blocks.

   01 tokens            06 stages (sticky scrollytelling)
   02 base              07 commitments rail + risk
   03 layout            08 audience cards
   04 buttons           09 partner marquee
   05 hero              10 contact
   11 motion + reduced motion + responsive
   ========================================================================== */

/* ---------- 01 tokens ---------- */
.abt.abt{
  --ink:#0B0C0F;            /* page ground */
  --ink-2:#101217;          /* raised band */
  --ink-3:#15181F;          /* card */
  --ink-4:#1C2029;          /* card hover / input */
  --ink-glass:rgba(255,255,255,.035);

  --line:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.15);
  --line-3:rgba(255,255,255,.26);

  --txt:#EDEEF2;            /* headings */
  --txt-2:#A7ABB6;          /* body */
  --txt-3:#767B86;          /* muted / labels */

  --red:#EB2027;
  --red-hi:#FF5A60;
  --red-deep:#A31015;
  --red-wash:rgba(235,32,39,.11);
  --red-line:rgba(235,32,39,.34);
  --red-glow:rgba(235,32,39,.30);

  --f-head:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;

  --t-display:clamp(2.6rem,1.1rem + 4.9vw,5.4rem);
  --t-h1:clamp(2.05rem,1.1rem + 2.6vw,3.1rem);
  --t-h2:clamp(1.85rem,1.1rem + 2.3vw,3rem);
  --t-h3:clamp(1.16rem,1.02rem + .48vw,1.5rem);
  --t-h4:clamp(1.02rem,.96rem + .24vw,1.16rem);
  --t-lead:clamp(1.04rem,.97rem + .4vw,1.26rem);
  --t-body:clamp(.97rem,.94rem + .12vw,1.04rem);
  --t-small:clamp(.87rem,.85rem + .1vw,.93rem);
  --t-label:.7rem;
  --t-figure:clamp(2.2rem,1.2rem + 3.1vw,3.6rem);
  --t-num:clamp(3.4rem,2rem + 5vw,7rem);

  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:22px;
  --sp-6:30px;--sp-7:44px;--sp-8:64px;--sp-9:92px;

  --section-y:clamp(64px,6.4vw,124px);
  --gutter:clamp(20px,4vw,56px);
  --wrap:1240px;
  --wrap-narrow:880px;

  --r-sm:4px;--r-md:8px;--r-lg:14px;--r-xl:22px;--r-pill:999px;

  --sh-md:0 18px 44px rgba(0,0,0,.5);
  --sh-lg:0 34px 80px -20px rgba(0,0,0,.75);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- 02 base ---------- */
.abt.abt *{box-sizing:border-box}
.abt.abt{
  margin:0;position:relative;
  font-family:var(--f-body);font-size:var(--t-body);font-weight:400;line-height:1.68;
  color:var(--txt-2);background-color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}
.abt.abt h1,.abt.abt h2,.abt.abt h3,.abt.abt h4,.abt.abt h5{
  font-family:var(--f-head);margin:0 0 var(--sp-4);
  line-height:1.1;letter-spacing:-.024em;font-weight:700;text-wrap:balance}
.abt h1,.abt h2,.abt h3,.abt h4,.abt h5{color:var(--txt)}
.abt.abt h1{font-size:var(--t-h1)}
.abt.abt h2{font-size:var(--t-h2)}
.abt.abt h3{font-size:var(--t-h3);line-height:1.26;letter-spacing:-.014em}
.abt.abt h4{font-size:var(--t-h4);line-height:1.34;letter-spacing:-.008em}
.abt.abt p{margin:0 0 var(--sp-4);max-width:66ch}
.abt.abt p:last-child{margin-bottom:0}
.abt.abt a{color:inherit;text-decoration:none}
.abt.abt p,.abt.abt li,.abt.abt span,.abt.abt b,.abt.abt small,.abt.abt label{color:inherit}
.abt.abt img,.abt.abt svg,.abt.abt video{max-width:100%;height:auto;display:block}
.abt.abt ul,.abt.abt ol{margin:0;padding:0;list-style:none}
.abt.abt input,.abt.abt select,.abt.abt textarea,.abt.abt button{font-family:inherit;letter-spacing:inherit}
.abt.abt strong,.abt.abt b{font-weight:600}
.abt strong,.abt b{color:var(--txt)}

/* a very fine film of noise stops the large dark areas banding on wide screens */
.abt.abt::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
.abt.abt > *{position:relative;z-index:1}

/* ---------- 03 layout ---------- */
.abt.abt .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.abt.abt .wrap--narrow{max-width:var(--wrap-narrow)}
.abt.abt .section{padding-block:var(--section-y);position:relative}
.abt.abt .section--tight{padding-block:clamp(48px,4.6vw,84px)}

/* every band is dark; these vary the ground so the page still has rhythm */
:where(.abt.abt .section--raised){background:var(--ink-2)}
.abt.abt .section--raised::before,
.abt.abt .section--ink::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2) 22%,var(--line-2) 78%,transparent)}
:where(.abt.abt .section--ink){background:var(--ink)}

/* a soft brand glow anchored to a section corner, purely decorative */
.abt.abt .section--glow{overflow:hidden}
.abt.abt .section--glow::after{
  content:"";position:absolute;width:min(760px,86vw);aspect-ratio:1;border-radius:50%;
  right:-16%;top:-30%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,var(--red-glow),transparent 66%);
  filter:blur(46px);opacity:.5}
.abt.abt .section--glow > *{position:relative;z-index:1}

.abt.abt .eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-body);font-size:var(--t-label);font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--txt-3);
  margin:0 0 var(--sp-4)}
.abt.abt .eyebrow::before{
  content:"";width:22px;height:2px;background:var(--red);border-radius:2px;flex:0 0 auto}

.abt.abt .lead{font-size:var(--t-lead);line-height:1.6;color:var(--txt-2);max-width:62ch}
.abt.abt .section-head{max-width:none;margin-bottom:clamp(34px,3.6vw,58px)}
.abt.abt .section-head h2{max-width:22ch}

/* head that puts the heading left and the lead right on wide screens */
.abt.abt .head--split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(24px,4vw,72px);align-items:end}
.abt.abt .head--split h2{margin-bottom:0}

/* ---------- 04 buttons ---------- */
.abt.abt .btn{
  --btn-bg:var(--red);--btn-fg:#fff;--btn-line:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border:1px solid var(--btn-line);border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--f-body);font-size:var(--t-small);font-weight:600;letter-spacing:.005em;
  line-height:1;cursor:pointer;overflow:hidden;isolation:isolate;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),
             background-color .3s,border-color .3s,color .3s;
  box-shadow:0 12px 30px -12px var(--red-glow)}
.abt.abt .btn::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s;
  background:linear-gradient(120deg,var(--red-hi),var(--red))}
.abt.abt .btn:hover{transform:translateY(-2px);box-shadow:0 20px 44px -14px var(--red-glow)}
.abt.abt .btn:hover::after{opacity:1}
.abt.abt .btn:active{transform:translateY(0)}
.abt.abt .btn:focus-visible{outline:2px solid var(--red-hi);outline-offset:3px}

.abt.abt .btn--ghost{--btn-bg:transparent;--btn-fg:var(--txt);--btn-line:var(--line-2);box-shadow:none}
.abt.abt .btn--ghost::after{background:var(--ink-glass)}
.abt.abt .btn--ghost:hover{--btn-line:var(--line-3);box-shadow:none}
.abt.abt .btn--wide{width:100%}

/* ---------- 05 hero ---------- */
.abt.abt .hero{
  position:relative;padding-block:clamp(72px,7.4vw,140px) clamp(56px,5.4vw,104px);
  background:
    radial-gradient(1100px 620px at 78% -8%,rgba(235,32,39,.22),transparent 62%),
    radial-gradient(760px 520px at 4% 8%,rgba(255,255,255,.05),transparent 60%),
    var(--ink);
  overflow:hidden}
/* faint engineering grid, keeps the empty space from reading as empty */
.abt.abt .hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(to right,var(--line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--line) 1px,transparent 1px);
  background-size:clamp(56px,6vw,96px) clamp(56px,6vw,96px);
  mask-image:radial-gradient(circle at 50% 34%,#000 22%,transparent 74%);
  -webkit-mask-image:radial-gradient(circle at 50% 34%,#000 22%,transparent 74%)}
.abt.abt .hero > *{position:relative;z-index:1}

.abt.abt .hero__in{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(30px,4.6vw,80px);align-items:center}
.abt.abt .hero__copy{min-width:0}
.abt.abt .hero h1,
.abt.abt .hero .rv-d1{font-size:var(--t-display);line-height:.99;letter-spacing:-.036em;
  margin-bottom:var(--sp-5);max-width:17ch}
.abt.abt .hero__lead,
.abt.abt .hero__copy > .elementor-widget-text-editor:nth-of-type(2) p{font-size:var(--t-lead);max-width:54ch}

.abt.abt .hero__btns{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}

.abt.abt .hero__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-6)}
.abt.abt .chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border:1px solid var(--line-2);border-radius:var(--r-pill);
  background:var(--ink-glass);color:var(--txt-2);
  font-size:var(--t-small);font-weight:500;white-space:nowrap;
  transition:border-color .3s,color .3s,background-color .3s}
.abt.abt .chip::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--red);flex:0 0 auto}
.abt.abt .chip:hover{border-color:var(--red-line);color:var(--txt);background:var(--red-wash)}

/* hero visual */
.abt.abt .hero__visual{min-width:0}
.abt.abt .art{
  position:relative;border:1px solid var(--line);border-radius:var(--r-xl);
  background:linear-gradient(160deg,var(--ink-3),var(--ink-2));
  padding:clamp(16px,2vw,26px);box-shadow:var(--sh-lg);overflow:hidden}
.abt.abt .art::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.07),transparent 42%)}
.abt.abt .art__img{width:100%;border-radius:var(--r-lg);position:relative}
.abt.abt .art__cap{
  margin-top:var(--sp-3);font-size:var(--t-label);letter-spacing:.13em;
  text-transform:uppercase;color:var(--txt-3)}

.abt.abt .hero__stat{
  margin-top:var(--sp-4);padding:var(--sp-5);
  border:1px solid var(--line);border-left:2px solid var(--red);
  border-radius:var(--r-md);background:var(--ink-glass)}
.abt.abt .hero__stat strong,
.abt.abt .hero__stat b{display:block;font-family:var(--f-head);font-size:var(--t-h4);
  color:var(--txt);margin-bottom:4px;letter-spacing:-.01em}
.abt.abt .hero__stat p{font-size:var(--t-small);color:var(--txt-3);margin:0}

/* proof rail under the hero */
.abt.abt .proof{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--ink-2)}
.abt.abt .proof__in{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--line)}
.abt.abt .pitem{background:var(--ink-2);padding:clamp(22px,2.6vw,38px) clamp(16px,2vw,30px);
  transition:background-color .4s}
.abt.abt .pitem:hover{background:var(--ink-3)}
.abt.abt .pitem b,.abt.abt .pitem strong{
  display:block;font-family:var(--f-head);font-size:var(--t-figure);line-height:1;
  color:var(--txt);letter-spacing:-.03em;margin-bottom:8px;
  font-variant-numeric:tabular-nums}
.abt.abt .pitem p{font-size:var(--t-small);color:var(--txt-3);margin:0;max-width:26ch}

/* ---------- 06 stages: sticky scrollytelling ---------- */
.abt.abt .stages{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(30px,4.6vw,86px);align-items:start}
.abt.abt .stages__aside{position:sticky;top:clamp(90px,11vh,132px);align-self:start;min-width:0}
.abt.abt .stages__aside h2{max-width:15ch}

/* the rail fills as the panels pass, driven by --fill from abt.js */
.abt.abt .rail{--fill:0%;margin-top:var(--sp-6);display:flex;gap:14px;align-items:flex-start}
.abt.abt .rail__track{
  position:relative;width:3px;flex:0 0 auto;border-radius:3px;
  background:var(--line-2);height:132px;overflow:hidden}
.abt.abt .rail__track::after{
  content:"";position:absolute;left:0;right:0;top:0;height:var(--fill);
  background:linear-gradient(180deg,var(--red-hi),var(--red));
  border-radius:3px;transition:height .35s var(--ease)}
.abt.abt .rail__labels{display:grid;gap:12px;min-width:0}
.abt.abt .rail__labels span{
  font-size:var(--t-small);color:var(--txt-3);line-height:1.3;
  transition:color .35s,transform .35s var(--ease)}
.abt.abt .rail__labels span.on{color:var(--txt);transform:translateX(3px)}
.abt.abt .rail__labels span.on::after{content:"";display:inline-block;width:5px;height:5px;
  border-radius:50%;background:var(--red);margin-left:8px;vertical-align:middle}

.abt.abt .stages__list{display:grid;gap:clamp(14px,1.6vw,22px);min-width:0}
.abt.abt .stage{
  position:relative;padding:clamp(24px,2.8vw,40px);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(165deg,var(--ink-3),var(--ink-2));
  overflow:hidden;isolation:isolate;
  transition:border-color .5s var(--ease),transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
/* cursor-follow sheen, position from abt.js */
.abt.abt .stage::before{
  content:"";position:absolute;z-index:-1;width:420px;aspect-ratio:1;border-radius:50%;
  left:var(--mx,50%);top:var(--my,50%);translate:-50% -50%;
  background:radial-gradient(circle,var(--red-glow),transparent 62%);
  filter:blur(34px);opacity:0;transition:opacity .45s}
.abt.abt .stage:hover,.abt.abt .stage.is-active{
  border-color:var(--red-line);transform:translateY(-3px);box-shadow:var(--sh-md)}
.abt.abt .stage:hover::before{opacity:.85}
.abt.abt .stage__n,
.abt.abt .stage > .elementor-widget-text-editor:first-of-type p{
  font-family:var(--f-head);font-size:var(--t-num);line-height:.82;
  letter-spacing:-.05em;margin:0 0 var(--sp-3);
  color:transparent;-webkit-text-stroke:1px var(--line-3);
  transition:-webkit-text-stroke-color .5s,color .5s}
.abt.abt .stage:hover .stage__n,
.abt.abt .stage.is-active .stage__n{-webkit-text-stroke-color:var(--red);color:var(--red-wash)}
.abt.abt .stage h3{margin-bottom:var(--sp-3)}
.abt.abt .stage p{color:var(--txt-2);max-width:56ch;margin:0}

.abt.abt .incl__note{
  margin-top:clamp(26px,3vw,44px);padding:var(--sp-5) var(--sp-6);
  border:1px dashed var(--line-2);border-radius:var(--r-md);
  background:var(--ink-glass);font-size:var(--t-small);color:var(--txt-3)}
.abt.abt .incl__note p{max-width:none;margin:0;color:inherit}

/* ---------- 07 commitments rail + risk ---------- */
.abt.abt .incl{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden}
.abt.abt .iitem{
  position:relative;display:flex;gap:var(--sp-4);align-items:flex-start;
  padding:clamp(22px,2.4vw,32px);background:var(--ink-2);
  transition:background-color .4s}
.abt.abt .iitem:hover{background:var(--ink-3)}
.abt.abt .iitem::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--red);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
.abt.abt .iitem:hover::after{transform:scaleY(1)}
.abt.abt .iitem__tick{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--red-line);background:var(--red-wash);
  display:grid;place-items:center;margin-top:2px;
  transition:background-color .4s,border-color .4s}
.abt.abt .iitem__tick::before{
  content:"";width:10px;height:6px;border-left:2px solid var(--red-hi);
  border-bottom:2px solid var(--red-hi);transform:rotate(-45deg) translateY(-1px)}
.abt.abt .iitem:hover .iitem__tick{background:var(--red);border-color:var(--red)}
.abt.abt .iitem:hover .iitem__tick::before{border-color:#fff}
.abt.abt .iitem p{margin:0;color:var(--txt-2);max-width:44ch}
.abt.abt .iitem strong{color:var(--txt)}

.abt.abt .risk{
  margin-top:clamp(26px,3vw,44px);padding:var(--sp-6);
  border:1px solid var(--line);border-top:2px solid var(--txt-3);
  border-radius:var(--r-md);background:var(--ink-2)}
.abt.abt .risk p{font-size:var(--t-small);color:var(--txt-3);max-width:none;margin:0}
.abt.abt .risk strong{color:var(--txt-2)}

/* ---------- 08 audience cards ---------- */
.abt.abt .wgrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));
  gap:clamp(14px,1.8vw,22px)}
.abt.abt .mcard{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(24px,2.8vw,38px);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(168deg,var(--ink-3),var(--ink-2));
  overflow:hidden;isolation:isolate;
  transition:transform .6s var(--ease-out),border-color .45s,box-shadow .6s var(--ease-out)}
.abt.abt .mcard::before{
  content:"";position:absolute;z-index:-1;inset:auto -30% -60% -30%;height:70%;
  background:radial-gradient(ellipse at 50% 100%,var(--red-glow),transparent 68%);
  filter:blur(28px);opacity:0;transition:opacity .5s}
.abt.abt .mcard::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--red),var(--red-hi));
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.abt.abt .mcard:hover{transform:translateY(-5px);border-color:var(--red-line);box-shadow:var(--sh-md)}
.abt.abt .mcard:hover::before{opacity:.75}
.abt.abt .mcard:hover::after{transform:scaleX(1)}
.abt.abt .mcard__n,
.abt.abt .mcard > .elementor-widget-text-editor:first-of-type p{
  font-size:var(--t-label);font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--red-hi);margin:0 0 var(--sp-4)}
.abt.abt .mcard h3{margin-bottom:var(--sp-3)}
.abt.abt .mcard p{color:var(--txt-2);margin:0;max-width:46ch}

/* ---------- 09 partner marquee ---------- */
.abt.abt .marq{position:relative;overflow:hidden;
  margin-top:clamp(28px,3.2vw,48px);
  border-block:1px solid var(--line);padding-block:clamp(18px,2vw,28px);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.abt.abt .marq__row{display:flex;gap:clamp(30px,4vw,64px);width:max-content;
  animation:abt-marq 42s linear infinite;will-change:transform}
.abt.abt .marq:hover .marq__row{animation-play-state:paused}
.abt.abt .marq__row span{
  display:inline-flex;align-items:center;gap:12px;white-space:nowrap;
  font-family:var(--f-head);font-size:clamp(1.05rem,.9rem + .7vw,1.55rem);
  font-weight:600;letter-spacing:-.015em;color:var(--txt-3);
  transition:color .3s}
.abt.abt .marq__row span::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--red);flex:0 0 auto}
.abt.abt .marq:hover .marq__row span{color:var(--txt-2)}
@keyframes abt-marq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- 10 contact ---------- */
.abt.abt .enq{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(20px,3vw,44px);align-items:start}
.abt.abt .formcard{
  padding:clamp(24px,3vw,42px);border:1px solid var(--line);border-radius:var(--r-xl);
  background:linear-gradient(168deg,var(--ink-3),var(--ink-2));box-shadow:var(--sh-lg)}

.abt.abt .formcard label{display:block;font-size:var(--t-small);font-weight:500;
  color:var(--txt-2);margin-bottom:6px}
.abt.abt .formcard input[type=text],
.abt.abt .formcard input[type=email],
.abt.abt .formcard input[type=tel],
.abt.abt .formcard select,
.abt.abt .formcard textarea{
  width:100%;padding:14px 16px;color:var(--txt);
  background:rgba(0,0,0,.32);border:1px solid var(--line-2);border-radius:var(--r-md);
  font-size:var(--t-small);line-height:1.5;
  transition:border-color .3s,background-color .3s,box-shadow .3s}
.abt.abt .formcard textarea{min-height:118px;resize:vertical}
.abt.abt .formcard input::placeholder,.abt.abt .formcard textarea::placeholder{color:var(--txt-3)}
.abt.abt .formcard input:focus,.abt.abt .formcard select:focus,.abt.abt .formcard textarea:focus{
  outline:none;border-color:var(--red);background:rgba(0,0,0,.45);
  box-shadow:0 0 0 3px var(--red-wash)}
.abt.abt .formcard select option{background:var(--ink-3);color:var(--txt)}
.abt.abt .formcard .wpcf7-submit,
.abt.abt .formcard input[type=submit]{
  width:100%;padding:16px 26px;border:0;border-radius:var(--r-pill);
  background:var(--red);color:#fff;font-size:var(--t-small);font-weight:600;cursor:pointer;
  box-shadow:0 12px 30px -12px var(--red-glow);
  transition:transform .4s var(--ease-out),box-shadow .4s,background-color .3s}
.abt.abt .formcard .wpcf7-submit:hover,
.abt.abt .formcard input[type=submit]:hover{
  transform:translateY(-2px);background:var(--red-hi);box-shadow:0 20px 44px -14px var(--red-glow)}
.abt.abt .formcard .wpcf7-spinner{margin:10px auto 0}
.abt.abt .formcard .wpcf7-not-valid-tip{color:var(--red-hi);font-size:var(--t-small);margin-top:5px}
.abt.abt .formcard .wpcf7-response-output{
  margin:var(--sp-4) 0 0;padding:13px 16px;border:1px solid var(--line-2);
  border-radius:var(--r-md);font-size:var(--t-small);color:var(--txt-2);background:var(--ink-glass)}
.abt.abt .formcard form > p{margin-bottom:var(--sp-4)}

/* the aside: region emails + where to go next */
.abt.abt .aside__card{
  padding:clamp(22px,2.6vw,32px);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--ink-2)}
.abt.abt .aside__card + .aside__card{margin-top:var(--sp-4)}
.abt.abt .aside__card h3{font-size:var(--t-h4);margin-bottom:var(--sp-2)}
.abt.abt .aside__card > p{font-size:var(--t-small);color:var(--txt-3)}
.abt.abt .aside__list{display:grid;gap:2px;margin-top:var(--sp-4)}
.abt.abt .aside__list a,.abt.abt .clink{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:14px 0;border-top:1px solid var(--line);
  font-size:var(--t-small);color:var(--txt-2);
  transition:color .3s,padding-left .35s var(--ease)}
.abt.abt .aside__list a:hover,.abt.abt .clink:hover{color:var(--red-hi);padding-left:6px}
.abt.abt .aside__list a span:first-child{color:var(--txt-3)}
.abt.abt .aside__list a:hover span:first-child{color:var(--txt-2)}
.abt.abt .nextlist a::after{content:"\2192";color:var(--red);transition:transform .35s var(--ease)}
.abt.abt .nextlist a:hover::after{transform:translateX(4px)}

/* ---------- 11 motion ---------- */
.abt.abt .rv{opacity:0;transform:translateY(22px);
  transition:opacity .78s var(--ease-out),transform .78s var(--ease-out)}
.abt.abt .rv.in{opacity:1;transform:none}
.abt.abt .rv-d1{transition-delay:.09s}
.abt.abt .rv-d2{transition-delay:.18s}
.abt.abt .rv-d3{transition-delay:.27s}

/* per-word headline reveal, words wrapped by abt.js */
.abt.abt .w{display:inline-block;overflow:hidden;vertical-align:top}
.abt.abt .w > i{display:inline-block;font-style:inherit;
  transform:translateY(105%);
  transition:transform .9s var(--ease-out)}
.abt.abt .split.in .w > i{transform:none}

/* thin scroll progress line, pinned under the theme header */
.abt.abt .prog{position:fixed;left:0;top:0;height:2px;z-index:60;
  width:var(--p,0%);background:linear-gradient(90deg,var(--red),var(--red-hi));
  pointer-events:none;transition:width .12s linear}

@media(prefers-reduced-motion:reduce){
  .abt.abt *,.abt.abt *::before,.abt.abt *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .abt.abt .rv{opacity:1;transform:none}
  .abt.abt .w > i{transform:none}
  .abt.abt .marq__row{animation:none;width:100%;flex-wrap:wrap;justify-content:center}
  .abt.abt .prog{display:none}
  .abt.abt .stages__aside{position:static}
}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .abt.abt .hero__in,
  .abt.abt .stages,
  .abt.abt .enq,
  .abt.abt .head--split{grid-template-columns:minmax(0,1fr)}
  .abt.abt .stages__aside{position:static}
  .abt.abt .rail{display:none}
  .abt.abt .head--split{align-items:start}
  .abt.abt .proof__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .abt.abt .hero h1,.abt.abt .hero .rv-d1{max-width:20ch}
}
@media(max-width:640px){
  .abt.abt .proof__in{grid-template-columns:minmax(0,1fr)}
  .abt.abt .hero__btns .btn{width:100%}
  .abt.abt .stage{padding:22px}
  .abt.abt .stage__n,
  .abt.abt .stage > .elementor-widget-text-editor:first-of-type p{font-size:clamp(2.6rem,14vw,3.6rem)}
  .abt.abt .iitem{padding:20px}
  .abt.abt .section--glow::after{opacity:.32}
}

/* Elementor's own wrappers must not fight the layout above */
.abt.abt .elementor-widget-container{min-width:0}
.abt.abt .elementor-widget:not(:last-child){margin-block-end:0}
.abt.abt .e-con,.abt.abt .e-con-inner{--margin-block-start:0;--margin-block-end:0}
.abt.abt .elementor-widget-heading .elementor-heading-title{font-family:var(--f-head)}
.abt .elementor-widget-heading .elementor-heading-title{color:var(--txt)}
.abt .elementor-widget-text-editor{color:inherit}

/* ---------- 12 build hooks ----------
   Elementor puts a .elementor-widget-container between a widget and its own
   markup. Where one of the classes above needs to be the real layout parent,
   that wrapper is made transparent with display:contents. The rest of this
   block is small corrections where an archetype meets the widget tree.
   ---------------------------------------------------------------------- */

.abt.abt .iitem > .elementor-widget-container,
.abt.abt .aside__card > .elementor-widget-container,
.abt.abt .hero__stat > .elementor-widget-container{display:contents}

/* an accented fragment inside a headline, written as <em> in the editor */
.abt.abt h1 em,.abt.abt h2 em{font-style:normal;color:var(--red-hi)}

/* the heading widget is only a wrapper - the heading inside owns type + rhythm */
.abt.abt .hero .elementor-widget-heading{margin-bottom:0;font-size:inherit}

/* arrow inside a button */
.abt.abt .btn .ar{display:inline-block;transition:transform .35s var(--ease)}
.abt.abt .btn:hover .ar{transform:translateX(4px)}

/* the reveal must not out-rank the hover lift on the cards */
.abt.abt .stage.rv.in:hover,
.abt.abt .stage.rv.in.is-active{transform:translateY(-3px)}
.abt.abt .mcard.rv.in:hover{transform:translateY(-5px)}

/* region email rows in the contact aside */
.abt.abt .regions{margin-top:var(--sp-4)}
.abt.abt .regions p{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;
  align-items:baseline;margin:0;padding:13px 0;border-top:1px solid var(--line);
  font-size:var(--t-small);max-width:none}
.abt.abt .regions b{color:var(--txt-3);font-weight:500}
.abt.abt .regions a{color:var(--red-hi);word-break:break-word}
.abt.abt .regions a:hover{color:var(--txt)}

/* four across needs its own track count and a tighter box */
@media(min-width:1081px){.abt.abt .wgrid--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:641px) and (max-width:1080px){
  .abt.abt .wgrid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.abt.abt .wgrid--4 .mcard{padding:clamp(20px,2.1vw,28px)}
.abt.abt .wgrid--4 .mcard p{max-width:40ch}

/* the aside column under the form heading */
.abt.abt .enq__aside{min-width:0}
/* ---------- 13 field notes ----------
   Corrections made while checking the built page at 1440 and 390. Kept in
   their own block so it stays obvious what was tuned against the browser
   rather than designed up front.
   ---------------------------------------------------------------------- */

/* the film of grain only needs to cover the viewport, not 8,000px of page.
   As an absolute layer it was a full-page composited texture and the tab
   dropped to a blank frame while scrolling. */
.abt.abt::before{position:fixed}

/* the corner glow is a soft radial already - the blur was buying nothing and
   costing another full-section layer */
.abt.abt .section--glow::after{filter:none}

/* the hero headline wanted three or four lines, not five */
.abt.abt{--t-display:clamp(2.5rem,1rem + 4.4vw,4.9rem)}
.abt.abt .hero h1,.abt.abt .hero .rv-d1{max-width:20ch}
@media(min-width:1081px){
  .abt.abt .hero__in{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
}

/* the stages illustration is line art on white. Inverted (and hue-rotated
   back so the brand red stays red) it belongs on the dark ground instead of
   sitting in it as a lit panel. */
.abt.abt .art__img img{filter:invert(1) hue-rotate(180deg) saturate(1.15) contrast(.94)}

/* a native select keeps its own light chrome until it is taken off */
.abt.abt .formcard select{
  -webkit-appearance:none;appearance:none;cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23A7ABB6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.abt.abt .formcard select:focus{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23FF5A60' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E")}

/* region above address reads evenly whether the region name is short or long */
.abt.abt .regions p{flex-direction:column;align-items:flex-start;gap:3px}

/* the scroll line clears the WordPress admin bar for logged-in editors */
.abt.abt .prog{z-index:9990}
.admin-bar .abt.abt .prog{top:32px}
@media screen and (max-width:782px){.admin-bar .abt.abt .prog{top:46px}}
/* ---------- 14 container padding reset ----------
   Elementor's kit puts 10px of padding on every container, and because this
   page nests four and five deep that stacked into a 40px gutter on a 390px
   phone. Every container is reset here and the classes that genuinely own
   padding re-declare it, one specificity step higher so order stops
   mattering.
   ---------------------------------------------------------------------- */

/* the scope container itself is a container too, and the rule below only
   reaches its descendants */
.abt.abt{padding:0}
.abt.abt .e-con{padding:0}

.abt.abt .e-con.wrap{
  width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.abt.abt .e-con.wrap--narrow{max-width:var(--wrap-narrow)}
.abt.abt .e-con.section{padding-block:var(--section-y)}
.abt.abt .e-con.section--tight{padding-block:clamp(48px,4.6vw,84px)}
.abt.abt .e-con.hero{padding-block:clamp(72px,7.4vw,140px) clamp(56px,5.4vw,104px)}
.abt.abt .e-con.art{padding:clamp(16px,2vw,26px)}
.abt.abt .e-con.stage{padding:clamp(24px,2.8vw,40px)}
.abt.abt .e-con.mcard{padding:clamp(24px,2.8vw,38px)}
.abt.abt .wgrid--4 .e-con.mcard{padding:clamp(20px,2.1vw,28px)}
.abt.abt .e-con.formcard{padding:clamp(24px,3vw,42px)}
.abt.abt .e-con.risk{padding:var(--sp-6)}
.abt.abt .e-con.incl__note{padding:var(--sp-5) var(--sp-6)}

@media(max-width:640px){
  .abt.abt .e-con.stage{padding:22px}
}
/* ---------- 15 container gap reset ----------
   Same story as the padding: the kit gives every container a 20px flex gap,
   which lands on top of the margins the type already carries and pushed the
   vertical rhythm out. Reset, then re-declare it only where a layout really
   is spaced by gap.
   ---------------------------------------------------------------------- */

.abt.abt .e-con{gap:0}

.abt.abt .e-con.hero__copy{gap:var(--sp-5)}
.abt.abt .e-con.hero__in{gap:clamp(30px,4.6vw,80px)}
.abt.abt .e-con.proof__in{gap:1px}
.abt.abt .e-con.stages{gap:clamp(30px,4.6vw,86px)}
.abt.abt .e-con.stages__list{gap:clamp(14px,1.6vw,22px)}
.abt.abt .e-con.incl{gap:1px}
.abt.abt .e-con.wgrid{gap:clamp(14px,1.8vw,22px)}
.abt.abt .e-con.enq{gap:clamp(20px,3vw,44px)}
.abt.abt .e-con.head--split{gap:clamp(24px,4vw,72px)}

/* phone: the hero is the one place the stacked rhythm needs pulling in */
@media(max-width:640px){
  .abt.abt .e-con.hero{padding-block:58px 46px}
  .abt.abt .e-con.hero__in{gap:26px}
  .abt.abt .hero__btns,.abt.abt .hero__chips{margin-top:var(--sp-5)}
}
/* ---------- 16 the theme wrapper ----------
   The Palace theme puts overflow:hidden on .page-wrapper, which makes it a
   scroll container and quietly kills position:sticky anywhere inside it -
   the sticky column in the stages section just scrolled away. overflow:clip
   keeps the theme's clipping without creating a scroll container, so sticky
   resolves against the viewport again. Scoped to this page's body class so
   no other page is touched.
   ---------------------------------------------------------------------- */

body.dr-abt-page .page-wrapper{overflow:clip}
/* ---------- 17 the Elementor editor ----------
   In the editor every section below the hero rendered as an empty dark band,
   so the page could not be edited by eye even though the content was all
   there. Three things stack up to cause it:

     1. abt.js reveals .rv elements by adding .in as they scroll into view.
        It runs once, over a fixed list, with one observer per element.
     2. The editor re-creates each widget's markup from its model - on boot
        and again on every change - so the nodes abt.js observed are thrown
        away and the replacements come back with .rv and no .in. (The .abt
        node itself is replaced too: its data-abt marker is gone.)
     3. Those replacements inherit .rv's transition, and in the editor the
        transition starts and then never advances - it sits at playState
        running, pinned to its start value of opacity 0.

   (3) is why this has to be fixed here rather than by adding .in from
   script: a running transition outranks everything in the cascade,
   including an author !important and an inline style, so nothing can
   override it while it exists. Taking the transition away removes the
   animation that was holding the value, and the normal cascade applies
   again.

   elementor-element-edit-mode is added by the editor to the elements it
   manages and never appears on the front end, so the live page keeps its
   scroll-reveal exactly as it was - this block simply does not match there.
   ---------------------------------------------------------------------- */

.abt.abt .rv.elementor-element-edit-mode,
.abt.abt .split.elementor-element-edit-mode{
  transition:none!important;opacity:1!important;transform:none!important}

/* headline words, wrapped by abt.js and slid out of their overflow box */
.abt.abt .elementor-element-edit-mode .w > i{
  transition:none!important;transform:none!important}
/* ---------- 18 the light bands ----------
   The page alternates ground instead of running dark the whole way down:

     hero            ink
     proof strip     ink   (reads as the foot of the hero)
     what we do      PAPER
     how we work     ink
     who we work with PAPER
     the rest of the table ink
     get in touch    PAPER

   Every colour in this stylesheet is already a token, so a band is flipped by
   redefining the tokens on it rather than by restating a hundred selectors.
   Cards, hairlines, inputs, hovers, sheens and the em accents all follow from
   these, which is why nothing below needs to know about layout or motion -
   the scroll reveal, the sticky stages, the marquee, the count-ups and the
   cursor sheen are untouched.

   Three things are not tokens and are corrected by hand at the end: the form
   controls carry a hardcoded dark fill, and the select arrow is a hardcoded
   SVG stroke in two states.
   ---------------------------------------------------------------------- */

.abt.abt .section--raised{
  --ink-2:#FAF8F4;          /* the band itself */
  --ink-3:#FFFFFF;          /* card */
  --ink-4:#F3EFE8;          /* card hover, input */
  --ink-glass:rgba(20,22,26,.04);

  --line:rgba(20,22,26,.10);
  --line-2:rgba(20,22,26,.14);
  --line-3:rgba(20,22,26,.26);

  --txt:#14161A;            /* headings */
  --txt-2:#4C4941;          /* body */
  --txt-3:#6E6A61;          /* muted, labels */

  /* #FF5A60 is a dark-ground red: on paper it goes pink and stops carrying
     contrast, so the accent steps down instead of up */
  --red-hi:#C4101A;
  --red-wash:rgba(235,32,39,.07);
  --red-line:rgba(235,32,39,.30);
  --red-glow:rgba(235,32,39,.13);

  /* shadows were tuned to disappear into black; on paper they need to be
     grey and much shallower or every card looks like it is floating */
  --sh-md:0 16px 40px -20px rgba(20,22,26,.26);
  --sh-lg:0 30px 70px -30px rgba(20,22,26,.30);
}
:where(.abt.abt .section--raised){background:var(--ink-2);color:var(--txt-2)}

/* the corner glow is sized for a black ground; keep a hint of it only */
.abt.abt .section--raised.section--glow::after{opacity:.3}

/* form controls: the fill is hardcoded rgba(0,0,0,.32) for the dark build */
.abt.abt .section--raised .formcard input[type=text],
.abt.abt .section--raised .formcard input[type=email],
.abt.abt .section--raised .formcard input[type=tel],
.abt.abt .section--raised .formcard select,
.abt.abt .section--raised .formcard textarea{
  background:#FFFFFF;border-color:var(--line-2);color:var(--txt)}
.abt.abt .section--raised .formcard input:focus,
.abt.abt .section--raised .formcard select:focus,
.abt.abt .section--raised .formcard textarea:focus{
  background:#FFFFFF;border-color:var(--red-line)}

/* the select arrow is an inline SVG with its stroke baked in, twice */
.abt.abt .section--raised .formcard select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236E6A61' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.abt.abt .section--raised .formcard select:focus{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23C4101A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}

/* the ghost button borrows the ground's own ink once the band is light */
.abt.abt .section--raised .btn--ghost{--btn-fg:var(--txt)}
.abt.abt .section--raised .btn--ghost:hover{background:rgba(20,22,26,.05)}

/* phone: the light bands must not inherit the dark build's heavier glow,
   which reads as a smudge once the ground is paper */
@media(max-width:640px){
  .abt.abt .section--raised.section--glow::after{opacity:.2}
}