/* ============================================================
   ChangeFluent site styles
   Palette: INK #0E3A4A  BLUE #007398  RED #CD545B
   Display: Archivo   Body: Public Sans   Utility: IBM Plex Mono
   ============================================================ */

:root{
  --ink:#0E3A4A;
  --abyss:#06212C;
  --deep:#0A2E3C;
  --blue:#007398;
  --blue-lift:#1795BC;
  --red:#CD545B;
  --red-lift:#DE6F75;
  --paper:#F2F4F3;
  --mist:#CFDCE0;
  --slate:#5B7480;

  --display:"Archivo", ui-sans-serif, system-ui, sans-serif;
  --body:"Public Sans", ui-sans-serif, system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;

  --shell:min(1240px, 92vw);
  --gutter:clamp(20px, 4vw, 48px);
  --band:clamp(72px, 9vw, 132px);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(16px,1.02vw,17px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display); font-weight:600; line-height:1.06; letter-spacing:-.022em; margin:0}
p{margin:0}
::selection{background:var(--blue); color:#fff}

.shell{width:var(--shell); margin-inline:auto}
.band{padding-block:var(--band)}
.band.tight{padding-block:clamp(52px,6vw,88px)}
.band.no-top{padding-top:0}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--mono); font-size:.66rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--blue);
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{content:""; width:26px; height:1px; background:currentColor; opacity:.6}
.eyebrow.on-dark{color:var(--mist)}
.eyebrow.warm{color:var(--red)}
.eyebrow.centred{justify-content:center}

.h-lg{font-size:clamp(2rem,3.7vw,3.15rem)}
.h-md{font-size:clamp(1.4rem,2.2vw,1.85rem)}
.lede{font-size:clamp(1.03rem,1.28vw,1.2rem); line-height:1.6; color:color-mix(in srgb, var(--ink) 80%, transparent)}
.lede.on-dark,.on-dark .lede{color:rgba(238,246,248,.9)}
.small{font-size:.93rem; color:color-mix(in srgb,var(--ink) 72%, transparent)}
.small.on-dark{color:rgba(238,246,248,.76)}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--blue); --fg:#fff;
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  padding:.92rem 1.5rem; border-radius:100px; border:1px solid transparent;
  background:var(--bg); color:var(--fg);
  font-family:var(--body); font-weight:600; font-size:.94rem; letter-spacing:-.01em;
  text-decoration:none; cursor:pointer; overflow:hidden; isolation:isolate;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset, 0 10px 24px -14px rgba(0,44,60,.85);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(100deg,var(--blue-lift),var(--blue));
  opacity:0; transition:opacity .4s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:hover::after{opacity:1}
.btn .arw{transition:transform .4s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn.ghost{--bg:transparent; --fg:var(--ink); border-color:color-mix(in srgb,var(--ink) 22%, transparent); box-shadow:none}
.btn.ghost::after{background:var(--ink)}
.btn.ghost:hover{color:#fff; border-color:var(--ink)}
.btn.ghost-light{--bg:transparent; --fg:#fff; border-color:rgba(207,220,224,.34); box-shadow:none}
.btn.ghost-light::after{background:rgba(255,255,255,.12)}
.btn.warm{--bg:var(--red)}
.btn.warm::after{background:linear-gradient(100deg,var(--red-lift),var(--red))}
:focus-visible{outline:2px solid var(--blue-lift); outline-offset:3px; border-radius:4px}

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80; padding-block:1rem;
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease), backdrop-filter .45s var(--ease), padding .45s var(--ease), border-color .45s var(--ease);
}
.nav.stuck{
  background:rgba(6,33,44,.86); backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:rgba(207,220,224,.14); padding-block:.66rem;
}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:2rem}
.mark{display:flex; align-items:center; gap:.66rem; text-decoration:none}
.mark img.glyph{width:28px; height:auto; flex:none}
.mark img.word{width:132px; height:auto}
.nav-links{display:flex; align-items:center; gap:1.7rem; list-style:none; margin:0; padding:0}
.nav-links a{
  position:relative; text-decoration:none; color:rgba(238,246,248,.86);
  font-size:.9rem; font-weight:500; padding-block:.3rem;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--blue-lift); transform:scaleX(0); transform-origin:right; transition:transform .38s var(--ease);
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:#fff}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1); transform-origin:left}
.nav .btn{padding:.66rem 1.15rem; font-size:.88rem}
.nav-toggle{display:none}

/* ---------- hero, shared ---------- */
.hero{position:relative; background:var(--abyss); color:#fff; overflow:hidden}
.hero::before{
  content:""; position:absolute; width:min(1100px,120vw); aspect-ratio:1; left:52%; top:-32%;
  background:radial-gradient(circle at center, rgba(0,115,152,.42), rgba(0,115,152,0) 62%);
  animation:drift 26s ease-in-out infinite alternate; pointer-events:none;
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.45;
  background-image:linear-gradient(rgba(207,220,224,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(207,220,224,.05) 1px, transparent 1px);
  background-size:68px 68px;
  mask-image:radial-gradient(ellipse 90% 70% at 30% 40%, #000 20%, transparent 78%);
}
.hero.warm::before{background:radial-gradient(circle at center, rgba(205,84,91,.34), rgba(205,84,91,0) 62%)}
@keyframes drift{from{transform:translate(-6%,0) scale(1)} to{transform:translate(6%,5%) scale(1.12)}}

.hero-home{padding-top:clamp(120px,14vw,168px); padding-bottom:clamp(56px,6vw,88px)}
.hero-grid{position:relative; z-index:2; display:grid; gap:clamp(2.4rem,4vw,4rem);
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); align-items:center}
.hero-copy>*+*{margin-top:1.5rem}
.hero-home h1{font-size:clamp(2.5rem,5.2vw,4.3rem); letter-spacing:-.04em; line-height:1.0; font-weight:600}
.hero-home h1 .ln{display:block; overflow:hidden}
.hero-home h1 .ln span{display:block; transform:translateY(105%); animation:riseIn .95s var(--ease) forwards}
.hero-home h1 .ln:nth-child(1) span{animation-delay:.12s}
.hero-home h1 .ln:nth-child(2) span{animation-delay:.22s}
.hero-home h1 .ln:nth-child(3) span{animation-delay:.32s}
.hero h1 em{font-style:normal; color:var(--blue-lift)}
.hero.warm h1 em{color:var(--red-lift)}
@keyframes riseIn{to{transform:translateY(0)}}

.fade-up{opacity:0; transform:translateY(16px); animation:fadeUp .9s var(--ease) forwards}
.d1{animation-delay:.4s} .d2{animation-delay:.52s} .d3{animation-delay:.64s} .d4{animation-delay:.76s}
@keyframes fadeUp{to{opacity:1; transform:none}}

.hero-cta{display:flex; flex-wrap:wrap; gap:.75rem}
.hero-note{font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:rgba(207,220,224,.66);
  display:flex; align-items:center; gap:.55rem}
.pulse{width:7px; height:7px; border-radius:50%; background:var(--blue-lift); position:relative; flex:none}
.pulse::after{content:""; position:absolute; inset:0; border-radius:50%; background:inherit; animation:ping 2.4s ease-out infinite}
@keyframes ping{from{transform:scale(1); opacity:.7} to{transform:scale(3.4); opacity:0}}

/* inner page hero */
.hero-page{padding-top:clamp(118px,13vw,158px); padding-bottom:clamp(48px,6vw,80px)}
.hero-page .hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.hero-page h1{font-size:clamp(2.15rem,4.2vw,3.5rem); letter-spacing:-.035em}
.crumb{font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(207,220,224,.6); display:flex; gap:.6rem; align-items:center}
.crumb a{text-decoration:none; transition:color .3s var(--ease)}
.crumb a:hover{color:#fff}

/* brand diamond motif, derived from the icon */
.motif{position:relative; z-index:2; display:grid; place-items:center; min-height:clamp(220px,26vw,320px)}
.motif svg{width:min(100%,340px); height:auto; overflow:visible}
.motif .dia{fill:none; stroke-width:10; transform-origin:150px 150px}
.motif .d-out{stroke:var(--blue); animation:breathe 7s ease-in-out infinite}
.motif .d-mid{stroke:var(--red); animation:breathe 7s ease-in-out infinite .5s}
.motif .d-core{fill:var(--red); stroke:none; animation:breathe 7s ease-in-out infinite 1s}
.motif .arc{fill:none; stroke:var(--red); stroke-width:6; opacity:.85; transform-origin:150px 150px;
  animation:spin 34s linear infinite}
@keyframes breathe{0%,100%{transform:scale(1); opacity:.92} 50%{transform:scale(1.055); opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- hero canvas viz ---------- */
.viz{
  position:relative; border:1px solid rgba(207,220,224,.16); border-radius:var(--r);
  background:linear-gradient(165deg, rgba(14,58,74,.72), rgba(6,33,44,.5));
  padding:1.1rem 1.1rem 1.25rem;
  opacity:0; transform:translateY(20px); animation:fadeUp 1.1s var(--ease) .5s forwards;
}
.viz-head{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.35rem}
.viz-label{font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(207,220,224,.5)}
.viz canvas{width:100%; height:auto; display:block; border-radius:8px}
.viz-cap{display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin-top:.55rem; padding-top:.7rem; border-top:1px solid rgba(207,220,224,.12)}
.viz-cap strong{font-family:var(--display); font-weight:600; font-size:1rem; letter-spacing:-.02em; color:#fff;
  transition:opacity .4s var(--ease)}
.viz-cap small{font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; color:var(--blue-lift); white-space:nowrap;
  transition:opacity .4s var(--ease)}
.viz-dots{display:flex; gap:5px; margin-top:.75rem}
.viz-dots i{height:2px; flex:1; background:rgba(207,220,224,.18); border-radius:2px; overflow:hidden; position:relative}
.viz-dots i b{position:absolute; inset:0; background:var(--blue-lift); transform-origin:left; transform:scaleX(0)}

/* ---------- sector ticker ---------- */
.creds{background:var(--ink); color:rgba(238,246,248,.78); border-block:1px solid rgba(207,220,224,.1); overflow:hidden}
.creds-track{display:flex; width:max-content; animation:slide 40s linear infinite}
.creds:hover .creds-track{animation-play-state:paused}
.creds-set{display:flex; align-items:center; gap:2.8rem; padding:.95rem 1.4rem}
.creds-set span{font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  white-space:nowrap; display:flex; align-items:center; gap:.8rem}
.creds-set span::after{content:""; width:4px; height:4px; border-radius:50%; background:var(--blue); opacity:.9}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- section head ---------- */
.sec-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:1.5rem; margin-bottom:clamp(2rem,3.4vw,3rem)}
.sec-head p{max-width:48ch}
.sec-head h2{margin-top:1.1rem}
.on-dark-sec h2,.on-dark-sec h3{color:#fff}
.on-dark-sec .sec-head p{color:rgba(238,246,248,.82)}

/* ---------- rule list ---------- */
.rule-list{list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:0}
.rule-list li{display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:baseline;
  padding:1rem 0; border-top:1px solid color-mix(in srgb,var(--ink) 12%, transparent)}
.rule-list li:last-child{border-bottom:1px solid color-mix(in srgb,var(--ink) 12%, transparent)}
.rule-list b{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; color:var(--blue); font-weight:500; padding-top:.28rem}
.rule-list p{font-size:.97rem; color:color-mix(in srgb,var(--ink) 78%, transparent)}
.rule-list strong{color:var(--ink); font-weight:600}
.rule-list.warm b{color:var(--red)}

/* ---------- cards ---------- */
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.2vw,18px)}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{
  position:relative; background:#fff; border:1px solid color-mix(in srgb,var(--ink) 10%, transparent);
  border-radius:var(--r); padding:1.6rem 1.5rem 1.5rem; overflow:hidden; isolation:isolate;
  text-decoration:none; color:inherit; display:flex; flex-direction:column; min-height:224px;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.card::before{content:""; position:absolute; left:0; top:0; height:2px; width:100%;
  background:linear-gradient(90deg,var(--blue),var(--blue-lift));
  transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease)}
.card::after{content:""; position:absolute; inset:auto -40% -60% auto; width:70%; aspect-ratio:1; z-index:-1;
  background:radial-gradient(circle, rgba(0,115,152,.14), transparent 68%);
  opacity:0; transform:translate(20%,20%); transition:opacity .55s var(--ease), transform .7s var(--ease)}
.card:hover{transform:translateY(-5px); box-shadow:0 26px 44px -30px rgba(6,33,44,.5); border-color:color-mix(in srgb,var(--blue) 34%, transparent)}
.card:hover::before{transform:scaleX(1)}
.card:hover::after{opacity:1; transform:translate(0,0)}
.card.warm::before{background:linear-gradient(90deg,var(--red),var(--red-lift))}
.card.warm::after{background:radial-gradient(circle, rgba(205,84,91,.14), transparent 68%)}
.card.warm:hover{border-color:color-mix(in srgb,var(--red) 38%, transparent)}
.card.warm .card-ico{background:color-mix(in srgb,var(--red) 10%, transparent); color:var(--red)}
.card.warm:hover .card-ico{background:var(--red); color:#fff}
.card.warm .card-link{color:var(--red)}
.card-ico{width:42px; height:42px; border-radius:11px; display:grid; place-items:center; margin-bottom:1.05rem;
  background:color-mix(in srgb,var(--blue) 10%, transparent); color:var(--blue);
  transition:background .5s var(--ease), color .5s var(--ease), transform .6s var(--ease)}
.card:hover .card-ico{background:var(--blue); color:#fff; transform:rotate(-6deg) scale(1.06)}
.card-ico svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.card h3{font-size:1.12rem; margin-bottom:.5rem}
.card p{font-size:.93rem; color:color-mix(in srgb,var(--ink) 74%, transparent)}
.card-link{margin-top:auto; padding-top:1.1rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue); display:flex; align-items:center; gap:.5rem;
  opacity:.55; transition:opacity .5s var(--ease), gap .5s var(--ease)}
.card:hover .card-link{opacity:1; gap:.85rem}
.card.static{cursor:default}
.card.static:hover{transform:none; box-shadow:none}

/* ---------- tracks ---------- */
.tracks{background:var(--abyss); color:#fff; position:relative; overflow:hidden}
.track-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.4vw,20px)}
.track-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.track{position:relative; border-radius:var(--r); padding:clamp(1.7rem,2.4vw,2.5rem); overflow:hidden;
  border:1px solid rgba(207,220,224,.16); display:flex; flex-direction:column;
  transition:transform .55s var(--ease), border-color .55s var(--ease)}
.track::before{content:""; position:absolute; inset:0; z-index:0; opacity:.9;
  background:linear-gradient(160deg, rgba(14,58,74,.9), rgba(6,33,44,.6))}
.track::after{content:""; position:absolute; width:340px; aspect-ratio:1; right:-120px; top:-120px; z-index:0; opacity:.65;
  background:radial-gradient(circle, rgba(0,115,152,.4), transparent 65%);
  transition:transform .8s var(--ease), opacity .6s var(--ease)}
.track>*{position:relative; z-index:1}
.track:hover{transform:translateY(-4px); border-color:rgba(0,115,152,.6)}
.track:hover::after{transform:translate(-30px,30px) scale(1.15); opacity:1}
.track.warm{border-color:rgba(205,84,91,.34)}
.track.warm::before{background:linear-gradient(160deg, rgba(58,29,34,.72), rgba(6,33,44,.72))}
.track.warm::after{background:radial-gradient(circle, rgba(205,84,91,.38), transparent 65%)}
.track.warm:hover{border-color:rgba(205,84,91,.7)}
.track h3{font-size:clamp(1.45rem,2.1vw,1.9rem); color:#fff; margin:.9rem 0 .7rem}
.track .track-lede{color:rgba(238,246,248,.86); font-size:1rem}
.track ul{list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:0}
.track li{display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:start;
  padding:.82rem 0; border-top:1px solid rgba(207,220,224,.13); font-size:.94rem; color:rgba(238,246,248,.9)}
.tick{width:16px; height:16px; margin-top:.28rem; flex:none; stroke:var(--blue-lift); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.track.warm .tick{stroke:var(--red-lift)}
.track .btn{margin-top:1.8rem; align-self:flex-start}
.track-tag{font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.35rem .7rem; border-radius:100px; border:1px solid rgba(207,220,224,.28);
  color:rgba(238,246,248,.86); display:inline-block}
.track.warm .track-tag{border-color:rgba(205,84,91,.45); color:#F0B9BC}

/* ---------- sector rows ---------- */
.sector-row{display:grid; gap:0; margin-top:clamp(1.6rem,3vw,2.4rem)}
.sector{position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) minmax(0,1.35fr) auto;
  gap:clamp(1rem,3vw,2.5rem); align-items:center; padding:clamp(1.4rem,2.3vw,2rem) .25rem;
  border-top:1px solid color-mix(in srgb,var(--ink) 14%, transparent);
  text-decoration:none; color:inherit; transition:padding-left .5s var(--ease)}
.sector:last-child{border-bottom:1px solid color-mix(in srgb,var(--ink) 14%, transparent)}
.sector::before{content:""; position:absolute; left:0; top:-1px; height:1px; width:100%;
  background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease)}
.sector:hover{padding-left:1rem}
.sector:hover::before{transform:scaleX(1)}
.sector-no{font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; color:var(--slate)}
.sector h3{font-size:clamp(1.22rem,2vw,1.55rem)}
.sector p{font-size:.94rem; color:color-mix(in srgb,var(--ink) 72%, transparent)}
.sector-go{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; flex:none;
  border:1px solid color-mix(in srgb,var(--ink) 18%, transparent); color:var(--blue);
  transition:background .45s var(--ease), color .45s var(--ease), transform .45s var(--ease), border-color .45s var(--ease)}
.sector:hover .sector-go{background:var(--blue); border-color:var(--blue); color:#fff; transform:rotate(-45deg)}
.sector.smb .sector-no,.sector.smb .sector-go{color:var(--red)}
.sector.smb:hover .sector-go{background:var(--red); border-color:var(--red); color:#fff}
.sector.smb::before{background:var(--red)}
.sector.plain{grid-template-columns:auto minmax(0,1fr) minmax(0,1.35fr)}
.sector.plain:hover{padding-left:.25rem}
.sector.plain:hover::before{transform:scaleX(0)}

/* ---------- process steps ---------- */
.process{background:var(--ink); color:#fff; position:relative; overflow:hidden}
.steps{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.6vw,26px); margin-top:clamp(2rem,3vw,3rem)}
.steps.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps::before{content:""; position:absolute; left:0; top:23px; height:1px; width:100%; background:rgba(207,220,224,.18)}
.steps-fill{position:absolute; left:0; top:23px; height:1px; width:100%; transform-origin:left; transform:scaleX(0);
  background:linear-gradient(90deg,var(--blue-lift),var(--red)); transition:transform 1.6s var(--ease) .2s}
.steps.in .steps-fill{transform:scaleX(1)}
.step-node{width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:var(--ink); border:1px solid rgba(207,220,224,.3); color:#fff;
  font-family:var(--mono); font-size:.76rem; position:relative; z-index:2;
  transition:background .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease)}
.step:hover .step-node{background:var(--blue); border-color:var(--blue); transform:scale(1.08)}
.step h3{font-size:1.06rem; margin:1.3rem 0 .5rem; color:#fff}
.step p{font-size:.92rem; color:rgba(238,246,248,.76)}

/* ---------- panels and facts ---------- */
.panel-wrap{position:relative; border-radius:var(--r); overflow:hidden; color:#fff;
  background:linear-gradient(145deg,var(--deep),var(--abyss)); border:1px solid rgba(207,220,224,.14);
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2rem,4vw,3.6rem);
  padding:clamp(2rem,4vw,3.6rem)}
.panel-wrap::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(207,220,224,.16) 1px, transparent 1px); background-size:22px 22px;
  mask-image:linear-gradient(120deg, transparent 40%, #000 100%)}
.panel-wrap>*{position:relative; z-index:1}
.panel-wrap h2{color:#fff; font-size:clamp(1.75rem,3vw,2.5rem); margin:.9rem 0 1.1rem}
.facts{display:grid; gap:.9rem; align-content:center}
.fact{border:1px solid rgba(207,220,224,.16); border-radius:11px; padding:1.05rem 1.2rem; background:rgba(255,255,255,.03);
  transition:transform .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease)}
.fact:hover{transform:translateX(6px); background:rgba(0,115,152,.14); border-color:rgba(0,115,152,.5)}
.fact b{display:block; font-family:var(--display); font-size:1rem; font-weight:600; margin-bottom:.2rem}
.fact span{font-size:.9rem; color:rgba(238,246,248,.78)}

/* ---------- accordion ---------- */
.faq{display:grid; gap:0; margin-top:clamp(1.5rem,2.6vw,2.2rem)}
.faq details{border-top:1px solid color-mix(in srgb,var(--ink) 14%, transparent)}
.faq details:last-of-type{border-bottom:1px solid color-mix(in srgb,var(--ink) 14%, transparent)}
.faq summary{list-style:none; cursor:pointer; padding:1.15rem 3rem 1.15rem 0; position:relative;
  font-family:var(--display); font-weight:600; font-size:1.04rem; letter-spacing:-.015em;
  transition:color .3s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blue)}
.faq summary::after{content:""; position:absolute; right:.4rem; top:1.5rem; width:12px; height:12px;
  border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);
  transform:rotate(45deg); transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .ans{overflow:hidden; padding:0 4rem 1.3rem 0; font-size:.97rem;
  color:color-mix(in srgb,var(--ink) 78%, transparent); animation:openDown .45s var(--ease)}
@keyframes openDown{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}

/* ---------- pull quote ---------- */
.pull{border-left:2px solid var(--blue); padding:.4rem 0 .4rem 1.6rem; margin:2rem 0}
.pull p{font-family:var(--display); font-weight:500; font-size:clamp(1.2rem,2vw,1.55rem); letter-spacing:-.02em; line-height:1.3}
.pull cite{display:block; margin-top:.8rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; font-style:normal; color:var(--slate)}
.pull.warm{border-color:var(--red)}

/* ---------- split content ---------- */
.split{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,5rem); align-items:start}
.split.even{grid-template-columns:repeat(2,minmax(0,1fr))}
.split>div>*+*{margin-top:1.15rem}

/* ---------- contact form ---------- */
.form{display:grid; gap:1rem}
.field{display:grid; gap:.42rem}
.field label{font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--slate)}
.field input,.field select,.field textarea{
  font-family:var(--body); font-size:1rem; color:var(--ink); background:#fff;
  border:1px solid color-mix(in srgb,var(--ink) 16%, transparent); border-radius:10px; padding:.85rem 1rem;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease)}
.field textarea{min-height:150px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,115,152,.14)}
.field-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem}
.form-note{font-size:.85rem; color:var(--slate)}

/* ---------- contact detail list ---------- */
.contact-list{list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:1rem}
.contact-list li{display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start;
  border:1px solid color-mix(in srgb,var(--ink) 12%, transparent); border-radius:11px; padding:1.05rem 1.2rem; background:#fff;
  transition:border-color .4s var(--ease), transform .4s var(--ease)}
.contact-list li:hover{border-color:color-mix(in srgb,var(--blue) 40%, transparent); transform:translateX(5px)}
.contact-list svg{width:20px; height:20px; margin-top:.2rem; fill:none; stroke:var(--blue); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.contact-list b{display:block; font-family:var(--display); font-size:.98rem}
.contact-list span{font-size:.92rem; color:color-mix(in srgb,var(--ink) 72%, transparent)}
.contact-list a{text-decoration:none; color:var(--blue)}

/* ---------- closing cta ---------- */
.close-in{text-align:center; max-width:62ch; margin-inline:auto; display:grid; gap:1.4rem; justify-items:center}
.close-in h2{font-size:clamp(2rem,4.2vw,3.3rem); letter-spacing:-.035em}
.close-in .btn-row{display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center}

/* ---------- footer ---------- */
.foot{background:var(--abyss); color:rgba(238,246,248,.72); padding-block:clamp(3rem,5vw,4.5rem) 2rem}
.foot-grid{display:grid; grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)); gap:2.5rem}
.foot h4{font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(207,220,224,.5); font-weight:500; margin-bottom:1rem}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.foot a{text-decoration:none; font-size:.92rem; transition:color .3s var(--ease)}
.foot a:hover{color:#fff}
.foot-bottom{margin-top:clamp(2.5rem,4vw,3.5rem); padding-top:1.5rem; border-top:1px solid rgba(207,220,224,.12);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; color:rgba(207,220,224,.5)}
.foot-bottom a{font-size:.7rem}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:calc(var(--i,0)*90ms)}
.rv.in{opacity:1; transform:none}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .hero-grid,.split,.panel-wrap{grid-template-columns:1fr}
  .hero-page .hero-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps,.steps.three{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:2.4rem}
  .steps::before,.steps-fill{display:none}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .motif{min-height:200px}
}
@media (max-width:820px){
  .nav-links,.nav .btn{display:none}
  .nav.open .nav-links{display:flex; position:absolute; inset:100% 0 auto 0; flex-direction:column; align-items:flex-start;
    gap:.2rem; background:rgba(6,33,44,.97); backdrop-filter:blur(14px); padding:1rem var(--gutter) 1.6rem;
    border-bottom:1px solid rgba(207,220,224,.14)}
  .nav.open .nav-links a{padding-block:.7rem; font-size:1rem; width:100%}
  .nav-toggle{display:grid; place-items:center; width:40px; height:40px; border-radius:10px;
    background:rgba(255,255,255,.06); border:1px solid rgba(207,220,224,.2); color:#fff; cursor:pointer}
  .nav-toggle svg{width:18px; height:18px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round}
  .track-grid,.track-grid.three,.cards.two{grid-template-columns:1fr}
  .sector{grid-template-columns:auto minmax(0,1fr); row-gap:.4rem}
  .sector p{grid-column:2}
  .sector-go{display:none}
  .mark img.word{width:118px}
}
@media (max-width:600px){
  .cards{grid-template-columns:1fr}
  .steps,.steps.three,.field-row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero-home h1{font-size:clamp(2.1rem,8.6vw,2.9rem)}
  .faq .ans{padding-right:1rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
  .hero-home h1 .ln span,.fade-up,.viz{opacity:1 !important; transform:none !important}
  .rv{opacity:1; transform:none}
  .steps-fill{transform:scaleX(1)}
}

/* ============================================================
   WordPress integration
   ============================================================ */

.cf-skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--blue); color:#fff; padding:.7rem 1.1rem;
  font-family:var(--body); font-weight:600; font-size:.9rem; text-decoration:none;
  border-radius:0 0 8px 0;
}
.cf-skip:focus{left:0}

/* the admin bar sits above the fixed nav */
body.admin-bar .nav{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .nav{top:46px}
}

/* editor content inside the standard page template */
.cf-prose{max-width:74ch}
.cf-prose > * + *{margin-top:1.15rem}
.cf-prose h2{font-size:clamp(1.6rem,2.6vw,2.2rem); margin-top:2.6rem}
.cf-prose h3{font-size:clamp(1.2rem,1.9vw,1.5rem); margin-top:2rem}
.cf-prose h4{font-size:1.08rem; margin-top:1.6rem}
.cf-prose p,.cf-prose li{color:color-mix(in srgb,var(--ink) 82%, transparent)}
.cf-prose a{color:var(--blue); text-decoration:underline; text-underline-offset:3px}
.cf-prose a:hover{color:var(--ink)}
.cf-prose ul,.cf-prose ol{padding-left:1.3rem; display:grid; gap:.5rem}
.cf-prose blockquote{
  border-left:2px solid var(--blue); padding:.4rem 0 .4rem 1.6rem; margin:2rem 0;
  font-family:var(--display); font-weight:500; font-size:clamp(1.15rem,1.9vw,1.45rem);
  letter-spacing:-.02em; line-height:1.35;
}
.cf-prose img,.cf-prose figure{border-radius:var(--r); margin-block:2rem}
.cf-prose figcaption{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--slate); margin-top:.7rem}
.cf-prose table{width:100%; border-collapse:collapse; font-size:.95rem; margin-block:2rem}
.cf-prose th,.cf-prose td{
  text-align:left; padding:.85rem 1rem;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 12%, transparent);
}
.cf-prose th{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate); font-weight:500}
.cf-prose hr{border:0; border-top:1px solid color-mix(in srgb,var(--ink) 14%, transparent); margin-block:2.6rem}
.cf-prose .wp-block-button__link{
  display:inline-flex; align-items:center; padding:.92rem 1.5rem; border-radius:100px;
  background:var(--blue); color:#fff; font-weight:600; text-decoration:none;
}

/* ---------- enquiry form states ---------- */
.cf-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.cf-notice{
  display:grid; gap:.25rem; padding:1.05rem 1.2rem; border-radius:11px; margin-bottom:1.4rem;
  border:1px solid color-mix(in srgb,var(--blue) 34%, transparent);
  background:color-mix(in srgb,var(--blue) 8%, transparent);
  animation:fadeUp .6s var(--ease);
}
.cf-notice b{font-family:var(--display); font-size:1rem; font-weight:600}
.cf-notice span{font-size:.93rem; color:color-mix(in srgb,var(--ink) 76%, transparent)}
.cf-notice-bad{
  border-color:color-mix(in srgb,var(--red) 40%, transparent);
  background:color-mix(in srgb,var(--red) 8%, transparent);
}
.cf-notice-bad b{color:var(--red)}

/* ============================================================
   Affiliate / resource page
   ============================================================ */

/* disclosure badge, deliberately prominent and above the fold */
.cf-ad-badge{
  display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:start;
  max-width:56ch; padding:1rem 1.15rem; border-radius:11px;
  border:1px solid rgba(205,84,91,.45); background:rgba(205,84,91,.12);
}
.cf-ad-badge p{font-size:.88rem; line-height:1.5; color:rgba(238,246,248,.9)}
.cf-ad-tag{
  font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; padding:.28rem .6rem; border-radius:5px;
  background:var(--red); color:#fff; white-space:nowrap;
}
.band .cf-ad-badge p{color:color-mix(in srgb,var(--ink) 82%, transparent)}

/* rule list yes / no markers */
.rule-list.warm b{color:var(--red); letter-spacing:.1em}

/* comparison table */
.cf-table-wrap{overflow-x:auto; border-radius:var(--r); border:1px solid rgba(207,220,224,.18)}
.cf-table{width:100%; border-collapse:collapse; font-size:.93rem; min-width:640px}
.cf-table th,.cf-table td{padding:.95rem 1.1rem; text-align:left; vertical-align:top}
.cf-table thead th{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; color:var(--blue-lift); background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(207,220,224,.2);
}
.cf-table tbody th{
  font-family:var(--body); font-weight:600; font-size:.9rem; color:#fff; white-space:nowrap;
}
.cf-table tbody td{color:rgba(238,246,248,.84)}
.cf-table tbody tr{border-top:1px solid rgba(207,220,224,.12)}
.cf-table tbody tr:hover{background:rgba(255,255,255,.03)}
.cf-table tbody td:first-of-type{color:#F0B9BC}

/* click to load video, nothing is set until play is pressed */
.cf-video{
  position:relative; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden;
  background:linear-gradient(150deg,var(--deep),var(--abyss));
  border:1px solid color-mix(in srgb,var(--ink) 14%, transparent);
  display:grid; place-items:center;
}
.cf-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.cf-video-play{
  display:grid; place-items:center; gap:.9rem; background:none; border:0; cursor:pointer;
  color:#fff; font-family:var(--body); font-weight:600; font-size:.94rem; padding:1rem;
}
.cf-video-play svg{width:72px; height:auto; transition:transform .4s var(--ease)}
.cf-video-play .cf-video-bg{fill:var(--red); transition:fill .4s var(--ease)}
.cf-video-play:hover svg{transform:scale(1.07)}
.cf-video-play:hover .cf-video-bg{fill:var(--red-lift)}

/* statutory company disclosure in the footer */
.foot-legal{
  margin-top:clamp(2.4rem,4vw,3.4rem); padding-top:1.5rem;
  border-top:1px solid rgba(207,220,224,.12);
}
.foot-legal p{
  font-size:.82rem; line-height:1.6; color:rgba(207,220,224,.6); max-width:78ch;
}
.foot-bottom{margin-top:1.2rem; padding-top:1.2rem}

/* keep the VAT number from breaking across lines */
.cf-nowrap{white-space:nowrap}
.foot-legal p + p{margin-top:.4rem}

/* ============================================================
   Legal pages
   ============================================================ */

.hero-legal::before{opacity:.55}

.cf-legal-shell{
  display:grid; grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}

.cf-legal-nav{position:sticky; top:110px}
.cf-legal-nav ol{
  list-style:none; margin:1.1rem 0 0; padding:0; display:grid; gap:0;
  counter-reset:cf-legal;
}
.cf-legal-nav li{
  counter-increment:cf-legal;
  border-top:1px solid color-mix(in srgb,var(--ink) 12%, transparent);
}
.cf-legal-nav li:last-child{border-bottom:1px solid color-mix(in srgb,var(--ink) 12%, transparent)}
.cf-legal-nav a{
  display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:baseline;
  padding:.62rem 0; font-size:.88rem; text-decoration:none; line-height:1.4;
  color:color-mix(in srgb,var(--ink) 72%, transparent);
  transition:color .3s var(--ease), padding-left .3s var(--ease);
}
.cf-legal-nav a::before{
  content:counter(cf-legal,decimal-leading-zero);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; color:var(--blue); opacity:.7;
}
.cf-legal-nav a:hover{color:var(--blue); padding-left:.3rem}

.cf-legal{max-width:74ch}
.cf-legal-intro{
  font-size:clamp(1rem,1.2vw,1.1rem); line-height:1.65; padding:1.2rem 1.4rem;
  border-radius:var(--r); border:1px solid color-mix(in srgb,var(--blue) 24%, transparent);
  background:color-mix(in srgb,var(--blue) 6%, transparent);
}
.cf-legal h2{
  font-size:clamp(1.25rem,1.9vw,1.55rem); letter-spacing:-.02em;
  margin:2.6rem 0 .9rem; padding-top:1.6rem;
  border-top:1px solid color-mix(in srgb,var(--ink) 12%, transparent);
  scroll-margin-top:110px;
}
.cf-legal p{font-size:.98rem; line-height:1.72; color:color-mix(in srgb,var(--ink) 82%, transparent)}
.cf-legal p + p{margin-top:1rem}
.cf-legal a{color:var(--blue); text-decoration:underline; text-underline-offset:3px}
.cf-legal a:hover{color:var(--ink)}
.cf-legal strong{color:var(--ink); font-weight:600}
.cf-legal ul{
  margin:1rem 0 0; padding-left:1.3rem; display:grid; gap:.6rem;
  font-size:.98rem; line-height:1.7; color:color-mix(in srgb,var(--ink) 82%, transparent);
}
.cf-legal ul ul{margin-top:.6rem; padding-left:1.2rem; gap:.35rem; font-size:.95rem}
.cf-legal li::marker{color:var(--blue)}
.cf-legal-foot{
  margin-top:2.8rem; padding-top:1.5rem;
  border-top:1px solid color-mix(in srgb,var(--ink) 12%, transparent);
}
.cf-legal-foot p{font-size:.92rem; color:var(--slate)}

@media (max-width:900px){
  .cf-legal-shell{grid-template-columns:1fr}
  .cf-legal-nav{position:static; margin-bottom:1rem}
  .cf-legal{max-width:none}
}

/* footer legal links row */
.foot-links{display:flex; flex-wrap:wrap; gap:1.5rem}

/* ============================================================
   Theme isolation
   ------------------------------------------------------------
   Specificity only settles properties BOTH sides declare. Any
   property this stylesheet never sets is one the host theme
   still controls, which is how a theme rule such as
   `.entry-content a { background: #fff }` ends up painting a
   white box behind every link on our pages.

   Two defences below. First, reclaim the properties themes
   commonly set that we otherwise leave alone. Second, restate
   our own colours at doubled specificity so an equal weight
   theme rule cannot win on source order.

   Doubling the class costs nothing and avoids !important,
   which would be far harder to override later.
   ============================================================ */

/* --- 1. reclaim what we never declare --- */

/* Plain links, meaning links without one of our own classes.
   Deliberately limited to decoration properties: padding, font
   and display are left alone because our own components set
   them on classless anchors. */
.cf-site.cf-site a:not([class]),
.cf-site.cf-site a:not([class]):hover,
.cf-site.cf-site a:not([class]):focus{
  background:none;
  background-color:transparent;
  background-image:none;
  box-shadow:none;
  text-shadow:none;
  border-radius:0;
  -webkit-text-fill-color:currentColor;
}

/* Headings and prose blocks, same reasoning. */
.cf-site.cf-site h1,
.cf-site.cf-site h2,
.cf-site.cf-site h3,
.cf-site.cf-site h4,
.cf-site.cf-site p,
.cf-site.cf-site li,
.cf-site.cf-site summary,
.cf-site.cf-site strong,
.cf-site.cf-site em,
.cf-site.cf-site cite,
.cf-site.cf-site b{
  background:none;
  background-color:transparent;
  background-image:none;
  text-shadow:none;
  -webkit-text-fill-color:currentColor;
}

/* Tables and form controls a theme may also style. */
.cf-site.cf-site .cf-table th,
.cf-site.cf-site .cf-table td,
.cf-site.cf-site .rule-list li,
.cf-site.cf-site .faq details{
  background:none;
  background-color:transparent;
}

/* --- 2. restate our colours at doubled specificity --- */

.cf-legal.cf-legal a{color:var(--blue); text-decoration:underline; text-underline-offset:3px}
.cf-legal.cf-legal a:hover{color:var(--ink)}
.cf-legal.cf-legal p,
.cf-legal.cf-legal ul,
.cf-legal.cf-legal li{color:color-mix(in srgb,var(--ink) 82%, transparent)}
.cf-legal.cf-legal h2{color:var(--ink)}
.cf-legal.cf-legal strong{color:var(--ink); font-weight:600}
.cf-legal.cf-legal .cf-legal-intro{
  background:color-mix(in srgb,var(--blue) 6%, transparent);
  color:color-mix(in srgb,var(--ink) 88%, transparent);
}

.cf-legal-nav.cf-legal-nav a{color:color-mix(in srgb,var(--ink) 72%, transparent)}
.cf-legal-nav.cf-legal-nav a:hover{color:var(--blue)}

.cf-prose.cf-prose a{color:var(--blue)}
.cf-prose.cf-prose a:hover{color:var(--ink)}
.cf-prose.cf-prose p,
.cf-prose.cf-prose li{color:color-mix(in srgb,var(--ink) 82%, transparent)}

.faq.faq .ans a{color:var(--blue)}
.cf-site.cf-site .crumb a{color:inherit; text-decoration:none}
.cf-site.cf-site .foot a{color:inherit; text-decoration:none}
.cf-site.cf-site .foot a:hover{color:#fff}

/* Buttons and cards set their own backgrounds, so put those back
   after the reclaim above. */
.cf-site.cf-site .btn{background:var(--bg)}
.cf-site.cf-site .btn.ghost,
.cf-site.cf-site .btn.ghost-light{background:transparent}
.cf-site.cf-site .cf-ad-tag{background:var(--red); -webkit-text-fill-color:#fff}
.cf-site.cf-site .card{background:#fff}
.cf-site.cf-site .field input,
.cf-site.cf-site .field select,
.cf-site.cf-site .field textarea{background:#fff; color:var(--ink)}

/* Fallback for browsers without color-mix, so text can never
   inherit a theme colour that happens to be white. */
@supports not (color: color-mix(in srgb, red 50%, transparent)){
  .cf-site.cf-site .cf-legal p,
  .cf-site.cf-site .cf-legal li,
  .cf-site.cf-site .cf-prose p,
  .cf-site.cf-site .cf-prose li,
  .cf-site.cf-site .lede,
  .cf-site.cf-site .small{color:#1d4757}
  .cf-site.cf-site .on-dark .lede,
  .cf-site.cf-site .lede.on-dark{color:#e4eef1}
}

/* Prose contexts only. Padding and margin are reclaimed here but not
   globally, because our own nav, footer and card links rely on them. */
.cf-legal.cf-legal a,
.cf-prose.cf-prose a,
.faq.faq .ans a,
.cf-site.cf-site .rule-list a,
.cf-site.cf-site .track li a,
.cf-site.cf-site .fact a,
.cf-site.cf-site .card p a,
.cf-site.cf-site .lede a,
.cf-site.cf-site .small a{
  padding:0;
  margin:0;
  border:0;
  display:inline;
  line-height:inherit;
  font-family:inherit;
  font-size:inherit;
  letter-spacing:inherit;
  text-transform:none;
}