/* ==========================================================================
   42ITS — shared stylesheet
   One file for the whole site. Every page links to it.

   No frameworks, no build step, and — deliberately — no web fonts.

   This is a replica of the live 42its.co.uk. Every value here was read out of
   that site's own Elementor stylesheets, not chosen afresh:

     * Colours come from the Elementor kit (post-757.css): #000 page,
       #B01818 red, #7A7A7A text, #0E172D panels, #5E6782 muted, #2957CB blue.
     * HEADINGS ARE GREY, not white. Elementor sets them to the global text
       colour #7A7A7A. Only the PSTN hero heading is red.
     * The live site names "Montserrat" and "Inter" but never loads them, so
       every real visitor sees the generic sans-serif fallback. We name them the
       same way and do not load them either, so this looks like the real site.
       Add the font files back and both sites improve together.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  --black:   #000000;
  --red:     #b01818;
  --red-lit: #d92a2a;
  --text:    #7a7a7a;
  --slate:   #5e6782;
  --navy:    #0e172d;
  --blue:    #2957cb;
  --white:   #ffffff;

  /* Named exactly as Elementor names them, and — like the live site — not
     loaded, so the generic fallback is what actually renders. */
  --font-display: "Inter", sans-serif;
  --font-ui:      "Montserrat", sans-serif;

  --heading: #7a7a7a;   /* headings are grey on this site, not white */

  --wrap: 1500px;
  --line: 1px solid rgba(255, 255, 255, .12);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font: 400 16px/1.7 var(--font-ui);
  -webkit-text-size-adjust: 100%;
}

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

a { color: var(--white); }
a:hover, a:focus-visible { color: var(--red-lit); }

:focus-visible { outline: 3px solid var(--red-lit); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: .9rem 1.4rem; background: var(--red); color: #fff;
  font: 600 1rem var(--font-ui); text-decoration: none;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Header and navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0, 0, 0, .92);
  border-bottom: var(--line);
  backdrop-filter: blur(6px);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .9rem;
}

.logo { display: block; flex: 0 0 auto; }
.logo img { width: 150px; }

.nav-toggle {
  display: none; align-items: center; gap: .6rem;
  padding: .6rem 1rem; border: var(--line); border-radius: 30px;
  background: transparent; color: var(--white);
  font: 600 .95rem var(--font-ui); cursor: pointer;
}
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
  display: block; width: 18px; height: 2px; background: currentColor; content: "";
}
.nav-toggle .bars { position: relative; }
.nav-toggle .bars::before { position: absolute; top: -6px; }
.nav-toggle .bars::after  { position: absolute; top: 6px; }

.nav ul {
  display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.2rem);
  margin: 0; padding: 0; list-style: none;
}
.nav a {
  color: var(--text); font: 600 15px/1 var(--font-ui);
  text-decoration: none; white-space: nowrap;
}
.nav a:hover, .nav a:focus-visible { color: var(--white); }
.nav a[aria-current="page"] {
  color: var(--red);
  /* the live site underlines the current page in red */
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--red);
}

@media (max-width: 1024px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #000; border-bottom: var(--line);
  }
  .nav[hidden] { display: none; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 24px 1.5rem; }
  .nav li { border-top: var(--line); }
  .nav a { display: block; padding: 1rem 0; font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn, .btn-ghost {
  display: inline-block;
  padding: 1.1rem 2.5rem;
  border-radius: 30px;
  font: 600 1rem/1 var(--font-ui);
  text-decoration: none;
  cursor: pointer;
}
/* The live site puts BLACK text on the red button. That is only a 3.0:1
   contrast ratio and fails the accessibility standard, but it is what the site
   does today and this is a replica. To fix it, change these two to #fff. */
.btn { border: 1px solid var(--black); background: var(--red); color: #000; }
.btn:hover, .btn:focus-visible { background: var(--red-lit); color: #000; }

.btn-ghost {
  border: 1px solid rgba(255, 255, 255, .35);
  background: transparent; color: var(--text);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: var(--black); color: var(--red); border-color: var(--red);
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { padding: clamp(4rem, 9vw, 7rem) 0; }
.section-alt { background: #050505; }

.section-head { max-width: 60ch; margin: 0 0 clamp(2rem, 4vw, 3.5rem); }
.section-head.centred { margin-inline: auto; text-align: center; }
.section-head h2 {
  margin: 0 0 .8rem;
  color: var(--heading);
  font: 400 clamp(1.75rem, 3.2vw, 3.125rem)/1.3 var(--font-ui);
}
.section-head p { margin: 0; font: 300 clamp(1rem, 1.4vw, 1.125rem)/1.9 var(--font-display); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { padding: clamp(4rem, 11vw, 9rem) 0 clamp(3rem, 7vw, 6rem); }
.hero h1, .hero-tall h1 {
  margin: 0 0 1.2rem; max-width: 22ch;
  color: var(--heading);
  /* 68px / 52px / 35px, as the Elementor kit sets it */
  font: 200 clamp(2.19rem, 4.7vw, 4.25rem)/1.15 var(--font-display);
}
.hero p, .hero-tall p {
  max-width: 52ch; margin: 0 0 2rem;
  font: 300 clamp(1rem, 1.4vw, 1.125rem)/1.9 var(--font-display);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* The home page opens with two full-height panels, as the live site does: the
   red PSTN one, then the main one. Both carry the thin blue rings. */
.hero-tall {
  position: relative;
  display: flex; align-items: center;
  min-height: min(88vh, 900px);
  padding: clamp(3rem, 8vw, 6rem) 0;
  overflow: hidden;
}

.hero-pstn { text-align: center; }
.hero-pstn h1 {
  max-width: none; margin: 0 auto 1.5rem;
  color: var(--red);
  font: 200 clamp(2.2rem, 5vw, 4.25rem)/1.2 var(--font-display);
}
.hero-pstn h1 a { color: inherit; text-decoration: none; }
/* No underline on hover — Dave asked for the link without the heavy red rule. */
.hero-pstn h1 a:hover, .hero-pstn h1 a:focus-visible { opacity: .8; }
.hero-pstn p { max-width: 60ch; margin-inline: auto; }

/* The rings. Decoration only, so they are hidden from screen readers. */
.rings {
  position: absolute; z-index: -1; pointer-events: none;
  display: grid; place-items: center;
  width: min(80vw, 620px); aspect-ratio: 1;
}
/* Inside the page's content area, lined up with its right-hand margin, so the
   artwork never touches the edge of the screen. */
.rings-right {
  right: max(24px, calc((100% - var(--wrap)) / 2 + 24px));
  top: 50%; transform: translateY(-50%);
  width: min(42vw, 620px);
}
/* Offset to the right of the heading and slightly above centre, the way the
   live site places them — not dead centre behind the text. */
.rings-centre {
  left: 66%; top: 38%;
  transform: translate(-50%, -50%);
  width: min(46vw, 340px);
}
/* Every set of rings ripples slowly outwards, the way the live site's home
   and contact rings do (Lottie animations there: home-page-hero-lotti2.json and
   Contact-hero-ilus-circ.json, 10 s at 1.5x speed, linear). Each ring grows to
   exactly where the next one starts, the innermost fading in and the outermost
   fading out, so the loop has no seam. --grow is each ring's end size over its
   start size; --ring-o is how strong the rings are. */
.rings { --ring-o: .4; }
.rings span {
  grid-area: 1 / 1;
  aspect-ratio: 1;
  border: 1px solid var(--blue); border-radius: 50%;
  opacity: var(--ring-o);
  animation: ripple 6.67s linear infinite;
}
@keyframes ripple     { to { transform: scale(var(--grow)); } }
@keyframes ripple-in  { from { opacity: 0; } to { transform: scale(var(--grow)); opacity: var(--ring-o); } }
@keyframes ripple-out { from { opacity: var(--ring-o); } to { transform: scale(var(--grow)); opacity: 0; } }

/* The usual set: four rings. */
.rings span:nth-of-type(1) { width: 100%; --grow: 1.2;   animation-name: ripple-out; }
.rings span:nth-of-type(2) { width: 74%;  --grow: 1.351; }
.rings span:nth-of-type(3) { width: 50%;  --grow: 1.48; }
.rings span:nth-of-type(4) { width: 27%;  --grow: 1.852; animation-name: ripple-in; }

.rings svg { grid-area: 1 / 1; width: 16%; height: auto; }
/* The original artwork at the centre of the rings: a soft blue glow, and the
   cube (home) or the map pin (contact) on top of it. */
.rings .rings-glow   { grid-area: 1 / 1; width: 44%; height: auto; }
.rings .rings-object { grid-area: 1 / 1; width: 16.5%; height: auto; }
.rings .rings-pin    { width: 11.5%; }

/* Home and contact keep the exact sizes from their original animations. */
.ripple { --ring-o: .45; }

/* Home: five rings; the inner one fades in, the outer one fades out. */
.ripple-home span:nth-of-type(1) { width: 31.5%; --grow: 1.197; animation-name: ripple-in; }
.ripple-home span:nth-of-type(2) { width: 37.7%; --grow: 1.676; animation-name: ripple; }
.ripple-home span:nth-of-type(3) { width: 63.2%; --grow: 1.249; animation-name: ripple; }
.ripple-home span:nth-of-type(4) { width: 79%;   --grow: 1.178; animation-name: ripple; }
.ripple-home span:nth-of-type(5) { width: 93.3%; --grow: 1.066; animation-name: ripple-out; }

/* Contact: the outer ring stays still; three ripple out towards it. */
.ripple-contact span:nth-of-type(1) { width: 97.8%; animation: none; }
.ripple-contact span:nth-of-type(2) { width: 87.3%; --grow: 1.122; animation-name: ripple; }
.ripple-contact span:nth-of-type(3) { width: 50.5%; --grow: 1.735; animation-name: ripple; }
.ripple-contact span:nth-of-type(4) { width: 44.3%; --grow: 1.140; animation-name: ripple-in; }

/* Anyone who has asked their computer for less motion gets still rings. */
@media (prefers-reduced-motion: reduce) {
  .rings span { animation: none; }
}

@media (max-width: 900px) {
  /* Phones and small tablets: behind the text, faded, but still on screen. */
  .rings-right { right: -6%; width: min(80vw, 420px); opacity: .55; }
}

/* --------------------------------------------------------------------------
   Card grids
   -------------------------------------------------------------------------- */

.cards {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.card {
  padding: .35rem 0 .35rem 1.5rem;
  border-left: 1px solid var(--red);
}
.card h3 {
  margin: 0 0 .6rem; color: var(--heading);
  font: 400 1.3125rem/1.4 var(--font-ui);
}
.card p:last-child { margin-bottom: 0; }
.card ul { margin: .8rem 0 0; padding-left: 1.1rem; }
.card li { margin-bottom: .35rem; }

/* --------------------------------------------------------------------------
   Feature row: illustration beside copy
   -------------------------------------------------------------------------- */

.feature {
  display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .feature.flip .feature-art { order: -1; }
}
.feature h2 {
  margin: 0 0 1rem; color: var(--heading);
  font: 400 clamp(1.5rem, 2.8vw, 2.5rem)/1.3 var(--font-ui);
}
.feature p { margin: 0 0 1.5rem; font: 300 clamp(1rem, 1.3vw, 1.0625rem)/1.9 var(--font-display); }
/* width:100% as well as max-width, or the fixed cap wins on a narrow phone
   and the illustration pushes the page sideways. */
.feature-art img { margin-inline: auto; width: 100%; max-width: 420px; }
/* The illustration in its own rippling rings, in place of a flat picture with
   the rings painted in. Same 420px box as the picture had; the object keeps
   its size relative to that box (laptop 167, shield 113, bubble 134 of 768). */
.rings-inline {
  position: relative; z-index: auto;
  width: 100%; max-width: 420px; margin-inline: auto;
}
/* Here the ripple ends exactly at the box edge (84% x 1.19 = 100%), so a ring
   never pokes out past the column and pushes a phone screen sideways. */
.rings-inline span:nth-of-type(1) { width: 84%; --grow: 1.19;  animation-name: ripple-out; }
.rings-inline span:nth-of-type(2) { width: 62%; --grow: 1.355; animation-name: ripple; }
.rings-inline span:nth-of-type(3) { width: 42%; --grow: 1.476; animation-name: ripple; }
.rings-inline span:nth-of-type(4) { width: 23%; --grow: 1.826; animation-name: ripple-in; }
.rings .art-laptop { width: 21.7%; }
.rings .art-shield { width: 14.7%; }
.rings .art-faq    { width: 17.4%; }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

/* One testimonial at a time, sliding, exactly as the Elementor carousel is
   configured on the live site: 500ms slide, auto-advance every 5s, looping,
   paused while the pointer is over it, with bullets underneath.

   With JavaScript off it stays a plain left-to-right scroller you can swipe. */
.quotes {
  position: relative;
  max-width: 900px; margin-inline: auto;
}
.quote-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.quote-viewport::-webkit-scrollbar { display: none; }
/* With the script running we slide the track ourselves, so the scroll snapping
   that serves the no-JavaScript version is switched off. Belt and braces: the
   two mechanisms would otherwise be trying to position the same element. */
.quotes.is-live .quote-viewport { overflow: hidden; scroll-snap-type: none; }
.quotes.is-live .quote-track > * { scroll-snap-align: none; }

.quote-track { display: flex; }
.quotes.is-live .quote-track { transition: transform .5s ease; }
@media (prefers-reduced-motion: reduce) {
  .quotes.is-live .quote-track { transition: none; }
}

.quote-track > * { flex: 0 0 100%; scroll-snap-align: center; }

.quote-dots {
  display: flex; justify-content: center; gap: .6rem;
  margin: 2rem 0 0; padding: 0; list-style: none;
}
.quote-dots button {
  width: 10px; height: 10px; padding: 0;
  border: 1px solid var(--text); border-radius: 50%;
  background: transparent; cursor: pointer;
}
.quote-dots button[aria-current="true"] { background: var(--red); border-color: var(--red); }
.quote-dots button:focus-visible { outline: 3px solid var(--red-lit); outline-offset: 3px; }
.quote {
  /* margin 0: a <figure> has a 40px browser margin each side, which made every
     slide 80px wider than the step the carousel moves by, so each testimonial
     sat further off-centre than the last. */
  margin: 0;
  display: flex; flex-direction: column; gap: 1.4rem;
  padding: .35rem 0 .35rem 1.5rem;
  border-left: 1px solid var(--red);
  text-align: left;
}
.quote blockquote { margin: 0; font: 300 1rem/1.8 var(--font-display); }
/* the live slide puts the photo below the quote, not beside it */
.quote figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; margin-top: auto; }
/* The live site used Elementor's stock placeholder photos of people who are
   not 42 ITS clients. Replaced with the red outline circle the rest of the
   site already uses for icons. */
.quote-avatar {
  display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem; flex: 0 0 auto; order: 2;
  border: 1px solid var(--red); border-radius: 50%;
  color: var(--red);
}
.quote-avatar svg {
  width: 1.5rem; height: 1.5rem;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round;
}
.quote cite {
  color: var(--heading); font: 600 .9375rem/1.4 var(--font-ui); font-style: normal;
}
.quote .quote-role { display: block; color: var(--slate); font-weight: 400; font-size: .875rem; }
/* The customer's own star rating, where they gave one (read aloud as
   "Rated 5 out of 5"). The brighter red, so five small stars stay legible. */
.quote-stars { color: var(--red-lit); font-size: 1.05rem; line-height: 1; letter-spacing: .2em; }

/* --------------------------------------------------------------------------
   Rates
   -------------------------------------------------------------------------- */

.rates {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  max-width: 900px; margin-inline: auto;
}
.rate { padding: clamp(1.5rem, 3vw, 2rem) 1.5rem; text-align: center; }
.rate h3 { margin: 0 0 1.2rem; color: var(--heading); font: 400 1.3125rem/1.4 var(--font-ui); }
.rate .price {
  display: block; color: var(--heading);
  font: 200 clamp(2.75rem, 6vw, 4rem)/1 var(--font-display);
}
.rate .per { display: block; margin-top: .6rem; color: var(--slate); font-size: .9375rem; }

/* --------------------------------------------------------------------------
   Accordions (FAQs) — plain <details>, no JavaScript
   -------------------------------------------------------------------------- */

.faqs { max-width: 900px; margin-inline: auto; }
.faq { border-left: 1px solid var(--red); margin-bottom: 1.25rem; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem 0 .6rem 1.5rem;
  color: var(--heading); font: 400 1.0625rem/1.5 var(--font-ui);
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: 0 0 auto;
  color: var(--red-lit); font: 300 1.6rem/1 var(--font-display);
}
.faq[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--red-lit); }
.faq .faq-body { padding: 0 0 1rem 1.5rem; }
.faq .faq-body p { margin: 0 0 1rem; font: 300 1rem/1.9 var(--font-display); }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Product strip (the Yealink handsets)
   -------------------------------------------------------------------------- */

.products {
  display: grid; gap: 1.25rem;
  /* narrow enough that all eight handsets sit on one row on a desktop */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
}
.product { padding: 1.5rem 1rem; text-align: center; }
.product img { margin-inline: auto; max-height: 150px; width: auto; }
.product span {
  display: block; margin-top: 1rem;
  color: var(--slate); font: 600 .8125rem/1.4 var(--font-ui); letter-spacing: .06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Contact details block
   -------------------------------------------------------------------------- */

.details {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.detail {
  padding: .35rem 0 .35rem 1.5rem;
  border-left: 1px solid var(--red);
}
.detail h3 {
  margin: 0 0 .7rem; color: var(--heading);
  font: 600 .84rem/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
}
.detail p { margin: 0 0 .3rem; }
.detail a { color: var(--white); text-decoration: none; font-weight: 600; }
.detail a:hover, .detail a:focus-visible { color: var(--red-lit); }

/* --------------------------------------------------------------------------
   Download list (remote support)
   -------------------------------------------------------------------------- */

.downloads {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.download {
  display: flex; flex-direction: column; gap: .9rem;
  padding: .35rem 0 .35rem 1.5rem;
  border-left: 1px solid var(--red);
}
.download h3 { margin: 0; color: var(--heading); font: 400 1.1875rem/1.4 var(--font-ui); }
.download p { margin: 0; font-size: .9375rem; }
.download .btn, .download .btn-ghost { margin-top: auto; align-self: flex-start; padding: .85rem 1.8rem; }
/* Under the downloads: what to click if Windows warns about our own software. */
.download-note { max-width: 46rem; margin: 2.5rem auto 0; font-size: .9375rem; line-height: 1.7; }
.download-note strong { color: var(--heading); font-weight: 600; }

/* --------------------------------------------------------------------------
   Call-to-action band
   -------------------------------------------------------------------------- */

.call { padding: clamp(3rem, 7vw, 5.5rem) 0; text-align: center; }
.call p.call-kicker {
  margin: 0 0 .8rem; color: var(--red-lit);
  font: 600 .84rem/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase;
}
.call h2 {
  max-width: 30ch; margin: 0 auto 1.8rem; color: var(--heading);
  font: 400 clamp(1.4rem, 2.8vw, 2rem)/1.4 var(--font-ui);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer { padding: clamp(3rem, 6vw, 4.5rem) 0 2.5rem; border-top: var(--line); }
.footer-cols {
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.site-footer h4 {
  margin: 0 0 .9rem; color: var(--heading);
  font: 700 .84rem/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
}
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin-bottom: .5rem; }
.site-footer a { color: var(--text); text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--red-lit); }
.site-footer .logo img { width: 170px; margin-bottom: 1.2rem; }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  margin-top: 3rem; padding-top: 1.5rem; border-top: var(--line);
  font: 300 12px/1.7 var(--font-display);
}
.footer-bottom p { margin: 0; }

/* --------------------------------------------------------------------------
   Long-form pages (privacy, terms, legacy service pages)
   -------------------------------------------------------------------------- */

.prose { max-width: 70ch; }
.prose h2 {
  margin: 2.5rem 0 1rem; color: var(--heading);
  font: 400 clamp(1.4rem, 2.4vw, 1.9rem)/1.4 var(--font-ui);
}
.prose h3 { margin: 2rem 0 .8rem; color: var(--heading); font: 400 1.25rem/1.4 var(--font-ui); }
.prose p, .prose li { font: 300 1.0625rem/1.9 var(--font-display); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .5rem; }
.prose a { color: var(--white); }

/* ==========================================================================
   Services page
   A copy of the live layout: a centred hero with red rings, then a two-column
   index — a sticky list of links on the left, the services themselves on the
   right — with red circular icons and red rules down the left of indented text.
   ========================================================================== */

.hero-centred { text-align: center; }
.hero-centred h1 {
  max-width: 22ch; margin-inline: auto;
  text-transform: capitalize;   /* the kit sets capitalize on this heading */
}
.hero-centred p {
  max-width: 66ch; margin-inline: auto;
  font-size: .9375rem; line-height: 1.9;
}

/* the rings on this page are red, not blue: three of them, rippling like the
   blue ones */
.rings-red { --ring-o: .5; }
.rings-red span { border-color: var(--red); }
.rings-red span:nth-of-type(1) { width: 74%; --grow: 1.243; animation-name: ripple-out; }
.rings-red span:nth-of-type(2) { width: 50%; --grow: 1.48;  animation-name: ripple; }
.rings-red span:nth-of-type(3) { width: 34%; --grow: 1.47;  animation-name: ripple-in; }

.services-layout {
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1000px) {
  .services-layout { grid-template-columns: 19rem minmax(0, 1fr); }
  .services-index { position: sticky; top: 6rem; align-self: start; }
}

.services-index { border-left: 2px solid var(--red); padding-left: 1.6rem; }
.services-index h2 {
  margin: 0 0 1.5rem; color: var(--heading);
  font: 400 clamp(1.5rem, 2.6vw, 2rem)/1.3 var(--font-ui);
}
.services-index ul { margin: 0; padding: 0; list-style: none; }
.services-index li { margin-bottom: 1.15rem; }
.services-index a {
  color: var(--text); text-decoration: none;
  font: 400 .9375rem/1.4 var(--font-ui);
}
.services-index a::before { content: "\203A"; margin-right: .6rem; color: var(--text); }
.services-index a:hover,
.services-index a:focus-visible { color: var(--red); }
.services-index a:hover::before,
.services-index a:focus-visible::before { color: var(--red); }

.service { margin-bottom: clamp(3rem, 6vw, 5rem); scroll-margin-top: 6rem; }
.service:last-child { margin-bottom: 0; }

.service-head {
  display: grid; gap: 1.5rem; align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px) {
  .service-head { grid-template-columns: 5.5rem minmax(0, 1fr); }
}

/* the red circle each service sits behind */
.service-icon {
  display: grid; place-items: center;
  width: 4.5rem; height: 4.5rem;
  border: 1px solid var(--red); border-radius: 50%;
  color: var(--red);
}
.service-icon svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.6; }

.service h3 {
  margin: 0 0 .9rem; color: var(--heading);
  font: 400 1.3125rem/1.4 var(--font-ui);
}
.service-lead { margin: 0 0 1.4rem; font-size: .9375rem; }

/* the indented paragraphs, each with its own red rule */
.service-notes { margin: 0; padding: 0; list-style: none; }
.service-notes li {
  margin: 0 0 1rem; padding: .35rem 0 .35rem 1.4rem;
  border-left: 1px solid var(--red);
  font: 300 .9375rem/1.8 var(--font-display);
}
.service-notes li:last-child { margin-bottom: 0; }

/* The phone bar that sits above the footer on every page of the live site. */
.help-bar { padding: clamp(2rem, 4vw, 3rem) 0; text-align: center; }
.help-bar h2 { margin: 0; font: 400 clamp(1.1rem, 2vw, 1.4rem)/1.4 var(--font-ui); }
.help-bar a { color: var(--heading); text-decoration: none; }
.help-bar a:hover, .help-bar a:focus-visible { color: var(--red); }

/* The shared form kit draws a navy panel, which suits 42Live. This site is flat
   black with red rules, so soften it here rather than in the shared files. */
.enquiry-form {
  border: 0; border-left: 1px solid var(--red); border-radius: 0;
  background: transparent;
  padding: .35rem 0 .35rem clamp(1.5rem, 3vw, 2rem);
}
/* Flat black fields, not the navy the shared kit uses. */
.enquiry-form input,
.enquiry-form textarea,
.enquiry-form select {
  border-radius: 4px;
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .22);
}
.enquiry-form select option { background: #000; }
.enquiry-intro h2 { color: var(--heading); }
.enquiry-form label { color: var(--heading); }
.enquiry-direct a { color: var(--heading); }

/* ==========================================================================
   Centred pages
   The PSTN, About, Services and Remote Support pages centre their content and
   carry rings behind the heading — red on some pages, blue on others, as the
   live site has them.
   ========================================================================== */

.section.centred-page { text-align: center; }
.section.centred-page .section-head { margin-inline: auto; text-align: center; }
.section.centred-page .cards { text-align: left; }

/* A ring set behind a section rather than a hero. The hero rings sit at
   z-index -1, which works over the bare page, but a section with its own
   background would paint straight over them — so here the rings sit at 0 and
   the content is lifted above them instead. */
.section-rings { position: relative; overflow: hidden; }
.section-rings .rings { z-index: 0; }
.section-rings .wrap { position: relative; z-index: 1; }

/* the benefit blocks on the PSTN page take red headings */
.card-red h3 { color: var(--red); }

/* the second row of handsets, under the benefits */
.products-tight { max-width: 760px; margin-inline: auto; }

/* FAQ blocks in the services format: red circle, heading, red-ruled answers */
.faq-block { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); text-align: left; }
.faq-block:last-child { margin-bottom: 0; }

/* ==========================================================================
   The PSTN countdown bar
   Sits above the header on the home page. White on red — 7:1 contrast, unlike
   the black-on-red buttons the live site uses — because this is the one thing
   on the page a visitor must be able to read at a glance.
   ========================================================================== */

.pstn-bar { background: var(--red); }

.pstn-bar-inner {
  display: flex; align-items: center; gap: 1rem;
  padding-block: .7rem;
}

.pstn-bar-link {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem;
  flex: 1 1 auto;
  color: #fff; text-decoration: none;
  font: 600 .9375rem/1.5 var(--font-ui);
}
.pstn-bar-link:hover, .pstn-bar-link:focus-visible { color: #fff; }
.pstn-bar-cta { text-decoration: underline; font-weight: 400; }
.pstn-bar-link:hover .pstn-bar-cta { text-decoration: none; }

.pstn-bar-close {
  flex: 0 0 auto;
  width: 2rem; height: 2rem; padding: 0;
  border: 0; border-radius: 50%;
  background: transparent; color: #fff;
  font: 400 1.1rem/1 var(--font-ui); cursor: pointer;
}
.pstn-bar-close:hover { background: rgba(0, 0, 0, .22); }
.pstn-bar-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (max-width: 600px) {
  .pstn-bar-link { font-size: .875rem; }
}

/* A short page opener — a heading and a line or two — rather than a full
   screen of black. Without this, the hero's bottom padding and the following
   section's top padding stack up to about 240px of empty space. */
.hero-compact {
  min-height: auto;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1rem, 2vw, 1.5rem);
}
.hero-compact + .section { padding-top: clamp(1.25rem, 2.5vw, 2rem); }
.hero-compact h1 { margin-bottom: .8rem; }
.hero-compact p { margin-bottom: 1rem; }
.hero-compact p:last-of-type { margin-bottom: 0; }
.hero-compact .hero-actions { margin-top: 1.6rem; }