/* ============================================================
   Argyle IT Consulting — shared stylesheet
   Last updated: 25 July 2026

   WHY THIS IS A SEPARATE FILE
   Keeping CSS out of the HTML lets the Content Security Policy
   use style-src 'self' instead of style-src 'unsafe-inline'.
   'unsafe-inline' would permit any injected <style> block or
   style attribute to execute, which weakens the policy. This
   file is served from your own domain, so nothing external
   is ever requested.

   NO WEB FONTS
   Only system fonts are used. The 2016 site loaded Roboto and
   Open Sans from Google Fonts, which sent every visitor's IP
   address to a third party. The system stack below is visually
   close and costs no external request.

   NO JAVASCRIPT
   The carousel is CSS scroll-snap. It swipes on touch, scrolls
   with the arrow keys, and each slide is reachable by Tab. No
   script, so the CSP needs no script-src and the accessibility
   statement's "built without JavaScript" claim stays true.
   ============================================================ */


/* ---------- 1. Design tokens ------------------------------
   Indigo palette, replacing the 2016 site's #1ab394 teal.
   That teal measured 2.65:1 against white, which fails WCAG AA
   for text at any size, so it could never have been used for
   anything but decoration.

   Deliberately not NHS blue (#005EB8): using NHS brand colours
   on a commercial site can imply NHS affiliation or endorsement.
   Contrast ratios below are against white unless stated.
   ---------------------------------------------------------- */

:root{
  --ink:#1b2430;         /* headings and body text — 15.65:1, AAA */
  --muted:#4a5568;       /* secondary text — 7.53:1, AAA */
  --primary:#2e3a8c;     /* links, section headings — 10.00:1, AAA */
  --accent:#5a6bd8;      /* rules and eyebrows — 4.64:1, AA */
  --paper:#ffffff;
  --wash:#f4f5fa;        /* alternating section background */
  --rule:#d9dce9;        /* hairline borders */
  --measure:70ch;        /* max line length for readability */
}


/* ---------- 2. Reset and base ----------------------------- */

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

html{-webkit-text-size-adjust:100%} /* stops iOS auto-inflating text in landscape */

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  /* System font stack: uses whatever the visitor's device already
     has installed. No download, no external request. Segoe UI on
     Windows sits close to the Open Sans the old site used. */
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
              "Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* The 2016 site set every heading in uppercase bold sans. That
   is kept for the hero and the small eyebrow labels, where it
   reads as deliberate, but section headings are sentence case —
   a page of shouted headings is what dates the original. */
h1,h2,h3{
  font-weight:600;
  line-height:1.2;
  letter-spacing:-0.015em;
  margin:0;
}

h1{font-size:clamp(1.7rem,4vw,2.35rem)} /* clamp() scales type with viewport, no JS needed */
h2{font-size:clamp(1.3rem,2.6vw,1.65rem)}
h3{font-size:1.02rem;letter-spacing:0}

p,ul,ol{margin:0 0 1rem}
ul,ol{padding-left:1.3rem}
li{margin-bottom:.4rem}
p:last-child{margin-bottom:0}

a{color:var(--primary);text-underline-offset:2px}
a:hover{color:var(--ink)}

img{max-width:100%}

/* Visible keyboard focus indicator.
   WCAG 2.2 success criterion 2.4.11 (focus not obscured) and
   2.4.13 (focus appearance). Never remove this. */
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
}


/* ---------- 2b. Icon font --------------------------------
   Font Awesome 4.3.0, carried over from the 2016 template and
   served from this domain. Nothing is requested from a CDN, so
   the privacy notice's "no external requests" claim still holds.

   The CSP needs font-src 'self' for this. It is set in the head
   of all three pages — if you remove the icons, remove that too.

   Only the eleven glyphs actually used are declared below. The
   full Font Awesome stylesheet is 23KB of rules for around 600
   icons, none of the rest of which this site needs.

   Codepoints were read out of the 4.3.0 stylesheet rather than
   remembered. If you ever swap the font file, re-check them:
   they are not stable between major versions.

   NOTE: 4.3.0 was released in 2015. It is a font, not executable
   code, so it does not carry the same risk as the old jQuery and
   Bootstrap files — but it is still a 2015 asset on a site whose
   point is that it is current. Worth replacing with inline SVG
   at some stage.
   --------------------------------------------------------- */

@font-face{
  font-family:'FontAwesome';
  src:url('fonts/fontawesome-webfont.woff2') format('woff2'),
      url('fonts/fontawesome-webfont.woff') format('woff');
  font-weight:normal;
  font-style:normal;
  font-display:swap;   /* text never waits on the icon font */
}

/* Decorative only. Every element carrying one of these is marked
   aria-hidden, because the heading beside it already says what
   the item is — an icon that repeated it would just be noise in
   a screen reader. */
.ico{
  display:block;
  font-family:'FontAwesome';
  font-style:normal;
  font-weight:normal;
  font-size:1.4rem;
  line-height:1;
  color:var(--accent);
  margin-bottom:.65rem;
  -webkit-font-smoothing:antialiased;
}

/* Services */
.ico-shield::before{content:"\f132"}
.ico-lock::before{content:"\f023"}
.ico-cogs::before{content:"\f085"}
.ico-chart::before{content:"\f080"}
.ico-table::before{content:"\f0ce"}
.ico-map::before{content:"\f041"}
.ico-exchange::before{content:"\f0ec"}
.ico-code::before{content:"\f121"}
.ico-clipboard::before{content:"\f0ea"}
.ico-server::before{content:"\f233"}
.ico-comments::before{content:"\f0e6"}

/* How we work */
.ico-usermd::before{content:"\f0f0"}
.ico-certificate::before{content:"\f0a3"}
.ico-key::before{content:"\f084"}

/* Contact */
.ico-envelope::before{content:"\f003"}

/* Work cards awaiting a screenshot */
.ico-trophy::before{content:"\f091"}
.ico-listalt::before{content:"\f022"}
.ico-microscope::before{content:"\f00e"}


/* ---------- 3. Skip link ---------------------------------
   Lets keyboard and screen reader users jump past the header
   straight to content. Hidden off-screen until focused.
   WCAG 2.4.1 (bypass blocks).
   --------------------------------------------------------- */

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--ink);
  color:#fff;
  padding:.7rem 1rem;
  z-index:20;
}
.skip:focus{left:0}

/* Visually hidden but still announced. Used for the slide
   labels inside the carousel dots, which would otherwise be
   links with no accessible name. Distinct from .skip, which
   is meant to become visible when focused. */
.vh{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}


/* ---------- 4. Page container ---------------------------- */

.wrap{
  max-width:1040px;
  margin:0 auto;
  padding:0 1.5rem;
}


/* ---------- 5. Header ------------------------------------ */

.masthead{
  border-bottom:1px solid var(--rule);
  padding:1.4rem 0 1.2rem;
}

/* Flex with wrap: on narrow screens the nav drops below the
   wordmark automatically. No media query or JS menu needed. */
.masthead .wrap{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 2rem;
  /* centre, not baseline: the wordmark is now a logo tile beside
     text, and baseline alignment would hang the tile off the text
     baseline rather than centring it against the nav. */
  align-items:center;
  justify-content:space-between;
}

.wordmark{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-size:1.2rem;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--ink);
  text-decoration:none;
}

/* The source logo is 100x100. Shown at 40px it still has 2.5x of
   pixels in hand, so it stays sharp on a high-DPI screen. Do not
   display it much larger than this — there is no bigger original. */
.wordmark .mark{
  display:block;
  width:40px;
  height:40px;
  flex:none;
}

.wordmark b{color:var(--primary);font-weight:inherit}

.navlist{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.2rem 1.5rem;
  margin:0;
  padding:0;
  font-size:.86rem;
  letter-spacing:.02em;
}
.navlist a{
  display:inline-block;
  color:var(--muted);
  text-decoration:none;
  /* Vertical padding gives a 44px tap target without changing
     the visual rhythm. WCAG 2.5.8 target size. */
  padding:.7rem 0;
  border-bottom:2px solid transparent;
}
.navlist a:hover{color:var(--ink);border-bottom-color:var(--accent)}

/* Customer portal link, weighted heavier so it reads as an
   action rather than another section anchor. */
.navlist a.portal{
  color:var(--primary);
  font-weight:700;
  border-bottom-color:var(--rule);
}
.navlist a.portal:hover{border-bottom-color:var(--accent)}


/* ---------- 6. Hero carousel -----------------------------
   Reproduces the 2016 site's full-bleed photographic header
   without its jQuery and wow.js machinery.

   grid-auto-flow:column with 100% columns puts the slides in a
   row; scroll-snap-type locks each one to the viewport edge.
   Touch devices get native momentum swiping for free. The dot
   links below are ordinary same-page anchors, so they work
   with scripting disabled.

   Nothing moves on its own. Auto-advancing would breach WCAG
   2.2.2 and contradict the accessibility statement.
   --------------------------------------------------------- */

/* The dots are absolutely positioned against this. */
.hero{position:relative}

.carousel{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:100%;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;          /* Firefox */
  -ms-overflow-style:none;       /* old Edge */
}
.carousel::-webkit-scrollbar{display:none}

.slide{
  position:relative;
  scroll-snap-align:start;
  display:flex;
  align-items:center;
  min-height:clamp(330px,52vh,470px);
  background-color:var(--ink);
  background-position:50% 50%;
  background-size:cover;
  background-repeat:no-repeat;
}

/* Mobile-first: the 900px-wide hero images are loaded by
   default and the 1600px versions only on wider viewports,
   so a phone never downloads the large file. */
.slide.one{background-image:url('img/landing/header_one_sm.jpg')}
.slide.two{background-image:url('img/landing/header_two_sm.jpg')}

/* Tint. Both photographs contain light areas, and white text
   over an untinted photograph cannot be guaranteed to meet
   contrast anywhere it lands. The overlay makes it measurable. */
.slide::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,rgba(20,27,40,.86) 0%,rgba(20,27,40,.62) 55%,rgba(20,27,40,.42) 100%);
}

.slide .wrap{position:relative;width:100%;padding-top:2.5rem;padding-bottom:3.5rem}

.slide h1{
  color:#fff;
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:-0.02em;
  max-width:20ch;
}
.slide p{
  color:#e8eaf4;
  margin-top:1rem;
  max-width:46ch;
  font-size:1.02rem;
}

/* The 60px accent rule under the heading is lifted straight
   from the old stylesheet's .navy-line. */
.slide .rule{
  width:60px;
  height:0;
  margin:1.4rem 0 0;
  border-bottom:3px solid var(--accent);
}

/* Slide indicators. Real anchors, so they are keyboard
   reachable and work without script. The 24px box is the
   WCAG 2.5.8 minimum target; the visible dot inside is
   smaller for the sake of the design. */
.dots{
  position:absolute;
  left:0;
  right:0;
  bottom:1rem;
  z-index:2;
  display:flex;
  justify-content:center;
  gap:.35rem;
  list-style:none;
  margin:0;
  padding:0;
}
.dots li{margin:0}
.dots a{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
}
.dots a::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.85);
}
.dots a:hover::before,
.dots a:focus-visible::before{background:#fff}


/* ---------- 7. Sections ---------------------------------- */

section{
  padding:3.2rem 0;
  border-bottom:1px solid var(--rule);
}
section.shaded{background:var(--wash)}
section.hero{padding:0;border-bottom:0}

.eyebrow{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--primary);
  font-weight:700;
  margin:0 0 .7rem;
}

.lede{
  max-width:var(--measure);
  font-size:1.08rem;
  color:var(--muted);
  margin-top:1rem;
}

.prose{max-width:var(--measure)}


/* ---------- 8. Work grid --------------------------------
   Promoted above Services: what has been delivered carries
   more weight in a supplier check than a list of offerings.
   --------------------------------------------------------- */

.work{
  list-style:none;
  display:grid;
  gap:1.8rem;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  margin:2.2rem 0 0;
  padding:0;
  /* Cards stretch to the height of their row rather than sitting
     ragged. Cards without a screenshot are shorter, so this is
     what keeps the grid reading as a grid. */
  align-items:stretch;
}
.work li{
  margin:0;
  border:1px solid var(--rule);
  background:var(--paper);
  display:flex;
  flex-direction:column;
}

/* Fixed-ratio thumbnail box. object-fit:contain rather than
   cover because these are screenshots — cropping one would cut
   off the interface that makes it recognisable. The Argyle
   Surgery masthead is a wide strip and letterboxes accordingly. */
.work .shot{
  display:block;
  width:100%;
  /* height:auto is required. The width and height attributes on
     the img are there to reserve space before CSS loads, but they
     also map to CSS height as a presentational hint, which would
     otherwise beat aspect-ratio and render each box at the image's
     full intrinsic height. */
  height:auto;
  aspect-ratio:16/10;
  object-fit:contain;
  background:var(--wash);
  border-bottom:1px solid var(--rule);
}

.work .body{padding:1.1rem 1.2rem 1.2rem}

/* Cards still waiting on a screenshot get an icon in a box of
   exactly the same proportions as the real thumbnails, so every
   card in the grid keeps the same shape. Replace the whole
   .placeholder div with an <img class="shot"> as each screenshot
   arrives — no other change is needed. */
.work .placeholder{
  display:grid;
  place-items:center;
  aspect-ratio:16/10;
  background:var(--wash);
  border-bottom:1px solid var(--rule);
}
.work .placeholder .ico{
  font-size:2.7rem;
  margin:0;
  opacity:.5;
}

/* Award panel, in the slot a screenshot would occupy.
   Set as type rather than as the HSJ Awards logo — that mark
   belongs to the Health Service Journal and is not ours to
   publish. Naming the award is a statement of fact and needs
   no licence.

   The attribution line is part of the panel by design. The award
   went to NHS London; Argyle IT built the system behind it. Left
   to the paragraph below, that distinction is easy to read past,
   and this is exactly the claim a sceptical reader checks. */
.work .award{
  align-content:center;
  text-align:center;
  padding:1.2rem;
}
.work .award .ico{
  font-size:1.9rem;
  opacity:1;
  margin-bottom:.55rem;
}
.award-eyebrow{
  margin:0;
  font-size:.68rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--primary);
}
.award-title{
  margin:.1rem 0 0;
  font-size:1.45rem;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--ink);
  line-height:1.1;
}
.award-attr{
  margin:.75rem auto 0;
  max-width:28ch;
  font-size:.74rem;
  line-height:1.45;
  color:var(--muted);
}

.work h3{margin-bottom:.35rem}
.work p{font-size:.93rem;color:var(--muted)}


/* ---------- 9. Service grid ------------------------------
   auto-fit + minmax reflows from three columns to one as the
   screen narrows, without any media queries.
   --------------------------------------------------------- */

.grid{
  display:grid;
  gap:1.7rem 2.2rem;
  grid-template-columns:repeat(auto-fit,minmax(235px,1fr));
  margin-top:2.1rem;
}

.item h3{margin-bottom:.35rem}
.item p{color:var(--muted);font-size:.93rem}


/* ---------- 9b. How we work -----------------------------
   Three statements of approach, sitting under the capability
   grid, each with its own icon in the same treatment as the
   grid above.
   --------------------------------------------------------- */

.approach{
  margin-top:2.6rem;
  padding-top:2rem;
  border-top:1px solid var(--rule);
  display:grid;
  gap:1.6rem 2.2rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.approach h3{margin-bottom:.4rem}
.approach p{color:var(--muted);font-size:.93rem}


/* ---------- 10. Team ------------------------------------
   230px minimum with a 2.6rem gap only ever fitted three
   columns inside the container, which left the fourth person
   stranded on a row alone. 200px with a tighter gap fits all
   four across.
   --------------------------------------------------------- */

.team{
  display:grid;
  gap:1.7rem 1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  margin-top:2.1rem;
}

.person h3{margin-bottom:.15rem}

/* Existing photographs, reused from img/landing/.
   These are 128px originals displayed at up to 180px, so they
   are being upscaled. Replace with larger files when available. */
.person .photo{
  display:block;
  width:100%;
  max-width:180px;
  height:auto;          /* see the note on .work .shot */
  aspect-ratio:1/1;
  object-fit:cover;
  border:1px solid var(--rule);
  background:var(--paper);
  margin-bottom:.85rem;
}

.person .role{
  font-size:.8rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--primary);
  font-weight:600;
  margin:0 0 .45rem;
}
.person p{font-size:.92rem;color:var(--muted)}


/* ---------- 11. Contact details -------------------------- */

.details{
  margin:1.9rem 0 0;
  font-size:.94rem;
  line-height:1.85;
}
.details dt{
  font-weight:600;
  float:left;
  clear:left;
  width:12.5rem;
  color:var(--ink);
}
.details dd{margin:0 0 0 12.5rem;color:var(--muted)}


/* ---------- 12. Assurance strip -------------------------
   Formerly a full panel high on the page. Demoted to a single
   compact band above the footer: still verifiable by anyone
   running a supplier check, no longer the loudest thing on the
   homepage.
   --------------------------------------------------------- */

.assurance{
  padding:1.7rem 0;
  background:var(--wash);
  border-bottom:1px solid var(--rule);
  font-size:.86rem;
}
.assurance dl{
  margin:0;
  display:grid;
  gap:.7rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.assurance dt{
  font-weight:700;
  color:var(--ink);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.assurance dd{margin:.1rem 0 0;color:var(--muted)}

.assurance-note{
  margin:1.3rem 0 0;
  font-size:.84rem;
  color:var(--muted);
  max-width:var(--measure);
}

/* Monospace for reference numbers so digits align and are
   easy to transcribe accurately. */
.ref{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em;
  color:var(--ink);
}


/* ---------- 13. Document pages (privacy, accessibility) --- */

main.document{padding:2.8rem 0 3.2rem}
.doc{max-width:var(--measure)}
.doc h2{font-size:1.2rem;margin:2.5rem 0 .8rem}
.doc h3{font-size:1rem;font-weight:600;margin:1.5rem 0 .4rem}

.updated{
  font-size:.87rem;
  color:var(--muted);
  margin-top:.9rem;
  padding-bottom:1.3rem;
  border-bottom:1px solid var(--rule);
}

table{
  border-collapse:collapse;
  width:100%;
  font-size:.93rem;
  margin:0 0 1.2rem;
}
caption{text-align:left;font-weight:600;padding-bottom:.5rem;font-size:.94rem}
th,td{
  text-align:left;
  vertical-align:top;
  padding:.7rem .9rem;
  border:1px solid var(--rule);
}
th{background:var(--wash);font-weight:600}

.callout{
  background:var(--wash);
  border-left:3px solid var(--accent);
  padding:1.1rem 1.3rem;
  margin:1.4rem 0;
}
.callout p:last-child{margin-bottom:0}


/* ---------- 14. Footer ----------------------------------- */

footer{
  padding:2rem 0 2.8rem;
  font-size:.85rem;
  color:var(--muted);
}
footer ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:1.3rem;
  margin:0 0 .9rem;
  padding:0;
}


/* ---------- 15. Wider screens ---------------------------
   The large hero images are requested here and nowhere else,
   so phones are never asked to download them.
   --------------------------------------------------------- */

@media (min-width:900px){
  .slide.one{background-image:url('img/landing/header_one_lg.jpg')}
  .slide.two{background-image:url('img/landing/header_two_lg.jpg')}
}

/* Four people in an auto-fit grid land on three columns between
   roughly 560px and 925px, which strands the fourth alone on a
   second row. Two-by-two is tidier through that band. Above it
   there is room for all four across. */
@media (min-width:561px) and (max-width:924px){
  .team{grid-template-columns:repeat(2,1fr)}
}


/* ---------- 16. Small screens ---------------------------- */

@media (max-width:560px){
  body{font-size:16px}

  /* The nav wraps onto a second row on a phone. Without this the
     header alone ate roughly a third of the screen before the
     hero began. Links keep a comfortable target size — well
     above the 24px WCAG 2.5.8 minimum. */
  .masthead{padding:1rem 0 .5rem}
  .masthead .wrap{gap:.3rem 1rem}
  .navlist{gap:0 1.2rem}
  .navlist a{padding:.55rem 0}
  .wordmark{font-size:1.12rem;gap:.45rem}
  .wordmark .mark{width:34px;height:34px}

  /* Contact list: stack instead of two columns */
  .details dt{float:none;width:auto}
  .details dd{margin-left:0;margin-bottom:.7rem}

  /* Give the slide text room and keep the dots clear of it */
  .slide{min-height:clamp(300px,64vh,420px)}
  .slide .wrap{padding-bottom:4rem}
  .slide p{font-size:.97rem}

  /* Team photographs are centred and smaller once stacked */
  .person .photo{max-width:150px}

  section{padding:2.6rem 0}
}


/* ---------- 17. Reduced motion --------------------------- */
/* There is no animation on this site, but this honours the
   visitor's operating system preference if any is ever added,
   and stops the dot links smooth-scrolling for anyone who has
   asked for less movement. */

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