/* ==========================================================================
   mikelondon.me.uk — shared front-end stylesheet
   Consolidated from the per-page <style> blocks that previously duplicated
   the @font-face, reset, base and keyframe rules across every HTML file.

   Per-page customisation is driven by two CSS custom properties, set in a
   small <style> block on each page:
     --accent : the page/case-study accent colour (links, selection, CTA hover)
     --bg     : the page background colour
   ========================================================================== */

/* ---- Web fonts --------------------------------------------------------- */
@font-face{font-family:'titilliumthin';src:url('../fonts/titillium-thin-webfont.woff2') format('woff2'),url('../fonts/titillium-thin-webfont.woff') format('woff');font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:'titilliumlight';src:url('../fonts/titillium-light-webfont.woff') format('woff');font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:'titilliumregular';src:url('../fonts/titillium-regular-webfont.woff2') format('woff2'),url('../fonts/titillium-regular-webfont.woff') format('woff');font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:'titilliumbold';src:url('../fonts/titillium-bold-webfont.woff2') format('woff2'),url('../fonts/titillium-bold-webfont.woff') format('woff');font-weight:normal;font-style:normal;font-display:swap;}

/* ---- Theme defaults (overridden per page) ------------------------------ */
:root{
  --accent:#ed2224;
  --bg:#fff;
}

/* ---- Reset / base ------------------------------------------------------ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'titilliumthin',sans-serif;
  background:var(--bg);
  color:#314659;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:#374e61;text-decoration:none;}
a:hover{color:var(--accent);}
::selection{background:var(--accent);color:#fff;}

/* ---- Keyframes (union of all pages) ------------------------------------ */
@keyframes wordUp{from{opacity:0;transform:translateY(115%) rotate(2deg);}to{opacity:1;transform:none;}}
@keyframes blobFloat{0%{transform:translate(0,0) scale(1);}50%{transform:translate(4%,-6%) scale(1.08);}100%{transform:translate(0,0) scale(1);}}
@keyframes cueDrift{0%,100%{transform:translateY(0);opacity:.35;}50%{transform:translateY(9px);opacity:1;}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes overlayTitleUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:none;}}
@keyframes lozengePulse{0%{opacity:1;}50%{opacity:0.3;}100%{opacity:1;}}

/* ---- Lozenge CTA ------------------------------------------------------- */
.lozenge-cta span.lozenge-label{color:#374e61;}
.lozenge-cta .lozenge-dot{background:#374e61;}
.lozenge-cta span.lozenge-label,
.lozenge-cta .lozenge-shell,
.lozenge-cta .lozenge-dot{
  transition:color .3s ease,border-color .3s ease,background .3s ease;
}
.lozenge-cta:hover .lozenge-label{color:var(--accent) !important;}
.lozenge-cta:hover .lozenge-shell{border-color:var(--accent) !important;}
.lozenge-cta:hover .lozenge-dot{background:var(--accent) !important;}

/* ---- Shared nav chrome (identical across all pages) --------------------
   Only the static properties live here. The runtime still sets the dynamic
   ones inline (nav background/shadow/blur on scroll, link colour, and the
   show/hide of links vs burger on mobile), which override these as intended. */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(14px,2.2vw,24px) clamp(20px,4vw,64px);
  transition:background .5s ease,box-shadow .5s ease;
}
.nav-logo{display:flex;align-items:center;line-height:0;}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.6vw,40px);}
.nav-link{
  font-family:'titilliumlight',sans-serif;
  font-size:clamp(15px,1.1vw,18px);
  letter-spacing:.03em;
}
.nav-burger{
  display:none;flex-direction:column;gap:5px;
  background:none;border:0;cursor:pointer;padding:8px;
}
.burger-bar{
  display:block;width:26px;height:2px;background:#374e61;
  transition:transform .35s ease,opacity .3s ease;
}

/* ---- Shared footer (case + about/brands/contact pages) ----------------- */
.site-footer{
  background:#2B3947;
  padding:clamp(40px,7vh,72px) clamp(24px,6vw,80px);
}