/* ============================================================
   GLOBAL RESET & THEME TOKENS 
   ============================================================ */
   :root{
	--brand-blue: #0073e6;
	--bg-light : #f7f7f7;
	--text    : #222;
	--radius  : 4px;
	--wrap-max: 75rem;          /* 75 rem ≈ 1200 px at default font-size   */
  }
  
  *,::before,::after { box-sizing:border-box; }
  body{
	margin:0;
	font-family:'Open Sans',Arial,Helvetica,sans-serif;
	line-height:1.6;
	color:var(--text);
	background:#fff;
  }
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; height:auto; display:block; }
  
  /* ============================================================
	 LAYOUT
	 ============================================================ */
  #wrap{ max-width:var(--wrap-max); margin-inline:auto; padding-inline:1rem; }
  
  #header            { width:100%; }
  .header-img        { width:100%; }
  
  /* ------------------------------------------------------------
	 Navigation
	 ------------------------------------------------------------ */
  #sitenav         { margin-block:1rem; }
  #mainNav{
	display:flex; flex-wrap:wrap; gap:.5rem;
	list-style:none; margin:0; padding:0; justify-content:center;
  }
  #mainNav a{
	display:block; padding:.5rem 1rem; border-radius:var(--radius);
	background:#f3f3f3; font-weight:600; transition:background .2s;
  }
  #mainNav a:focus-visible{ outline:2px solid var(--brand-blue); }
  #mainNav a.current,
  #mainNav a:hover{ background:var(--brand-blue); color:#fff; }
  
  /* ============================================================
	 MAIN CONTENT
	 ============================================================ */
  #content      { padding-block-end:2rem; }
  #content h1   { font-size:1.75rem; margin:0 0 .75rem; }
  #content h2   { font-size:1.2rem; margin-block:1.25rem .25rem;
				  display:flex; align-items:center; gap:.5rem; }
  #content h3   { font-size:1.1rem; margin-block:1rem .25rem; }
  
  .right{
	max-width:45%; margin:0 0 1rem 1rem; float:right; border-radius:var(--radius);
  }
  
  /* Little blue dot (Contact page) */
  .bullet{ width:10px; height:10px; border-radius:50%; background:var(--brand-blue); }
  
  /* Utility */
  address{ font-style:normal; line-height:1.5; }
  .call   { text-align:center; font-size:1.25rem; font-weight:600; }
  .phone  { display:block; font-size:1.6rem; color:var(--brand-blue); margin-top:.25rem; }
  .clear  { clear:both; }
  
  /* ============================================================
	 FAQ accordion
	 ============================================================ */
  details{
	margin-block-end:1rem; border:1px solid #ddd; border-radius:var(--radius); padding:.75rem;
  }
  summary{ font-weight:600; cursor:pointer; }
  details[open]{ background:#fafafa; }
  details p{ margin-top:.5rem; }
  
  /* ============================================================
	 FOOTER
	 ============================================================ */
  #footer { background:var(--bg-light); padding:1.5rem 0; }
  #footer2{ max-width:var(--wrap-max); margin-inline:auto; text-align:center; font-size:.95rem; }
  
/* ------------------------------------------------------------
   Fade-in side borders (from #354173 → transparent)
   ------------------------------------------------------------ */
   @media (min-width: 20.0625rem){                /* keep phones covered too   */
	body::before,
	body::after{
	  content:"";
	  position:fixed;                       /* full-height, scrolls with page */
	  top:0;
	  bottom:0;
	  width:20rem;                           /* stripe thickness           */
	  pointer-events:none;                  /* never interferes with clicks */
	  z-index:-1;                           /* stays behind all content   */
	}
	/* LEFT – fade rightward (out ⇒ in) */
	body::before{
	  left:0;
	  background:
		linear-gradient(to right,
		  #354173 0%,                     /* opaque edge colour */
		  rgba(53,65,115,0) 100%);        /* transparent at inner side */
	}
	/* RIGHT – fade leftward (out ⇒ in) */
	body::after{
	  right:0;
	  background:
		linear-gradient(to left,
		  #354173 0%,
		  rgba(53,65,115,0) 100%);
	}
  }
/* ==============================================
   PHONE  – stripes are 15 vw wide, fade ends at 40 %
   ============================================== */
   @media (max-width:70rem){             /* ≤ 320 px */
	body::before,
	body::after{
	  content:"";
	  position:fixed;
	  top:0; bottom:0;
	  width:10vw;                       /* 15 % of viewport */
	  pointer-events:none;
	  z-index:-1;
	}
  
	/* LEFT */
	body::before{
	  left:0;
	  background:linear-gradient(to right,
				  #35417374 0%,
				  #35417374 0%,
				  rgba(53,65,115,0) 100%);
	}
  
	/* RIGHT */
	body::after{
	  right:0;
	  background:linear-gradient(to left,
				  #354173 0%,
				  #35417374 0%,
				  rgba(53,65,115,0) 100%);
	}
  }