/* ==========================================================================
   Intelligentized Cyber — brand stylesheet
   Colour discipline follows brand.md: ~60% neutral (cream / charcoal),
   ~30% secondary (amber), ~10% primary (tangerine, reserved for CTAs and
   key highlights). Teal is a contrast note only.
   ========================================================================== */

/* ---------- tokens ---------- */

:root {
  /* brand */
  --tangerine: #f2762e;
  --amber: #f5b942;
  --charcoal: #1a1512;
  --cream: #fff6ec;
  --teal: #2e9c8f;

  /* derived surfaces */
  --cream-sunk: #fbeedd; /* card / section wash */
  --cream-edge: #f3e3cd; /* hairline on cream */
  --amber-wash: #fdf1d8;
  --charcoal-soft: #241d19; /* raised panel on charcoal */

  /* derived ink — darkened so text passes contrast on cream */
  --ink: var(--charcoal);
  --ink-muted: #574c44;
  --ink-faint: #7a6d63;
  --tangerine-ink: #b8500f;
  --teal-ink: #1f6e64;

  /* ink on charcoal */
  --ink-inverse: var(--cream);
  --ink-inverse-muted: #cbbfb4;

  /* type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI",
    system-ui, sans-serif;
  --font-mark: "Oswald", "Arial Narrow", var(--font-sans);

  /* rhythm */
  --measure: 68ch;
  --shell: 1160px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);
  --radius: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(26, 21, 18, 0.05),
    0 4px 14px -6px rgba(26, 21, 18, 0.1);
  --shadow-md: 0 2px 4px rgba(26, 21, 18, 0.06),
    0 18px 40px -22px rgba(26, 21, 18, 0.35);
}

/* ---------- reset ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: clamp(1.0625rem, 0.35vw + 1rem, 1.1875rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "SOFT" 20, "WONK" 0;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--tangerine-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--charcoal);
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

/* ---------- layout primitives ---------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.stack > * + * {
  margin-top: var(--stack-gap, 1.25rem);
}

.eyebrow {
  font-family: var(--font-mark);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tangerine-ink);
  margin: 0;
}

.section-head {
  max-width: 660px;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.section-head h2 {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  margin-top: 0.65rem;
}

.section-head p {
  margin-top: 1rem;
  max-width: 52ch;
  color: var(--ink-muted);
  font-size: 1.0625em;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 100;
  background: var(--charcoal);
  color: var(--cream);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
  color: var(--cream);
}

/* ---------- buttons ---------- */

.btn {
  --btn-bg: var(--tangerine);
  --btn-fg: var(--charcoal);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap; /* a squeezed button should overflow, never wrap */
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(0);
}

.btn .arrow {
  transition: transform 0.18s ease;
}

.btn:hover .arrow {
  transform: translateX(3px);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--charcoal);
  border-color: rgba(26, 21, 18, 0.22);
}

.btn--ghost:hover {
  background: rgba(26, 21, 18, 0.05);
  border-color: rgba(26, 21, 18, 0.4);
}

.btn--on-dark {
  --btn-bg: transparent;
  --btn-fg: var(--cream);
  border-color: rgba(255, 246, 236, 0.32);
}

.btn--on-dark:hover {
  background: rgba(255, 246, 236, 0.08);
  border-color: rgba(255, 246, 236, 0.6);
}

.btn--sm {
  padding: 0.55rem 1.1rem;
  font-size: 0.9375rem;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 246, 236, 0.88);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.site-header[data-scrolled="true"] {
  border-bottom-color: var(--cream-edge);
  box-shadow: 0 6px 24px -18px rgba(26, 21, 18, 0.6);
}

.site-header .shell {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--charcoal);
  margin-right: auto;
}

.brand__mark {
  width: 40px;
  height: 40px;
  flex: none;
}

.brand__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.brand__name {
  font-family: var(--font-mark);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1;
  text-transform: uppercase;
}

.brand__name .dot-ai {
  color: var(--tangerine-ink);
}

.brand__tag {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.site-nav a {
  color: var(--ink-muted);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--charcoal);
}

@media (max-width: 860px) {
  .site-nav {
    display: none;
  }
}

/* On phones the nav collapses, so the header CTA is the only action left —
   keep it and shrink the lockup around it rather than dropping it. */
@media (max-width: 520px) {
  .site-header .shell {
    gap: 0.75rem;
    min-height: 66px;
  }
  .header-cta {
    flex: none; /* never let the lockup squeeze the button */
  }
  .brand__mark {
    width: 34px;
    height: 34px;
  }
  .brand__name {
    font-size: 1rem;
  }
  .brand__tag {
    display: none;
  }
  .header-cta {
    padding: 0.5rem 0.9rem;
    font-size: 0.875rem;
  }
}

/* Below ~400px the full wordmark and the full button label cannot both fit.
   The label shortens to "Book"; aria-label keeps the accessible name intact. */
@media (max-width: 400px) {
  .header-cta .cta-rest {
    display: none;
  }

  /* "AI-native cybersecurity consultancy" overruns a 320px screen by 8px,
     and ~73px of that line is letter-spacing. Easing the tracking keeps the
     positioning line on one row rather than dropping a word from it. */
  .eyebrow {
    letter-spacing: 0.12em;
  }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 7vw, 5.5rem);
}

.hero::before {
  /* Soft amber light, kept low-contrast so it reads as warmth not decoration.
     Starts below the sticky header so the translucent header never clips it
     into a visible horizontal seam. */
  content: "";
  position: absolute;
  inset: 0 -12% auto auto;
  width: min(760px, 74vw);
  aspect-ratio: 1;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(245, 185, 66, 0.42),
    rgba(245, 185, 66, 0) 68%
  );
  pointer-events: none;
}

.hero .shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.15rem);
  margin-top: 1rem;
}

.hero__lede {
  margin-top: 1.5rem;
  max-width: 52ch;
  font-size: 1.15em;
  color: var(--ink-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.25rem;
}

.hero__note {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  color: var(--ink-faint);
}

/* hero panel — plain-language framing card */
.hero__panel {
  background: var(--charcoal);
  color: var(--ink-inverse);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-md);
}

.hero__panel-label {
  font-family: var(--font-mark);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
}

.hero__panel-q {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.25;
  margin-top: 0.85rem;
}

.hero__panel-a {
  margin-top: 0.85rem;
  font-size: 1rem;
  color: var(--ink-inverse-muted);
}

.hero__panel-rule {
  height: 4px;
  width: 52px;
  background: var(--tangerine);
  border-radius: 2px;
  margin-top: 1.5rem;
}

@media (max-width: 900px) {
  .hero .shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- trust strip ---------- */

.trust {
  background: var(--amber-wash);
  border-block: 1px solid var(--cream-edge);
}

.trust .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  padding-block: 1.5rem;
}

.trust__label {
  font-family: var(--font-mark);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
  max-width: 15ch;
}

.trust__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.trust__list li {
  padding: 0.4rem 0.9rem;
  background: var(--cream);
  border: 1px solid var(--cream-edge);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* ---------- plain-terms explainers ---------- */

.plain {
  background: var(--cream);
}

.plain__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.explainer {
  padding-top: 1.5rem;
  border-top: 3px solid var(--amber);
}

.explainer h3 {
  font-size: 1.3rem;
}

.explainer p {
  margin-top: 0.75rem;
  color: var(--ink-muted);
  font-size: 1rem;
}

.explainer p + p {
  margin-top: 0.6rem;
}

.explainer .plain-note {
  color: var(--teal-ink);
  font-weight: 600;
}

/* ---------- pillars ---------- */

.pillars {
  background: var(--cream-sunk);
  border-block: 1px solid var(--cream-edge);
}

.pillars__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1.5rem;
}

.pillar {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--cream-edge);
  border-radius: var(--radius-lg);
  padding: clamp(1.65rem, 2.6vw, 2.15rem);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.pillar__index {
  font-family: var(--font-mark);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
}

.pillar h3 {
  font-size: 1.55rem;
  margin-top: 0.9rem;
}

.pillar > p {
  margin-top: 0.85rem;
  color: var(--ink-muted);
  font-size: 1rem;
}

.pillar__list {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--cream-edge);
  display: grid;
  gap: 0.6rem;
}

.pillar__list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.9375rem;
  color: var(--ink-muted);
}

.pillar__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--tangerine);
}

.badge {
  align-self: flex-start;
  margin-top: 1.25rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-ink);
  background: rgba(46, 156, 143, 0.13);
  border: 1px solid rgba(46, 156, 143, 0.32);
}

/* ---------- closing CTA ---------- */

.cta {
  background: var(--charcoal);
  color: var(--ink-inverse);
  position: relative;
  overflow: hidden;
}

.cta::after {
  content: "";
  position: absolute;
  inset: auto auto -55% -10%;
  width: min(640px, 80vw);
  aspect-ratio: 1;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(242, 118, 46, 0.2),
    rgba(242, 118, 46, 0) 72%
  );
  pointer-events: none;
}

.cta .shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.cta .eyebrow {
  color: var(--amber);
}

.cta h2 {
  font-size: clamp(2rem, 4vw, 3.1rem);
  margin-top: 0.7rem;
}

.cta p {
  margin-top: 1.25rem;
  color: var(--ink-inverse-muted);
  max-width: 46ch;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

.cta__note {
  margin-top: 1.35rem;
  font-size: 0.9375rem;
  color: var(--ink-inverse-muted);
}

/* The global link colour is tuned for the cream background; on the dark CTA
   it does not carry enough contrast, so the phone links use the cream ink. */
.cta__note a {
  color: var(--ink-inverse);
  text-decoration: underline;
}

.cta__note a:hover {
  color: var(--amber);
}

/* A phone number should never break across lines. */
.cta__note a {
  white-space: nowrap;
}

/* Same 44px thumb problem as the footer, but these links sit inline in a
   sentence, so padding them would leave the paragraph's line spacing uneven.
   At the normal 24.75px line height there is no way to reach 44px without an
   invisible hit area straying over the surrounding words — tapping "from
   outside the UK" would start a call. So on touch pointers the rows are opened
   up instead, and each number fills its own row honestly. */
@media (pointer: coarse) {
  .cta__note {
    line-height: 3;
  }

  .cta__note a {
    display: inline-block;
  }
}

.cta__card {
  background: var(--charcoal-soft);
  border: 1px solid rgba(255, 246, 236, 0.12);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
}

.cta__card h3 {
  font-size: 1.15rem;
  color: var(--cream);
}

.cta__card ol {
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.9rem;
  counter-reset: step;
}

.cta__card li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
  font-size: 0.9375rem;
  color: var(--ink-inverse-muted);
}

.cta__card li::before {
  content: counter(step);
  font-family: var(--font-mark);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--amber);
  border: 1px solid rgba(245, 185, 66, 0.4);
  border-radius: 999px;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  align-self: start;
}

@media (max-width: 900px) {
  .cta .shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- footer ---------- */

.site-footer {
  background: var(--cream);
  border-top: 1px solid var(--cream-edge);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  font-size: 0.9375rem;
}

.site-footer .shell {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
  justify-content: space-between;
}

.footer__brand {
  max-width: 38ch;
}

.footer__brand .brand {
  margin-right: 0;
}

.footer__brand p {
  margin-top: 1.25rem;
  color: var(--ink-muted);
}

.footer__links {
  display: flex;
  gap: clamp(2rem, 5vw, 4rem);
  flex-wrap: wrap;
}

.footer__links h4 {
  font-family: var(--font-mark);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.footer__links ul {
  margin-top: 0.85rem;
  display: grid;
  gap: 0.5rem;
}

.footer__links a {
  color: var(--ink-muted);
  text-decoration: none;
  font-weight: 500;
}

.footer__links a:hover {
  color: var(--charcoal);
  text-decoration: underline;
}

/* These are inline links, so their tappable area is only as tall as the line
   box — about 22px, half the 44px that sits reliably under a thumb. The phone
   number especially is meant to be tapped. On touch pointers only, pad each
   link out to 44px and drop the list gap to zero: the targets then sit edge to
   edge without overlapping, and the mouse layout is left exactly as it was. */
@media (pointer: coarse) {
  .footer__links ul {
    gap: 0;
  }

  .footer__links a {
    display: inline-block;
    padding-block: 0.6875rem;
  }
}

.footer__base {
  /* Flex item of .shell — needs an explicit full width or the top rule
     shrink-wraps to the text. */
  width: 100%;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--cream-edge);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  color: var(--ink-faint);
  font-size: 0.875rem;
}

/* ---------- motion ---------- */

@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;
  }
}