/* ==========================================================================
   Correct Tech Solutions Ltd
   One stylesheet, no build step, no framework.

   1. Tokens
   2. Reset and base
   3. Layout
   4. Typography
   5. Masthead and navigation
   6. Buttons and links
   7. Page sections
   8. Components
   9. Forms
  10. Footer and consent
  11. Responsive
  12. Print and reduced motion
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */

:root{
  /* Colour. Navy carries the text; the only other hues are neutral greys. */
  --navy:#102B4C;
  --navy-deep:#0B1F38;        /* hover state for navy surfaces */
  --paper:#FFFFFF;
  --surface:#F5F6F7;
  --muted:#5A6472;            /* supporting text: 6.1:1 on white */
  --muted-on-navy:rgba(255,255,255,.78);
  --line:#E3E6EA;             /* hairlines and field borders */
  --line-firm:#C8CDD4;        /* borders that must be seen against grey */
  --focus:#1F5FB0;            /* focus ring only; never decorative */

  /* Measure and rhythm */
  --shell:1280px;
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --band-y:clamp(3.5rem,6vw,5.5rem);
  --gap:clamp(1.75rem,3vw,3rem);

  /* Type. One family, with a system stack behind it. */
  --sans:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-h1:clamp(2.125rem,1.45rem + 2.55vw,3.5rem);   /* 34 -> 56px */
  --f-h2:clamp(1.5rem,1.2rem + 1.1vw,2.125rem);     /* 24 -> 34px */
  --f-h3:clamp(1.125rem,1.06rem + 0.25vw,1.25rem);  /* 18 -> 20px */
  --f-lede:clamp(1.0625rem,1rem + 0.35vw,1.25rem);  /* 17 -> 20px */
  --f-body:1.0625rem;
  --f-small:0.9375rem;
}

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

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--navy);
  font-family:var(--sans);
  font-size:var(--f-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

a{color:var(--navy);text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:1px;text-decoration-color:var(--line-firm)}
a:hover{text-decoration-color:currentColor}

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

.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;
  padding:.75rem 1.25rem;text-decoration:none;z-index:50}
.skip:focus{left:0}

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

/* Sticky masthead: anchored sections must not hide beneath it. */
[id]{scroll-margin-top:92px}

/* --------------------------------------------------------------- 3. Layout */

.shell{max-width:var(--shell);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.measure{max-width:46rem}

/* `.shell.measure` must not narrow the shell itself. The shell is centred, so
   shrinking it to the measure pulls the text inwards and leaves it out of line
   with the full-width sections above and below it. Cap the children instead,
   and the left edge stays on the page gutter like everything else. */
.shell.measure{max-width:var(--shell)}
.shell.measure>*{max-width:46rem}

/* ----------------------------------------------------------- 4. Typography */

h1,h2,h3{margin:0 0 .6em;font-weight:600;letter-spacing:-.015em;line-height:1.18}
h1{font-size:var(--f-h1);letter-spacing:-.022em}
h2{font-size:var(--f-h2)}
h3{font-size:var(--f-h3);line-height:1.35;letter-spacing:-.01em}

.eyebrow{font-size:.8125rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:0 0 1.4rem}
.standfirst{font-size:var(--f-lede);font-weight:500;color:var(--navy);margin:0 0 1rem;max-width:34ch}
.lede{font-size:var(--f-lede);color:var(--navy);max-width:40rem}
.hint,.formstatus,.aside-note,.privacy,.ref__link,.shot figcaption{font-size:var(--f-small)}
.aside-note{color:var(--muted);border-top:1px solid var(--line);padding-top:1rem;margin-top:1.75rem}

/* --------------------------------------------- 5. Masthead and navigation */

.masthead{position:sticky;top:0;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--line)}
.masthead__inner{display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;min-height:72px}

.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--navy)}
.mark{width:auto;height:17px;flex:none}
.brand__name{font-size:.9375rem;font-weight:600;letter-spacing:.005em;white-space:nowrap}

.nav ul{display:flex;align-items:center;gap:clamp(1rem,2.1vw,2rem)}
.nav a{font-size:.9375rem;color:var(--muted);text-decoration:none;padding:.35rem 0;
  border-bottom:2px solid transparent;display:inline-block}
.nav a:hover{color:var(--navy)}
.nav a.is-current{color:var(--navy);font-weight:500;border-bottom-color:var(--navy)}

.navtoggle{display:none;align-items:center;gap:.55rem;background:none;border:1px solid var(--line-firm);
  color:var(--navy);font:inherit;font-size:.875rem;padding:.45rem .8rem;cursor:pointer}
.navtoggle__bars{width:16px;height:9px;border-top:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;display:block}

/* ------------------------------------------------------ 6. Buttons, links */

.btn{display:inline-block;font:inherit;font-size:.9375rem;font-weight:500;line-height:1.2;
  padding:.85rem 1.6rem;border:1px solid var(--navy);background:var(--navy);color:#fff;
  text-decoration:none;cursor:pointer;border-radius:2px}
.btn:hover{background:var(--navy-deep);border-color:var(--navy-deep)}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--line-firm)}
.btn--ghost:hover{background:transparent;border-color:var(--navy)}
.btn--light{background:#fff;border-color:#fff;color:var(--navy)}
.btn--light:hover{background:#E8ECF1;border-color:#E8ECF1}
.btn--sm{padding:.5rem 1rem;font-size:.875rem}
.btn[disabled]{opacity:.55;cursor:not-allowed}

.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}
.linkish{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:.18em}

/* ------------------------------------------------------ 7. Page sections */

.hero{padding:clamp(3.25rem,5.5vw,5rem) 0 clamp(2.75rem,4.5vw,4rem)}
.hero .shell>*{max-width:46rem}
.hero h1{margin-bottom:.45em}
.hero .lede{margin-bottom:1.1em}

.band{padding:var(--band-y) 0;border-top:1px solid var(--line)}
.band--surface{background:var(--surface)}
.band--navy{background:var(--navy);color:#fff;border-top:0}
.band--navy h2{color:#fff}
.band--navy p{color:var(--muted-on-navy)}
.band__h{margin-bottom:2.25rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.band--surface .band__h{border-bottom-color:var(--line-firm)}

/* ---------------------------------------------------------- 8. Components */

/* Three equal areas. No icons: the heading carries the meaning. */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.trio>li{position:relative;border-top:2px solid var(--navy);padding-top:1.2rem;cursor:pointer}
.trio h3{margin-bottom:.5rem}
.trio h3 a{text-decoration:none}
.trio p{color:var(--muted);margin:0}

/* The whole block is the target, not just the heading. The anchor stays on the
   heading, so its accessible name is still the service it leads to; this only
   stretches its hit area over the block. */
.trio h3 a::after{content:"";position:absolute;inset:0}
.trio>li:hover h3 a,.trio h3 a:focus-visible{text-decoration:underline;
  text-underline-offset:.18em;text-decoration-thickness:1px}
.trio h3 a:focus-visible{outline:none}
.trio>li:has(a:focus-visible){outline:2px solid var(--focus);outline-offset:6px}

.prose-2{columns:2;column-gap:var(--gap);max-width:64rem}
.prose-2 p{break-inside:avoid}

.caps{display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--gap)}
.caps>li{border-top:1px solid var(--line-firm);padding:1.4rem 0}
.caps h3{margin-bottom:.35rem}
.caps p{color:var(--muted);margin:0;max-width:34rem}

.pair{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}

.ref{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);
  align-items:center;padding:2.5rem 0;border-top:1px solid var(--line)}
.ref:first-of-type{border-top:0;padding-top:0}
.ref--flip .shot{order:2}
.shot{margin:0}
.shot img{width:100%;background:var(--surface);border:1px solid var(--line)}
.shot figcaption{color:var(--muted);margin-top:.7rem}
.ref__body h3{margin-bottom:.7rem}
.ref__body p{color:var(--muted)}
.ref__link a{color:var(--navy)}

/* Legal pages: long prose, so the rhythm is looser and the headings smaller
   than a marketing section's. */
.legal h2{font-size:1.25rem;margin:2.75rem 0 .7em;padding-top:1.5rem;border-top:1px solid var(--line-firm)}
.legal>h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal .plain{margin:0 0 1.1em;padding-left:1.1rem;list-style:disc}
.legal .plain li{margin-bottom:.35rem}
.legal code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.875em;
  background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:.1em .35em}
.updated{font-size:var(--f-small);color:var(--muted);margin-top:1.25rem}

.tbl{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:var(--f-small);
  background:var(--paper);border:1px solid var(--line)}
.tbl th,.tbl td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--line);
  vertical-align:top}
.tbl th{font-weight:600;background:var(--grey-head,transparent);border-bottom:1px solid var(--line-firm)}
.tbl tr:last-child td{border-bottom:0}

.foot__legal{display:flex;flex-wrap:wrap;gap:1.25rem}
.foot__legal a{color:var(--muted);text-decoration:none}
.foot__legal a:hover,.foot__legal .linkish:hover{color:var(--navy)}
.foot__legal .linkish{color:var(--muted);text-decoration:none}

.ruled{border-top:1px solid var(--line);margin-top:1.75rem}
.ruled li{border-bottom:1px solid var(--line)}
.ruled a{display:block;padding:.85rem 0;text-decoration:none}
.ruled a:hover{text-decoration:underline;text-underline-offset:.18em}

/* ------------------------------------------------------------- 9. Forms */

.contact{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(2rem,5vw,4.5rem)}
.contact__form{background:var(--paper);border:1px solid var(--line);padding:clamp(1.5rem,3vw,2.5rem)}

.field{margin-bottom:1.35rem}
.field label{display:block;font-size:var(--f-small);font-weight:500;margin-bottom:.4rem}
.req{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:var(--f-body);color:var(--navy);background:var(--paper);
  border:1px solid var(--line-firm);border-radius:2px;padding:.7rem .85rem}
.field textarea{resize:vertical;min-height:9rem}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy)}
.field .hint{color:var(--muted);margin:.4rem 0 0}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:#A3231F;border-width:2px}
.err{color:#A3231F;font-size:var(--f-small);margin:.4rem 0 0;font-weight:500}

/* A field people never see. Bots fill every input; a value here is dropped. */
.nothing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.privacy{color:var(--muted);border-top:1px solid var(--line);padding-top:1.1rem;margin-top:1.75rem}
.formstatus{margin-top:.9rem;color:#A3231F;font-weight:500}
.formstatus:empty{margin-top:0}
.formdone:focus{outline:none}
.formdone h2{font-size:var(--f-h3);margin-bottom:.5em}
.formdone p{color:var(--muted);margin:0}

.contact__aside .aside__h{font-size:.8125rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin:2rem 0 .5rem}
.contact__aside .aside__h:first-child{margin-top:0}
.contact__aside p{margin-bottom:0}

/* ------------------------------------------------ 10. Footer and consent */

.foot{border-top:1px solid var(--line);padding:clamp(2.75rem,4.5vw,4rem) 0 0;font-size:var(--f-small)}
.foot__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:var(--gap)}
.mark--foot{height:15px;margin-bottom:1rem}
.foot__company{font-weight:600;margin:0 0 .25rem}
.foot__addr{color:var(--muted);margin:0;max-width:18rem}
.foot__h{font-size:.8125rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .75rem}
.foot__col li{margin-bottom:.5rem}
.foot__col a{color:var(--navy);text-decoration:none}
.foot__col a:hover{text-decoration:underline;text-underline-offset:.18em}
.foot__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  margin-top:clamp(2.25rem,4vw,3rem);padding-top:1.25rem;padding-bottom:1.75rem;
  border-top:1px solid var(--line);color:var(--muted)}
.foot__base p{margin:0}

.consent{position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--navy);color:#fff}
.consent__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem;padding-top:1rem;padding-bottom:1rem}
.consent p{margin:0;max-width:62ch;font-size:var(--f-small);color:var(--muted-on-navy)}
.consent a{color:#fff}
.consent__actions{display:flex;gap:.6rem}
.consent .btn--ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.consent .btn--ghost:hover{border-color:#fff}

/* ----------------------------------------------------------- 11. Responsive */

@media (max-width:960px){
  .trio{grid-template-columns:1fr}
  .caps{grid-template-columns:1fr}
  .pair{grid-template-columns:1fr}
  .prose-2{columns:1}
  .contact{grid-template-columns:1fr}
  .ref{grid-template-columns:1fr;gap:1.5rem}
  .ref--flip .shot{order:0}
  .foot__grid{grid-template-columns:1fr 1fr}
}

@media (max-width:800px){
  .navtoggle{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);
    border-bottom:1px solid var(--line);box-shadow:0 12px 24px -18px rgba(16,43,76,.4)}
  .nav.is-open{display:block}
  .masthead__inner{position:relative}
  .nav ul{display:block;padding:.5rem var(--gutter) 1rem}
  .nav li{border-top:1px solid var(--line)}
  .nav li:first-child{border-top:0}
  .nav a{display:block;padding:.9rem 0;border-bottom:0;font-size:1rem}
  .nav a.is-current{box-shadow:inset 3px 0 0 var(--navy);padding-left:.7rem}
}

@media (max-width:560px){
  .foot__grid{grid-template-columns:1fr;gap:2rem}
  .actions .btn{width:100%;text-align:center}
  .consent__inner{align-items:flex-start}
  .consent__actions{width:100%}
  .consent__actions .btn{flex:1;text-align:center}
}

/* ------------------------------------------------ 12. Print, reduced motion */

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

@media print{
  .masthead,.consent,.actions,.navtoggle,.skip{display:none}
  body{color:#000}
  .band{border-top:0;padding:1rem 0}
  a{text-decoration:none}
}