/* Breakwater homepage mockups - shared tokens, reset, type and button base.
   Each concept (a.html, b.html, c.html) layers its own layout CSS on top. */
@import url('https://fonts.googleapis.com/css2?family=Sansita+One&family=Jost:wght@400;500;600&family=Lato:wght@700&display=swap');

:root{
  --navy:#002856; --sky:#009ADE; --orange:#EC7700; --orange-text:#C96400;
  --grey:#F3F3F3; --white:#FFFFFF; --ink:#1F2A37; --rule:#E6E6E6; --rule-soft:#CFD6DF;
  --font-display:'Sansita One', Georgia, serif;
  --font-body:'Jost', 'Neutraface Text', Helvetica, Arial, sans-serif;
  --font-button:'Lato', Helvetica, Arial, sans-serif;
  --container:1280px; --gutter:32px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:18px;line-height:1.6;color:var(--ink);background:var(--white)}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:400;color:var(--navy);line-height:1.08;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font-family:var(--font-body);font-weight:500;font-size:14px;letter-spacing:.12em;text-transform:uppercase;line-height:1.3}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:16px 28px;font-family:var(--font-button);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;line-height:1;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s;white-space:nowrap}
.btn:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.btn-sky{background:var(--sky);color:var(--white);border-color:var(--sky)}
.btn-sky:hover{background:#0089c6;border-color:#0089c6}
.btn-navy{background:var(--navy);color:var(--white);border-color:var(--navy)}
.btn-navy:hover{background:#001f44;border-color:#001f44}
.btn-orange{background:var(--orange);color:var(--navy);border-color:var(--orange)}
.btn-orange:hover{background:#d96d00;border-color:#d96d00}
.btn-outline-navy{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline-navy:hover{background:var(--navy);color:var(--white)}
.btn-outline-white{background:transparent;color:var(--white);border-color:var(--white)}
.btn-outline-white:hover{background:var(--white);color:var(--navy)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Social icons: simple 20px line icons, currentColor */
.social{display:flex;gap:16px}
.social a{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:8px}
.social svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Mobile menu base: concepts style the panel colour */
.nav-toggle{display:none;width:48px;height:48px;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:inherit}
.nav-toggle svg{width:24px;height:24px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
@media (max-width:1023px){
  .nav-toggle{display:inline-flex}
}