/* Morson Group public site — hand-written, no framework.
   Tokens from handoff/mg-seo-package/design/README.md and docs/COMPLIANCE.md §7.
   Brand red/blue/green are for dots, underlines and tints only; text uses
   the -text shades. */

@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-variable.fdf9c509a809.woff2") format("woff2-variations"),
       url("../fonts/outfit-variable.fdf9c509a809.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #232321;
  --grey-1: #4A4A46;
  --grey-2: #6B6B66;
  --grey-3: #9A9994;
  --grey-4: #B9B8B3;
  --grey-5: #CFCEC9;
  --grey-6: #D8D7D2;
  --grey-7: #E6E5E1;
  --input-border: #8A8984;
  --red: #E94335;
  --blue: #4688F4;
  --green: #34A853;
  --red-text: #D0392B;
  --blue-text: #2F6FD8;
  --green-text: #288244;
  --ink-text: #232321;        /* the "text-safe" shade of ink is ink itself */
  --white: #FFFFFF;

  --font: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-h1: clamp(48px, 5.6vw, 80px);
  --fs-section: 44px;          /* 28px on mobile */
  --fs-body: 17px;
  --fs-label: 12px;            /* 10–11px on mobile */
  --ls-label: .12em;

  --ease: cubic-bezier(.6, 0, .2, 1);
  --dur: .45s;

  --container: 1360px;
  --gutter: 40px;              /* 20px on mobile */
}

@media (max-width: 719px) {
  :root {
    --fs-section: 28px;
    --fs-label: 11px;
    --gutter: 20px;
  }
}

/* ---- reset-ish ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, dl, dd, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
:focus:not(:focus-visible) { outline: none; }

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

/* ---- utilities ---------------------------------------------------------- */
.container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.u-desktop { display: inline; }
.u-mobile { display: none; }
@media (max-width: 719px) {
  .u-desktop { display: none; }
  .u-mobile { display: inline; }
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  padding: 12px 20px; background: var(--ink); color: var(--white); font-weight: 500;
}
.skip-link:focus { top: 12px; }

.label {
  font-size: var(--fs-label); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-label);
  color: var(--grey-2);
}
.fs-section { font-size: var(--fs-section); font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.h1 { font-size: var(--fs-h1); font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.body-copy { font-size: var(--fs-body); font-weight: 300; line-height: 1.65; color: var(--grey-1); max-width: 640px; }
.body-copy p + p { margin-top: 1.6em; }
.body-copy b, .body-copy strong { font-weight: 500; color: var(--ink); }

/* Colour dots: brand colours, decorative (aria-hidden). */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); vertical-align: middle; flex: none; }
.dot--red { background: var(--red); }
.dot--blue { background: var(--blue); }
.dot--green { background: var(--green); }
.dot--ink { background: var(--ink); }

/* The four logo dots: 2×2, gap ≈ 5% of a dot's diameter so they nearly touch. */
.dots { display: grid; grid-template-columns: 1fr 1fr; gap: 5%; width: 41px; height: 41px; }
.dots span { border-radius: 50%; }
.dots span:nth-child(1) { background: var(--red); }
.dots span:nth-child(2) { background: var(--blue); }
.dots span:nth-child(3) { background: var(--ink); }
.dots span:nth-child(4) { background: var(--green); }
.dots--onDark span:nth-child(3) { background: var(--white); }
@media (max-width: 719px) { .dots { width: 25px; height: 25px; } }

/* Placeholder image block: the photo is not in yet. Keeps the design's
   aspect ratio and says which photo belongs there. */
.ph {
  position: relative; background: var(--grey-6); color: var(--grey-2); overflow: hidden;
  display: flex; align-items: flex-end; width: 100%;
}
.ph::before { content: ""; display: block; width: 100%; aspect-ratio: var(--ar, 16 / 9); }
.ph > span {
  position: absolute; left: 12px; bottom: 10px; right: 12px;
  font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3;
}
.ph--round { border-radius: 50%; }
.ph--round::before { aspect-ratio: 1; }
.ph--round > span { left: 18%; right: 18%; bottom: 40%; text-align: center; }

/* ---- header ------------------------------------------------------------- */
/* On Home the header starts transparent over the hero; on every other page
   the bar is always white. Once the page scrolls: the 1px ink rule fades in
   quickly, the bar animates to half its height, and (Home) the background
   fades to white. All of it reverts at the top.
   Over the Home hero the text and logo also swap from white to ink.

   The <header> keeps a FIXED height in the page flow (--header-h) and only
   the inner bar shrinks. If the header itself shrank, everything below it
   would move up, the scroll position would fall back under the threshold
   and the header would grow again: a flicker loop near the top. The space
   under a shrunk bar is transparent and lets clicks through. */
:root { --header-h: 105px; }  /* 104px row + 1px rule */
.site-header { position: relative; z-index: 20; height: var(--header-h); pointer-events: none; }
.site-header__bar { pointer-events: auto; background: transparent; border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color .18s ease; }
.site-header__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 104px; transition: min-height var(--dur) var(--ease); }
.site-header.is-scrolled .site-header__bar { background: var(--white); border-bottom-color: var(--ink); }
/* Every page but Home: the bar is white from the start (only Home sits over a photo). */
.site-header:not(.site-header--hero) .site-header__bar { background: var(--white); }
.site-header.is-scrolled .site-header__row { min-height: 52px; }
.site-header--hero { color: var(--white); margin-bottom: calc(-1 * var(--header-h)); transition: color var(--dur) var(--ease); }
.site-header--hero .logo-dark { display: none; }
.site-header--hero.is-scrolled { color: var(--ink); }
.site-header--hero.is-scrolled .logo-light { display: none; }
.site-header--hero.is-scrolled .logo-dark { display: block; }
.site-header--hero.is-scrolled .icon-btn { border-color: var(--grey-5); color: var(--ink); }
.site-header--hero.is-scrolled .icon-btn--solid { background: var(--ink); color: var(--white); border-color: var(--ink); }
@media (min-width: 900px) {
  .site-header { position: sticky; top: 0; }
}
.site-header__brand { display: flex; align-items: center; gap: 12px; }
/* The header wordmark: the same size on every page (the colour file is
   cropped tight like the white one, img/morson-group-wordmark.png), and it
   shrinks with the bar on scroll, in step with it. */
.site-header__brand img { height: 41px; width: auto; transition: height var(--dur) var(--ease); }
.site-header.is-scrolled .site-header__brand img { height: 30px; }
@media (max-width: 719px) {
  :root { --header-h: 73px; }  /* 72px row + 1px rule */
  .site-header__row { min-height: 72px; }
  .site-header.is-scrolled .site-header__row { min-height: 52px; }  /* the 44px buttons need it */
  .site-header__brand { gap: 8px; }
  .site-header__brand img { height: 28px; }
  .site-header.is-scrolled .site-header__brand img { height: 22px; }
}
/* Case study, Projects, Services and Contact pages (body.header-compact): the slim scrolled bar from the
   start, at every width - half height, the smaller logo and the ink rule.
   --header-h follows, so no gap is left under the bar and the mobile menu's
   top row still lines up with it. */
.header-compact { --header-h: 53px; }  /* 52px row + 1px rule */
.header-compact .site-header__bar { border-bottom-color: var(--ink); }
.header-compact .site-header__row,
.header-compact .site-header.is-scrolled .site-header__row { min-height: 52px; }
.header-compact .site-header__brand img { height: 30px; }
.header-compact .menu__top img { height: 30px; }
@media (max-width: 719px) {
  .header-compact .site-header__brand img,
  .header-compact .menu__top img { height: 22px; }
}
.site-nav { display: flex; align-items: center; gap: 36px; font-size: 16px; font-weight: 400; }
.site-nav a { position: relative; padding: 6px 0; }
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease);
}
.site-nav a:hover::after, .site-nav a:focus-visible::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav__phone { padding-left: 12px; }
.site-nav__phone::after { display: none; }
.site-header__mobile { display: none; align-items: center; gap: 12px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--grey-5); color: var(--ink);
}
.icon-btn--solid { background: var(--ink); color: var(--white); border-color: var(--ink); }
.site-header--hero .icon-btn { border-color: rgba(255,255,255,.6); color: var(--white); }
.site-header--hero .icon-btn--solid { background: transparent; }
@media (max-width: 899px) {
  .site-nav { display: none; }
  .site-header__mobile { display: flex; }
}

/* Mobile menu overlay */
/* The top row mirrors the header row at rest - its height (--header-h less
   the 1px rule: 104px, or 72px on a phone), the gutter at the sides, the
   logo's size - so the logo, phone and X land exactly where the logo, phone
   and burger were. Below 900px, where the burger shows, the header is not
   sticky: it is pressed with the page at the top, so the slimmer scrolled
   bar never needs matching. */
.menu { position: fixed; inset: 0; z-index: 50; background: var(--ink); color: var(--white); padding: 0 var(--gutter) 20px; display: none; flex-direction: column; }
.menu[data-open="true"] { display: flex; }
.menu__top { display: flex; align-items: center; justify-content: space-between; min-height: calc(var(--header-h) - 1px); }
.menu__top img { height: 41px; width: auto; }
@media (max-width: 719px) {
  .menu__top img { height: 28px; }
}
.menu__actions { display: flex; align-items: center; gap: 12px; }
.icon-btn--on-dark { border-color: rgba(255,255,255,.6); color: var(--white); }
.menu__links { margin-top: 40px; display: grid; gap: 18px; font-size: 32px; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.menu__foot { margin-top: auto; display: grid; gap: 14px; font-size: 20px; }
.menu .dots { width: 14px; height: 14px; }
body[data-menu-open="true"] { overflow: hidden; }

/* ---- footer ------------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--white); }
.site-footer__main { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; padding: 120px 0 48px; }
.site-footer__h2 { font-size: 40px; font-weight: 500; line-height: 1.05; letter-spacing: -.03em; margin-top: 20px; }
.site-footer .label { color: var(--grey-4); display: inline-flex; align-items: center; gap: 10px; }
.fbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; margin-top: 28px; border-radius: 999px;
  background: var(--white); color: var(--ink); border: 1px solid var(--white); font-size: 12px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.fbtn .arrow { display: inline-block; transition: transform var(--dur) var(--ease); }
.fbtn:hover, .fbtn:focus-visible { background: transparent; color: var(--white); }
.fbtn:hover .arrow, .fbtn:focus-visible .arrow { transform: translateX(4px); }
.site-footer__dl { display: grid; grid-template-columns: 112px 1fr; row-gap: 28px; column-gap: 16px; align-items: baseline; }
.site-footer__dl dt { font-size: var(--fs-label); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--grey-3); }
.site-footer__dl dd { font-size: 20px; }
.site-footer__dl dd.addr { font-size: 17px; color: var(--grey-7); font-style: normal; }
.site-footer__dl dd a:hover, .site-footer__dl dd a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
/* A rule under each row but the last. It is drawn on the value and pulled
   left under its label (112px column + 16px gap = 128px), so it spans both
   while the label and value keep their shared baseline; padding takes over
   the spacing row-gap gave. */
.site-footer__dl { row-gap: 0; }
.site-footer__dl dt, .site-footer__dl dd { padding: 14px 0; }
.site-footer__dl dd { margin-left: -128px; padding-left: 128px; border-bottom: 1px solid rgba(255,255,255,.2); }
.site-footer__dl dt:first-of-type, .site-footer__dl dd:first-of-type { padding-top: 0; }
.site-footer__dl dd:last-of-type { border-bottom: 0; padding-bottom: 0; }
.soc { display: flex; gap: 12px; }
.soc a {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid var(--white); color: var(--white); font-size: 15px; font-weight: 500;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.soc a:hover, .soc a:focus-visible { background: var(--white); color: var(--ink); }
.soc a::after {
  content: attr(data-name); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-4); white-space: nowrap;
  opacity: 0; transition: opacity var(--dur) var(--ease); pointer-events: none;
}
.soc a:hover::after, .soc a:focus-visible::after { opacity: 1; }
.soc svg { width: 16px; height: 16px; }
.site-footer__band { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 0; border-top: 1px solid rgba(255,255,255,.12); }
.site-footer--compact .site-footer__band { border-top: 0; }
.site-footer__band img { height: 32px; width: auto; }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-4); }
.footer-legal a { padding: 8px 0; color: var(--grey-4); }
.footer-legal a:hover, .footer-legal a:focus-visible { color: var(--white); }
@media (max-width: 719px) {
  .site-footer__main { grid-template-columns: 1fr; gap: 56px; padding: 72px 0 32px; }
  .site-footer__h2 { font-size: 28px; }
  .site-footer__dl { grid-template-columns: 1fr; row-gap: 6px; }
  .site-footer__dl dt { margin-top: 18px; padding: 0; }
  .site-footer__dl dt:first-of-type { margin-top: 0; }
  .site-footer__dl dd { margin-left: 0; padding: 0 0 18px; }
  .site-footer__dl dd:last-of-type { padding-bottom: 0; }
  .site-footer__band { padding: 24px 0; align-items: flex-start; }
  .site-footer__band img { height: 28px; }
  .footer-legal { flex: 1; justify-content: flex-end; text-align: right; font-size: 10px; gap: 0 14px; }
  .footer-legal__reg { width: 100%; text-align: right; }
}

/* ---- inner-page header rule (Projects, Services, Contact) ---------------- */
.page-rule { border-top: 1px solid var(--ink); }

/* ---- legal pages ---------------------------------------------------------- */
.legal-page { max-width: 720px; padding: 32px 0 96px; }
.legal-page h1 { font-size: var(--fs-section); font-weight: 500; line-height: 1; letter-spacing: -.03em; margin-bottom: 12px; }
.legal-page__updated { color: var(--grey-2); font-size: 14px; margin-bottom: 40px; }
.legal-page h2 { font-size: 24px; font-weight: 500; line-height: 1.2; margin: 40px 0 12px; }
.legal-page p, .legal-page li { font-size: 17px; line-height: 1.65; color: var(--grey-1); }
.legal-page p + p, .legal-page ul + p { margin-top: 1em; }
.legal-page ul { list-style: disc; padding-left: 1.2em; }
.legal-page li + li { margin-top: .4em; }
.legal-page strong { font-weight: 500; color: var(--ink); }
.legal-page a { text-decoration: underline; text-underline-offset: .2em; }
.legal-page a:hover, .legal-page a:focus-visible { color: var(--red-text); }

/* ---- analytics consent banner (European visitors only) ------------------- */
.consent[hidden] { display: none; }  /* the class's display:flex must not beat the hidden attribute */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 560px; margin: 0 auto;
  padding: 20px 24px; background: var(--ink); color: var(--white); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.25);
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
}
.consent__text { flex: 1 1 280px; font-size: 14px; line-height: 1.5; color: var(--grey-7); }
.consent__text a { text-decoration: underline; text-underline-offset: .2em; color: var(--white); }
.consent__actions { display: flex; gap: 10px; }
.consent__btn { height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--white); color: var(--white); font-size: 13px; font-weight: 500; letter-spacing: .04em; }
.consent__btn--accept { background: var(--white); color: var(--ink); }
.consent__btn:hover, .consent__btn:focus-visible { background: var(--grey-1); color: var(--white); }
.consent__btn--accept:hover, .consent__btn--accept:focus-visible { background: var(--grey-7); color: var(--ink); }