/* ==========================================================================
   Lakshya Infotech - landing page styles
   Lifted out of the <style> block in lakshya-infotech-landing (6).html.
   Nothing was reordered: cascade position is load-bearing in here, so the
   rules sit in exactly the order the browser saw them inline.
   ========================================================================== */
/* ══════════ Lakshya Infotech — Agntix "Modern Agency" light port ══════════ */
:root {
  --paper: #F3F2EF;
  --paper2: #EBE9E4;
  --card: #FFFFFF;
  --ink: #0F0F12;
  --ink2: #26262C;
  --body: #5D5C66;
  /* was #8B8A93, which measured 3.0:1 on paper — under the minimum, and
     used by dozens of 9–11px labels. #66656F is 5.1:1 and lifts them all. */
  --mut: #66656F;
  --line: #DEDCD6;
  --line2: #C9C6BE;
  --acc: #15468B;
  /* Lakshya navy, sampled from the logo */
  --acc-b: #E4A945;
  /* the gold K and rules */
  --lg-g: #E4A945;
  /* gold */
  --lg-o: #15468B;
  /* navy */
  --lg-b: #0B2F61;
  /* deep navy */
  --acc2: #0F0F12;
  /* Two faces, and only two: --d sets every heading, --f sets every
     paragraph and everything else. --m used to be JetBrains Mono, carrying
     the ~80 small uppercase labels, spec chips, price rows and table cells.
     It now aliases --f, so those keep their own letter-spacing and casing —
     the treatment is what makes them read as labels, not the typeface. The
     token stays rather than being search-replaced away so the label rules
     remain one thing to retune. */
  --d: "Bricolage Grotesque", system-ui, sans-serif;
  --f: "Archivo", system-ui, sans-serif;
  --m: var(--f);
  --gut: clamp(18px, 4.4vw, 72px);
  --e: cubic-bezier(.22, .68, .32, 1);
  --sh: 0 2px 6px rgba(15, 15, 18, .04), 0 20px 44px -22px rgba(15, 15, 18, .2);
}

*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: #000;
  font-family: var(--f);
  font-size: 16.5px;
  line-height: 1.66;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased
}

body.lock {
  overflow: hidden
}

img {
  display: block;
  max-width: 100%
}

a {
  color: inherit;
  text-decoration: none
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer
}

p {
  margin: 0
}

::selection {
  background: var(--acc);
  color: #fff
}

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
  border-radius: 4px
}

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: var(--gut)
}

/* ── grain ── */
.grain {
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}

/* ── custom cursor ── */
.cur,
.cur2 {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 450;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: difference;
  will-change: transform
}

.cur {
  width: 7px;
  height: 7px;
  background: #fff;
  margin: -3.5px 0 0 -3.5px
}

.cur2 {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .65);
  margin: -19px 0 0 -19px;
  transition: width .3s var(--e), height .3s var(--e), margin .3s var(--e), opacity .3s var(--e)
}

.cur2.big {
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  background: rgba(255, 255, 255, .12);
  border-color: transparent
}

body.hasCur,
body.hasCur * {
  cursor: none !important
}

/* ── section index ── */
.sidx {
  position: fixed;
  left: var(--gut);
  bottom: 22px;
  z-index: 180;
  font-family: var(--m);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mut);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity .5s var(--e);
  pointer-events: none;
  mix-blend-mode: difference;
  filter: invert(0)
}

.sidx.on {
  opacity: 1
}

.sidx b {
  width: 26px;
  height: 1px;
  background: var(--acc);
  display: block
}

/* index numbers on product cards */
.pr {
  position: relative
}

.pr__ix {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  font-family: var(--m);
  font-size: 10.5px;
  letter-spacing: .12em;
  padding: 6px 11px;
  border-radius: 100px;
  background: rgba(243, 242, 239, .9);
  backdrop-filter: blur(6px);
  color: var(--ink)
}

.d {
  font-family: var(--d);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .94;
  color: var(--ink);
  margin: 0
}

.d em {
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--acc)
}

.lbl {
  font-family: var(--m);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mut)
}

.num {
  font-family: var(--m);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--acc)
}

/* the one thing lost with the mono was fixed-width digits, which the section
   counters and the comparison table were quietly relying on to keep their
   columns from shifting. Archivo carries tabular figures — ask for them.
   (.pg__pr, .pb__save and .ci__l already declare this for themselves.) */
.num,
table.cmp th,
table.cmp td {
  font-variant-numeric: tabular-nums
}

.rev {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--e), transform .9s var(--e)
}

.rev.in {
  opacity: 1;
  transform: none
}

.clip {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.15s var(--e)
}

.clip.in {
  clip-path: inset(0 0 0 0)
}

.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  margin-right: .22em
}

.w i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(112%);
  transition: transform 1s var(--e)
}

.in .w i {
  transform: none
}

/* ══ scroll-fill: characters brighten in reading order as you scroll ══ */
.fill .sw {
  display: inline-block;
  white-space: nowrap
}

.fill .sc {
  display: inline-block;
  color: inherit;
  opacity: .13;
  will-change: opacity
}

.fill .sw--acc .sc {
  color: #E2A845
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 14.5px;
  font-weight: 600;
  padding: 15px 27px;
  border-radius: 100px;
  background: var(--ink);
  color: var(--paper);
  transition: background .35s var(--e), color .35s var(--e), transform .35s var(--e)
}

.btn:hover {
  background: var(--acc);
  color: #fff;
  transform: translateY(-2px)
}

.btn i {
  font-style: normal;
  transition: transform .35s var(--e)
}

.btn:hover i {
  transform: translateX(4px)
}

.btn--o {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line2)
}

.form__ok .btn--o {
  color:#c1c1c1;
}

.btn--o:hover {
  background: var(--ink);
  color: var(--paper);
  box-shadow: none
}

.lk {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1.5px solid var(--line2);
  padding-bottom: 3px;
  transition: color .3s var(--e), border-color .3s var(--e)
}

.lk:hover {
  color: var(--acc);
  border-color: var(--acc)
}

/* ── header ── */
.hd {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px var(--gut);
  transition: padding .4s var(--e), background .4s var(--e)
}

.hd.stuck {
  padding-block: 12px;
  background: rgba(243, 242, 239, .86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line)
}

.lg__m {
  display: block;
  height: clamp(60px, 3.4vw, 60px);
  width: auto;
  flex-shrink: 0
}

.ft .lg__m {
  height: 52px
}

.lg__m svg {
  width: 100%;
  height: 100%;
  display: block
}

.lg {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  display: inline-flex;
  align-items: baseline;
  gap: .32em;
  white-space: nowrap
}

.lg span {
  font-weight: 500;
  font-size: .82em;
  letter-spacing: -.02em;
  opacity: .5
}

.lg sup {
  color: var(--acc);
  font-size: 11px
}

.nav {
  display: flex;
  gap: 30px;
  margin-left: auto
}

.nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink2);
  position: relative;
  padding: 5px 0
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1.5px;
  width: 0;
  background: var(--acc);
  transition: width .32s var(--e)
}

.nav a:hover::after {
  width: 100%
}

.hd__r {
  display: flex;
  align-items: center;
  gap: 11px
}

.lang {
  display: flex;
  gap: 8px;
  font-family: var(--m);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--mut)
}

.lang b {
  color: var(--ink);
  font-weight: 400
}

.bur {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background .35s var(--e)
}

.bur:hover {
  background: var(--ink)
}

.bur span {
  display: block;
  width: 16px;
  height: 1.6px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .35s var(--e), opacity .3s, background .35s var(--e)
}

.bur:hover span {
  background: var(--paper)
}

.bur.on span:nth-child(1) {
  transform: translateY(3.3px) rotate(45deg)
}

.bur.on span:nth-child(2) {
  opacity: 0
}

.bur.on span:nth-child(3) {
  transform: translateY(-3.3px) rotate(-45deg)
}

/* offcanvas */
/* ══ split menu: nav slides from the left, contact from the right ══ */
.menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden
}

.menu.on {
  visibility: visible;
  pointer-events: auto
}

.menu__bg {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 18, .35);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .5s var(--e)
}

.menu.on .menu__bg {
  opacity: 1
}

.menu__in {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: 1.35fr .65fr
}

.menu__l,
.menu__r {
  position: relative;
  height: 100%;
  overflow-y: auto;
  transition: transform .75s cubic-bezier(.16, .84, .28, 1)
}

.menu__l {
  transform: translateY(-102%);
  padding: 104px clamp(20px, 5vw, 80px) 48px;
  background: var(--paper)
}

.menu__r {
  transform: translateY(102%);
  padding: 104px clamp(20px, 3.4vw, 48px) 48px;
  background: #264287;
  box-shadow: inset 1px 0 0 var(--line)
}

.menu.on .menu__l,
.menu.on .menu__r {
  transform: none
}

.menu__r {
  transition-delay: .08s
}

.menu:not(.on) .menu__l {
  transition-delay: .08s
}

.menu:not(.on) .menu__r {
  transition-delay: 0s
}

.menu__x {
  position: absolute;
  top: 20px;
  right: clamp(20px, 3.4vw, 48px);
  z-index: 6;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line2);
  display: grid;
  place-items: center;
  color: #fff;
  transition: background .3s var(--e), transform .5s var(--e), color .3s var(--e)
}

.menu__x:hover {
  background: var(--ink);
  color: var(--paper);
  transform: rotate(90deg)
}

.menu__x svg {
  width: 14px;
  height: 14px
}

.menu__lang {
  position: absolute;
  top: 30px;
  left: clamp(20px, 5vw, 80px);
  z-index: 6;
  display: flex;
  gap: 12px;
  font-family: var(--m);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mut)
}

.menu__lang b {
  color: var(--ink);
  font-weight: 400
}

.menu__lang a:hover {
  color: var(--ink)
}

.mnav {
  border-top: 1px solid var(--line)
}

.mn {
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s var(--e), transform .5s var(--e)
}

.menu.on .mn {
  opacity: 1;
  transform: none
}

.menu.on .mn:nth-child(1) {
  transition-delay: .26s
}

.menu.on .mn:nth-child(2) {
  transition-delay: .32s
}

.menu.on .mn:nth-child(3) {
  transition-delay: .38s
}

.menu.on .mn:nth-child(4) {
  transition-delay: .44s
}

.menu.on .mn:nth-child(5) {
  transition-delay: .50s
}

.mn__h {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(12px, 1.6vw, 19px) 2px;
  text-align: left;
  font-family: var(--d);
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--ink);
  font-size: clamp(24px, 4.4vw, 50px);
  transition: color .3s var(--e), padding-left .35s var(--e)
}

.mn__h:hover {
  color: var(--acc);
  padding-left: 10px
}

.mn__h em {
  font-style: normal;
  font-family: var(--m);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--mut);
  align-self: flex-start;
  margin-top: .55em
}

.mn__h i {
  margin-left: auto;
  font-style: normal;
  font-family: var(--m);
  font-size: 20px;
  color: var(--mut);
  transition: transform .4s var(--e), color .3s var(--e)
}

.mn.on .mn__h i {
  transform: rotate(45deg);
  color: var(--acc)
}

.mn__s {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--e)
}

.mn.on .mn__s {
  grid-template-rows: 1fr
}

.mn__s>div {
  overflow: hidden
}

.mn__s>div>div {
  padding: 4px 2px 20px
}

.mn__s a {
  display: inline-block;
  margin: 0 26px 14px 0;
  font-family: var(--m);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--body);
  transition: color .3s var(--e)
}

.mn__s a:hover {
  color: var(--acc)
}

.menu__r h3 {
  font-family: var(--d);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.03em;
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink)
}

.mc {
  display: grid;
  gap: 22px;
  margin: 0
}

.mc div {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--e), transform .5s var(--e)
}

.menu.on .mc div {
  opacity: 1;
  transform: none
}

.menu.on .mc div:nth-child(1) {
  transition-delay: .40s
}

.menu.on .mc div:nth-child(2) {
  transition-delay: .46s
}

.menu.on .mc div:nth-child(3) {
  transition-delay: .52s
}

.menu.on .mc div:nth-child(4) {
  transition-delay: .58s
}

.mc dt {
  font-family: var(--m);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mut);
  margin-bottom: 8px
}

.mc dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink)
}

.mc dd a:hover {
  color: var(--acc)
}

/* the social row that used to sit here is gone. It carried the rule that
   separated the contact list from the quote button, so the button takes it
   over — otherwise the panel ends in an unmarked gap. */
.menu__cta {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  opacity: 0;
  transition: opacity .5s var(--e) .62s
}

.menu.on .menu__cta {
  opacity: 1
}

/* ── the panel is navy, so its type has to stop using the paper tokens ──
   .menu__r sits on #264287 while everything inside it inherited --ink and
   --mut, which are near-black on a light page — on navy they read as a
   smudge. Heading takes the gold from the header's quote button (#E3AB5B)
   so the two calls to action rhyme; body copy goes white, labels a dimmed
   white, and the rules go from --line to a translucent white so they show
   at all. */
.menu__r h3 {
  color: #E3AB5B;
  border-bottom-color: rgba(255, 255, 255, .28)
}

.mc dt {
  color: rgba(255, 255, 255, .66)
}

.mc dd,
.mc dd a {
  color: #fff
}

.mc dd a:hover {
  color: #E3AB5B
}

.menu__cta {
  border-top-color: rgba(255, 255, 255, .28)
}

/* the shared .btn hover is var(--acc) navy, which on a navy panel makes the
   button vanish mid-hover — gold keeps it on the surface */
.menu__cta .btn:hover {
  background: #E3AB5B;
  color: #1B2A4E
}

/* ══════════ HEADER — floating bar + detached call to action ══════════ */
.hd {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(12px, 1.7vw, 24px) var(--gut);
  transition: padding .4s var(--e)
}

.hd.stuck {
  padding-block: clamp(8px, 1vw, 13px)
}

.hd__bar {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 38px);
  min-width: 0;
  background: var(--card);
  border-radius: 10px;
  padding: 13px clamp(16px, 2vw, 30px);
  box-shadow: 0 2px 5px rgba(15, 15, 18, .04), 0 22px 46px -34px rgba(15, 15, 18, .45);
  transition: box-shadow .4s var(--e), border-radius .4s var(--e)
}

.hd.stuck .hd__bar {
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(15, 15, 18, .06), 0 14px 30px -24px rgba(15, 15, 18, .5)
}

.hd__tag {
  font-size: 13.5px;
  line-height: 1.42;
  color: var(--ink2);
  white-space: nowrap
}

.hd__sep {
  width: 1px;
  align-self: stretch;
  background: var(--line2);
  opacity: .75;
  flex-shrink: 0
}

.hd__menu {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 3px 1px;
  flex-shrink: 0
}

.hd__menu b {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color .3s var(--e)
}

.hd__menu:hover b {
  color: var(--acc)
}

.hd__menu i {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 24px;
  height: 12px
}

.hd__menu em {
  display: block;
  height: 1.7px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .38s var(--e), background .3s var(--e)
}

.hd__menu:hover em {
  background: var(--acc)
}

.hd__menu.on em:nth-child(1) {
  transform: translateY(3.35px) rotate(45deg)
}

.hd__menu.on em:nth-child(2) {
  transform: translateY(-3.35px) rotate(-45deg)
}

.hd__cta {
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
  flex-shrink: 0;
  background: #E3AB5B;
  color:#333;
  border-radius: 100px;
  padding: 8px 8px 8px clamp(20px, 2vw, 30px);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  box-shadow: 0 20px 40px -30px rgba(15, 15, 18, .8);
  transition: background .35s var(--e), color .35s var(--e)
}

.hd__cta:hover {
  background: var(--acc);
  color: #fff
}

.hd__cta i {
  width: 38px;
  height: 38px;
  border-radius: 11px;
 background: #274388;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 16px;
  line-height: 1;
  transition: transform .4s var(--e)
}

.hd__cta:hover i {
  transform: translate(2px, -2px)
}

@media (max-width:960px) {

  .hd__tag,
  .hd__sep {
    display: none
  }
}

@media (max-width:560px) {
  .hd__cta {
    padding: 6px 6px 6px 18px;
    font-size: 11px;
    gap: 10px
  }

  .hd__cta i {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 14px
  }

  .hd__bar {
    padding: 10px 16px;
    border-radius: 5px
  }
}

@media (max-width:480px) {
  .hd__cta {
    display: none
  }

  /* with the quote button hidden the bar was the header's only child, so it sat
     at its content width and left half the row empty. It takes the whole row
     instead, logo at one end and the burger at the other. */
  .hd {
    gap: 0
  }

  .hd__bar {
    flex: 1;
    justify-content: space-between;
    gap: 14px
  }
}

.hero {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  padding: clamp(120px, 15vh, 168px) 0 0
}

.hero__bg {
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(560px, 86vh, 980px);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* holds the band dark while the first shot is still decoding */
  background: #0B0C0F;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 100%)
}

.hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.07);
  transition: opacity 1.5s var(--e), transform 9s linear
}

.hero__bg img.on {
  opacity: 1;
  transform: scale(1)
}

  
.hero__bg img:nth-of-type(1) {
  object-position: 64% 62%
}

.hero__bg img:nth-of-type(2) {
  object-position: 56% 58%
}

.hero__bg img:nth-of-type(3) {
  object-position: 58% 50%
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(101deg,
      rgba(8, 9, 12, .88) 0%,
      rgba(8, 9, 12, .8) 32%,
      rgba(8, 9, 12, .55) 54%,
      rgba(8, 9, 12, .18) 78%,
      rgba(8, 9, 12, .3) 100%),
    linear-gradient(rgba(8, 9, 12, .34), rgba(8, 9, 12, .34))
}

@media (max-width:900px) {

  /* copy stacks full width here, so the scrim has to run top-to-bottom */
  .hero__bg::after {
    background:
      linear-gradient(168deg,
        rgba(8, 9, 12, .82) 0%,
        rgba(8, 9, 12, .74) 46%,
        rgba(8, 9, 12, .5) 100%),
      linear-gradient(rgba(8, 9, 12, .38), rgba(8, 9, 12, .38))
  }
}

.hero__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .9;
  background-image: radial-gradient(rgba(255, 255, 255, .15) 1.15px, transparent 1.15px);
  background-size: clamp(15px, 1.5vw, 21px) clamp(15px, 1.5vw, 21px);
  -webkit-mask-image: radial-gradient(110% 74% at 62% 8%, #000 0%, transparent 76%);
  mask-image: radial-gradient(110% 74% at 62% 8%, #000 0%, transparent 76%)
}

.hero__k {
  position: absolute;
  z-index: 0;
  right: -9vw;
  top: -6vh;
  width: min(48vw, 620px);
  height: auto;
  opacity: .06;
  pointer-events: none
}

.hero__k path {
  fill: var(--acc)
}

.hero__in {
  position: relative;
  z-index: 3
}

.hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap
}

.hero__eye {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--m);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--body);
  padding: 9px 16px;
  border-radius: 100px;
  box-shadow: inset 0 0 0 1px var(--line2);
  background: var(--card)
}

.hero__eye i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acc-b);
  box-shadow: 0 0 0 4px rgba(228, 169, 69, .22)
}

.hero__rate {
  display: inline-flex;
  align-items: center;
  gap: 11px
}

.hero__rate b {
  font-family: var(--d);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.03em;
  color: var(--ink)
}

.hero__rate b i {
  font-style: normal;
  color: var(--acc-b)
}

.hero__rate span {
  font-family: var(--m);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mut)
}

.hero h1 {
  font-family: var(--d);
  font-weight: 800;
  line-height: 55px;
  font-size: clamp(44px, 9.4vw, 50px);
  color: var(--paper);
  margin: clamp(20px, 2.6vw, 34px) 0 0;
  text-wrap: balance;
  /* last line of defence for whichever slide is brightest */
  text-shadow: 0 2px 30px rgba(6, 7, 10, .6)
}

.hero h1 em {
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.02em;
  /* the navy accent disappears on the scrim — take the brand gold instead */
  color: var(--acc-b)
}

/* the inline media capsule */
 

.hchip--n {
  background: var(--acc);
  box-shadow: none
}

.hchip--n img {
  object-fit: contain;
  padding: 9% 12%;
  transform: none;
  mix-blend-mode: normal
}

.hero__f {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(20px, 4vw, 64px);
  align-items: end;
  margin-top: clamp(26px, 3.4vw, 46px)
}

.hero__lede {
  max-width: 52ch;
  font-size: clamp(15.5px, 1.2vw, 18px);
  color: rgba(243, 242, 239, .88);
  line-height: 1.7;
  text-shadow: 0 1px 14px rgba(6, 7, 10, .55)
}

/* ── buttons on the scrim: invert the pill, lighten the outline ── */
.hero__cta .btn {
  background: var(--acc-b);
  color: var(--ink)
}

.hero__cta .btn:hover {
  background: var(--acc-b);
  color: var(--ink)
}

/* transparent left this sitting on whatever the photograph happened to be
   doing behind it, and the lower third of every slide is bright — gold on
   near-white is not a button anybody can find. A dark glass backing gives the
   gold one constant ground instead of the picture's. */
.hero__cta .btn--o {
  background: rgba(6, 21, 48, .8);
  backdrop-filter: blur(6px);
  color: #e1a95a;
  box-shadow: inset 0 0 0 1.5px #e1a95a;
}

.hero__cta .btn--o:hover {
  background:#e1a95a;
  color: var(--ink);
  box-shadow: none
}

.hero__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

/* text-swap pill, as on the reference header */
.sw {
  display: inline-block;
  overflow: hidden;
  height: 1.24em;
  line-height: 1.24em;
  vertical-align: top
}

.sw em {
  display: block;
  font-style: normal;
  transition: transform .46s var(--e)
}

.btn:hover .sw em,
.hd__cta:hover .sw em {
  transform: translateY(-1.24em)
}

/* ── the beat band: gold-on-navy strip carrying the split-flap ── */
.bband {
  position: relative;
  z-index: 3;
  margin-top: clamp(34px, 4.6vw, 64px);
  background: #0A2148;
  padding: clamp(16px, 2vw, 26px) 0;
  overflow: hidden
}

.bband::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 200% at 88% 50%, rgba(228, 169, 69, .22), transparent 70%)
}

.bband__in {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 34px);
  flex-wrap: wrap
}

.bband__l {
  font-family: var(--m);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  flex-shrink: 0
}

.flap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: clamp(34px, 3.6vw, 50px)
}

.flap i {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-family: var(--d);
  font-weight: 800;
  font-style: normal;
  font-size: clamp(15px, 1.7vw, 25px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--acc-b);
  width: clamp(17px, 1.9vw, 28px);
  height: clamp(34px, 3.6vw, 50px);
  border-radius: 5px;
  background: linear-gradient(180deg, #16386E 0%, #0E2751 49.6%, #0A1E42 50.4%, #123059 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12)
}

.flap i::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, .5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06)
}

.flap i.sp {
  background: none;
  box-shadow: none;
  width: clamp(7px, .8vw, 12px)
}

.flap i.sp::after {
  display: none
}

.flap i.fx {
  animation: flap .16s var(--e)
}

@keyframes flap {
  0% {
    transform: perspective(300px) rotateX(0)
  }

  49% {
    transform: perspective(300px) rotateX(-78deg)
  }

  50% {
    transform: perspective(300px) rotateX(78deg)
  }

  100% {
    transform: perspective(300px) rotateX(0)
  }
}

/* ── the plate: what's on the counter, with the ledger over it ── */
.hero__show {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.28fr .72fr;
  gap: clamp(14px, 1.8vw, 26px);
  margin-top: clamp(24px, 3.2vw, 44px);
  align-items: stretch
}

/* ── slider: the counter, one frame at a time (dummy imagery for now) ── */
.hsl {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #0A2148;
  border: 1px solid var(--line);
  min-height: clamp(300px, 33vw, 470px);
  box-shadow: 0 40px 80px -60px rgba(6, 21, 48, .8)
}

.hsl__s {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s var(--e), visibility .8s var(--e);
  z-index: 1
}

.hsl__s.on {
  opacity: 1;
  visibility: visible;
  z-index: 2
}

.hsl__s img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 7s linear
}

.hsl__s.on img {
  transform: scale(1)
}

.hsl__s::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 21, 48, .12) 0%, rgba(6, 21, 48, .1) 42%, rgba(6, 21, 48, .82) 100%);
  pointer-events: none
}

.hsl__cap {
  position: absolute;
  left: clamp(16px, 2vw, 30px);
  right: clamp(16px, 2vw, 30px);
  bottom: clamp(44px, 4.4vw, 58px);
  z-index: 3;
  color: #fff
}

.hsl__cap span {
  display: inline-block;
  font-family: var(--m);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(243, 242, 239, .92);
  backdrop-filter: blur(6px);
  padding: 7px 12px;
  border-radius: 100px
}

.hsl__cap b {
  display: block;
  margin-top: 12px;
  font-family: var(--d);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.06;
  font-size: clamp(21px, 2.3vw, 34px);
  text-wrap: balance
}

.hsl__cap i {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-family: var(--m);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .74)
}

.hsl__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 17px;
  line-height: 1;
  color: var(--ink);
  background: rgba(243, 242, 239, .9);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px -12px rgba(6, 21, 48, .8);
  opacity: 0;
  transition: opacity .35s var(--e), background .35s var(--e)
}

.hsl:hover .hsl__nav,
.hsl__nav:focus-visible {
  opacity: 1
}

.hsl__nav:hover {
  background: #fff
}

.hsl__nav--p {
  left: 14px
}

.hsl__nav--n {
  right: 14px
}

.hsl__dots {
  position: absolute;
  left: clamp(16px, 2vw, 30px);
  bottom: clamp(16px, 1.8vw, 24px);
  z-index: 5;
  display: flex;
  gap: 8px
}

.hsl__dots i {
  width: 26px;
  height: 3px;
  border-radius: 100px;
  cursor: pointer;
  background: rgba(255, 255, 255, .34);
  transition: background .35s var(--e), width .35s var(--e)
}

.hsl__dots i.on {
  width: 42px;
  background: var(--acc-b)
}

@media (hover:none) {
  .hsl__nav {
    opacity: 1
  }

 
  .tmx__c,
  .tmx__v::after {
    opacity: 1;
    transform: none
  }

  .pr__stamp,
  .pr__go {
    opacity: 1;
    transform: none
  }
}

/* ── ledger: four sellers, one product, bars to scale ── */
.pb {
  position: relative;
  background: #0A2148;
  border-radius: 20px;
  padding: clamp(20px, 2.1vw, 28px);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 40px 80px -50px rgba(6, 21, 48, .9);
  display: flex;
  flex-direction: column
}

.pb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 100% 0%, rgba(228, 169, 69, .2), transparent 66%)
}

.pb>* {
  position: relative;
  z-index: 2
}

.pb__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--m);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, .14)
}

.pb__hd em {
  font-style: normal;
  color: var(--acc-b)
}

.pb__c {
  transition: opacity .35s var(--e), transform .35s var(--e)
}

.pb__c.out {
  opacity: 0;
  transform: translateY(8px)
}

.pb__cat {
  font-family: var(--m);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acc-b);
  margin-top: 15px;
  display: block
}

.pb h3 {
  font-family: var(--d);
  font-weight: 800;
  font-size: clamp(15.5px, 1.42vw, 19px);
  letter-spacing: -.03em;
  color: #fff;
  margin: 8px 0 0;
  line-height: 1.3;
  min-height: 2.6em
}

.led {
  margin-top: 15px;
  display: grid;
  gap: 9px
}

.led__r {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  align-items: center;
  gap: 10px
}

.led__r span {
  font-family: var(--m);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  white-space: nowrap
}

.led__t {
  height: 9px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden
}

.led__t i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 100px;
  background: rgba(255, 255, 255, .34);
  transition: width .8s var(--e)
}

.led__r b {
  font-family: var(--m);
  font-size: 11.5px;
  color: rgba(255, 255, 255, .74);
  font-variant-numeric: tabular-nums;
  white-space: nowrap
}

.led__r.us span {
  color: var(--acc-b)
}

.led__r.us .led__t {
  background: rgba(228, 169, 69, .16)
}

.led__r.us .led__t i {
  background: linear-gradient(90deg, var(--acc-b), #F3C468);
  box-shadow: 0 0 18px rgba(228, 169, 69, .5)
}

.led__r.us b {
  color: #fff;
  font-family: var(--d);
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: -.02em
}

.pb__save {
  margin-top: 15px;
  padding: 12px 15px;
  border-radius: 12px;
  background: var(--acc-b);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px
}

.pb__save span {
  font-family: var(--m);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #3A2A05
}

.pb__save b {
  font-family: var(--d);
  font-weight: 800;
  font-size: clamp(18px, 1.9vw, 24px);
  letter-spacing: -.03em;
  color: #241B03;
  font-variant-numeric: tabular-nums
}

.pb__note {
  margin-top: 10px;
  font-family: var(--m);
  font-size: 9px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .42)
}

.pb__f {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 15px
}

.pb__dots {
  display: flex;
  gap: 6px
}

.pb__dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
  cursor: pointer;
  transition: width .35s var(--e), background .35s var(--e)
}

.pb__dots i.on {
  width: 20px;
  border-radius: 100px;
  background: var(--acc-b)
}

.pb__ask {
  font-family: var(--m);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap .3s var(--e), color .3s var(--e)
}

.pb__ask:hover {
  gap: 13px;
  color: var(--acc-b)
}
/* ── the four figures, as one navy ticket ──
   Two rewrites lived here before: four chamfered white plates, then a plain
   white ruled strip. Both sat pale on pale and disappeared under the hero.
   This one inverts — a single navy band, chamfered at the top-right and
   bottom-left so the whole row carries one deliberate silhouette instead of
   four repeated ones — and flips the cell: caption first, figure under it,
   a gold rule closing each column.
   clip-path clips box-shadow, so the lift is a drop-shadow filter, which
   follows the cut outline rather than the element box. */
.hstat {
  --cut: clamp(22px, 2.6vw, 40px);
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: linear-gradient(112deg, var(--acc) -12%, var(--lg-b) 50%, #071A36 100%);
  color: var(--paper);
  clip-path: polygon(0 0,
      calc(100% - var(--cut)) 0,
      100% var(--cut),
      100% 100%,
      var(--cut) 100%,
      0 calc(100% - var(--cut)));
  filter: drop-shadow(0 22px 38px rgba(11, 47, 97, .18));
  margin: clamp(30px, 4vw, 58px) 0 clamp(28px, 3.4vw, 48px)
}

/* the same gold wash the enquiry card carries, so the two navy blocks on
   the page read as one family */
.hstat::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(58% 120% at 88% 0%, rgba(228, 169, 69, .22), transparent 64%)
}

.hstat div {
  position: relative;
  z-index: 1;
  display: flex;
  /* the caption is second in the markup and stays there for a screen
     reader; reversing the column is what lifts it above the figure */
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: clamp(12px, 1.4vw, 18px);
  padding: clamp(26px, 3vw, 40px) clamp(20px, 2.2vw, 32px) clamp(24px, 2.7vw, 36px);
  border-left: 1px solid rgba(255, 255, 255, .16);
  border-top: 1px solid transparent;
  transition: background .4s var(--e)
}

.hstat div:first-child {
  border-left-color: transparent
}

/* reversed, so this closes the column rather than opening it */
.hstat div::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--acc-b);
  transition: width .45s var(--e)
}

.hstat div:hover {
  background: rgba(255, 255, 255, .07)
}

.hstat div:hover::before {
  width: 64px
}

.hstat b {
  display: block;
  font-family: var(--d);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: .92;
  font-size: clamp(40px, 4.4vw, 64px);
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  transition: color .4s var(--e)
}

/* the + and the ★ ride a far bigger numeral now, so the ratio drops.
   position:relative is doing real work here: `top` applies only to a
   positioned box, so in the old rule it was inert and the whole raise came
   from the UA's vertical-align:super. Now the nudge on top of it counts. */
.hstat b sup {
  position: relative;
  top: -.4em;
  font-size: .28em;
  color: var(--acc-b);
  margin-left: .1em
}

.hstat span {
  display: block;
  font-family: var(--m);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(243, 242, 239, .72);
  line-height: 1.7
}

.hstat div:hover b {
  color: var(--acc-b)
}

@media (max-width:1040px) {
  .hero__show {
    grid-template-columns: 1fr
  }

  .hsl {
    min-height: 0;
    aspect-ratio: 16/9
  }

  .pb h3 {
    min-height: 0
  }
}

@media (max-width:820px) {
  .hero__f {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 22px
  }

  /* two a row: the left rule drops off whichever cell now starts a row,
     and the pair below picks up a rule across the top instead */
  .hstat {
    grid-template-columns: 1fr 1fr
  }

  .hstat div:nth-child(odd) {
    border-left-color: transparent
  }

  .hstat div:nth-child(n+3) {
    border-top-color: rgba(255, 255, 255, .16)
  }
}

@media (max-width:520px) {
  .hero__rate span {
    display: none
  }

  /* one a row, so every rule is horizontal and the cut shrinks with it */
  .hstat {
    --cut: 20px;
    grid-template-columns: 1fr
  }

  .hstat div {
    border-left-color: transparent
  }

  .hstat div+div {
    border-top-color: rgba(255, 255, 255, .16)
  }

  .hsl {
    aspect-ratio: 4/3
  }

  .hsl__nav {
    width: 38px;
    height: 38px
  }
}

/* ══════════ HOW WE WORK — sticky plate, four steps ══════════ */
/* the services band sits on white rather than the page's paper, so the
   sticky photo card and the numbered list read as one plate against it */
.stp {
  position: relative;
  background: #FFFFFF
}

.stp__in {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
  margin-top: clamp(30px, 4vw, 56px)
}

.stp__v {
  position: sticky;
  top: clamp(96px, 12vh, 132px);
  border-radius: 20px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  padding: clamp(20px, 2.4vw, 32px)
}

.stp__v img {
  width: 100%;
  height: auto;
  display: block;
  background: none;
  /* a photograph sits inside the card's padding, so round it to echo the
     card's own 20px corner rather than butting square against it */
  border-radius: 12px
}

.stp__vh {
  font-family: var(--m);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mut)
}

.stp__vt {
  font-family: var(--d);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.06;
  font-size: clamp(21px, 2.3vw, 31px);
  color: var(--ink);
  margin: 12px 0 0
}

.stp__vp {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.66;
  color: var(--body)
}

.stp__l {
  border-top: 1px solid var(--line)
}

.stp__i {
  border-bottom: 1px solid #919191;
  padding: clamp(20px, 2.4vw, 32px) 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 2.4vw, 36px);
  align-items: start;
  transition: opacity .5s var(--e)
}

.stp__n {
  font-family: var(--m);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acc-b);
  padding-top: 8px;
  white-space: nowrap
}

.stp__i h3 {
  font-family: var(--d);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.02;
  font-size: clamp(24px, 3.4vw, 46px);
  color: var(--ink);
  margin: 0;
  transition: color .4s var(--e)
}

.stp__i:hover h3 {
  color: var(--acc)
}

.stp__i p {
  margin-top: 12px;
  max-width: 54ch;
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--body)
}

.stp__i em {
  font-style: normal;
  color: var(--acc-b)
}

@media (max-width:900px) {
  .stp__in {
    grid-template-columns: 1fr
  }

  .stp__v {
    position: static
  }

  .stp__i {
    grid-template-columns: 1fr;
    gap: 10px
  }

  .stp__n {
    padding-top: 0
  }
}

/* ══════════ BUYING WITH US — numeral-led, no container ══════════ */
/* Nothing is drawn around these four. What gives each column its weight is
   a big outline numeral, so the eye lands on a piece of type rather than
   on a frame — and the four read as a counted series, 01 through 04,
   which is what they are.
   Outline rather than solid: at this size a filled numeral would shout
   louder than the heading under it, so it carries the gold as a hairline
   stroke — stated once, statically. Nothing here moves on hover: it is a
   read, not a control, and there is nothing to click. */
.asr {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(30px, 3.4vw, 48px) clamp(20px, 2.4vw, 40px);
  margin-top: clamp(30px, 3.6vw, 52px)
}


/* the numeral, hollow */
.asr em {
  display: block;
  font-family: var(--d);
  font-style: normal;
  font-weight: 800;
  font-size: clamp(46px, 4.8vw, 72px);
  line-height: .82;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--acc-b)
}

.asr b {
  display: block;
  margin-top: clamp(20px, 2.2vw, 30px);
  font-family: var(--d);
  font-weight: 800;
  letter-spacing: -.03em;
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--acc)
}

.asr p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.62;
  color: var(--body)
}

@media (max-width:900px) {
  .asr {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:520px) {
  .asr {
    grid-template-columns: 1fr
  }
}

/* ── hero background: drifting aurora/* inline media capsule inside the headline */

/* ── hero ── */

.hero__f {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: clamp(20px, 4vw, 60px);
  align-items: end;
  margin-top: clamp(28px, 4vw, 54px)
}

.hero__f p {
  font-size: 17px;
  color: #fff
}

/* full-bleed banner */

/* ── marquee ── */
.mq {
  overflow: hidden;
  display: flex;
  gap: 34px;
  padding: 20px 0;
  border-block: 1px solid var(--line);
  margin-top: clamp(50px, 7vw, 100px)
}

.mq__r {
  display: flex;
  gap: 34px;
  flex-shrink: 0;
  animation: sl 36s linear infinite
}

.mq:hover .mq__r {
  animation-play-state: paused
}

@keyframes sl {
  to {
    transform: translateX(-100%)
  }
}

.mq i {
  font-family: var(--d);
  font-weight: 600;
  font-size: clamp(17px, 2vw, 26px);
  letter-spacing: -.02em;
  color: var(--ink);
  white-space: nowrap;
  font-style: normal;
  display: flex;
  align-items: center;
  gap: 34px
}

.mq i::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acc)
}

/* ── trust strip ── */
.trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  z-index: 2
}

.trust div {
  background: var(--paper);
  padding: 26px 22px;
  transition: background .45s var(--e)
}

.trust div:hover {
  background: var(--card)
}

.trust b {
  display: block;
  font-family: var(--d);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.025em;
  color: var(--ink);
  margin-bottom: 7px
}

.trust span {
  font-size: 14px;
  color: var(--body)
}

.trust i {
  font-style: normal;
  font-family: var(--m);
  font-size: 10.5px;
  letter-spacing: .16em;
  color: var(--acc);
  display: block;
  margin-bottom: 14px
}

.trust div:nth-child(1) i {
  color: var(--lg-g)
}

.trust div:nth-child(2) i {
  color: var(--lg-o)
}

.trust div:nth-child(3) i {
  color: var(--lg-b)
}

/* ── comparison table ── */
.tw {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden
}

.ts {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch
}

table.cmp {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px
}

table.cmp th,
table.cmp td {
  text-align: left;
  padding: 15px 20px;
  font-family: var(--m);
  font-size: 12.5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums
}

table.cmp thead th {
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--mut);
  background: var(--paper2);
  cursor: pointer;
  user-select: none;
  transition: color .3s var(--e)
}

table.cmp thead th:hover {
  color: var(--ink)
}

table.cmp thead th::after {
  content: "\2195";
  opacity: .35;
  margin-left: 7px
}

table.cmp thead th.asc::after {
  content: "\2191";
  opacity: 1;
  color: var(--acc)
}

table.cmp thead th.desc::after {
  content: "\2193";
  opacity: 1;
  color: var(--acc)
}

table.cmp tbody tr {
  border-top: 1px solid var(--line);
  transition: background .3s var(--e)
}

table.cmp tbody tr:hover {
  background: var(--paper)
}

table.cmp td.nm {
  font-family: var(--d);
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: -.025em;
  color: var(--ink);
  white-space: normal
}

.pip {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acc);
  margin-right: 10px;
  vertical-align: middle
}

.tw__f {
  padding: 13px 20px;
  border-top: 1px solid var(--line);
  font-family: var(--m);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--mut)
}

/* ── contact ── */
.ct__hd {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(24px, 3.2vw, 42px)
}

.ct__hd h2 {
  margin-top: 14px
}

.ct__hd>div>p {
  margin-top: 16px;
  color: var(--body);
  max-width: 46ch
}


/* ── the enquiry band ──
   The faq that used to sit beside the form is gone, so this is one panel now,
   and the section is a tinted full-bleed band rather than another stretch of
   paper — the form is the last thing on the page and wants marking off. The
   section already has no side padding, so a background on it bleeds edge to
   edge on its own; .wrap inside keeps the content on the usual gutter. */
#cta {
  position: relative;
  background:
    radial-gradient(120% 86% at 50% 0%, rgba(21, 70, 139, .09), transparent 64%),
    var(--paper2);
  border-top: 1px solid var(--line);
  padding-block: clamp(54px, 6.6vw, 96px)
}

.ct {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 1.8vw, 26px)
}

/* six columns, not two: full width, two rows of two-column cells reads as a
   long thin strip of inputs, so the fields get real proportions instead —
   name / phone / email across the top, then the need beside the message */
.ct .form__g {
  grid-template-columns: repeat(6, 1fr)
}

.ct .form__g>.fld {
  grid-column: span 2
}

.ct .form__g>.fld--msg {
  grid-column: span 6
}

/* live trading status, computed in Kolkata time */
.open {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 19px;
  border-radius: 100px;
  box-shadow: inset 0 0 0 1.5px var(--line2);
  font-family: var(--m);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap
}

.open i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mut);
  position: relative;
  flex-shrink: 0
}

.open.is-open {
  box-shadow: inset 0 0 0 1.5px rgba(34, 181, 115, .5)
}

.open.is-open i {
  background: #22B573
}

.open.is-open i::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid #22B573;
  animation: ping 2.6s var(--e) infinite
}

@keyframes ping {
  0% {
    transform: scale(.5);
    opacity: .8
  }

  70%,
  100% {
    transform: scale(1.6);
    opacity: 0
  }
}

/* dark info card */
/* the details column is transparent — the .ct panel behind it is the card */
.ci {
  background: none;
  color: inherit;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column
}

.ci__q {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px
}

.ci__q a {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 17px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  color: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  transition: background .3s var(--e), color .3s var(--e), box-shadow .3s var(--e), transform .3s var(--e)
}

.ci__q a:hover {
  background: var(--paper);
  color: var(--ink);
  box-shadow: none;
  transform: translateY(-3px)
}

.ci__l dd a {
  color: var(--paper);
  transition: color .25s var(--e)
}

.ci__l dd a:hover {
  color: var(--acc-b)
}

.ci__map a {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12)
}

.ci__q span {
  font-family: var(--m);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .62
}

.ci__q b {
  font-family: var(--d);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.02em
}

.ci__l {
  display: grid;
  margin: 0
}

.ci__l div {
  padding: clamp(15px, 1.8vw, 20px) 0;
  border-top: 1px solid rgba(255, 255, 255, .18)
}

.ci__l div:first-child {
  margin-top: 18px
}

.ci__l dt {
  font-family: var(--m);
  font-size: 9.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(243, 242, 239, .7)
}

.ci__l dd {
  color: rgba(243, 242, 239, .93)
}

/* the small caption above each quick-action number */
.ci__q a span {
  font-family: var(--m);
  font-size: 9.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(243, 242, 239, .72);
  transition: color .3s var(--e)
}

.ci__q a:hover span {
  color: var(--mut)
}

.ci__l dd {
  margin: 8px 0 0;
  font-size: 15.5px;
  line-height: 1.5
}

.nums a {
  display: block;
  font-variant-numeric: tabular-nums
}

.nums a+a {
  margin-top: 5px;
  opacity: .68
}

.nums a:hover {
  opacity: 1
}

.ci__l a {
  transition: color .3s var(--e)
}

.ci__l a:hover {
  color: var(--acc)
}

.ci__map {
  margin-top: auto;
  padding-top: 22px
}

.ci__map a {
  display: block;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16/9
}

.ci__map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(.62);
  transition: filter .55s var(--e), transform .8s var(--e)
}

.ci__map a:hover img {
  filter: grayscale(0) brightness(.8);
  transform: scale(1.06)
}

.ci__map span {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  font-family: var(--m);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 9px 15px;
  border-radius: 100px;
  background: rgba(243, 242, 239, .93);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px
}

.form {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none
}

/* ── right card: the enquiry form carries the navy the panel used to ── */
.ct>.form {
  background: linear-gradient(148deg, var(--acc) -18%, var(--lg-b) 46%, #071A36 100%);
  color: var(--paper);
  border-radius: 18px;
  padding: clamp(22px, 2.6vw, 40px);
  position: relative;
  overflow: hidden
}

.ct>.form::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 100% at 92% 4%, rgba(228, 169, 69, .2), transparent 66%)
}

.ct>.form>* {
  position: relative;
  z-index: 1
}

.ct>.form .form__hd {
  border-bottom-color: rgba(255, 255, 255, .18)
}

.ct>.form .form__hd b {
  color: var(--paper)
}


.ct>.form .form__hd span,
.ct .form__note {
  color: rgba(243, 242, 239, .72)
}

.ct .fld label {
  color: rgba(243, 242, 239, .88)
}

  
.ct .fld label b {
  color: var(--acc-b)
}


.ct .fld input,
.ct .fld select,
.ct .fld textarea {
  padding: 13px 15px;
  border: 1px solid rgba(243, 242, 239, .2);
  border-radius: 11px;

  background-color: rgba(243, 242, 239, .06);
  color: var(--paper);
  transition: border-color .25s var(--e), box-shadow .25s var(--e), background-color .25s var(--e)
}

.ct .fld input::placeholder,
.ct .fld textarea::placeholder {
  color: rgba(243, 242, 239, .62)
}

  
.ct .fld input:focus,
.ct .fld select:focus,
.ct .fld textarea:focus {
  border-color: var(--acc-b);
  background-color: rgba(243, 242, 239, .1);
  box-shadow: 0 0 0 3px rgba(228, 169, 69, .22)
}

.ct .fld.bad input,
.ct .fld.bad select,
.ct .fld.bad textarea {
  border-color: #FF7A68;
  background-color: rgba(255, 122, 104, .08);
  box-shadow: 0 0 0 3px rgba(255, 122, 104, .2)
}

.ct .err {
  color: #FF9384
}

 
.ct .fld select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F3F2EF' stroke-opacity='.7' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")
}

.ct .fld option {
  color: var(--ink);
  background: var(--card)
}

  
.ct .form__b .btn {
  background: var(--paper);
  color: var(--ink)
}

.ct .form__b .btn:hover {
  background: var(--acc-b);
  color: var(--ink)
}


.ct .form__ok b {
  color: var(--paper)
}

.ct .form__ok p {
  color: rgba(243, 242, 239, .7)
}

.ct .form__ok i {
  background: var(--acc-b);
  color: var(--ink)
}

.form__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line)
}

.form__hd b {
  font-family: var(--d);
  font-weight: 800;
  font-size: 23px;
  letter-spacing: -.03em;
  color: var(--ink)
}

.form__hd span {
  font-family: var(--m);
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mut)
}

.form__g {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.4vw, 30px) clamp(18px, 2.6vw, 34px)
}
.lbl,
.bband__l,
.hero__eye,
.hero__rate span,
.hstat span,
.stp__vh,
.stp__n,
.shc__cat,
.ci__l dt,
.ci__q a span,
.form__hd span,
.form__note,
.pg__tabs button,
.pg__f,
.ft__b,
.mc dt,
.rule b,
.open,
.mn__h em,
.trust i,
.svc__tg span,
.read dt,
.tmx__c span,
.menu__lang,
.lang {
  font-weight: 500
}

.lbl,
.bband__l,
.hero__eye,
.hstat span,
.stp__vh,
.shc__cat,
.ci__l dt,
.ci__q a span,
.form__hd span,
.pg__f,
.mc dt,
.open,
.read dt {
  letter-spacing: .12em;
  font-size: 12px
}

.fld {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.fld--full {
  grid-column: 1/-1
}

.fld label {
  font-family: var(--f);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: 3px;
  color: var(--body)
}

.fld label b {
  color: var(--acc);
  font-weight: 600
}


.fld input,
.fld select,
.fld textarea {
  width: 100%;
  padding: 9px 2px;
  border: 0;
  border-bottom: 1.5px solid var(--line2);
  border-radius: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  transition: border-color .25s var(--e), box-shadow .25s var(--e)
}

.fld textarea {
  min-height: 92px;
  resize: vertical;
  line-height: 1.6
}

/* the native select chrome fights an underline, so draw our own caret */
.fld select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 24px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235D5C66' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 11px
}

.fld input::placeholder,
.fld textarea::placeholder {
  color: var(--mut);
  opacity: .72
}

/* iOS Safari zooms the whole page in when a focused control is under 16px,
   and does not zoom back out afterwards — the visitor is left stranded and
   pinching. Half a pixel back on phones avoids the whole behaviour. */
@media (max-width:900px) {

  .fld input,
  .fld select,
  .fld textarea {
    font-size: 16px
  }
}

.fld textarea {
  min-height: 118px;
  resize: vertical;
  line-height: 1.55
}

.fld select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B8A93' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 38px
}

.fld input:focus,
.fld select:focus,
.fld textarea:focus {
  outline: none;
  border-bottom-color: var(--acc);
  box-shadow: 0 1.5px 0 0 var(--acc)
}

   
.fld.bad input,
.fld.bad select,
.fld.bad textarea {
  border-bottom-color: #C0392B;
  box-shadow: 0 1.5px 0 0 #C0392B;
  background: none
}


.fld .err {
  font-family: var(--f);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  margin-top: 2px;
  color: #C0392B;
  min-height: 0;
  opacity: 0;
  transition: opacity .25s var(--e)
}

.fld.bad .err {
  opacity: 1
}

.form__b {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 22px
}

.form__note {
  font-family: var(--m);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--mut);
  max-width: 26ch;
  line-height: 1.7
}

/* the honeypot. display:none is the one thing that will not do — a fair
   number of bots skip hidden inputs, and the point is that they fill it. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none
}

/* delivery failed: the shop never saw it, so this has to be as loud as a
   field error, not a footnote */
.form__err {
  flex: 1 0 100%;
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #C0392B
}

.ct .form__err {
  color: #FF9384
}

.form__b .btn[aria-busy="true"] {
  opacity: .6;
  pointer-events: none
}

.qm {
  position: fixed;
  inset: 0;
 
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2.6vw, 28px)
}

.qm[hidden] {
  display: none
}

.qm__bd {
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 12, .62);
  backdrop-filter: blur(3px);
  animation: qmFade .28s var(--e)
}

.qm__p {
  position: relative;
  width: min(540px, 100%);
  max-height: min(88vh, 680px);
  overflow-y: auto;

  background-color: var(--card);
  background-image: linear-gradient(90deg, var(--acc), var(--acc-b) 72%);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: 0 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(20px, 2.6vw, 30px);
  box-shadow: 0 40px 90px -40px rgba(15, 15, 18, .6);
  animation: qmRise .34s var(--e)
}

.qm__p::-webkit-scrollbar {
  width: 8px
}

.qm__p::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: var(--line2)
}

@keyframes qmFade {
  from {
    opacity: 0
  }
}

@keyframes qmRise {
  from {
    opacity: 0;
    transform: translateY(14px)
  }
}

@media (prefers-reduced-motion:reduce) {

  .qm__bd,
  .qm__p {
    animation: none
  }
}

.qm__hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  /* the panel's own padding already clears the accent stripe */
  padding: 0 0 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line)
}

.qm__hd h3 {
  font-family: var(--d);
  font-weight: 800;
  letter-spacing: -.035em;
  font-size: clamp(19px, 2.4vw, 24px);
  color: var(--ink);
  margin: 9px 0 0
}

.qm__x {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .3s var(--e), color .3s var(--e), border-color .3s var(--e)
}

.qm__x:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper)
}

/* the form is a card in the page; in here the panel is the card */
.qm__slot .form {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0
}

/* the panel header already says what this is */
.qm__slot .form__hd {
  display: none
}

/* ── the form, compacted for the dialog ──
   In the page the form has a whole column to breathe in; in here it has to
   clear the fold on a laptop, so the rows tighten and the message box gives
   up the height it does not need. */
.qm__slot .form__g {
  gap: 15px 20px
}

.qm__slot .fld textarea {
  min-height: 62px
}

.qm__slot .form__b {
  margin-top: 18px;
  gap: 14px
}

.qm__slot .form__b .btn {
  padding: 13px 24px
}

.qm__slot .form__note {
  max-width: 30ch;
  font-size: 10px;
  line-height: 1.6
}

.form__ok {
  display: none;
  text-align: center;
  padding: 14px 0
}

.form__ok.on {
  display: block
}

.form__ok b {
  display: block;
  font-family: var(--d);
  font-weight: 800;
  font-size: clamp(22px, 2.8vw, 30px);
  letter-spacing: -.03em;
  color: var(--ink);
  margin-bottom: 10px
}

.form__ok p {
  color: var(--body);
  max-width: 34ch;
  margin: 0 auto 22px
}

.form__ok i {
  font-style: normal;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  font-size: 22px;
  margin: 0 auto 18px
}

.form.sent .form__g,
.form.sent .form__b,
.form.sent .form__hd {
  display: none
}

/* ── signature: the measurement rule ── */
.rule {
  position: relative;
  height: 22px;
  margin-bottom: clamp(24px, 3vw, 38px);
  border-top: 1px solid var(--line)
}

.rule::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 26px)
}

.rule::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 78px;
  height: 2px;
  background: linear-gradient(90deg, var(--lg-g), var(--lg-o) 50%, var(--lg-b))
}

.rule b {
  position: absolute;
  top: 12px;
  right: 0;
  font-family: var(--m);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mut)
}

.s--dark .rule {
  border-color: rgba(255, 255, 255, .16)
}

.s--dark .rule::before {
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 1px, transparent 1px 26px)
}

.s--dark .rule b {
  color: rgba(243, 242, 239, .42)
}

.lbl i {
  font-style: normal;
  color: var(--acc);
  margin-right: 12px
}

/* ── tonal rhythm: an ink act-break ── */
.s--dark {
  background: var(--ink);
  color: rgba(243, 242, 239, .66)
}

.s--dark .d {
  color: var(--paper)
}

.s--dark .lbl {
  color: rgba(243, 242, 239, .44)
}

.s--dark .sh p {
  color: rgba(243, 242, 239, .6)
}

.s--dark .pc {
  border-top-color: rgba(255, 255, 255, .4)
}

.s--dark .pc:hover {
  border-top-color: var(--acc)
}

.s--dark .pc b {
  color: rgba(255, 255, 255, .26)
}

.s--dark .pc h3 {
  color: var(--paper)
}

.s--dark .pc p {
  color: rgba(243, 242, 239, .58)
}

/* ── product cards: measured numbers slide up over the shot ── */
.pr__spec {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 15px 14px 13px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: linear-gradient(transparent, rgba(15, 15, 18, .55) 22%, rgba(15, 15, 18, .93));
  transform: translateY(102%);
  transition: transform .55s var(--e)
}

.pr:hover .pr__spec {
  transform: none
}

.pr__spec b {
  display: block;
  font-family: var(--m);
  font-size: 12px;
  color: #fff;
  letter-spacing: -.01em
}

.pr__spec span {
  font-family: var(--m);
  font-size: 8px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55)
}

.pr__stamp {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  font-family: var(--m);
  font-size: 8.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 100px;
  background: rgba(243, 242, 239, .9);
  color: var(--ink);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .4s var(--e), transform .4s var(--e)
}

.pr:hover .pr__stamp {
  opacity: 1;
  transform: none
}

.mv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 28px
}

.mv div {
  background: var(--paper);
  padding: 20px 18px;
  transition: background .4s var(--e)
}

.mv div:hover {
  background: var(--card)
}

.mv h4 {
  font-family: var(--m);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acc);
  margin: 0 0 10px
}

.mv p {
  font-size: 14.5px;
  color: var(--body)
}

/* ══ team: giant title, portraits rising through it on scroll ══ */
.team {
  position: relative;
  z-index: 2
}

   
/* the pin lasts (height - 100vh) of scroll, so 150vh gave the whole
   five-portrait sequence only half a screen to play out — a flick of the
   wheel and it was over. 340vh gives it 240vh, so each portrait gets a
   comfortable beat to cross. Raise this number to slow it further; it is
   the only thing that sets the pace. */
.team__track {
  height: 340vh
}


#services {
  padding-bottom: clamp(18px, 2.4vw, 34px)
}

   
.team__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  text-align: center;
  padding-inline: var(--gut)
}


/* ── parallax backdrop ──
   The image is 128% tall and hung at -14%, so the scroll handler can slide it
   ±12.8% of the frame without ever exposing an edge. It clips itself, because
   the phone breakpoint sets .team__pin to overflow:visible. */
.team__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--paper2)
}

.team__bg img {
  position: absolute;
  left: 0;
  top: -14%;
  width: 100%;
  height: 128%;
  object-fit: cover;
  /* half-strength against the paper2 behind it. Opacity is compositor-cheap on
     a layer that is already being transformed every frame — a filter here would
     force a re-raster on each scroll tick. */
  opacity: .5;
  will-change: transform
}

/* the photo has to stay a backdrop: a navy heading and five portraits sit on
   top of it. Paper is heaviest in the middle where the copy lands and thins
   towards the edges, then goes solid top and bottom so the band has no seam
   against the sections either side. */
.team__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(64% 58% at 50% 46%,
      rgba(243, 242, 239, .86) 0%,
      rgba(243, 242, 239, .66) 50%,
      rgba(243, 242, 239, .42) 100%),
    linear-gradient(180deg,
      var(--paper) 0%,
      rgba(243, 242, 239, 0) 20%,
      rgba(243, 242, 239, 0) 80%,
      var(--paper) 100%)
}

.team__c {
  position: relative;
  z-index: 2;
  pointer-events: none
}


.team__t {
  display: grid;
  justify-items: center
}

.team__t span {
  display: block
}

.team__t {
  font-family: var(--d);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.045em;
  line-height: .82;
  color: var(--acc);
  font-size: clamp(52px, 13vw, 140px);
  margin: 0
}

  
.team__s {
  margin: clamp(18px, 2.4vw, 30px) auto 0;
  max-width: 34ch;
  color: var(--body);
  font-size: 16.5px
}

/* --x is the lane the portrait rises in, --w its width */
.tmx {
  position: absolute;
  z-index: 3;
  width: var(--w);
  left: var(--x);
  top: 0;
  will-change: transform, opacity;
  text-decoration: none;
  opacity: 0;
  transition: opacity .3s linear
}

.tmx__v {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  border-radius: 0;
  background: var(--paper2);
  transition: border-radius .7s var(--e), box-shadow .5s var(--e)
}

.tmx__v img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e), filter .6s var(--e)
}

.tmx:hover .tmx__v {
  border-radius: 46%/32%;
  box-shadow: 0 30px 60px -28px rgba(15, 15, 18, .45)
}

.tmx:hover img {
  transform: scale(1.05)
}

.tmx__v::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(to top,
      rgba(11, 47, 97, .92) 0%,
      rgba(11, 47, 97, .72) 22%,
      rgba(11, 47, 97, .3) 46%,
      transparent 68%);
  transition: opacity .45s var(--e)
}

.tmx:hover .tmx__v::after {
  opacity: 1
}

.tmx__c {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9%;
  z-index: 3;
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s var(--e), transform .45s var(--e)
}

.tmx:hover .tmx__c {
  opacity: 1;
  transform: none
}

.tmx__c b {
  display: block;
  font-family: var(--d);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  font-size: clamp(15px, 1.5vw, 21px);
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55)
}

.tmx__c span {
  display: block;
  margin-top: 4px;
  font-family: var(--m);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6)
}


@media (max-width:900px) {

  /* the pin goes static here and the section runs several screens tall, so a
     backdrop stretched over all of it would be a ~500x3800 crop of a landscape
     photo — unrecognisable mush, and the centre-weighted scrim would wash it to
     nothing anyway. It caps to the intro instead and sits behind the heading
     like a header image; the portrait list below runs on plain paper. */
  .team__bg {
    height: clamp(320px, 64vw, 480px);
    bottom: auto
  }

  /* stronger than the desktop mix: nothing is layered over this strip except
     the heading, and at desktop weight a light photo on light paper simply
     disappeared */
  .team__bg img {
    opacity: .78
  }

  .team__bg::after {
    background: linear-gradient(180deg,
        rgba(243, 242, 239, .5) 0%,
        rgba(243, 242, 239, .62) 58%,
        var(--paper) 100%)
  }

  .team__track {
    height: auto
  }

  
  .team__pin {
    position: static;
    height: auto;
    overflow: visible;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: clamp(18px, 4.5vw, 28px);
    padding-block: clamp(48px, 10vw, 80px)
  }

  .team__t {
    font-size: clamp(40px, 15vw, 88px)
  }

  /* a little more air under the intro than between the portraits */
  .team__c {
    margin-bottom: clamp(10px, 3vw, 20px)
  }

  .tmx {

    display: block;
    position: relative;
    left: auto;
    top: auto;
    width: min(270px, 62vw);
    margin: 0;
    opacity: 1;
  
    transform: none !important
  }

  
  .tmx__v {
    border-radius: 16px;
    box-shadow: 0 18px 38px -26px rgba(15, 15, 18, .5)
  }

  .tmx__c {
    bottom: 0;
    padding: 0 14px 18px
  }

  .tmx__c,
  .tmx__v::after {
    opacity: 1;
    transform: none
  }
}

@media (max-width:620px) {

 
  .tmx {
    width: min(270px, 70vw)
  }

  .tmx__c b {
    font-size: 14px
  }
}


@media (prefers-reduced-motion:reduce) and (min-width:901px) {
  .team__track {
    height: auto
  }

  .team__pin {
    position: static;
    height: auto;
    padding-block: 60px
  }

  .tmx {
    position: relative;
    left: auto !important;
    width: auto !important;
    transform: none !important;
    display: inline-block;
    width: min(240px, 42vw) !important;
    margin: 10px
  }

  .tmx__c {
    opacity: 1;
    transform: none;
    position: static;
    margin-top: 12px
  }

  .tmx__c b,
  .tmx__c span {
    color: var(--ink);
    text-shadow: none
  }

  .tmx__c span {
    color: var(--mut)
  }
}

/* ══ RESTORED: these were lost when the hero block was re-sliced ══ */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 400;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--m);
  font-size: 12px
}

.skip:focus {
  left: 12px;
  top: 12px
}

.spot {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s var(--e);
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .10), transparent 66%)
}

.hero:hover .spot {
  opacity: 1
}

.mbar__go {
  background: var(--acc);
  color: #fff !important
}

/* about — deck arrow markers */
.ab__p {
  display: flex;
  gap: 16px;
  margin-top: 22px;
  max-width: 48ch
}

.ab__p i {
  flex-shrink: 0;
  width: 0;
  height: 0;
  margin-top: 7px;
  border-left: 11px solid var(--acc);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent
}

.ab__p p {
  font-size: 16px;
  line-height: 1.75;
  color: #000
}

.ab__p:first-of-type p {
  font-size: 17.5px;
  color: var(--ink)
}

/* mission & vision */
.mvs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.6vw, 40px)
}

.mvs__h {
  display: grid;
  place-items: center;
  padding: 20px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: all .4s var(--e)
}

.mvs__c:hover .mvs__h {
  background: var(--acc);
  border-color: var(--acc)
}

.mvs__h b {
  font-family: var(--d);
  font-weight: 800;
  font-size: clamp(19px, 2.2vw, 26px);
  letter-spacing: -.03em;
  color: var(--acc);
  transition: color .4s var(--e)
}

.mvs__c:hover .mvs__h b {
  color: #fff
}

.mvs__c>p {
  margin-top: 20px;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--body)
}

.mvs__v {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16/7;
  margin-top: clamp(26px, 3.4vw, 44px)
}

.mvs__v img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(.5)
}

.mvs__v span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 20px;
  font-family: var(--d);
  font-weight: 800;
  font-size: clamp(17px, 2.4vw, 30px);
  letter-spacing: -.03em;
  color: #fff;
  line-height: 1.25;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .5)
}

@media (max-width:760px) {
  .mvs {
    grid-template-columns: 1fr
  }
}

/* ── brand wall: the makers we deliver, logos only ── */
.brw {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(10px, 1.1vw, 16px)
}

.brw__i {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  padding: clamp(14px, 1.7vw, 26px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color .4s var(--e), box-shadow .4s var(--e), transform .4s var(--e)
}

.brw__i:hover {
  border-color: rgba(21, 70, 139, .3);
  box-shadow: 0 22px 40px -28px rgba(11, 47, 97, .45);
  transform: translateY(-3px)
}

/* logos sit back until you look at them, so the wall reads as one texture */
.brw__i img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .5;
  transition: filter .4s var(--e), opacity .4s var(--e)
}

.brw__i:hover img {
  filter: none;
  opacity: 1
}

@media (max-width:1080px) {
  .brw {
    grid-template-columns: repeat(4, 1fr)
  }
}

@media (max-width:720px) {
  .brw {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media (max-width:440px) {
  .brw {
    grid-template-columns: repeat(2, 1fr)
  }
}

/* ── hero brand slider: who we stock, drifting under the headline ── */
.brs {
  position: relative;
  z-index: 3;
  overflow: hidden;
  margin-top: clamp(30px, 4.2vw, 58px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent)
}

/* the gap here matches the one inside each track, so the two meet evenly */
.brs__w {
  display: flex;
  gap: clamp(38px, 5vw, 84px)
}

.brs__r {
  display: flex;
  align-items: center;
  gap: clamp(38px, 5vw, 84px);
  flex-shrink: 0;
  animation: sl 46s linear infinite
}

.brs:hover .brs__r {
  animation-play-state: paused
}

.brs__r img {
  height: clamp(19px, 2vw, 28px);
  width: auto;
  flex-shrink: 0;
  display: block;
  filter: grayscale(1);
  opacity: .38;
  transition: filter .35s var(--e), opacity .35s var(--e)
}

.brs__r img:hover {
  filter: none;
  opacity: 1
}

@media (prefers-reduced-motion:reduce) {
  .brs__r {
    animation: none
  }
}

/* ══ logo strip — sits in the hero, under the beat band ══
   Same sliding-track loop as .br below, but three identical rows rather than
   two: sixteen square marks only add up to about 1570px, so at the moment the
   first row finishes leaving, two rows covered 3144px — fine at 1440, but a
   1920 screen saw the flow stop short of the right edge. Three rows put
   2 x 1570 on screen at the worst frame, which clears any real display. */
.lgm {
  position: relative;
  z-index: 3;
  overflow: hidden;
  /* One value drives both the space between tiles and the space at the end of
     a row. They have to stay identical: the end padding is what separates the
     last tile of one row from the first tile of the next, so the moment the
     two drift the join reads as a tighter gap than every other one. */
  --lgm-gap: 50px;
  /* the beat band above used to carry this offset; with it commented out the
     strip butted straight up against the hero buttons */
  margin-top: clamp(34px, 4.6vw, 64px);
  padding: clamp(15px, 1.8vw, 24px) 0;
  background: #0b2f61;
  box-shadow:
    inset 0 1px 0 rgba(243, 242, 239, .13),
    inset 0 -1px 0 rgba(243, 242, 239, .13)
}

/* if the beat band is ever put back above it, that band brings its own
   margin-top and this one would double the gap */
.bband+.lgm {
  margin-top: 0
}

.lgm__w {
  display: flex;
  overflow: hidden
}

.lgm__r {
  display: flex;
  align-items: center;
  gap: var(--lgm-gap);
  padding-right: var(--lgm-gap);
  flex-shrink: 0;
  animation: sl 40s linear infinite
}

.lgm:hover .lgm__r {
  animation-play-state: paused
}

/* each mark on its own paper tile. The files now carry the official brand
   colour, and several of them — Apple, ASUS, Corsair — are black, which on
   the navy would simply not be there. The tile also evens out a row of marks
   with very different visual weights. Square, because every file sits on a
   24x24 viewBox; padding plus object-fit insets the artwork without needing
   a wrapper element around each image. */
.lgm__r img {
  display: block;
  flex-shrink: 0;
  /* width: clamp(48px, 4.8vw, 66px); */
  /* height: clamp(48px, 4.8vw, 66px); */
  padding: clamp(5px, 1.05vw, 5px);
  border-radius: clamp(6px, 1.2vw, 5px);
  background: var(--paper);
  object-fit: contain;
  transition: transform .35s var(--e), box-shadow .35s var(--e)
}

.br {
  position: relative;
  z-index: 2;
  overflow: hidden;

  padding: clamp(22px, 3vw, 38px) 0;
  background: var(--lg-b)
}

.br__w {
  display: flex;
  overflow: hidden
}

.br__r {
  display: flex;

  gap: clamp(20px, 2.8vw, 46px);
  flex-shrink: 0;
  align-items: center;
  animation: sl 44s linear infinite;
  padding-right: clamp(20px, 2.8vw, 46px)
}

.br:hover .br__r {
  animation-play-state: paused
}

 
/* hollow names, as before — transparent fill with a stroke. The one change
   is the face: Bricolage at 800 is tight and high-contrast, so outlined at
   this size its counters closed up and the names stopped reading. Archivo
   at 700 is the more open of the two, which is what an outline needs. */
.br__r b {
  display: inline-flex;
  align-items: center;
  gap: clamp(20px, 2.8vw, 46px);
  font-family: var(--f);
  font-weight: 700;
  font-size: clamp(25px, 2.5vw, 50px);
  letter-spacing: .005em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(255, 255, 255, .92);
  white-space: nowrap;
  transition: color .35s var(--e), -webkit-text-stroke-color .35s var(--e);
  cursor: default
}

.br__r b::after {
  content: "";
  width: clamp(24px, 3vw, 52px);
  height: 2px;
  flex-shrink: 0;
  background: #e2a84b;
}

/* fills solid on hover, so the outline is not the only state */
.br__r b:hover {
  color: #fff;
  -webkit-text-stroke-color: #fff
}

/* without text-stroke the names would vanish — fall back to solid */
@supports not (-webkit-text-stroke: 1px #fff) {
  .br__r b {
    color: rgba(255, 255, 255, .92)
  }
}

/* ══ showcase — an endless rail of pictures; the name below follows the centred one ══ */
.shc {
  overflow: hidden;
  --shc-w: clamp(258px, 46vw, 680px)
}

.shc__hd {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 54px);
  align-items: end;
  margin-bottom: clamp(28px, 3.6vw, 50px)
}

.shc__hd h2 {
  font-size: clamp(28px, 4.6vw, 62px)
}

.shc__lede {
  max-width: 46ch;
  font-size: 15.5px
}

.shc__nav {
  display: flex;
  gap: 10px;
  justify-self: end
}

.shc__b {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .35s var(--e), color .35s var(--e), border-color .35s var(--e), transform .35s var(--e)
}

.shc__b svg {
  width: 17px;
  height: 17px
}

.shc__b:hover {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
  transform: translateY(-2px)
}


.shc__rail {
  display: flex;
  gap: clamp(12px, 1.4vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-block: 10px 0;
  cursor: grab
}

.shc__rail::-webkit-scrollbar {
  display: none
}

/* while dragging, and while the loop is being re-seated, nothing may animate */
.shc__rail.drag,
.shc__rail.jump {
  scroll-behavior: auto;
  scroll-snap-type: none
}

.shc__rail.drag {
  cursor: grabbing
}

.shc__i {
  flex: 0 0 var(--shc-w);
  scroll-snap-align: center;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  display: block;
  opacity: .6;
  transition: opacity .6s var(--e)
}

.shc__i:hover {
  opacity: .85
}

.shc__i.on {
  opacity: 1
}

.shc__v {
  display: block;
  
  aspect-ratio: 712 / 450;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: radial-gradient(76% 60% at 50% 34%, #FFFFFF 0%, #F7F6F3 64%, #EEECE7 100%);
  box-shadow: var(--sh);
  transition: box-shadow .6s var(--e), border-color .6s var(--e), transform .6s var(--e)
}

.shc__i.on .shc__v {
  border-color: var(--line2);
  box-shadow: 0 4px 10px rgba(15, 15, 18, .05), 0 34px 60px -30px rgba(11, 47, 97, .42)
}

/* every card holds a plain <img>; drop any picture in and it fills the plate */
.shc__v img {
  width: 100%;
  height: 100%;
  display: block;
   
  object-fit: contain
}

   
.shc__i.on .shc__v {
  transform: translateY(-5px)
}

/* the caption swaps out and back in as the centred picture changes */
.shc__now {
  text-align: center;
  padding: clamp(30px, 4vw, 54px) var(--gut) 0;
  transition: opacity .28s var(--e), transform .28s var(--e)
}

.shc__now.out {
  opacity: 0;
  transform: translateY(10px)
}

.shc__now h3 {
  font-family: var(--d);
  font-weight: 800;
  letter-spacing: -.034em;
  line-height: 1.1;
  font-size: clamp(24px, 3.4vw, 46px);
  color: var(--ink);
  margin: 0
}

.shc__cat {
  display: block;
  margin-top: 14px;
  font-family: var(--m);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mut)
}

@media (max-width:900px) {
  .shc__hd {
    grid-template-columns: 1fr;
    align-items: start
  }

  .shc__nav {
    justify-self: start
  }

  .shc__b {
    width: 50px;
    height: 50px
  }
}

/* vector renderings stand in where we hold no photograph */
.pg__v .art {
  width: 100%;
  height: 100%;
  display: block;
  background: #fff;
  transition: transform .7s var(--e)
}

.pg__v .art {
  padding: 11%
}

.pg__i:hover .pg__v .art {
  transform: scale(1.06)
}

/* ── the AI bench: NVIDIA professional and DGX lines, ordered in ── */
.ai {
  position: relative;
  background: #061530;
  color: #fff;
  overflow: hidden;
  padding: clamp(60px, 8vw, 120px) 0
}

.ai::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 70% at 12% 0%, #1E56A8 0%, rgba(30, 86, 168, 0) 62%),
    radial-gradient(70% 60% at 92% 100%, rgba(228, 169, 69, .22) 0%, rgba(228, 169, 69, 0) 66%)
}

.ai>* {
  position: relative;
  z-index: 2
}

.ai .lbl {
  color: rgba(255, 255, 255, .55)
}

.ai .lbl i {
  color: var(--acc-b)
}

.ai h2 {
  color: #fff
}

.ai h2 em {
  color: var(--acc-b)
}

.ai__hd {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(20px, 4vw, 64px);
  align-items: end
}

.ai__hd p {
  color: rgba(255, 255, 255, .72);
  max-width: 52ch;
  font-size: 16px
}

.ai__g {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: clamp(12px, 1.6vw, 22px);
  margin-top: clamp(30px, 4vw, 56px)
}

.ai__c {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 18px;
  padding: clamp(20px, 2.2vw, 30px);
  display: flex;
  flex-direction: column;
  transition: border-color .4s var(--e), transform .4s var(--e), background .4s var(--e)
}

.ai__c:hover {
  border-color: rgba(228, 169, 69, .55);
  transform: translateY(-4px);
  background: rgba(255, 255, 255, .08)
}

.ai__c .art {
  width: 100%;
  height: auto;
  background: none;
  margin: -6px 0 4px
}

.ai__k {
  font-family: var(--m);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acc-b)
}

.ai__c h3 {
  font-family: var(--d);
  font-weight: 800;
  letter-spacing: -.035em;
  color: #fff;
  font-size: clamp(19px, 2.1vw, 27px);
  margin: 12px 0 0;
  line-height: 1.1
}

.ai__c p {
  margin-top: 11px;
  font-size: 14.5px;
  line-height: 1.66;
  color: rgba(255, 255, 255, .72)
}

.ai__sp {
  margin-top: auto;
  padding-top: 18px;
  display: grid;
  gap: 8px
}

.ai__sp div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .11)
}

.ai__sp dt,
.ai__sp span {
  font-family: var(--m);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5)
}

.ai__sp b {
  font-family: var(--m);
  font-size: 13px;
  color: #fff;
  text-align: right
}

.ai__f {
  margin-top: clamp(24px, 3vw, 38px);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--m);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45)
}

.ai__f a {
  color: var(--acc-b);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap .3s var(--e)
}

.ai__f a:hover {
  gap: 13px
}

@media (max-width:1000px) {
  .ai__g {
    grid-template-columns: 1fr
  }

  .ai__hd {
    grid-template-columns: 1fr;
    gap: 18px
  }
}

/* product grid */
.pg__tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: clamp(20px, 2.6vw, 32px)
}

.pg__tabs button {
  font-family: var(--m);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 100px;
  color: #25242C;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: all .3s var(--e)
}

.pg__tabs button:hover {
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line2)
}

.pg__tabs button.on {
  background: var(--acc);
  color: #fff;
  box-shadow: none
}

.pg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 24px)
}

.pg__i {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .4s var(--e), transform .4s var(--e)
}

.pg__i:hover {
  box-shadow: 0 24px 48px -30px rgba(15, 15, 18, .4);
  transform: translateY(-4px)
}

.pg__v {
  position: relative;
  aspect-ratio: 1;
  background: #fff;
  overflow: hidden
}

.pg__v img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .7s var(--e)
}

.pg__i:hover .pg__v img {
  transform: scale(1.06)
}

.pg__off {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-family: var(--m);
  font-size: 9.5px;
  letter-spacing: .1em;
  padding: 5px 9px;
  border-radius: 3px;
  background: #1E8A4C;
  color: #fff
}

.pg__act {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .35s var(--e), transform .35s var(--e)
}

.pg__i:hover .pg__act {
  opacity: 1;
  transform: none
}

.pg__act span {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--paper);
  display: grid;
  place-items: center;
  font-size: 13px;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .25)
}

.pg__b {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  flex: 1
}

.pg__cat {
  font-family: var(--m);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acc-b)
}

.pg__b h3 {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  font-weight: 500;
  margin: 8px 0 0;
  transition: color .3s var(--e)
}

.pg__i:hover h3 {
  color: var(--acc)
}

.pg__pr {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap
}

.pg__pr b {
  font-family: var(--m);
  font-size: 15px;
  color: var(--ink);
  font-variant-numeric: tabular-nums
}

.pg__pr s {
  font-family: var(--m);
  font-size: 12px;
  color: var(--mut);
  font-variant-numeric: tabular-nums
}

.pg__f {
  margin-top: clamp(18px, 2.4vw, 28px);
  font-family: var(--m);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mut);
  text-align: center
}

@media (max-width:1080px) {
  .pg {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media (max-width:760px) {
  .pg {
    grid-template-columns: repeat(2, 1fr)
  }

  .pg__b h3 {
    font-size: 12.5px
  }
}

@media (max-width:400px) {
  .pg {
    grid-template-columns: 1fr
  }
}


.s {
  padding: clamp(60px, 8.4vw, 30px) 0
}

.sh {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 26px;
  flex-wrap: wrap;
  margin-bottom: clamp(32px, 4.4vw, 58px)
}

.sh h2 {
  font-size: clamp(28px, 5vw, 68px)
}

.sh p {
  max-width: 40ch
}

/* ── about ── */
.ab {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 4vw, 72px);
  align-items: center
}

.ab__st {
  font-family: var(--d);
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 34px);
  line-height: 1.3;
  letter-spacing: -.025em;
  color: var(--ink)
}

.ab__v {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4/3.4;
  background: var(--paper2)
}

.ab__v img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.ab__av {
  position: absolute;
  right: 18px;
  bottom: 18px;
  background: var(--card);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: var(--sh);
  display: flex;
  align-items: center;
  gap: 11px
}

.ab__av img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0
}

.ab__av b {
  display: block;
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 600
}

.ab__av span {
  font-size: 12px
}

.cnt2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 34px;
  padding-top: 32px;
  border-top: 1px solid var(--line)
}

.cnt2 b {
  display: block;
  font-family: var(--d);
  font-weight: 800;
  font-size: clamp(36px, 5.4vw, 64px);
  letter-spacing: -.05em;
  color: var(--ink);
  line-height: 1
}

.cnt2 span {
  display: block;
  margin-top: 8px;
  font-size: 14.5px
}

/* ══════ SERVICES — numbered, hover image ══════ */
.svc__tg {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px
}

.svc__tg span {
  font-family: var(--m);
  font-size: 11px;
  letter-spacing: .06em;
  padding: 7px 14px;
  border-radius: 100px;
  box-shadow: inset 0 0 0 1px var(--line2);
  color: var(--ink2)
}

.svc__lk {
  margin-top: 22px;
  display: inline-flex
}

/* full-bleed band, not an inset card: no radius, no side padding — the .wrap
   nested inside carries the gutter, so the gradient runs edge to edge while the
   content stays on the same column as every other section */
.demo {
  background: linear-gradient(158deg, var(--acc) -20%, var(--lg-b) 44%, #071A36 100%);
  border-radius: 0;
  padding: clamp(44px, 5.4vw, 88px) 0;
  color: var(--paper);
  position: relative;
  overflow: hidden
}

.demo h2 {
  color: var(--paper)
}

.demo__lede {
  color: rgba(243, 242, 239, .78);
  max-width: 44ch
}

.demo__g>* {
  min-width: 0
}

.demo__g {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(22px, 3vw, 50px);
  align-items: center;
  margin-top: 36px
}

/* ── stage: swaps between a laptop chassis and a drive ── */
.stage {
  position: relative;
  width: 100%;
  /* max-width: 580px; */
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(220px, 29vw, 350px);
  transition: opacity .28s var(--e)
}

.stage.out {
  opacity: 0
}

  
.lap {
  width: var(--w, 92%);
  margin-inline: auto;
  transition: width .55s var(--e)
}

  
.mon {
  width: var(--w, 92%);
  margin-inline: auto;
  transition: width .55s var(--e)
}

.mon__panel {
  position: relative;
  padding: var(--bt) var(--bs) calc(var(--bb) * .9);
  border-radius: var(--rad);
  background: var(--lid);
  box-shadow: 0 30px 60px -26px rgba(0, 0, 0, .78), inset 0 1px 0 rgba(255, 255, 255, .2)
}

.mon__cam {
  position: absolute;
  top: calc(var(--bt) / 2);
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .34);
  transform: translateY(-50%)
}

/* neck and base, drawn from the same shell gradient as the panel */
.mon__neck {
  width: 13%;
  height: clamp(26px, 3.4vw, 52px);
  margin: 0 auto;
  background: var(--base);
  clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%)
}

.mon__base {
  width: 40%;
  height: clamp(7px, .9vw, 12px);
  margin: 0 auto;
  border-radius: 0 0 7px 7px / 0 0 5px 5px;
  background: var(--base);
  box-shadow: 0 16px 26px -16px rgba(0, 0, 0, .7)
}

.lap__lid {
  position: relative;
  padding: var(--bt) var(--bs) var(--bb);
  border-radius: var(--rad) var(--rad) 4px 4px;
  background: var(--lid);
  box-shadow: 0 30px 60px -26px rgba(0, 0, 0, .78), inset 0 1px 0 rgba(255, 255, 255, .2)
}

.lap__cam {
  position: absolute;
  top: calc(var(--bt) / 2 - 2px);
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .26);
  z-index: 5
}

.lap__notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24%;
  height: calc(var(--bt) + 10px);
  border-radius: 0 0 10px 10px;
  background: var(--lid);
  z-index: 5
}

.lap__logo {
  position: absolute;
  bottom: calc(var(--bb) * 0.26);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--m);
  font-size: 7.5px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
  z-index: 5;
  white-space: nowrap
}

.lap__logo.lft {
  left: auto;
  right: calc(var(--bs) + 6px);
  transform: none
}

.lap__scr {
  aspect-ratio: var(--ratio, 16/10);
  border-radius: 4px;
  overflow: hidden;
  background: #07070A;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1)
}

.lap__wall {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  
  object-fit: contain;
  object-position: center;
  filter: saturate(1.06) contrast(1.03)
}

.lap__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6.5%;
  z-index: 5;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px
}

.lap__bar i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5)
}

.lap__bar b {
  margin-left: auto;
  font-family: var(--m);
  font-size: 5.5px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .72);
  font-weight: 400
}

.lap__dock {
  position: absolute;
  left: 50%;
  bottom: 3.5%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 4px;
  padding: 4px 7px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(8px)
}

.lap__dock i {
  width: 9px;
  height: 9px;
  border-radius: 2.5px;
  background: rgba(255, 255, 255, .55)
}

.lap__dock i:nth-child(2) {
  background: rgba(228, 169, 69, .85)
}

.lap__dock i:nth-child(4) {
  background: rgba(21, 70, 139, .85)
}

.lap__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .16), transparent 62%);
  mix-blend-mode: screen
}

/* brand lockup mark — swap for the official logo asset when you have one */
.scr__mark {
  display: inline-block;
  width: .42em;
  height: .42em;
  border-radius: .1em;
  margin-right: .32em;
  vertical-align: .08em
}

.lap__hinge {
  display: flex;
  justify-content: center;
  gap: 44%;
  height: 5px;
  margin-top: -1px
}

.lap__hinge i {
  width: 15%;
  height: 100%;
  border-radius: 0 0 4px 4px;
  background: var(--base);
  filter: brightness(.7)
}

.lap__deck {
  position: relative;
  width: 107%;
  margin: -2px 0 0 -3.5%;
  height: var(--deck, 26px);
  background: var(--base);
  overflow: hidden;
  border-radius: 2px 2px 10px 10px;
  clip-path: polygon(0 0, 100% 0, 96.5% 100%, 3.5% 100%)
}

.lap--ergo .lap__deck {
  transform: perspective(420px) rotateX(7deg);
  transform-origin: top center
}

.lap__keys {
  position: absolute;
  inset: 16% 13% 48%;
  opacity: .42;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .55) 0 5px, transparent 5px 8px),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .55) 0 3px, transparent 3px 6px)
}

.lap__pad {
  position: absolute;
  left: 50%;
  bottom: 9%;
  transform: translateX(-50%);
  width: 23%;
  height: 30%;
  border-radius: 3px;
  background: rgba(0, 0, 0, .3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09)
}

.lap__tp {
  position: absolute;
  left: 50%;
  top: 31%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #E8443A;
  box-shadow: 0 0 7px rgba(232, 68, 58, .9);
  z-index: 3
}

.lap__rgb {
  width: 94%;
  height: 4px;
  margin: 1px auto 0;
  border-radius: 0 0 9px 9px;
  background: linear-gradient(90deg, var(--acc), #FFC63B, #3BAE8C, #2FA8D6, #7B5CFF);
  filter: blur(1.5px);
  box-shadow: 0 7px 22px rgba(123, 92, 255, .6)
}

.lap__foot {
  width: 78%;
  height: 22px;
  margin: 2px auto 0;
  border-radius: 50%;
  filter: blur(9px);
  background: radial-gradient(ellipse, rgba(0, 0, 0, .5), transparent 70%)
}

.scr {
  position: absolute;
  inset: 0;
  padding: clamp(13px, 2.4vw, 24px);
  overflow: hidden
}

.scr__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 6, 10, .14) 0%, rgba(6, 6, 10, .42) 42%, rgba(6, 6, 10, .88) 100%)
}

.scr__wash {
  position: absolute;
  inset: 0;
  opacity: .4;
  mix-blend-mode: screen
}

.scr__c {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.scr__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px
}

.scr__brand {
  font-family: var(--d);
  font-size: clamp(20px, 4.4vw, 46px);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .9;
  color: #fff
}

.scr__model {
  font-family: var(--m);
  font-size: clamp(9px, 1.2vw, 11.5px);
  color: rgba(255, 255, 255, .62);
  margin-top: 6px;
  letter-spacing: .08em
}

.scr__badge {
  font-family: var(--m);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  padding: 5px 10px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
  white-space: nowrap
}

.scr__bars {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: clamp(22px, 4.6vw, 48px);
  margin-bottom: 12px
}

.scr__bars b {
  flex: 1;
  border-radius: 2px;
  transform-origin: bottom;
  transition: transform .7s var(--e)
}

.scr__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px
}

.scr__stat {
  border-top: 1px solid rgba(255, 255, 255, .28);
  padding-top: 8px
}

.scr__stat b {
  display: block;
  font-family: var(--m);
  font-size: clamp(9.5px, 1.5vw, 13px);
  color: #fff
}

.scr__stat span {
  font-family: var(--m);
  font-size: 8px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58)
}

/* drive */
.drv {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.8vw, 20px);
  align-items: center
}

.drv__v {
  position: relative;
  width: 100%;
  max-width: 520px;
  border-radius: 14px;
  overflow: hidden;
  background: #0E1015;
  padding: clamp(16px, 2.6vw, 32px);
  box-shadow: 0 26px 48px -22px rgba(0, 0, 0, .62), inset 0 0 0 1px rgba(255, 255, 255, .08)
}

.drv__ph {
  width: 100%;
  height: clamp(200px, 27vw, 320px);
  object-fit: cover;
  border-radius: 10px;
  display: block
}

.drv__chip {
  position: absolute;
  left: calc(clamp(16px, 2.6vw, 32px) + 14px);
  top: calc(clamp(16px, 2.6vw, 32px) + 14px);
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 9px 15px;
  border-radius: 100px;
  background: rgba(14, 16, 21, .72);
  backdrop-filter: blur(10px)
}

.drv__chip b {
  font-family: var(--d);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.03em;
  color: #fff
}

.drv__chip span {
  font-family: var(--m);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62)
}

.drv__fg {
  position: relative;
  z-index: 2
}

.drv__art {
  width: 100%;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55))
}

.drv__art svg {
  width: 100%;
  height: auto;
  display: block
}

.drv__alt {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(243, 242, 239, .7);
  font-family: var(--m);
  font-size: 11px
}

.drv__cap {
  font-family: var(--m);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
  text-align: center
}

.drv__m {
  width: 100%;
  max-width: 520px
}

.dsk__row {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px
}

.dsk__row span {
  font-family: var(--m);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .52)
}

.dsk__t {
  height: 6px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .16);
  overflow: hidden
}

.dsk__t i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 100px;
  background: var(--acc);
  transition: width 1.1s var(--e)
}

.dsk__row b {
  font-family: var(--m);
  font-size: 11.5px;
  color: #fff
}

.dsk__eta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, .2);
  padding-top: 13px;
  margin-top: 4px
}

.dsk__eta em {
  font-style: normal;
  font-family: var(--m);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .52)
}

.dsk__eta b {
  font-family: var(--d);
  font-size: clamp(19px, 3.2vw, 32px);
  font-weight: 800;
  color: var(--acc);
  letter-spacing: -.03em
}

.pan {
  display: flex;
  flex-direction: column;
  gap: 19px
}

.seg {
  display: inline-flex;
  padding: 4px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .1);
  width: fit-content
}

.seg button {
  padding: 10px 24px;
  border-radius: 100px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(243, 242, 239, .76);
  transition: background .3s var(--e), color .3s var(--e)
}

.seg button.on {
  background: var(--paper);
  color: var(--ink)
}

.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.chip {
  padding: 10px 17px;
  border-radius: 100px;
  font-size: 13.5px;
  color: rgba(243, 242, 239, .7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  transition: all .3s var(--e)
}

.chip:hover {
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42)
}
.chip.on {
  background: var(--acc-b);
  color: var(--lg-b);
  font-weight: 600;
  box-shadow: none
}

.pan__t {
  font-family: var(--d);
  font-size: clamp(19px, 2.2vw, 27px);
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 0;
  color: #fff
}

.pan__n {
  color: rgba(243, 242, 239, .74);
  font-size: 14.5px;
  margin-top: 8px
}

.read {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 0
}

.read div {
  position: relative;
  padding: 13px 16px 14px;
  border: 1px solid rgba(243, 242, 239, .13);
  border-radius: 12px;
  background: rgba(243, 242, 239, .045);
  transition: border-color .4s var(--e), background .4s var(--e)
}

.read div:last-child:nth-child(odd) {
  grid-column: 1 / -1
}

.read div:hover {
  border-color: rgba(228, 169, 69, .45);
  background: rgba(243, 242, 239, .07)
}

.read dt {
  font-family: var(--m);
  font-size: 9.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(243, 242, 239, .7)
}

.read dd {
  margin: 7px 0 0;
  font-family: var(--f);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
  color: var(--paper)
}

.cap {
  display: none
}

.cap.on {
  display: block
}

.cap__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px
}

.cap__hd span {
  font-family: var(--m);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45)
}

.cap__hd b {
  font-family: var(--d);
  font-size: 20px;
  font-weight: 800;
  color: #fff
}

input[type=range] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 24px;
  cursor: pointer
}

input[type=range]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .2)
}

input[type=range]::-moz-range-track {
  height: 4px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .2)
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--acc);
  margin-top: -7px;
  box-shadow: 0 0 0 4px rgba(21, 70, 139, .28)
}

input[type=range]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 0 4px rgba(21, 70, 139, .28)
}

.cap__mk {
  display: flex;
  justify-content: space-between;
  font-family: var(--m);
  font-size: 9.5px;
  color: rgba(255, 255, 255, .45);
  margin-top: 2px
}

.pan__buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .16)
}
.pan__hint {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 13.5px;
  color: rgba(243, 242, 239, .74);
  max-width: 30ch;
  line-height: 1.5
}

.pan__hint::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acc-b);
  transform: translateY(-1px)
}

.demo .btn {
  background: var(--paper);
  color: var(--ink)
}

.demo .btn:hover {
  background: var(--acc-b);
  color: var(--lg-b)
}

.thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 26px
}

.thumbs figure {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--paper2)
}

.thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e)
}

.thumbs figure:hover img {
  transform: scale(1.08)
}

/* ── products grid ── */
.prods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.2vw, 32px)
}

.pr {
  display: block
}

.pr__v {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--paper2);
  position: relative
}

.pr__v img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--e)
}

.pr:hover .pr__v img {
  transform: scale(1.07)
}

.pr__go {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 15px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s var(--e), transform .4s var(--e), background .3s var(--e)
}

.pr:hover .pr__go {
  opacity: 1;
  transform: none
}

.pr__go:hover {
  background: var(--acc);
  color: #fff
}

.pr h3 {
  font-family: var(--d);
  font-weight: 800;
  font-size: clamp(19px, 2vw, 25px);
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 20px 0 0;
  transition: color .3s var(--e)
}

.pr:hover h3 {
  color: var(--acc)
}

.pr__tg {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 12px
}

.pr__tg span {
  font-family: var(--m);
  font-size: 10.5px;
  letter-spacing: .05em;
  padding: 6px 12px;
  border-radius: 100px;
  box-shadow: inset 0 0 0 1px var(--line2);
  color: var(--mut)
}

.pr__pr {
  margin-top: 14px;
  font-family: var(--d);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.03em;
  color: var(--ink)
}

/* ── process ── */
.proc {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 30px)
}

.pc {
  padding-top: 26px;
  border-top: 2px solid var(--ink);
  transition: border-color .4s var(--e)
}

.pc:hover {
  border-color: var(--acc)
}

.pc b {
  font-family: var(--d);
  font-weight: 800;
  font-size: clamp(34px, 4.4vw, 58px);
  letter-spacing: -.05em;
  color: var(--line2);
  line-height: 1;
  display: block;
  transition: color .4s var(--e)
}

.pc:hover b {
  color: var(--acc)
}

.pc h3 {
  font-family: var(--d);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 16px 0 10px
}

.pc p {
  font-size: 14.5px
}

/* ── reviews ── */
.rv__hd {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 34px
}

.rv__sc {
  display: flex;
  align-items: baseline;
  gap: 9px
}

.rv__sc b {
  font-family: var(--d);
  font-weight: 800;
  font-size: 38px;
  letter-spacing: -.04em;
  color: var(--ink)
}

.rv__sc span {
  font-size: 14px
}

.rv__st {
  color: var(--acc);
  letter-spacing: 2px
}

.rvs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent)
}
.rvs__r {
  display: flex;
  width: max-content;
  flex-shrink: 0;
  animation: slh 62s linear infinite
}

.rvs__r .rv {
  margin-right: 16px
}

.rvs__r--b {
  animation: slh 78s linear infinite reverse
}

@keyframes slh {
  to {
    transform: translateX(-50%)
  }
}

.rvs__sc {
  display: flex;
  align-items: center;
  gap: 14px
}

.rvs__sc b {
  font-family: var(--d);
  font-weight: 800;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -.04em;
  color: var(--acc)
}

.rvs__sc span {
  font-family: var(--m);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mut);
  line-height: 2
}

.rvs:hover .rvs__r {
  animation-play-state: paused
}

.rv {
  width: min(360px, 78vw);
  flex-shrink: 0;
  background: var(--card);
  border-radius: 14px;
  padding: 28px 26px;
  box-shadow: var(--sh)
}

.rv p {
  font-family: var(--d);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -.02em;
  color: var(--ink)
}

.rv__w {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line)
}

.rv__w img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover
}

.rv__w strong {
  display: block;
  font-size: 14.5px;
  color: var(--ink)
}

.rv__w span {
  font-size: 13px
}

/* ── awards ── */
.aw {
  border-top: 1px solid var(--line)
}

.awr {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: clamp(12px, 3vw, 40px);
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .4s var(--e)
}

.awr:hover {
  padding-left: 14px
}

.awr__y {
  font-family: var(--m);
  font-size: 13px;
  color: var(--mut)
}

.awr__t {
  font-family: var(--d);
  font-weight: 800;
  font-size: clamp(17px, 2.4vw, 30px);
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 0;
  transition: color .35s var(--e)
}

.awr:hover .awr__t {
  color: var(--acc)
}

.awr__s {
  font-family: var(--m);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 100px;
  box-shadow: inset 0 0 0 1px var(--line2);
  white-space: nowrap
}

/* ── cta + footer ── */
.cta {
  background: var(--ink);
  border-radius: 18px;
  padding: clamp(40px, 6.4vw, 104px) clamp(24px, 4vw, 64px);
  text-align: center
}

.cta h2 {
  color: var(--paper);
  font-size: clamp(30px, 6vw, 86px)
}

.cta p {
  color: rgba(243, 242, 239, .62);
  margin: 20px auto 30px;
  max-width: 44ch
}

.cta .btn {
  background: var(--acc);
  color: #fff
}

.cta .btn:hover {
  background: var(--paper);
  color: var(--ink)
}

.ft {
  position: relative;
  overflow: hidden;
  /* margin-top: clamp(50px, 7vw, 110px); */
  padding: clamp(52px, 7vw, 96px) 0 0;
  background: var(--lg-b);
  color: rgba(243, 242, 239, .72)
}

.ft::before {
  content: "";
  position: absolute;
  left: -12%;
  top: -45%;
  width: 62%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(21, 70, 139, .6), transparent 66%);
  pointer-events: none
}

/* the blue bloom above sits hard left and left the right half flat; this is
   its gold counterweight, low and to the right where the wordmark lands */
.ft::after {
  content: "";
  position: absolute;
  right: -16%;
  bottom: -32%;
  width: 54%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(228, 169, 69, .13), transparent 64%);
  pointer-events: none
}

.ft .wrap {
  position: relative;
  z-index: 1
}

/* ── the invitation strip, ahead of everything administrative ── */
.ft__inv {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(22px, 3vw, 44px);
  flex-wrap: wrap;
  padding-bottom: clamp(34px, 4vw, 52px);
  margin-bottom: clamp(34px, 4vw, 52px);
  border-bottom: 1px solid rgba(243, 242, 239, .15)
}

.ft__eye {
  display: block;
  font-family: var(--m);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(243, 242, 239, .58)
}

.ft__ask {
  font-family: var(--d);
  font-weight: 800;
  font-size: clamp(28px, 4.4vw, 58px);
  line-height: 1.04;
  letter-spacing: -.04em;
  color: var(--paper);
  margin: 14px 0 0
}

.ft__ask em {
  font-style: normal;
  color: var(--acc-b)
}

.ft__acts {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

/* .ft a turns every link into a block with a bottom rule — the two buttons
   here have to opt back out of it */
.ft .btn {
  display: inline-flex;
  width: auto;
  margin: 0;
  padding: 15px 27px;
  border-bottom: 0;
  font-size: 14.5px;
  background: var(--paper);
  color: var(--ink)
}

.ft .btn:hover {
  background: var(--acc-b);
  color: var(--lg-b);
  border-bottom-color: transparent;
  transform: translateY(-2px)
}

.ft .btn--o {
  background: transparent;
  color: var(--paper);
  box-shadow: inset 0 0 0 1.5px rgba(243, 242, 239, .3)
}

.ft .btn--o:hover {
  background: var(--paper);
  color: var(--ink);
  box-shadow: none
}

.ft__g {
  display: grid;
  grid-template-columns: 1.4fr .7fr 1.2fr 1.1fr;
  gap: 0;
  padding-bottom: clamp(34px, 4vw, 54px)
}

/* >*+* rather than >div+div: the explore column is a <nav>, and a div-only
   selector would drop its rule and leave the row uneven */
.ft__g>*+* {
  border-left: 1px solid rgba(243, 242, 239, .15);
  padding-left: clamp(20px, 2.6vw, 44px);
  margin-left: clamp(20px, 2.6vw, 44px)
}

  
.ft__lg {
  display: inline-block;
  padding: 11px 16px;
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 18px 34px -22px rgba(0, 0, 0, .65);
  transition: transform .4s var(--e), box-shadow .4s var(--e)
}

.ft__lg:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .75)
}

.ft__g h3 {
  font-family: var(--d);
  font-weight: 800;
  font-size: clamp(24px, 2.7vw, 36px);
  line-height: 1.12;
  letter-spacing: -.035em;
  color: var(--paper);
  margin: 22px 0 0;
  max-width: 17ch
}

.ft__by {
  margin-top: 12px;
  color: rgba(243, 242, 239, .58)
}

  
.ft h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--m);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper);
  margin: 0 0 20px;
  font-weight: 500
}

.ft h4::before {
  content: "";
  width: 14px;
  height: 2px;
  flex-shrink: 0;
  background: var(--acc-b)
}

.ft a {
  display: block;
  width: fit-content;
  font-size: 18px;
  color: rgba(243, 242, 239, .68);
  margin-bottom: 12px;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--e), border-color .3s var(--e), transform .3s var(--e)
}

  
.ft a:hover {
  color: var(--paper);
  border-bottom-color: var(--acc-b);
  transform: translateX(3px)
}

.ft a:focus-visible {
  outline: 2px solid var(--acc-b);
  outline-offset: 3px
}

/* ── explore: numbered, the way the faq and the services list are ── */
.ft__nav a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 17px;
  margin-bottom: 14px
}

.ft__nav a em {
  font-style: normal;
  font-family: var(--m);
  font-size: 10.5px;
  letter-spacing: .12em;
  color: rgba(243, 242, 239, .38);
  transition: color .3s var(--e)
}

.ft__nav a:hover em {
  color: var(--acc-b)
}

/* ── visit ── */
.ft__addr {
  display: flex;
  gap: 11px;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(243, 242, 239, .6)
}

.ft__addr svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--acc-b)
}

/* the same green-dot vocabulary the trading-hours pill uses up in the
   contact section, so "open" reads the same in both places */
.ft__hrs-l {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 9px 16px;
  border-radius: 100px;
  box-shadow: inset 0 0 0 1.5px rgba(243, 242, 239, .22);
  font-family: var(--m);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(243, 242, 239, .82);
  white-space: nowrap
}

.ft__hrs-l i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acc-b);
  flex-shrink: 0
}

.ft__dir {
  margin-top: 20px;
  font-size: 14px;
  font-family: var(--m);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--acc-b) !important
}

.ft__dir i {
  font-style: normal;
  display: inline-block;
  margin-left: 4px
}

/* ── talk to us: the numbers are the point, so they get the mono ── */
.ft__num {
  font-family: var(--m);
  font-size: 15px;
  letter-spacing: .04em;
  color: rgba(243, 242, 239, .82) !important;
  margin-bottom: 10px
}

.ft__mail {
  margin-top: 16px;
  font-size: 15px;
  overflow-wrap: anywhere
}

.ft__wa {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 10px 18px;
  white-space: nowrap;
  border-radius: 100px;
  border-bottom: 0 !important;
  box-shadow: inset 0 0 0 1.5px rgba(228, 169, 69, .45);
  font-family: var(--m);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acc-b) !important;
  transition: background .3s var(--e), color .3s var(--e), box-shadow .3s var(--e)
}

.ft__wa:hover {
  background: var(--acc-b);
  color: var(--lg-b) !important;
  box-shadow: none;
  transform: none
}

.ft__wa i {
  font-style: normal;
  transition: transform .3s var(--e)
}

.ft__wa:hover i {
  transform: translateX(3px)
}

.ft__s {
  display: flex;
  gap: 10px;
  margin-top: 28px
}

.ft__s a {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(243, 242, 239, .26);
  color: var(--paper);
  display: grid;
  place-items: center;
  margin: 0;
  border-bottom: 0;
  transition: background .3s var(--e), color .3s var(--e), box-shadow .3s var(--e), transform .3s var(--e)
}

.ft__s svg {
  width: 25px;
  height: 25px;
  display: block
}

.ft__s a:hover {
  background: var(--acc-b);
  color: var(--lg-b);
  box-shadow: inset 0 0 0 1.5px var(--acc-b);
  transform: translateY(-3px)
}

/* full-bleed and hollow: outside .wrap so it runs the width of the footer,
   transparent-filled with a stroke like the brand names in the marquee.
   .ft has overflow:hidden, so the ends bleed off rather than wrap. */
.ft__big {
  position: relative;
  z-index: 1;
  /* sized to run the width of the content column, so the mark starts under the
     logo and finishes under the last column. 12.5vw is the measured width of
     these 16 glyphs against the gutter formula, deliberately a couple of per
     cent under an exact fit: the letters are separate inline-blocks for the
     hover wave, they do not kern against each other, and each rounds its own
     width up — so the string sets wider than plain text, and wider still as
     the font shrinks. A hair of trailing space is invisible; overshooting the
     gutter would clip against .ft's overflow:hidden, which is not. */
  max-width: 1440px;
  /* 0, not the h3 default: a 1em block margin on a 184px font is 184px of
     dead navy above and below the mark */
  margin: 0 auto;
  padding: clamp(14px, 2vw, 30px) var(--gut) clamp(24px, 2.4vw, 34px);
  font-family: var(--d);
  font-weight: 800;
  font-size: clamp(34px, 12.5vw, 178px);
  letter-spacing: -.045em;
  line-height: .82;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(243, 242, 239, .26);
  white-space: nowrap;
  user-select: none
}

/* without text-stroke the wordmark would vanish — fall back to the old fill */
@supports not (-webkit-text-stroke: 1px #fff) {
  .ft__big {
    color: rgba(243, 242, 239, .09)
  }
}

/* ── hover: a wave travels the wordmark, letter by letter ── */
.ft__big i {
  display: inline-block;
  font-style: normal
}

/* the word gap. An empty inline-block has no width, and a literal space
   between two inline-blocks is not reliable to author, so it is measured. */
.ft__big-sp {
  width: .22em
}

@keyframes ftWave {

  0%,
  100% {
    transform: translateY(0);
    -webkit-text-stroke-color: rgba(243, 242, 239, .26)
  }

  38% {
    transform: translateY(-.115em);
    -webkit-text-stroke-color: var(--acc-b)
  }

  68% {
    transform: translateY(.025em);
    -webkit-text-stroke-color: rgba(228, 169, 69, .55)
  }
}

.ft__big:hover i {
  will-change: transform;
  animation: ftWave 1.25s var(--e) infinite
}

/* 55ms a letter: the crest has crossed seven letters before the first one
   lands, which is what makes it read as one wave and not sixteen bounces */
.ft__big:hover i:nth-child(1) { animation-delay: 0s }
.ft__big:hover i:nth-child(2) { animation-delay: .055s }
.ft__big:hover i:nth-child(3) { animation-delay: .11s }
.ft__big:hover i:nth-child(4) { animation-delay: .165s }
.ft__big:hover i:nth-child(5) { animation-delay: .22s }
.ft__big:hover i:nth-child(6) { animation-delay: .275s }
.ft__big:hover i:nth-child(7) { animation-delay: .33s }
.ft__big:hover i:nth-child(8) { animation-delay: .385s }
.ft__big:hover i:nth-child(9) { animation-delay: .44s }
.ft__big:hover i:nth-child(10) { animation-delay: .495s }
.ft__big:hover i:nth-child(11) { animation-delay: .55s }
.ft__big:hover i:nth-child(12) { animation-delay: .605s }
.ft__big:hover i:nth-child(13) { animation-delay: .66s }
.ft__big:hover i:nth-child(14) { animation-delay: .715s }
.ft__big:hover i:nth-child(15) { animation-delay: .77s }
.ft__big:hover i:nth-child(16) { animation-delay: .825s }

/* touch has no hover to leave: a tap would latch :hover and leave an infinite
   animation running until something else was tapped */
@media (hover:none) {
  .ft__big:hover i {
    animation: none
  }
}

.ft__b {
  border-top: 1px solid rgba(243, 242, 239, .15);
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--m);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(243, 242, 239, .6)
}

.ft__hrs {
  margin-inline: auto
}

.ft__b .ft__top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(243, 242, 239, .6)
}

.ft__b .ft__top:hover {
  color: var(--acc-b);
  border-bottom-color: transparent;
  transform: none
}

.ft__top i {
  font-style: normal;
  transition: transform .3s var(--e)
}

.ft__b .ft__top:hover i {
  transform: translateY(-3px)
}

.totop {
  position: fixed;
  right: clamp(16px, 2vw, 30px);
  bottom: clamp(16px, 2vw, 30px);
  z-index: 60;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--lg-b);
  color: var(--paper);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 16px 30px -16px rgba(11, 47, 97, .75);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .35s var(--e), transform .35s var(--e),
    visibility .35s var(--e), background .3s var(--e), color .3s var(--e)
}

.totop.on {
  opacity: 1;
  visibility: visible;
  transform: none
}

.totop:hover {
  background: var(--acc-b);
  color: var(--lg-b)
}

.totop:focus-visible {
  outline: 2px solid var(--acc-b);
  outline-offset: 3px
}

.mbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px clamp(12px, 3vw, 18px);
  background: rgba(11, 47, 97, .96);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(243, 242, 239, .16);
  transform: translateY(105%);
  transition: transform .4s var(--e)
}

.mbar.on {
  transform: none
}

.mbar a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 12px;
  border-radius: 100px;
  font-family: var(--m);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper);
  box-shadow: inset 0 0 0 1.5px rgba(243, 242, 239, .28)
}

.mbar a i {
  font-style: normal
}

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width:1180px) {
  .prods {
    grid-template-columns: repeat(2, 1fr)
  }

  .proc {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 34px
  }
}

@media (max-width:1080px) {

  .ab,
  .demo__g,
  .ct {
    grid-template-columns: 1fr
  }

  /* three fields across stop earning their width here — back to two columns,
     with the message taking the full row */
  .ct .form__g {
    grid-template-columns: 1fr 1fr
  }

  .ct .form__g>.fld {
    grid-column: auto
  }

  .ct .form__g>.fld--full,
  .ct .form__g>.fld--msg {
    grid-column: 1/-1
  }

  .ci__map {
    padding-top: 18px
  }

  .hero__row {
    grid-template-columns: 1fr 1fr
  }

  .hero__row>a.lk {
    grid-column: 1/-1;
    justify-self: start
  }

  .ab__v {
    order: -1
  }

  /* 2×2, and the brand no longer spans the row: with four columns a full-width
     brand left three cells in a two-column grid, so the last one sat alone with
     half a row of empty navy beside it */
  .ft__g {
    grid-template-columns: 1fr 1fr;
    row-gap: clamp(32px, 4vw, 46px)
  }

  /* cells 3 and 4 open the second row, so the rule between rows is a border-top
     on both — on cell 3 alone it stopped dead at the middle divider */
  .ft__g>*:nth-child(3),
  .ft__g>*:nth-child(4) {
    border-top: 1px solid rgba(243, 242, 239, .15);
    padding-top: clamp(32px, 4vw, 46px)
  }

  /* cell 3 is back at the left edge — a border-left there draws against nothing */
  .ft__g>*:nth-child(3) {
    border-left: 0;
    padding-left: 0;
    margin-left: 0
  }

  .hero__f {
    grid-template-columns: 1fr;
    gap: 26px
  }

  .sh {
    flex-direction: column;
    align-items: flex-start
  }

  .sh p {
    max-width: 56ch
  }
}

/* ── tablet / phone: burger becomes the only nav ── */
@media (max-width:1080px) {
  .menu__in {
    grid-template-columns: 1fr .8fr
  }
}

@media (max-width:820px) {

  /* ── one scrolling sheet on a phone, not two panes splitting the height ──
     1fr/auto handed the contact block whatever height it asked for and boxed
     the nav into the remainder, so five items scrolled past two at a time
     inside their own little pane. Both rows size to their content and the
     sheet scrolls as one, which puts the whole nav on screen at once. */
  .menu__in {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    overflow-y: auto;
    overscroll-behavior: contain
  }

  /* the panes are no longer scroll containers, and the slide-in from top and
     bottom would have added scroll extent to the sheet mid-animation — the
     staggered rows inside each pane still carry the entrance */
  .menu__l,
  .menu__r {
    height: auto;
    overflow: visible;
    transform: none;
    transition: none
  }

  .menu__l {
    padding: 78px 18px 24px
  }

  .menu__r {
    padding: 22px 18px calc(28px + env(safe-area-inset-bottom, 0px));
    box-shadow: inset 0 1px 0 var(--line)
  }

  .menu__x {
    position: fixed;
    top: 16px;
    right: 16px
  }

  .mc {
    grid-template-columns: 1fr 1fr;
    gap: 16px
  }

  .menu__r h3 {
    margin-bottom: 16px;
    padding-bottom: 12px;
    font-size: 16px
  }

  .mc dd {
    font-size: 14px
  }

  .menu__cta {
    margin-top: 16px;
    padding-top: 14px
  }

  .mn__h {
    font-size: clamp(21px, 6.4vw, 30px)
  }
}

@media (max-width:900px) {

  .nav,
  .lang {
    display: none
  }

  .hd {
    padding-inline: 16px
  }

  .hd .btn {
    padding: 11px 18px;
    font-size: 13.5px
  }

  /* the per-letter rounding overhead grows as the font shrinks, so the
     desktop size leaves the mark only a pixel of margin down here */
  .ft__big {
    font-size: clamp(30px, 12.2vw, 178px)
  }

  .thumbs {
    grid-template-columns: repeat(2, 1fr)
  }

  .sidx {
    display: none
  }

  .totop {
    display: none
  }

  .mbar {
    display: flex
  }

}

@media (max-width:900px) {
  .trust {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width:680px) {
  :root {
    --gut: 16px
  }

  /* ══ the menu's contact block on a phone ═══════════════════════════════
     It goes two-up at 820px, which is right for a tablet and wrong here: at
     a 380px panel each column is about 170px, so "+91 82918 41755" broke
     across two lines, every number after it did the same, and the address
     came apart into nine ragged fragments. One column gives each entry the
     full width, and nothing wraps that should not. */
  .mc {
    grid-template-columns: 1fr;
    gap: 18px
  }

  .mc dd {
    font-size: 15px
  }

  /* a phone number is one thing — it never breaks mid-number, and the three
     of them stay one per line rather than running together */
  .nums a {
    display: block;
    white-space: nowrap
  }

  /* ── the quote button leads the panel ──
     It was the last thing in the right-hand column, under the contact list
     and the social row, which on a phone puts the one action we want people
     to take below the fold. Flex the panel and pull it to the front: the
     button sits directly under the nav, full width and thumb-sized, with
     the contact details underneath for anyone who would rather call. */
  .menu__r {
    display: flex;
    flex-direction: column
  }

  .menu__cta {
    order: -1;
    margin: 0 0 22px;
    /* it leads the panel here, so the rule it inherited from the old social
       row would draw a line across the top of the column with nothing
       above it */
    padding-top: 0;
    border-top: 0
  }

  .menu__cta .btn {
    width: 100%;
    justify-content: center;
    min-height: 52px;
    font-size: 15px
  }

  .menu__l {
    padding-top: 72px
  }

  /* the left panel scrolls under the fixed close button, so the button
     needs something solid behind it — an unfilled ring with menu rows
     sliding through it reads as a rendering fault */
  .menu__x {
    background: var(--paper);
    box-shadow: inset 0 0 0 1.5px var(--line2), 0 4px 14px -6px rgba(15, 15, 18, .3)
  }

  .bband__in {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px
  }

  /* small enough to stay on one line at 320px, so the caption stops
     wrapping under itself and stops competing with the board */
  .bband__l {
    max-width: 100%;
    font-size: 9.5px;
    letter-spacing: .08em;
    line-height: 1.5
  }

  .flap {
    width: 100%;
    gap: 2px;
    min-height: 32px
  }

  /* the letters were sitting small in the middle of their tiles. Tile and
     glyph both go up, and the gap comes down by a pixel to pay for it —
     15 letters, a space and 15 gaps still land inside 320px. */
  .flap i {
    width: clamp(14px, 4.6vw, 19px);
    height: 32px;
    font-size: clamp(13px, 3.9vw, 16px);
    border-radius: 4px
  }

  .flap i.sp {
    width: clamp(5px, 1.5vw, 8px)
  }

  .trust {
    grid-template-columns: 1fr
  }

  .trust div {
    padding: 20px 16px
  }

  table.cmp th,
  table.cmp td {
    padding: 13px 15px;
    font-size: 11.5px
  }

  .ct__hd {
    flex-direction: column;
    align-items: flex-start
  }

  .form__g,
  .ct .form__g {
    grid-template-columns: 1fr
  }

  /* one column: a span of any width would conjure implicit columns */
  .ct .form__g>.fld,
  .ct .form__g>.fld--full,
  .ct .form__g>.fld--msg {
    grid-column: auto
  }

  .form {
    padding: 20px 16px
  }

  .ct>.form {
    padding: 22px 16px
  }

  .open {
    font-size: 9.5px;
    padding: 9px 15px
  }

  .form__hd {
    padding-bottom: 16px;
    margin-bottom: 18px
  }

  .pr__spec {
    padding: 12px 11px 11px;
    gap: 6px
  }

  .pr__spec b {
    font-size: 11px
  }

  .rule b {
    font-size: 8.5px
  }

  .lbl i {
    margin-right: 8px
  }

  body {
    font-size: 15.5px
  }

  .prods,
  .proc,
  .cnt2,
  .ft__g,
  .thumbs {
    grid-template-columns: 1fr
  }

  /* stacked, the column rule has to lie down with the columns — left as a
     border-left it would draw a stray vertical line down the whole footer */
  .ft__g>*+* {
    border-left: 0;
    border-top: 1px solid rgba(243, 242, 239, .15);
    padding: 30px 0 0;
    margin: 30px 0 0
  }

  .ft__inv {
    align-items: flex-start
  }

  .ft__hrs {
    margin-inline: 0
  }

  /* sixteen inline-blocks each round their own width up, and at phone sizes
     that rounding adds about 3% — enough to push the mark past the gutter and
     into .ft's overflow:hidden. The small end gets its own roomier size rather
     than the knife-edge fit that works fine at desktop scale. */
  .ft__big {
    font-size: clamp(30px, 12vw, 84px)
  }

  .read {
    grid-template-columns: 1fr
  }

  .scr__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px
  }

  .oc {
    width: 100%;
    padding: 20px 16px 40px
  }

  .hero {
    padding-top: 104px
  }

  .hero h1 {
    font-size: clamp(34px, 10.6vw, 54px);
    line-height: 45px
  }

  /* ── phone: the hero centres ──
     .hero__f has already collapsed to one column by here, so the headline,
     the paragraph and the buttons are a single stack in a narrow measure.
     Left-aligned that stack reads as three ragged right edges against a
     full-bleed photograph; centred it reads as one block. */
  .hero__in {
    text-align: center
  }

  .hero__lede {
    margin-inline: auto
  }

  /* equal halves that fall to full width when they no longer fit side by
     side, rather than two differently-sized pills wrapping raggedly */
  .hero__cta {
    justify-content: center;
    width: 100%
  }

  .hero__cta .btn {
    flex: 1 1 210px;
    justify-content: center
  }

  .hero__q {
    max-width: none
  }

  .hero__row {
    grid-template-columns: 1fr
  }

  .hero h1 .cap {
    display: none
  }

  .awr {
    grid-template-columns: 58px 1fr;
    row-gap: 6px;
    padding: 18px 0
  }

  .awr__s {
    grid-column: 2;
    justify-self: start
  }

  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 6px;
    margin-inline: -2px;
    scroll-snap-type: x proximity
  }

  .chips::-webkit-scrollbar {
    display: none
  }

  .chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: 42px
  }

  .seg button {
    min-height: 42px;
    padding: 10px 20px
  }

  .rv {
    width: min(300px, 82vw);
    padding: 22px 20px
  }

  .rv p {
    font-size: 15.5px
  }

  .lap__keys {
    inset: 18% 11% 50%
  }

  .drv__chip {
    left: 24px;
    top: 24px;
    padding: 7px 12px
  }

  .drv__chip b {
    font-size: 15px
  }

  .ft__s a {
    width: 44px;
    height: 44px
  }

  /* thumb-friendly */
  .btn {
    min-height: 46px
  }

  .mq {
    padding: 14px 0
  }

  .s {
    padding: clamp(46px, 11vw, 72px) 0
  }
}

@media (max-width:400px) {
  .mbar a {
    font-size: 13px;
    gap: 5px
  }

  .mbar a i {
    display: none
  }

  .scr__brand {
    font-size: clamp(17px, 6.4vw, 26px)
  }

  .hd .btn span,
  .hd .btn i {
    display: none
  }

  .hd .btn {
    padding: 11px 14px
  }
}

/* landscape phones: the sticky deck would eat the screen */
@media (max-height:520px) and (orientation:landscape) {
  .mbar {
    display: none
  }

  body {
    padding-bottom: 0
  }
}

/* fine-pointer only: hide touch affordances */
@media (hover:hover) and (pointer:fine) {
  .mbar {
    display: none !important
  }

  body {
    padding-bottom: 0 !important
  }
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important
  }

  .clip {
    clip-path: none
  }

  .w i {
    transform: none
  }
}

/* ══════════ ELEVATION PASS ══════════
   Section numbers and ruler ticks are gone; the eyebrow now carries a gold
   dot and a hairline instead. Cards get a lit plate, a gold saving chip and
   a quieter price row so the product is the loudest thing on them. */
.lbl {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--m);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #000
}

.lbl::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acc-b);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(228, 169, 69, .18)
}

.lbl::after {
  content: "";
  width: clamp(24px, 3vw, 54px);
  height: 1px;
  background: var(--line2)
}

.ai .lbl::after {
  background: rgba(255, 255, 255, .28)
}

/* `align-items: end` used to live here unconditionally. On the desktop row
   it only restated the flex-end already set above, but because it sits
   after the 1080px query it also beat that query's `flex-start` — so once
   the header stacked into a column, cross-axis end pushed the label and
   heading to the right edge while the wider paragraph stayed put. Scoped
   to the row layout, the stacked header reads left again. */
@media (min-width:1081px) {
  .sh {
    align-items: flex-end
  }
}

.sh h2,
.s h2.d {
  letter-spacing: -.045em
}

/* ── product cards ── */
.pg {
  gap: clamp(14px, 1.7vw, 26px)
}

.pg__i {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 15, 18, .04);
  border: 1px solid var(--line);
  transition: box-shadow .45s var(--e), transform .45s var(--e), border-color .45s var(--e)
}

.pg__i:hover {
  box-shadow: 0 30px 56px -34px rgba(11, 47, 97, .42);
  transform: translateY(-5px);
  border-color: rgba(21, 70, 139, .28)
}

.pg__v {
  background:
    radial-gradient(78% 62% at 50% 34%, #FFFFFF 0%, #F6F5F2 62%, #EDEBE6 100%)
}

.pg__v::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 11%;
  height: 11px;
  border-radius: 50%;
  background: rgba(11, 47, 97, .13);
  filter: blur(9px);
  transition: transform .6s var(--e), opacity .6s var(--e)
}

.pg__i:hover .pg__v::after {
  transform: translateY(3px) scaleX(1.06);
  opacity: .85
}

.pg__v img,
.pg__v .art {
  position: relative;
  z-index: 1
}

/* ── real photographs on the product plate ──
   The vector stand-ins are drawn inside a 400x400 box with the product only
   spanning the middle ~47%, so they sit well inside the plate. A photograph
   arrives cropped tight and would otherwise fill the tile edge to edge,
   reading much heavier than the drawings beside it and hiding both the plate
   gradient and the shadow under it. Inset it to sit at the same scale, and
   multiply the white studio backdrop away so no white square shows against
   the off-white plate. Photos want a white or transparent background — the
   same rule the PRODUCT_PHOTOS note at the foot of the file asks for. */
.pg__v img[src$=".jpg"],
.pg__v img[src$=".jpeg"],
.pg__v img[src$=".png"],
.pg__v img[src$=".webp"] {
  padding: 14%;
  mix-blend-mode: multiply
}

/* ── the exception: a photograph taken in a room, not on a white sweep ──
   Multiply only disappears a backdrop that is already white. Give it a desk
   and a wall and it smears both across the plate and drags the whole tile
   grey. Those pictures opt out here and fill the square instead, which reads
   as a photograph on purpose rather than a cut-out that failed. */
.pg__v img.ph--full {
  padding: 0;
  mix-blend-mode: normal;
  object-fit: cover
}

.art--ph {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
  transition: transform .7s var(--e)
}

.pg__i:hover .art--ph {
  transform: scale(1.06)
}

.pg__off {
  background: var(--acc-b);
  color: #241B03;
  font-weight: 600;
  letter-spacing: .1em;
  padding: 6px 11px;
  border-radius: 100px;
  box-shadow: 0 6px 14px -8px rgba(228, 169, 69, .9)
}

.pg__act span {
  border: 1px solid var(--line);
  box-shadow: 0 6px 16px -10px rgba(15, 15, 18, .5)
}

.pg__b {
  padding: 16px 16px 18px
}

.pg__cat {
  color: var(--acc);
  letter-spacing: .18em
}

.pg__b h3 {
  font-size: 15px;
  line-height: 1.46;
  margin-top: 9px
}

.pg__pr {
  padding-top: 14px;
  margin-top: auto;
  border-top: 1px solid var(--line);
  align-items: baseline
}

.pg__pr b {
  font-family: var(--d);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.03em;
  color: var(--ink)
}

.pg__pr s {
  font-size: 12.5px
}

.pg__tabs button {
  padding: 11px 18px
}

.pg__tabs button.on {
  box-shadow: 0 12px 24px -16px rgba(21, 70, 139, .9)
}

/* ── section index, without the § ── */
.sidx {
  letter-spacing: .2em
}