/* Muted, crisp theme — forced light mode
   Accent = warm bronze. Cross-browser system typography tuned for mobile.
   Inspired by: #5D5646, #A07D54, #DFD4C3, #EEEAE2, #3E5974, #4D4C4B */

/* --------- Tokens --------- */
:root{
  /* neutrals */
  --bg: #F5F2EA;        /* soft linen */
  --surface: #E8E1D3;   /* light kraft */
  --ink: #403F3E;       /* charcoal */
  --muted: #6B6760;     /* warm taupe */

  /* accents */
  --accent: #A07D54;    /* bronze (primary CTA) */
  --accent-ink: #ffffff;
  --accent-quiet: #405B70; /* slate blue secondary */

  /* utility */
  --border: rgba(0,0,0,0.10);
  --border-weak: rgba(0,0,0,0.08);
  --ring: rgba(160,125,84,0.45);
  --shadow-1: 0 1px 1px rgba(20,22,26,.06), 0 6px 18px rgba(20,22,26,.08);
}

/* --------- Base / Typography --------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{color-scheme: only light} /* force light everywhere */

body{
  /* Cross-platform, no-download system font stack */
  font-family:
    system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial,
    "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  /* Readability + consistent sizing on mobile */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Legibility tuning */
  line-height: 1.55;
  letter-spacing: 0.01em;
  font-feature-settings: "liga" 1, "rlig" 1, "kern" 1, "calt" 1;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: proportional-nums;
  font-synthesis-weight: none;
  font-synthesis-style: none;
  optical-sizing: auto;

  color: var(--ink);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img{max-width:100%; height:auto; display:block}

a{
  color:var(--accent-quiet);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}
a:hover{filter:brightness(1.06)}

/* Headings: slightly heavier with gentle tracking */
h1,h2,h3{line-height:1.2; margin:0 0 .5rem; letter-spacing:-0.01em}
h1{font-size:clamp(1.7rem, 2.4vw + 1rem, 2.35rem); font-weight:700}
h2{font-size:clamp(1.3rem, 1.4vw + 1rem, 1.7rem); font-weight:650}
h3{font-size:1.08rem; font-weight:600}
p{margin:.5rem 0 1rem}
.lead{font-size:1.06rem}
.muted{color:var(--muted)}

.wrap{max-width: 64rem; margin: 0 auto; padding: 1rem 1rem;}

/* --------- Header/Nav (fixed for iPhone) --------- */
.site-header{
  position:sticky; top:0; z-index: 50;
  -webkit-backdrop-filter: blur(6px); /* iOS Safari */
  backdrop-filter: blur(6px);
  background: var(--bg); /* fallback for older Safari */
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  border-bottom: 1px solid var(--border-weak);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  flex-wrap: nowrap; /* keep brand and nav on one line */
}
.brand{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  font-weight:700; color:inherit; letter-spacing:-0.01em;
  flex:1 1 auto; min-width:0; /* allow safe shrink on small screens */
}
.brand-text{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; /* avoid wrap */
}
.site-header nav{
  display:flex; align-items:center; flex-wrap:nowrap; white-space:nowrap; /* prevent wrap */
  flex:0 0 auto; /* don't shrink nav */
}
.site-header nav a{
  padding:.5rem .25rem; margin-left:.25rem; text-decoration:none; color:inherit; opacity:.92;
  font-weight:600; letter-spacing:-0.005em;
}
.site-header nav a[aria-current="page"]{opacity:1; border-bottom:2px solid var(--accent)}
@media (max-width: 420px){
  .brand-text{ display:none } /* guarantee single-row header on smallest phones */
}

/* --------- Hero --------- */
.hero{
  background:
    radial-gradient(1100px 460px at 50% -10%, rgba(64,91,112,0.12) 0%, rgba(64,91,112,0.00) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.0) 0%, rgba(0,0,0,0.00) 100%);
  padding: 3.5rem 0 2rem;
}
.cta-row{display:flex; gap:.5rem; flex-wrap:wrap; margin:.75rem 0 0}

/* --------- Buttons --------- */
.btn{
  appearance:none; border:0; border-radius:.6rem; padding:.75rem 1rem; font-weight:700; cursor:pointer;
  background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-1);
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
  letter-spacing: -0.005em;
}
.btn:focus{outline:2px solid var(--ring); outline-offset:2px}
.btn:hover{filter:brightness(1.03)}
.btn:active{transform:translateY(1px)}
.btn-secondary{
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border);
  font-weight:600;
}
.btn-quiet{
  background: transparent; color: var(--accent-quiet);
  border: 1px solid var(--border);
  font-weight:600;
}

/* --------- Sections / grids --------- */
.features{padding:1.5rem 0}
.grid{display:grid; gap:1rem}
@media (min-width: 640px){
  .grid{grid-template-columns: repeat(3, 1fr)}
}

/* --------- Panels & cards --------- */
.panel{padding: 1.25rem 0}
.panel.notice .wrap, .panel.subtle .wrap{
  background: var(--surface); border-radius: 1rem; padding: 1.25rem; box-shadow: var(--shadow-1);
  border: 1px solid var(--border);
}
.panel.subtle .wrap{background: color-mix(in srgb, var(--surface) 92%, transparent)}

.page .wrap{padding-top: 1rem}

.team{display:grid; gap:.75rem}
.member{
  display:flex; gap:.75rem; background: var(--surface);
  border-radius: .85rem; padding:.85rem; align-items:center; box-shadow: var(--shadow-1);
  border: 1px solid var(--border);
}
.avatar{
  inline-size: 8rem; block-size: 8rem; border-radius: 1rem;
  object-fit: cover; flex-shrink:0;
}
.role{margin-top:-.4rem; color:var(--muted)}

/* ---------- Mobile stacking for /about team card ---------- */
@media (max-width: 640px){
  .member{
    flex-direction: column;        /* stack image above text */
    align-items: center;           /* center the avatar */
    text-align: left;              /* keep body text left-aligned */
  }
  .member > div{
    width: 100%;                   /* let text take full card width */
  }
  .avatar{
    inline-size: 100%;
    max-inline-size: 18rem;        /* pleasant size on phones */
    block-size: auto;
    aspect-ratio: 1 / 1;           /* keep it tidy even if source varies */
    margin: 0 auto .5rem;
    border-radius: 1rem;
  }
}

.card{
  background: var(--surface); padding:1rem; border-radius:.85rem; box-shadow: var(--shadow-1);
  border: 1px solid var(--border);
}

/* --------- Forms --------- */
.field{display:flex; flex-direction:column; gap:.25rem; margin:.6rem 0}
input, textarea{
  font: inherit; padding:.65rem .7rem; border-radius:.6rem;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 96%, white 4%);
  color: var(--ink);
}
input:focus, textarea:focus{outline:2px solid var(--ring); outline-offset:2px; border-color: transparent}
.fineprint{font-size:.85rem; color:var(--muted)}

/* --------- Trust points --------- */
.trustpoints{display:flex; gap:.6rem; flex-wrap:wrap; margin:1rem 0 0; padding:0; list-style:none; color:var(--muted);}
.trustpoints li{
  background: var(--surface); padding:.4rem .6rem; border-radius:999px;
  border:1px solid var(--border-weak);
}

/* --------- Footer --------- */
.site-footer{padding:2rem 0 3rem; color:var(--muted)}
.site-footer .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}

/* --------- Accessibility --------- */
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto; background: var(--accent); color: var(--accent-ink);
  padding:.5rem .75rem; border-radius:.5rem; z-index: 1000;
}

/* --------- Media scroller --------- */
.media-scroller{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 85%;
  gap: .75rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: .25rem 0 .5rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 1rem;
}
.snap-inline > *{ scroll-snap-align: start }

.media{
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.media img,
.media video{
  width: 100%;
  height: auto;
  display: block;
  border-radius: .8rem;
  box-shadow: var(--shadow-1);
  background: #000;
}
.media video{
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.media figcaption{
  font-size: .9rem;
  color: var(--muted);
}
@media (min-width: 640px){
  .media-scroller{ grid-auto-columns: clamp(16rem, 40vw, 22rem) }
}