:root{
  --water:#1f5e6b;      /* Lake Michigan at Charlevoix */
  --water-d:#17474f;
  --pine:#22362f;       /* footer, panel */
  --birch:#f4f6f3;      /* page ground */
  --dune:#c8b27f;       /* one warm note: focus + rules */
  --ink:#24302f;
  --muted:#5b6866;
  --line:#d8dfdb;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 17px/1.65 var(--sans);color:var(--ink);background:var(--birch)}
a{color:var(--water);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--water-d);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--dune);outline-offset:3px;border-radius:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:var(--serif);font-weight:500;color:var(--ink);letter-spacing:-.01em}
h2{font-size:1.6rem;line-height:1.2;margin:0 0 .6em}
h3{font-size:1.2rem;line-height:1.3;margin:1.8em 0 .35em}
p{margin:0 0 1em}

/* photo + header */
.photo{position:relative;background:#2c5560 var(--photo) center 58%/cover no-repeat;color:#fff}
.photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,34,38,.55) 0%,rgba(16,34,38,.12) 32%,rgba(16,34,38,.18) 55%,rgba(16,34,38,.72) 100%)}
.photo>*{position:relative}
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px;padding-bottom:22px}
.name{color:#fff;text-decoration:none;font-family:var(--serif);font-size:1.3rem;font-weight:500;line-height:1.15}
.name small{display:block;font-family:var(--sans);font-size:.8rem;font-weight:400;opacity:.85;margin-top:2px}
.name:hover{color:#fff}
nav{display:flex;flex-wrap:wrap;gap:6px 26px}
nav a{color:rgba(255,255,255,.88);text-decoration:none;font-size:.95rem;padding:4px 0;border-bottom:1px solid transparent}
nav a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.6)}
nav a[aria-current=page]{color:#fff;border-bottom-color:var(--dune)}

/* home hero */
.hero{min-height:78vh;display:flex;align-items:flex-end;padding:0 0 9vh}
.hero>.wrap{width:100%}
.hero h1{color:#fff;font-size:clamp(2.6rem,6.2vw,5.2rem);line-height:1.02;margin:0 0 .35em;max-width:13ch;letter-spacing:-.025em}
.hero p{font-size:1.15rem;max-width:34em;margin:0;color:rgba(255,255,255,.92)}
@media (prefers-reduced-motion:no-preference){
  .hero h1,.hero p{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
  .hero p{animation-delay:.18s}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* inner band */
.band{padding:9vh 0 120px}
.band h1{color:#fff;font-size:clamp(2.2rem,4.8vw,3.6rem);line-height:1.05;margin:0}

main{padding:72px 0 96px}
.inner main{padding-top:0}

/* home: services as open columns */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;padding-bottom:72px;border-bottom:1px solid var(--line)}
.services>div{border-top:2px solid var(--water);padding-top:22px}
.services h2{font-size:1.45rem}
.services p{color:var(--muted);margin:0}

.split{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;padding-top:72px;align-items:start}
.program h2{font-size:clamp(1.8rem,3vw,2.4rem)}
.program p{font-family:var(--serif);font-size:1.3rem;line-height:1.55;max-width:32em}
.panel{background:var(--pine);color:#e9eeea;padding:36px 36px 30px;border-radius:4px}
.panel h2{color:#fff;font-size:1.35rem}
.panel p{color:#d6ded9}
.panel a{color:#fff}
.panel .contact{border-top:1px solid rgba(255,255,255,.18);margin-top:28px;padding-top:24px}
.panel .contact p{margin:0 0 4px}

.btn{display:inline-block;background:var(--water);color:#fff;padding:12px 22px;border-radius:3px;text-decoration:none;border:0;font:600 1rem var(--sans);cursor:pointer}
.btn:hover{background:var(--water-d);color:#fff;text-decoration:none}
.btn.light{background:#fff;color:var(--pine)}
.btn.light:hover{background:var(--birch);color:var(--pine)}

/* inner sheet overlaps the photo band */
.sheet{background:#fff;max-width:760px;margin:-80px 0 28px;padding:48px 56px;border-radius:4px;box-shadow:0 1px 0 var(--line),0 18px 40px -24px rgba(20,40,40,.35);position:relative}
.sheet+.sheet{margin-top:0}
.sheet.note{background:transparent;box-shadow:none;padding:8px 56px 0}
.legal p,.legal li{max-width:66ch}
.legal h2:not(.vh){font-size:1.5rem;margin-top:1.6em}
.updated{color:var(--muted);font-size:.9rem}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
ul{padding-left:1.2em}

/* form */
label{display:block;font-weight:600;font-size:.95rem;margin:22px 0 6px}
input[type=text],input[type=tel]{width:100%;max-width:440px;padding:12px 14px;border:1px solid #b8c4bf;border-radius:3px;font:1rem var(--sans);background:#fbfcfb;color:var(--ink)}
input[type=text]:focus,input[type=tel]:focus{border-color:var(--water);outline:2px solid rgba(31,94,107,.25);outline-offset:0}
.consent{display:flex;gap:12px;align-items:flex-start;margin:26px 0;font-weight:400;font-size:.92rem;line-height:1.55;color:var(--muted);background:var(--birch);padding:16px 18px;border-radius:3px}
.consent input{margin-top:4px;flex:none;width:18px;height:18px;accent-color:var(--water)}
.fine{font-size:.85rem;color:var(--muted)}

/* footer */
footer{background:var(--pine);color:#c9d3ce;padding:56px 0 40px;font-size:.92rem}
footer a{color:#fff}
.foot{display:grid;grid-template-columns:1fr 1.6fr;gap:48px}
.fname{font-family:var(--serif);font-size:1.2rem;color:#fff;margin-bottom:.6em}
.flinks{display:flex;flex-wrap:wrap;gap:8px 24px}
footer .fine{color:#a9b6b0}
.credit{margin-top:1.4em}

@media (max-width:860px){
  .services{grid-template-columns:1fr;gap:36px}
  .split{grid-template-columns:1fr;gap:44px}
  .foot{grid-template-columns:1fr;gap:20px}
}
@media (max-width:600px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  nav{gap:4px 18px}
  .hero{min-height:82vh;padding-bottom:7vh}
  .band{padding:5vh 0 96px}
  .sheet{padding:30px 22px;margin-top:-70px}
  .sheet.note{padding:4px 4px 0}
  .panel{padding:28px 22px}
  main{padding:52px 0 72px}
}

/* language switch */
.navs{display:flex;align-items:center;gap:14px 34px;flex-wrap:wrap}
.langs{display:flex;gap:4px;font-size:.85rem}
.langs a{color:rgba(255,255,255,.8);text-decoration:none;padding:3px 9px;border:1px solid rgba(255,255,255,.28);border-radius:20px}
.langs a:hover{color:#fff;border-color:rgba(255,255,255,.7)}
.langs a[aria-current]{color:var(--pine);background:#fff;border-color:#fff}

/* Arabic */
.lang-ar{--serif:"Noto Naskh Arabic","Newsreader",Georgia,serif;--sans:"IBM Plex Sans Arabic","Public Sans",Tahoma,Arial,sans-serif}
.lang-ar h1,.lang-ar h2,.lang-ar h3{letter-spacing:0}
.lang-ar .hero h1{line-height:1.3;max-width:15ch}
.lang-ar .program p{line-height:1.8}
.lang-ar .name{font-family:"Newsreader",Georgia,serif}
.lang-ar .name small{font-family:var(--sans)}
.lang-es .hero h1{max-width:16ch}