@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

:root{
  --brand:#0f6ea1;       /* primary blue */
  --brand-deep:#0a3a5e;  /* deep/navy for headings/nav */
  --brand-teal:#68c2b5;  /* teal accent (used subtly) */
  --ink:#fff;         /* body text */
  --muted:#fff;       /* secondary text */
  --bg:#ffffff;
  --line:#eef1f4;
  --btn-border:#70C3B4;

  /* Hero background image — change if you prefer another */
  --hero-img:url('../images/tyringe-hero.jpg');

  --maxw:1080px;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.55 "Ubuntu", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--ink); background:var(--bg);
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background: var(--bg)
          url('../images/tyringe-pattern-footer.png')
          no-repeat bottom right / auto 280px;
}
h1{color:var(--muted); line-height:1.12; margin:0; font-size: 80px; font-weight: 400;}
h2,h3{color:var(--brand-deep); line-height:1.12; margin:0}
a{color:var(--brand); text-decoration:none}
a:hover{color:var(--brand-deep)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  background:#fff; 
  backdrop-filter:saturate(140%) blur(4px);
  background-color: var(--brand-deep);
  border: none;
}
.nav{display:flex; align-items:center; justify-content:space-between; height:72px}
.nav a { color: var(--muted); }
.brand{display:flex; align-items:center; gap:12px; font-weight:700; font-size:20px; color:var(--brand-deep)}
.brand img{height:28px; width:auto}
.right-links{display:flex; gap:16px; align-items:center; font-weight:600}
.right-links a{padding:6px 8px; border-radius:10px}
.right-links a:hover{background:var(--brand)}

/* Hero section with full background image */
.hero{
  background:
    linear-gradient(rgba(35,86,121,0.45), rgba(35,86,121,0.45)),
    radial-gradient(1400px 500px at 80% -120px, rgba(35,86,121,.18), transparent 60%),
    linear-gradient(180deg, rgba(13,89,116,.07), rgba(13,89,116,0) 40%),
    var(--hero-img) center/cover no-repeat;
  border-bottom:1px solid var(--line);
}
.hero {
  position: relative;
  overflow: hidden;
  background: var(--hero-img) center/cover no-repeat;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(35,86,121,0.65);
  z-index: 0;
}

.hero-inner {
  position: relative;
  z-index: 1; /* keep text above overlay */
}
.hero-inner{display:grid; grid-template-columns:1fr; gap:28px; padding:180px 0 220px}
.eyebrow{letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:400; font-size:30px}
h1{margin:0 0 6px; font-weight: 700; font-size: 80px;}
.sub{margin:0 0 14px; font-size:clamp(18px,2.4vw,22px); color:var(--muted); font-weight:600}
.lede{max-width:65ch; color:var(--muted); font-size: 24px; line-height: 1.4;}
.lede a, h1 a {color:var(--muted);}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:2px; border:1px solid var(--btn-border);
  font-weight:700; transition:.2s ease; box-shadow:var(--shadow);
  background:transparent; color:#fff;
}
.btn:hover{transform:translateY(-1px); border-width:2px; color:var(--muted)}}
.btn.ghost{background:#fff; color:var(--brand); border-color:#dbe3ea; box-shadow:none}
.btn.ghost:hover{border-color:var(--brand-deep); color:var(--muted)}

.note{
  margin:22px 0 0; padding:12px 14px; border:1px dashed #dbe3ea; border-radius:var(--radius);
  background:#fbfdff; color:#2a3a4a
}

.hero-inner{grid-template-columns: 1.4fr .5fr; align-items:center}

@media (min-width:769px){
  .hero-inner{grid-template-columns: 1.4fr .5fr; align-items:center}
  .hero-visual{justify-self:end}
  .hero-visual .panel{
    width:min(520px, 90vw); height:300px; border-radius:24px;
    background:
      linear-gradient(135deg, rgba(104,194,181,.18), rgba(15,110,161,.10)),
      #eaf3f9;
    border:1px solid #d7e5ef; box-shadow:var(--shadow)
  }
}

@media (max-width: 768px) {
  .hero-inner {
    display: block;          /* stack hero content vertically */
    padding: 100px 0 120px;  /* tighter vertical spacing */
    text-align: center;      /* center-align text and buttons */
  }

  .hero-inner .eyebrow {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .hero-inner h1 {
    font-size: 46px;
    line-height: 1.1;
  }

  .hero-inner .lede {
    font-size: 18px;
    line-height: 1.5;
    margin: 0 auto 20px;
    max-width: 90%;
  }

  .hero-inner .cta-row {
    justify-content: center;
  }

  .hero-inner .btn {
    width: 100%;
    max-width: 260px;
    justify-content: center;
  }
}

.globe {
  height: 24px;
  width: auto;
}

footer{padding:44px 0; color:#2a3240;}
.foot{display:grid; gap:10px}
.addr{white-space:pre-line}
.minor{color:var(--brand); font-size:14px; padding:22px 0; }