@charset "utf-8";

/* ==========================================================================
   Go10 Ltd — self-hosted static site
   No external requests: fonts, images and styles are all served from origin.

   Typography and colour are matched to the live go10.co.uk (The7 theme),
   measured from its computed styles rather than guessed:
     body / UI ....... Open Sans 15px / 27px, #777 (nudged to #737373 for AA)
     section titles .. Roboto 25px, #3d3d3d
     section subtitle. Roboto 15px, #1e73be
     hero ............ Roboto 300 60px, #8e8e93
     attribution ..... Roboto 300, red
   The theme also declares Abril Fatface, but only on an empty element — it
   renders nowhere on the page, so it is deliberately not shipped here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted, latin subset, variable)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/open-sans-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/roboto-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  --accent: #0076ba;         /* theme accent — links */
  --accent-sub: #1e73be;     /* section subtitles */
  --attrib: #d81100;         /* testimonial attribution (theme #fc1000, darkened for AA) */

  --ink-title: #3d3d3d;      /* section titles */
  --ink: #737373;            /* body copy (theme #777, nudged to clear 4.5:1) */
  --ink-nav: #595959;        /* navigation */
  --ink-hero: #8e8e93;       /* hero lines */

  --line: #e6e6e9;
  --bg: #fff;
  --bg-soft: #f7f7f7;

  --font-body: 'Open Sans', Helvetica, Arial, Verdana, sans-serif;
  --font-title: 'Roboto', Helvetica, Arial, sans-serif;

  --wrap: 1200px;
  --header-h: 100px;
}

/* --------------------------------------------------------------------------
   3. Reset / base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 27px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.6em;
  font-weight: 400;
  line-height: 1.3;
}

p {
  margin: 0 0 1.2em;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: #fff;
  padding: 12px 20px;
}

.skip-link:focus {
  left: 0;
}

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

/* --------------------------------------------------------------------------
   4. Header / navigation (CSS-only mobile menu, no JavaScript)
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  padding: 6px 0;
}

.brand img {
  width: auto;
  height: 76px;
}

.nav-toggle,
.nav-toggle-label {
  display: none;
}

.nav ul {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  display: inline-block;
  padding: 4px 0;
  color: var(--ink-nav);
  font-size: 15px;
  font-weight: 400;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
  text-decoration: none;
}

@media (max-width: 900px) {
  :root {
    --header-h: 76px;
  }

  .brand img {
    height: 58px;
  }

  /* Visually hidden but still focusable, so the menu opens from the keyboard. */
  .nav-toggle {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .nav-toggle-label {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    cursor: pointer;
  }

  .nav-toggle-label span {
    display: block;
    height: 2px;
    background: var(--ink-nav);
    border-radius: 2px;
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  .nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 20px;
  }

  .nav a {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }

  .nav-toggle:checked ~ .nav {
    max-height: 520px;
  }

  .nav-toggle:focus-visible + .nav-toggle-label {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
  }
}

/* --------------------------------------------------------------------------
   5. Sections — the original page is white throughout, with hairline rules
   -------------------------------------------------------------------------- */

.section {
  padding: 80px 0;
  border-top: 1px solid var(--line);
}

.section-head {
  text-align: center;
  margin-bottom: 60px;
}

.section-head h2 {
  margin: 0 0 2px;
  font-family: var(--font-title);
  font-size: 25px;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  color: var(--ink-title);
}

.section-head p {
  margin: 0;
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  color: var(--accent-sub);
}

/* "ABOUT GO10" is left-aligned on the live site; the rest are centred. */
.section-head--left {
  text-align: left;
  margin-bottom: 40px;
}

.section-head--left h2 {
  margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
   6. Hero — logo left, headline and claims right
   -------------------------------------------------------------------------- */

.hero {
  padding: 54px 0 70px;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  justify-items: center;
}

@media (min-width: 900px) {
  .hero-inner {
    grid-template-columns: minmax(220px, 340px) 1fr;
    gap: 56px;
    justify-items: stretch;
  }
}

.hero-logo img {
  width: 240px;
  max-width: 60vw;
  margin: 0 auto;
}

.hero h1 {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 300;
  font-size: clamp(24px, 3.2vw, 44px);
  line-height: 1.15;
  color: var(--ink-hero);
  text-align: center;
}

.hero h1 span {
  display: block;
}

@media (min-width: 900px) {
  .hero h1 {
    text-align: right;
  }
}

.hero-claims {
  max-width: 500px;
  margin: 42px auto 0;
  padding: 0;
  list-style: none;
}

.hero-claims li {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  font-family: var(--font-title);
  font-size: clamp(13px, 1.15vw, 16px);
  font-weight: 500;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink);
}

.hero-claims img {
  flex: none;
  width: 48px;
  height: auto;
}

/* --------------------------------------------------------------------------
   7. About
   -------------------------------------------------------------------------- */

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 64px;
  align-items: start;
}

@media (min-width: 860px) {
  .about-grid {
    grid-template-columns: 1.55fr 1fr;
  }
}

.about-facts {
  margin: 0;
  padding-left: 20px;
}

.about-facts li {
  margin-bottom: 2px;
}

.capabilities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 48px 24px;
  margin: 84px 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.capabilities > li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

.capabilities img {
  width: 86px;
  height: auto;
}

.capabilities ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   8. Testimonials — plain centred text, as on the original (no cards)
   -------------------------------------------------------------------------- */

.testimonials {
  display: grid;
  grid-template-columns: 1fr;
  gap: 52px 64px;
}

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

.testimonial {
  margin: 0;
  text-align: center;
}

.testimonial blockquote {
  margin: 0;
}

.testimonial p {
  margin: 0 0 15px;
  font-style: italic;
}

.testimonial figcaption {
  font-family: var(--font-title);
  font-weight: 300;
  color: var(--attrib);
}

.testimonial .name,
.testimonial .role {
  display: block;
}

/* --------------------------------------------------------------------------
   9. Customer logo grid — bare logos on white
   -------------------------------------------------------------------------- */

/* The live site renders each customer logo in a 166x133 tile. */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 30px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
}

.logo-grid li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 133px;
}

.logo-grid img {
  width: 100%;
  max-width: 166px;
  height: 100%;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   10. Brands — logo front, description on the back, flipped on hover/focus
       (the live site uses a WPBakery hoverbox: 205x258 card, #ebebeb back)
   -------------------------------------------------------------------------- */

.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 34px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flip-card {
  perspective: 820px;
  cursor: pointer;
}

.flip-inner {
  position: relative;
  height: 258px;
  transform-style: preserve-3d;
  transition: transform 0.55s ease;
}

.flip-card:hover .flip-inner,
.flip-card:focus .flip-inner,
.flip-card:focus-within .flip-inner {
  transform: rotateY(180deg);
}

.flip-front,
.flip-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-front {
  background: #fff;
}

.flip-front img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.flip-back {
  background: #ebebeb;
  transform: rotateY(180deg);
  text-align: center;
  overflow: auto;
}

.flip-back h3 {
  margin: 0 0 6px;
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--ink-title);
}

.flip-back p {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: #666; /* #ebebeb back needs a darker ink than body copy on white */
}

/* Touch devices and reduced-motion users get both halves without a flip. */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .flip-card {
    cursor: default;
  }

  .flip-inner {
    height: auto;
    transform: none !important;
  }

  .flip-front,
  .flip-back {
    position: static;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    transform: none;
  }

  .flip-front {
    height: 150px;
    padding-bottom: 12px;
  }

  .flip-back {
    background: transparent;
    padding-top: 0;
  }
}

/* --------------------------------------------------------------------------
   11. Contact — three centred columns, each headed by a coloured Go10 mark
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 56px 40px;
  text-align: center;
}

.contact-mark {
  width: 62px;
  height: auto;
  margin: 0 auto 40px;
}

.contact-name {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
}

.contact-col dl {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
}

.contact-col dt {
  margin-top: 20px;
  font-weight: 700;
  text-transform: uppercase;
}

.contact-col dt:first-child {
  margin-top: 0;
}

.contact-col dd {
  margin: 8px 0 0;
}

.contact-col dd.plain {
  margin-top: 18px;
}

.contact-line {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 18px;
}

.contact-social {
  margin: 18px 0 0;
}

.contact-social img {
  width: 92px;
  height: auto;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   12. Bottom bar — light grey strip, copyright left, links right
   -------------------------------------------------------------------------- */

.bottom-bar {
  padding: 22px 0;
  background: #efefef;
  color: #666;
  font-size: 13px;
  line-height: 22px;
}

.bottom-bar .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 32px;
}

.bottom-bar a {
  color: #666;
}

.bottom-bar a:hover,
.bottom-bar a:focus-visible {
  color: var(--accent);
}

.copyright {
  margin: 0;
  flex: 0 1 auto;
}

.bottom-nav {
  flex: 1 1 auto;
}

.bottom-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 700px) {
  .bottom-nav ul {
    justify-content: flex-start;
  }
}

/* --------------------------------------------------------------------------
   13. Legal / text pages
   -------------------------------------------------------------------------- */

.page-header {
  padding: 56px 0 0;
}

.page-header h1 {
  margin: 0;
  font-family: var(--font-title);
  font-size: 30px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--ink-title);
}

.prose {
  max-width: 820px;
  padding: 34px 0 80px;
}

.prose h2 {
  margin-top: 2em;
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 400;
  color: var(--ink-title);
}

.prose h3 {
  margin-top: 1.6em;
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 400;
  color: var(--ink-title);
}

.prose li {
  margin-bottom: 0.4em;
}

.prose a {
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   14. Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header,
  .bottom-bar,
  .hero-claims {
    display: none;
  }

  body {
    color: #000;
  }
}