:root{
  --bg:#fafeff;
  --ink:#4a4a4a;
  --ink-soft:#55636a;
  --accent:#006666;
  --accent-2:#149bb2;
  --card:#ffffffcc;
  --ring: rgba(0,102,102,.12);
  --radius-lg:26px;
  --radius-md:18px;
  --shadow: 0 10px 30px rgba(0,0,0,.10);
  --header-h:72px;
  --maxw:1400px; /* increased to use more horizontal space on large screens */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Montserrat, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Layout helpers */
.wrap{max-width:10000px; margin:0 auto; padding:0 100px}

/* Mobile override: reduce side padding on narrow viewports for usability */
@media (max-width: 900px){
  .wrap{padding:0 20px}
}

/* Header */
header{
  position:sticky; top:0; z-index:50; height:var(--header-h);
  backdrop-filter:saturate(140%) blur(8px);
  background:rgba(250,254,255,.85);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.nav{
  height:var(--header-h); display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}
.brand{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink);
}
.logo{
  width:36px; height:36px; border-radius:12px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 6px 16px rgba(0,0,0,.15);
}
.brand span{font-weight:700; letter-spacing:.2px}

.links{display:flex; align-items:center; gap:18px}
.links a{
  text-decoration:none; color:var(--ink-soft); font-weight:600; font-size:.95rem;
  padding:8px 10px; border-radius:12px;
}
.links a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* Ensure menu button is visible on all viewports and style it */
.menu-btn{display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; padding:10px; border-radius:12px; cursor:pointer}
.menu-btn .bar{background:var(--ink);}
.menu-btn:focus-visible{outline:2px solid var(--accent)}

/* Show text label on mobile, hide bars; inverse on desktop */
.menu-btn .bars{ display:inline-flex; gap:4px; }
.menu-btn .menu-label{ display:none; margin-left:8px; font-weight:700 }

@media (max-width:980px){
  .menu-btn .bars{ display:none }
  .menu-btn .menu-label{ display:inline-block; color:#fff }
}

/* Mobile: ensure burger is visible at the right of the header and teal */
@media (max-width:980px){
  .menu-btn{
    display:inline-flex !important;
    margin-left:auto; /* pushes button to the right within the header flex row */
    background:var(--accent);
    color:#fff;
    padding:8px;
    border-radius:12px;
    z-index:75;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
  }
  .menu-btn .bar{ background:#fff; }
}

/* Default mobile behaviour: hide inline links until menu opened */
@media (max-width:980px){
  .links{ display:none; }
}

/* Hero */
.hero{padding:48px 0 28px;}
.hero .grid{
  display:grid; gap:28px; align-items:center;
  grid-template-columns:1fr;
}
.kicker{font-weight:700; color:var(--accent); letter-spacing:.3px; font-size:.9rem;}
h1{margin:.25rem 0 0; font-size:clamp(28px, 4vw, 42px); line-height:1.15;}
.subtitle{margin:12px 0 22px; color:var(--ink-soft); font-size:clamp(15px, 2.2vw, 18px); max-width:46ch;}
.cta{display:flex; gap:12px; flex-wrap:wrap;}
.btn{
  appearance:none; border:1px solid var(--accent);
  background:var(--accent); color:#fff; font-weight:700;
  padding:12px 16px; border-radius:var(--radius-md); cursor:pointer;
  box-shadow:var(--shadow);
}
.btn.secondary{background:transparent; color:var(--accent); border-color:var(--accent); box-shadow:none;}

.hero-card{
  background:var(--card); border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow);
}
.hero-list{
  display:flex; flex-direction:column; gap:10px; /* vertical pills */
}
.pill{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:14px; padding:10px 12px; font-size: 1rem;
}
.pill.active {
  background: var(--accent);
  color: #fff;
}
.dot{width:8px; height:8px; border-radius:50%; background:var(--accent)}

/* Featured preview section */
.section{padding:22px 0 34px}
.section h2{font-size:clamp(20px, 3.2vw, 26px); margin:0 0 14px;}
.cards{display:grid; gap:16px; grid-template-columns:1fr;}
.card{background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow); transition: background-color .28s ease, color .28s ease, transform .18s ease, box-shadow .28s ease;}
.card:hover{background:var(--accent); color:var(--bg); transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.16);}
.card:hover h3, .card:hover .meta, .card:hover .desc { color:var(--bg); }
.card .tags .tag{display:inline-block; margin-right:8px; padding:6px 10px; border-radius:12px; background:rgba(0,0,0,.04); color:var(--ink); font-weight:600}
.card:hover .tags .tag{background:rgba(255,255,255,.12); color:var(--bg); border:1px solid rgba(255,255,255,.12)}
.card .badge{display:inline-block; padding:6px 10px; border-radius:12px; background:rgba(0,0,0,.06); color:var(--ink); font-weight:700}
.card:hover .badge{background:rgba(255,255,255,.16); color:var(--bg)}
.card .actions .btn{background:var(--accent); color:#fff; border-radius:20px; padding:12px 18px; text-decoration:none}
.card:hover .actions .btn{background:rgba(255,255,255,.12); color:var(--bg); border:1px solid rgba(255,255,255,.12)}
.card h3{margin:0 0 6px; font-size:1.05rem}
.meta{color:var(--ink-soft); font-size:.92rem; margin:0 0 8px}
.card .actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.card.clickable { cursor: pointer; }
.card.clickable:focus { outline: 3px solid var(--ring); outline-offset: 6px; border-radius: var(--radius-lg); }

/* Footer */
footer{margin-top:20px; padding:28px 0 46px; border-top:1px solid rgba(0,0,0,.06); color:var(--ink-soft); font-size:.95rem;}

/* Remove previous mobile dropdown elements and show simple mobile buttons */
.mobile-menu-btn, .mobile-nav { display:none !important }

.mobile-nav-buttons{ display:none; justify-content:center; gap:12px; padding:12px 16px }
.mobile-btn{ display:inline-block; padding:10px 14px; border-radius:12px; background:var(--card); color:var(--ink); text-decoration:none; border:1px solid rgba(0,0,0,.06); font-weight:700 }

@media (max-width:980px){
  .mobile-nav-buttons{ display:flex }
  .ios-nav{ display:none } /* hide desktop control */
}

/* Revert card sizing to responsive auto-fit (up to 4 columns on wide screens) */
.cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.card{
  width: auto;
  max-width: none;
}

/* Ensure a max of 4 columns on very wide viewports */
@media (min-width:1400px){
  .cards{ grid-template-columns: repeat(4, 1fr); }
}

/* Mobile fallback */
@media (max-width:600px){
  .cards{ grid-template-columns: 1fr; }
}

/* Responsive */
@media (min-width: 760px){
  .hero .grid{grid-template-columns:1.2fr .9fr; gap:36px;}
  .cards{grid-template-columns:repeat(2, 1fr);}
}
@media (min-width: 1024px){
  .cards{grid-template-columns:repeat(5, 1fr);}
}
/* Contact: vertical stack + full-width buttons (desktop & mobile) */
#contact .meta {
  display: flex;
  flex-direction: column;   /* always vertical */
  gap: 0.6rem;
  margin: 0;
}

#contact .meta .sep {
  display: none;            /* hide the "·" separators */
}

#contact .meta a {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px;
  background: var(--accent, #006666);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  box-shadow: var(--shadow);
}

#contact .meta a:hover,
#contact .meta a:focus-visible {
  filter: brightness(1.06);
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Footer centered */
footer .wrap {
  text-align: center;
}
@media (min-width: 760px) {
  #contact .meta a {
    max-width: 300px;   /* set the button width you want */
    margin: 0;
  }
}

/* Footer contact row: horizontal on desktop, stacked on small screens */
.contact-footer{display:flex; flex-direction:column; gap:12px; align-items:center;}
.contact-row{display:flex; gap:12px; align-items:center; color:var(--ink-soft); font-weight:600}
.contact-row a{color:var(--ink-soft); text-decoration:none}
.contact-row .sep{margin:0 8px; color:rgba(0,0,0,.12)}
.footnote{color:var(--ink-soft)}

/* Desktop layout: place contact row items horizontally and align with footnote */
@media (min-width:981px){
  .contact-footer{flex-direction:row; justify-content:center; align-items:center; gap:24px}
  .contact-row{flex-direction:row}
  .footnote{margin:0 0 0 8px}
}

@media (min-width:760px){
  .contact-footer{flex-direction:column}
  .contact-row{flex-direction:row}
}

/* Profile two-column layout (desktop) and boxed left container */
.profile-grid{ display:grid; gap:100px; grid-template-columns: 560px 1fr; align-items:start; }
.profile-left{
  background:#ffffff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius-lg);
  padding:28px 24px;
  box-shadow:var(--shadow);
  position:static; /* non-sticky by default for mobile */
  height:auto; overflow:visible;
}
.profile-right{ background:transparent; padding:0 }

/* Sticky left panel on desktop */
@media (min-width:981px){
  .profile-left{
    position:sticky;
    top: calc(var(--header-h) + 20px);
    align-self:start;
    height: calc(100vh - (var(--header-h) + 48px));
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    min-width:560px; /* prevent narrowing that causes extra wrapping/scroll */
  }
  .profile-grid{ grid-template-columns:560px 1fr; gap:100px; }
  .profile-right{ padding:24px 0 0 }
}

/* Mobile / narrow screens: stacked, left first */
@media (max-width:980px){
  .profile-grid{ grid-template-columns: 1fr; gap:28px }
  .profile-left{ border:none; box-shadow:none; padding:0; border-radius:0; background:transparent }
  .profile-right{ padding-top:12px }
}

/* Emphasize the left title */
.profile-left h1{ font-size: clamp(24px, 4vw, 40px); margin-top:0; font-weight:900; letter-spacing:0.25px }

/* Mobile-only: show burger, hide inline links, stack footer contacts */
@media (max-width:980px){
  .menu-btn{ display:none; } /* hide menu button on mobile (nav removed) */
  .links{ display:none !important; } /* hide inline nav links on mobile */

  /* Ensure any nav-open state does not reveal a menu on mobile */
  body.nav-open #navLinks{ display:none !important; }

  /* Stack footer contacts vertically and place above copyright */
  .contact-footer{ flex-direction:column; align-items:flex-start; gap:12px }
  .contact-row{ display:flex; flex-direction:column; align-items:flex-start; gap:8px }
}

/* Mobile-only: display contact items as centered stacked lines (4 lines total) */
@media (max-width:980px){
  .contact-row{ display:flex; flex-direction:column; align-items:center; gap:6px }
  .contact-item{ text-align:center }
  .contact-footer{ align-items:center; gap:8px }
  footer{ padding:12px 0 18px }
}

/* Desktop-only: color the left profile panel teal with white text */
@media (min-width:981px){
  .profile-left{
    background: var(--accent) !important; /* #006666 */
    color: var(--bg) !important; /* #fafeff */
    border-color: rgba(255,255,255,0.06);
  }
  .profile-left h1, .profile-left h2, .profile-left h3, .profile-left p, .profile-left li, .profile-left .meta, .profile-left .contact-meta{
    color: var(--bg) !important;
  }
  .profile-left a{ color: var(--bg) !important; text-decoration:underline }
}

/* Mobile-only footer compactness: remove separators and tighten spacing */
@media (max-width:980px){
  .contact-row .sep{ display:none }
  .contact-row{ gap:6px }
  footer{ padding:12px 0 18px }
  .contact-footer{ gap:8px }
}

/* Mobile: make footer contact lines a bit smaller for compactness */
@media (max-width:980px){
  .contact-item{ font-size:0.92rem; }
  .footnote{ font-size:0.86rem }
}

/* iOS-style segmented control */
.ios-nav{ display:flex; align-items:center; }
.ios-segment{
  display:inline-flex; position:relative; gap:6px; background:rgba(0,0,0,0.03);
  padding:6px; border-radius:14px; align-items:center;
  overflow:hidden; /* ensure indicator cannot escape the box */
}
.ios-link{
  display:inline-flex; align-items:center; justify-content:center; padding:8px 14px; border-radius:10px;
  color:var(--ink-soft); text-decoration:none; font-weight:700; font-size:.95rem;
  position:relative; z-index:3;
}
.ios-link.active{ color:var(--accent); }
.ios-indicator{
  position:absolute; left:0; top:50%; height:40px; width:0; border-radius:10px;
  transform: translateY(-50%); /* keep vertically centered by default */
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 6px 18px rgba(0,0,0,0.06);
  backdrop-filter: blur(8px) saturate(130%);
  border:1px solid rgba(255,255,255,0.06);
  transition: transform 280ms cubic-bezier(.2,.9,.2,1), width 280ms cubic-bezier(.2,.9,.2,1);
  z-index:1; pointer-events:none;
}

/* ensure the control doesn't overflow */
.ios-segment{ max-width:360px }

/* Hide on small screens (mobile uses stacked footer nav) */
@media (max-width:980px){ .ios-nav{ display:none } }

/* Mobile vertical nav */
.mobile-menu-btn{ display:none; border:0; background:var(--accent); color:#fff; padding:8px 12px; border-radius:10px; cursor:pointer }
.mobile-nav{ display:none; flex-direction:column; gap:8px; margin-top:8px }
.mobile-nav a{ padding:10px 12px; background:var(--card); border-radius:10px; text-decoration:none; color:var(--ink-soft); border:1px solid rgba(0,0,0,.04) }

@media (max-width:980px){
  .mobile-menu-btn{ display:inline-flex; margin-left:auto; position:relative; z-index:90 }

  /* hide desktop segmented control */
  .ios-nav{ display:none }

  .mobile-nav{
    display:none; /* hidden by default */
    position:absolute;
    top: calc(var(--header-h) + 10px);
    right: 18px;
    flex-direction:column; gap:8px; z-index:85;
    background: var(--card);
    padding:10px; border-radius:12px; box-shadow:var(--shadow);
    border:1px solid rgba(0,0,0,0.06);
    min-width:160px;
    overflow:hidden;
  }
  .mobile-nav.open{ display:flex }

  .mobile-nav a{ display:block; color:var(--ink-soft); text-decoration:none; padding:8px 10px; border-radius:8px }
  .mobile-nav a:focus-visible{ outline:2px solid var(--ring) }
}