:root{
  --navy:#101E33;
  --navy-2:#1B2E4A;
  --ink:#16233A;
  --ink-2:#414F68;
  --ink-3:#6E7A93;
  --paper:#FFFFFF;
  --paper-2:#F7F6F2;
  --rule:#E1DDD4;
  --gold:#B08D49;
  --max:74rem;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 2.2rem}

/* ---------------- nav ---------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:1.35rem 0;
  transition:background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.nav.solid{
  background:var(--navy);
  padding:.85rem 0;
  box-shadow:0 1px 20px rgba(0,0,0,.18);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.brand{
  display:flex;
  align-items:center;
  gap:.72rem;
  font-family:'Newsreader',serif;
  font-size:1.16rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
}
.mark-svg{width:34px;height:34px;flex-shrink:0;transition:width .35s ease,height .35s ease}
.nav.solid .mark-svg{width:29px;height:29px}
.brand-text span{color:var(--gold)}
.navlinks{display:flex;gap:2.1rem;list-style:none}
.navlinks a{
  color:rgba(255,255,255,.82);
  text-decoration:none;
  font-size:.73rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:500;
  padding-bottom:.3rem;
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.navlinks a:hover{color:#fff;border-bottom-color:var(--gold)}
.navtoggle{display:none;background:none;border:0;cursor:pointer;padding:.4rem}
.navtoggle span{display:block;width:22px;height:1.5px;background:#fff;margin:5px 0}

/* ---------------- hero ---------------- */
.hero{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:center;
  background:
    linear-gradient(180deg, rgba(16,30,51,.86) 0%, rgba(16,30,51,.74) 45%, rgba(16,30,51,.92) 100%),
    linear-gradient(140deg, #1E3355 0%, #101E33 55%, #0A1526 100%);
  background-size:cover;
  background-position:center;
  text-align:center;
  color:#fff;
  padding:9rem 0 6rem;
}
/* To use a photograph, add its URL as the FIRST background layer above,
   e.g.  url('jakarta.jpg'),  before the linear-gradient overlays. */
.hero::after{
  content:"";
  position:absolute;left:50%;bottom:2.4rem;
  width:1px;height:3.4rem;
  background:linear-gradient(180deg,rgba(176,141,73,0),var(--gold));
}
.hero .wrap{position:relative;z-index:2}
.hero .kicker{
  font-size:.7rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:2.1rem;
  font-weight:500;
}
.hero h1{
  font-family:'Newsreader',serif;
  font-weight:300;
  font-size:clamp(2rem,4.6vw,3.5rem);
  line-height:1.24;
  letter-spacing:.02em;
  text-transform:uppercase;
  max-width:22ch;
  margin:0 auto;
}
.hero .sub{
  margin:2.2rem auto 0;
  max-width:44ch;
  font-size:1.02rem;
  color:rgba(255,255,255,.76);
  line-height:1.75;
}
.btn{
  display:inline-block;
  margin-top:2.9rem;
  padding:.95rem 2.4rem;
  border:1px solid rgba(255,255,255,.42);
  color:#fff;
  text-decoration:none;
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:500;
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.btn:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}

/* ---------------- sections ---------------- */
.band{padding:6.2rem 0}
.band.alt{background:var(--paper-2)}
.band.dark{background:var(--navy);color:#fff}
.eyebrow{
  font-size:.7rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
  margin-bottom:1.15rem;
}
.band h2{
  font-family:'Newsreader',serif;
  font-weight:300;
  font-size:clamp(1.85rem,3.3vw,2.6rem);
  line-height:1.24;
  letter-spacing:-.01em;
  max-width:24ch;
}
.band.dark h2{color:#fff}
.rule{width:3.2rem;height:2px;background:var(--gold);margin:1.7rem 0 2.3rem}
.band p.body{max-width:60ch;color:var(--ink-2);font-size:1rem}
.band.dark p.body{color:rgba(255,255,255,.78)}
.band p.body + p.body{margin-top:1.15rem}

.split{display:grid;grid-template-columns:1fr 1.25fr;gap:4.5rem;align-items:start}

/* ---------------- practice ---------------- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:1.6rem;
  margin-top:3.4rem;
}
.card{
  background:#fff;
  border:1px solid var(--rule);
  padding:2.2rem 1.9rem;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.card:hover{
  border-color:var(--gold);
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(16,30,51,.07);
}
.card h3{
  font-family:'Newsreader',serif;
  font-size:1.25rem;
  font-weight:400;
  line-height:1.3;
  margin-bottom:.85rem;
}
.card p{font-size:.9rem;color:var(--ink-2);line-height:1.65}

/* ---------------- principal ---------------- */
.principal{grid-template-columns:16rem 1fr;gap:4rem;align-items:start;margin-top:3.2rem;display:grid}
.portrait{
  aspect-ratio:4/5;
  background:#E8E4DA;
  border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:1rem;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);line-height:1.9;
}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.principal h3{
  font-family:'Newsreader',serif;
  font-weight:400;font-size:1.72rem;line-height:1.22;
}
.principal .role{
  font-size:.72rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--gold);font-weight:500;margin-top:.7rem;
}
.principal p{margin-top:1.6rem;max-width:56ch;color:var(--ink-2);font-size:.98rem}
.tags{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.tag{
  border:1px solid var(--rule);
  padding:.42rem 1rem;
  font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);
}

/* ---------------- footer ---------------- */
.foot{background:var(--navy);color:rgba(255,255,255,.7);padding:4.6rem 0 0}
.foot .cols{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:3.2rem;
  padding-bottom:3.4rem;
}
.foot-mark{width:50px;height:50px;display:block;margin-bottom:1.15rem}
.foot .brandmark{
  font-family:'Newsreader',serif;
  font-size:1.16rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;
  margin-bottom:1.2rem;
}
.foot .brandmark span{color:var(--gold)}
.foot h4{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;font-weight:600;margin-bottom:1.1rem;
}
.foot p, .foot a{font-size:.9rem;line-height:1.85;color:rgba(255,255,255,.7)}
.foot .contact-address{
  border-left:2px solid var(--gold);
  margin:1rem 0 1.2rem;
  padding:.15rem 0 .15rem 1rem;
  color:rgba(255,255,255,.9);
  line-height:1.7;
}
.contact-label{
  display:block;
  margin-bottom:.3rem;
  color:var(--gold);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.foot a{text-decoration:none;border-bottom:1px solid rgba(176,141,73,.55);transition:color .2s ease}
.foot a:hover{color:#fff}
.foot ul{list-style:none}
.legal{
  border-top:1px solid rgba(255,255,255,.12);
  padding:1.7rem 0 2.4rem;
  font-size:.76rem;
  color:rgba(255,255,255,.45);
  line-height:1.8;
}

a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media (max-width:56rem){
  .split{grid-template-columns:1fr;gap:2.4rem}
  .principal{grid-template-columns:1fr;gap:2.2rem}
  .portrait{max-width:13rem}
  .foot .cols{grid-template-columns:1fr;gap:2.4rem}
}
@media (max-width:44rem){
  .wrap{padding:0 1.4rem}
  .navlinks{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--navy);flex-direction:column;gap:0;padding:.6rem 1.4rem 1.4rem;
  }
  .navlinks.open{display:flex}
  .navlinks a{display:block;padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.09)}
  .navtoggle{display:block}
  .nav{background:var(--navy);padding:.9rem 0}
  .hero{min-height:auto;padding:8rem 0 5rem}
  .band{padding:4.2rem 0}
}
@media (max-width:26rem){
  .brand-text{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}