/* Prime Infoserv — system layer.
   Components only. Every rule is the enforceable half of a mechanism in
   tokens.css. Page composition lives in pages.css. */

*,*::before,*::after{box-sizing:border-box}
/* NO scroll-behavior:smooth here. CSS smooth scrolling fights ScrollTrigger —
   it makes every programmatic scroll asynchronous, so pinned sections and
   anchor jumps end up racing each other. Smooth scrolling is done in JS,
   per interaction, where it can be sequenced. */
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}          /* clip, not hidden — hidden breaks sticky */
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font); font-size:var(--fs-body);
  line-height:var(--lh-body); font-weight:var(--fw-reg);
  -webkit-font-smoothing:antialiased;
}
img,svg,video{display:block; max-width:100%}
img{height:auto; border-radius:var(--r-none)}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0; list-style:none}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}

/* P1 — nothing in this system casts a shadow. Stated as a rule because a
   shadow is what every component library adds by default. */
*{box-shadow:none !important}

:focus-visible{outline:2px solid var(--royal); outline-offset:3px}
.skip{position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:var(--white); padding:var(--s-3) var(--s-5)}
.skip:focus{left:0}
.sr{position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}

/* ---- TYPE -------------------------------------------------------------
   M3 — display is LIGHTER than body, and large. Weight carries the
   hierarchy downward, not upward, which is the inverse of the default. */
.display{
  font-size:var(--fs-display); line-height:var(--lh-display);
  letter-spacing:var(--tr-display); font-weight:var(--fw-light);
  color:var(--ink-strong); text-wrap:balance;
}
.t2{
  font-size:var(--fs-h2); line-height:var(--lh-h2);
  letter-spacing:var(--tr-h2); font-weight:var(--fw-light);
  color:var(--ink-strong); text-wrap:balance; max-width:20ch;
}
.t3{font-size:var(--fs-h3); line-height:1.25; letter-spacing:var(--tr-h3);
  font-weight:var(--fw-med); color:var(--ink-strong)}
.lead{font-size:var(--fs-lead); color:var(--ink-soft); max-width:60ch; line-height:1.55}
.small{font-size:var(--fs-small)}
.micro{font-size:var(--fs-micro)}
.muted{color:var(--ink-soft)}

/* M5 / P6 — the ONLY label form in this system.
   Text face, sentence case, no tracking, no uppercase, no chip, no square,
   no dot. It names a category when a category genuinely needs naming, and
   it is absent far more often than it is present. */
.cat{font-size:var(--fs-micro); font-weight:var(--fw-med); color:var(--slate);
  letter-spacing:0; text-transform:none}

/* ---- SHELL ------------------------------------------------------------
   P4 — sections are divided by ground and space. There is no
   `.section + .section { border-top }` rule in this file, and adding one
   would be a defect. */
.shell{max-width:var(--shell-max); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:var(--pad-section)}
.section--tint{background:var(--ground-tint)}
.section--tight{padding-block:calc(var(--pad-section) * .6)}

/* M4 — the deep field. Full-bleed, near-vertical navy→royal. Maximum two
   per template and never two in a row, so the page never reads as the
   "extremely dark website where every section looks identical" the client
   put on the avoid list. */
.field{background:var(--ground-deep); color:var(--white); position:relative;
  isolation:isolate}
/* P14 — blue lives in a dark section only as this bloom. Never a field. */
.field::before{content:""; position:absolute; inset:0; z-index:-1;
  background:var(--glow); pointer-events:none}
.field .display,.field .t2,.field .t3{color:var(--white)}
.field .lead,.field .muted{color:rgba(255,255,255,.72)}
.field .cat{color:rgba(255,255,255,.66)}

/* ---- BUTTONS ----------------------------------------------------------
   Every button carries a transparent border of the same width so a solid
   and an outline button are the same box, and pairs lay out in a flex row
   so they align by box rather than by baseline. */
.actions{display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:stretch}
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:var(--s-3);
  padding:.9rem 1.6rem; border:1px solid transparent;
  border-radius:var(--r-none);
  font-size:var(--fs-small); font-weight:var(--fw-semi); letter-spacing:-.005em;
  background:transparent; color:var(--ink-strong);
  transition:color var(--dur-base) var(--ease),
             border-color var(--dur-base) var(--ease);
}
/* the hover fill wipes up from the bottom rather than switching instantly —
   state feedback with a direction, which is what makes it read as designed */
.btn::before{
  content:""; position:absolute; inset:0; z-index:0; transform:translateY(101%);
  transition:transform var(--dur-base) var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn > *{position:relative; z-index:1}
.btn svg{width:17px; height:17px; flex:0 0 auto; position:relative; z-index:1;
  transition:transform var(--dur-base) var(--ease)}
.btn:hover svg{transform:translateX(4px)}

.btn--primary{background:var(--navy); color:var(--white); border-color:var(--navy)}
.btn--primary::before{background:var(--royal)}
.btn--primary:hover{border-color:var(--royal)}
.btn--ghost{border-color:var(--silver); color:var(--ink-strong)}
.btn--ghost::before{background:var(--navy)}
.btn--ghost:hover{color:var(--white); border-color:var(--navy)}
.btn--onDark{border-color:rgba(255,255,255,.38); color:var(--white)}
.btn--onDark::before{background:var(--white)}
.btn--onDark:hover{color:var(--navy); border-color:var(--white)}
/* P9 — the only permitted red surfaces */
.btn--urgent{background:var(--urgent); color:var(--urgent-ink); border-color:var(--urgent)}
.btn--urgent::before{background:#9E0C23}
.btn--urgent:hover{border-color:#9E0C23}

/* the text link — underline sweeps in from the left on hover */
.golink{
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-weight:var(--fw-med); font-size:var(--fs-small); color:var(--royal);
  padding-bottom:3px;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size var(--dur-base) var(--ease), color var(--dur-fast) var(--ease);
}
.golink:hover{background-size:100% 1px; color:var(--navy)}
.golink svg{width:16px; height:16px; transition:transform var(--dur-base) var(--ease)}
.golink:hover svg{transform:translateX(4px)}
.field .golink{color:var(--white)}
.field .golink:hover{color:var(--white)}

/* ---- NUMERALS (M6) ----------------------------------------------------
   Display scale, light weight, no card, no border, no icon, no colour on
   the number itself. They do not animate on view. */
.counts{display:grid; gap:var(--s-7) var(--s-8);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.count__n{
  font-size:clamp(3rem,5.4vw,4.75rem); font-weight:var(--fw-light);
  line-height:.95; letter-spacing:-.04em; color:var(--ink-strong);
  font-variant-numeric:tabular-nums lining-nums;   /* P5 — not a mono face */
}
.count__n sup{font-size:.42em; vertical-align:super; font-weight:var(--fw-reg)}
.count__l{margin-top:var(--s-4); font-size:var(--fs-small); color:var(--ink-soft); max-width:26ch}
.field .count__n{color:var(--white)}
.field .count__l{color:rgba(255,255,255,.68)}

/* ---- TILE (M8, P13) ---------------------------------------------------
   Every tile has the SAME resting state and the SAME hover state. The
   previous build had one of three permanently showing what the other two
   revealed on hover, which read as a broken card rather than a highlight.
   Resting: image, title. Hover: scrim deepens, image eases in, the
   description opens and the arrow arrives. Identical for all of them. */
.tiles{display:grid; gap:var(--s-4);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.tile{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:4/5; background:var(--char-950); border-radius:var(--r-none);
}
.tile img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.001);
  transition:transform var(--dur-slow) var(--ease), filter var(--dur-slow) var(--ease);
}
.tile:hover img,.tile:focus-visible img{transform:scale(1.05)}
.tile::after{content:""; position:absolute; inset:0; background:var(--scrim-tile);
  transition:opacity var(--dur-slow) var(--ease)}
.tile:hover::after{opacity:.92}
.tile__b{position:absolute; left:var(--s-5); right:var(--s-5); bottom:var(--s-5); z-index:2}
.tile__t{display:block; color:var(--white); font-size:var(--fs-h3);
  font-weight:var(--fw-med); line-height:1.2; letter-spacing:var(--tr-h3)}
.tile__d{
  display:block; color:rgba(255,255,255,.82); font-size:var(--fs-small);
  line-height:1.5; overflow:hidden;
  max-height:0; opacity:0; transform:translateY(6px);
  transition:max-height var(--dur-slow) var(--ease),
             opacity var(--dur-base) var(--ease),
             transform var(--dur-slow) var(--ease),
             margin-top var(--dur-slow) var(--ease);
}
.tile:hover .tile__d,.tile:focus-visible .tile__d{
  max-height:10rem; opacity:1; transform:none; margin-top:var(--s-3)}
.tile__go{
  display:inline-flex; align-items:center; gap:var(--s-2); color:var(--white);
  font-size:var(--fs-micro); font-weight:var(--fw-semi);
  opacity:0; transform:translateY(6px);
  transition:opacity var(--dur-base) var(--ease) 60ms,
             transform var(--dur-base) var(--ease) 60ms,
             margin-top var(--dur-slow) var(--ease);
}
.tile:hover .tile__go,.tile:focus-visible .tile__go{opacity:1; transform:none; margin-top:var(--s-4)}
.tile__go svg{width:15px; height:15px}

/* ---- LOGO SYSTEMS (M7, P7, P15) --------------------------------------
   Two devices, and both sit on WHITE rather than on the page tint. Almost
   every supplied logo file carries a white background; on a tinted ground
   each one reads as a pale rectangle — the mark disappears and the file
   becomes visible. On white the backgrounds merge and only the mark shows.
   Natural colour, no greyscale, no border, no cell. -------------------- */
.logostage{background:var(--white); padding-block:var(--s-8)}

/* The plain logo field, used where a slider would be overkill — the clients
   index, for one. This rule was lost when the homepage moved to a slider
   and nothing on that page used `.logos` any more; the clients page did,
   and silently collapsed to a single column. */
.logos{display:grid; gap:var(--s-6) var(--s-5); align-items:center;
  grid-template-columns:repeat(2,1fr)}
@media (min-width:600px){ .logos{grid-template-columns:repeat(3,1fr); gap:var(--s-7) var(--s-6)} }
@media (min-width:900px){ .logos{grid-template-columns:repeat(4,1fr)} }
@media (min-width:1200px){ .logos{grid-template-columns:repeat(6,1fr)} }
.logos li{display:grid; place-items:center; min-height:96px; background:var(--white)}
.logos img{max-height:64px; max-width:85%; width:auto; object-fit:contain;
  transition:transform var(--dur-base) var(--ease)}
@media (min-width:600px){
  .logos li{min-height:110px}
  .logos img{max-height:80px; max-width:min(190px,90%)}
}
.logos li:hover img{transform:scale(1.06)}
/* The marquee sits in its own tight stage: the section padding above and
   the row's own min-height were stacking into a band of empty white. */
.logostage--marquee{padding-block:var(--s-6)}

/* Client marks — a slider showing two rows of six. Client organisations are
   the strongest proof on the page, so they are shown large and in their own
   colours, and they respond to the pointer. */
.logoslider{position:relative; overflow:hidden}
.logoslider__track{display:flex; transition:transform var(--dur-slow) var(--ease)}
.logoslider__page{flex:0 0 100%; display:grid; gap:var(--s-6) var(--s-5);
  grid-template-columns:repeat(2,1fr)}
@media (min-width:600px){ .logoslider__page{grid-template-columns:repeat(3,1fr)} }
@media (min-width:960px){ .logoslider__page{grid-template-columns:repeat(6,1fr)} }
.logoslider__page li{display:grid; place-items:center; min-height:110px;
  padding:var(--s-3); background:var(--white)}
.logoslider__page img{max-height:72px; max-width:100%; width:auto; object-fit:contain;
  transition:transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease)}
.logoslider__page li:hover img{transform:scale(1.08)}
.logoslider__nav{display:flex; gap:var(--s-2); justify-content:flex-end;
  margin-top:var(--s-6)}
.logoslider__dot{width:26px; height:2px; background:var(--silver); padding:0;
  transition:background var(--dur-base) var(--ease)}
.logoslider__dot[aria-current="true"]{background:var(--royal)}

/* Partner marks — an infinite marquee, very slow, natural colour, no hover.
   These are third-party technology brands: they are context rather than
   proof, so they move past rather than inviting interaction. */
.marquee{position:relative; overflow:hidden; background:var(--white);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee__track{display:flex; width:max-content; will-change:transform}
.marquee__row{display:flex; align-items:center; flex:0 0 auto}
.marquee__row li{display:grid; place-items:center; padding-inline:var(--s-6);
  min-height:88px}
.marquee__row img{max-height:82px; max-width:210px; width:auto; object-fit:contain}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none !important; transform:none !important}
  .marquee{overflow-x:auto}
}

/* ---- QUOTE ------------------------------------------------------------
   The Testimonials reference's structure only. Its blue-on-blue, its yellow
   stars and its rounded corners are all refused per that annotation, and so
   is the dashed box the first build wrapped it in. */
.quotes{display:grid; gap:var(--s-6);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.quote{display:flex; flex-direction:column; gap:var(--s-5)}
.quote__t{font-size:var(--fs-lead); color:var(--ink-strong); line-height:1.45;
  font-weight:var(--fw-light)}
.quote__a{margin-top:auto; font-size:var(--fs-small)}
.quote__a b{display:block; font-weight:var(--fw-med); color:var(--ink-strong)}
.quote__a span{color:var(--ink-soft)}

/* ---- HEADER -----------------------------------------------------------
   Client, verbatim: "Stick header that transform in scroll from transparent
   to a white theme glass morphism style. The logo & header menu text colors
   also changes accordingly." */
.masthead{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:100;
  height:var(--header-h); display:flex; align-items:center;
  transition:background var(--dur-base) var(--ease),
             border-color var(--dur-base) var(--ease),
             backdrop-filter var(--dur-base) var(--ease);
  border-bottom:1px solid transparent;
}
.masthead__in{max-width:var(--shell-max); margin-inline:auto;
  padding-inline:var(--gutter); width:100%; display:flex; align-items:center; gap:var(--s-6)}
.brand{display:flex; align-items:center; flex:0 0 auto}
/* P11 NAMED EXCEPTION — the Prime logo contains a shield. Brand equity. */
/* Larger mark without a taller bar: the masthead height is unchanged and
   the logo simply uses more of it. */
.brand img{height:52px; width:auto; transition:opacity var(--dur-fast) var(--ease)}
.brand:hover img{opacity:.82}
.brand .logo-dark{display:none}
.nav{display:none; margin-inline-start:auto; align-items:center; gap:var(--s-1)}
@media (min-width:1080px){ .nav{display:flex} }
.nav__i{
  position:relative; display:inline-flex; align-items:center; gap:5px;
  padding:var(--s-3) var(--s-4); font-size:var(--fs-small);
  font-weight:var(--fw-med); color:var(--white);
  transition:color var(--dur-base) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav__i svg{width:14px; height:14px; transition:transform var(--dur-base) var(--ease)}
.nav__i[aria-expanded="true"] svg{transform:rotate(180deg)}
/* the nav underline grows from the centre on hover */
.nav__i::after{content:""; position:absolute; left:var(--s-4); right:var(--s-4);
  bottom:calc(var(--s-3) - 4px); height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:50% 50%;
  transition:transform var(--dur-base) var(--ease)}
.nav__i:hover::after,.nav__i[aria-expanded="true"]::after{transform:scaleX(1)}
.masthead__cta{margin-inline-start:var(--s-4); display:none}
/* the header CTA keeps white text through every state, including once the
   masthead has turned solid and the rest of the nav has gone dark */
.masthead .btn--primary,
.masthead .btn--primary:hover,
.masthead.is-stuck .btn--primary,
.masthead.is-stuck .btn--primary:hover,
.masthead.is-solid .btn--primary,
.masthead.is-solid .btn--primary:hover{color:var(--white)}
@media (min-width:1080px){ .masthead__cta{display:inline-flex} }

.masthead.is-stuck{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border-bottom-color:var(--hair);
}
.masthead.is-stuck .nav__i,.masthead.is-solid .nav__i{color:var(--ink-strong)}
.masthead.is-stuck .logo-light,.masthead.is-solid .logo-light{display:none}
.masthead.is-stuck .logo-dark,.masthead.is-solid .logo-dark{display:block}
.masthead.is-stuck .burger,.masthead.is-solid .burger{color:var(--ink-strong)}
.masthead.is-solid{background:var(--ground); border-bottom-color:var(--hair)}

/* ---- MEGA MENU --------------------------------------------------------
   22 leaves across three axes: too many for a hover cascade, too few for a
   drawer. A three-column panel carries it and every L2 is directly
   clickable, which the client asked for by name. */
/* The panel opens flush under the masthead, so there is no dead gap for the
   pointer to cross — but a pointer moving diagonally still leaves the
   trigger before it reaches the panel. The gap is bridged by ::before and
   the close is delayed in site.js, so travelling to the menu never
   dismisses it. */
.mega::before{content:""; position:absolute; left:0; right:0; top:-14px; height:14px}
.mega{
  position:absolute; inset-inline:0; top:var(--header-h);
  background:var(--white);          /* solid, per client instruction */
  border-bottom:1px solid var(--hair);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity var(--dur-base) var(--ease),
             transform var(--dur-base) var(--ease),
             visibility 0s linear var(--dur-base);
}
.mega[data-open="true"]{opacity:1; visibility:visible; transform:none; transition-delay:0s}
.mega__in{max-width:var(--shell-max); margin-inline:auto;
  padding:var(--s-7) var(--gutter) var(--s-6); display:grid; gap:var(--s-6) var(--s-7);
  grid-template-columns:repeat(3,1fr)}
.mega__col > .cat{margin-bottom:var(--s-4); display:block}
.mega__l a{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-4); padding:var(--s-3) var(--s-3) var(--s-3) 0;
  font-size:var(--fs-small); color:var(--ink-strong); font-weight:var(--fw-reg);
  transition:padding-inline-start var(--dur-base) var(--ease),
             color var(--dur-fast) var(--ease);
}
.mega__l a::before{content:""; position:absolute; inset:0 auto 0 0; width:2px;
  background:var(--royal); transform:scaleY(0); transform-origin:50% 50%;
  transition:transform var(--dur-base) var(--ease)}
.mega__l a:hover{padding-inline-start:var(--s-4); color:var(--royal)}
.mega__l a:hover::before{transform:scaleY(1)}
.mega__l svg{width:15px; height:15px; opacity:0; transform:translateX(-4px);
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease)}
.mega__l a:hover svg{opacity:1; transform:none}
.mega__note{grid-column:1/-1; padding-top:var(--s-5); display:flex; flex-wrap:wrap;
  gap:var(--s-5); align-items:center; justify-content:space-between;
  border-top:1px solid var(--hair)}

.burger{display:inline-flex; margin-inline-start:auto; color:var(--white); padding:var(--s-2)}
.burger svg{width:26px; height:26px}
@media (min-width:1080px){ .burger{display:none} }
.mnav{display:none; position:fixed; inset:var(--header-h) 0 0; z-index:99;
  background:var(--ground); overflow-y:auto; padding:var(--s-6) var(--gutter) var(--s-9)}
.mnav[data-open="true"]{display:block}
.mnav .cat{display:block; margin-block:var(--s-6) var(--s-3)}
.mnav li a{display:block; padding:var(--s-3) 0; border-bottom:1px solid var(--hair);
  font-size:var(--fs-small); color:var(--ink-strong)}

/* ---- INCIDENT PATH (P9) ----------------------------------------------- */
.incident-bar{background:var(--urgent); color:var(--urgent-ink);
  padding:var(--s-3) 0; font-size:var(--fs-small)}
.hotline{color:var(--urgent); font-weight:var(--fw-semi); white-space:nowrap}
.field .hotline{color:var(--white)}

/* ---- FOOTER ----------------------------------------------------------- */
.foot{background:var(--navy-950); color:rgba(255,255,255,.66); padding-block:var(--s-9) var(--s-6)}
.foot a{color:rgba(255,255,255,.66); transition:color var(--dur-fast) var(--ease)}
.foot a:hover{color:var(--white)}
.foot__grid{display:grid; gap:var(--s-7);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.foot .cat{color:var(--white); display:block; margin-bottom:var(--s-4)}
.foot__l li{padding-block:6px; font-size:var(--fs-small)}
/* Offices: the city at list size, the address beneath it smaller, the three
   stacked on one axis. */
.offices li + li{margin-top:var(--s-4)}
.offices b{display:block; font-weight:var(--fw-med); font-size:var(--fs-small);
  color:var(--white)}
.offices span{display:block; margin-top:3px; font-size:var(--fs-micro);
  color:rgba(255,255,255,.58); max-width:26ch}
.foot__b{margin-top:var(--s-8); padding-top:var(--s-5);
  border-top:1px solid var(--hair-deep);
  display:flex; flex-wrap:wrap; gap:var(--s-4) var(--s-6);
  justify-content:space-between; font-size:var(--fs-micro)}

/* ---- UTILITIES -------------------------------------------------------- */
.mt-2{margin-top:var(--s-2)} .mt-3{margin-top:var(--s-3)} .mt-4{margin-top:var(--s-4)}
.mt-5{margin-top:var(--s-5)} .mt-6{margin-top:var(--s-6)} .mt-7{margin-top:var(--s-7)}
.mt-8{margin-top:var(--s-8)}
.blockhead{display:grid; gap:var(--s-5) var(--s-8); margin-bottom:var(--s-8)}
/* Some section heads carry no supporting paragraph at all. The heading runs
   to about two lines and the remaining third of the measure is left empty
   on purpose — the space is the composition, not a gap waiting to be
   filled. */
.blockhead--solo{grid-template-columns:1fr !important}
.blockhead--solo .t2{max-width:64%}
@media (max-width:860px){ .blockhead--solo .t2{max-width:100%} }
@media (min-width:900px){
  /* align-items:start, not end. Bottom-aligning the pair pushed short
     headings down and opened a gap above them that read as a broken
     layout — most visible on "Six practices". Both columns now begin on
     the same line. */
  .blockhead{grid-template-columns:1.25fr 1fr; align-items:start}
  .blockhead--single{grid-template-columns:1fr}
}
.blockhead__x{align-self:end}

/* ---- MOTION BASELINE --------------------------------------------------
   GSAP sets the resting state itself, but these guards mean the page is
   never blank if the script fails or is blocked: content is visible by
   default and only hidden once JS has confirmed it can animate it. */
.js-ready [data-reveal]{opacity:0}
.js-ready [data-reveal-line] .line__i{opacity:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js-ready [data-reveal],.js-ready [data-reveal-line] .line__i{opacity:1 !important}
}
/* 22-09-2026 */
section.sol-content {
    padding-top: 40px;
}
.section-border-top {
    border-top: 1px solid #E9E9D3;
}