/* Crest Tilework — the crest's hexagon laid as a courtyard floor. */
:root{
  --teal:#0e6a74; --teal-deep:#0a4d55; --sage:#8ea68d; --sage-pale:#d9e3d7;
  --mauve:#e4cfe2; --salmon:#f6acad; --salmon-deep:#ef8f91; --vanilla:#fff6ea; --vanilla-tile:#fffaf2;
  --silver:#bec6c3; --grout:#e7ddd0; --ink:#16302f; --ink-soft:#3f5655;
  --display:"Gloock","Playfair Display",Georgia,serif;
  --body:"Atkinson Hyperlegible","Noto Sans Arabic","Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1); --wrap:1240px;
  --field-border:#cbd3d1; --field-r:4px; --focus:var(--teal);
  color-scheme:light;
}
html{scrollbar-color:var(--sage) var(--vanilla)}
body{margin:0;background:var(--vanilla);color:var(--ink);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased;caret-color:var(--teal)}
:lang(ar) body,html[lang="ar"] body{font-family:"Noto Sans Arabic","Atkinson Hyperlegible",sans-serif;line-height:1.85}
::selection{background:var(--mauve);color:var(--ink)}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1.5px}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] .hex b,html[lang="ar"] .brand b{font-family:"Reem Kufi",sans-serif;font-weight:600;letter-spacing:0;line-height:1.3}
[lang="ar"]:not(html){font-family:"Reem Kufi","Noto Sans Arabic",sans-serif}
html[lang="ar"] [lang="en"]{font-family:var(--display)}
p{margin:0}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:max(20px,env(safe-area-inset-left,0px))}

/* floor: hex grout */
.floor{background-color:var(--vanilla);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16.2v32.3L28 64.7 0 48.5V16.2Z M28 64.7V97 M0 48.5v48.5 M56 48.5v48.5' fill='none' stroke='%23e7ddd0' stroke-width='1.4'/%3E%3C/svg%3E");
  background-size:56px 97px}

/* actions */
.act{display:inline-flex;align-items:center;gap:12px;background:var(--salmon);color:var(--ink);font-weight:700;font-size:17px;line-height:1;padding:17px 28px;text-decoration:none;
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%);transition:background .2s var(--ease)}
.act:hover{background:var(--salmon-deep)}
.act:focus-visible{outline:none;background:var(--ink);color:var(--vanilla)}
.lnk{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--teal);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:3px}
.lnk .i{transition:transform .3s var(--ease)}
.lnk:hover .i,a:hover > .lnk .i{transform:translateX(calc(4px*var(--dir)))}
.actions{display:flex;gap:16px 28px;align-items:center;flex-wrap:wrap;margin-top:34px}

/* header */
.top .wrap{display:flex;align-items:center;gap:28px;padding-block:18px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;margin-inline-end:auto}
.brand img{width:50px}
.brand b{display:block;font:400 22px/1.05 var(--display)}
.brand span span{display:block;font-size:14px;color:var(--ink-soft);margin-top:4px}
.nav{display:flex;gap:26px;align-items:center;font-size:16px}
.nav a{text-decoration:none;padding-block:4px;border-bottom:1.5px solid transparent;transition:border-color .2s}
.nav a:hover,.nav a[aria-current]{border-color:var(--teal)}
.nav .lang{border:1.5px solid var(--silver);padding:4px 12px;font-family:"Reem Kufi","Atkinson Hyperlegible",sans-serif}
.nav .lang:hover{border-color:var(--teal)}
.menu{display:none;background:none;border:0;padding:8px;color:var(--ink);cursor:pointer}
.menu .i{width:28px;height:28px}

/* honeycomb, every tile one size */
.comb{--w:96px;--h:calc(var(--w)*1.1547);--g:9px;position:relative;flex:none;
  width:calc(var(--cols)*var(--w) + (var(--cols) - .5)*var(--g));height:calc(var(--h) + (var(--rows) - 1)*(var(--h)*.75 + var(--g)*.866))}
.t{position:absolute;width:var(--w);height:var(--h);text-decoration:none;
  inset-inline-start:calc((var(--c) + var(--o)*.5)*(var(--w) + var(--g)));top:calc(var(--r)*(var(--h)*.75 + var(--g)*.866));
  transition:transform .45s var(--ease),filter .45s var(--ease)}
.field .t{animation:lay .9s var(--ease) both;animation-delay:calc(var(--i)*55ms)}
@keyframes lay{from{opacity:.25;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.hex{position:absolute;inset:0;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--bg,var(--sage));color:var(--fg,var(--ink));
  display:grid;place-items:center;align-content:center;text-align:center;gap:4px;padding:18% 12%;font-size:max(11px,calc(var(--w)*.1));line-height:1.2}
.hex img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hex img.crest-img{position:static;width:62%;height:auto;object-fit:contain}
.hex b{font:400 max(14px,calc(var(--w)*.13))/1.05 var(--display)}
.hex small{font-size:max(11px,calc(var(--w)*.09));line-height:1.25}
.hex .i{width:max(18px,calc(var(--w)*.18));height:max(18px,calc(var(--w)*.18))}
a.t:hover,a.t:focus-visible{transform:translateY(-6px);filter:drop-shadow(0 14px 14px rgb(22 48 47 / .22));outline:none}
a.t:focus-visible{filter:drop-shadow(0 0 1.5px var(--ink)) drop-shadow(0 0 1.5px var(--ink)) drop-shadow(0 0 1px var(--ink))}

/* tile-edge divider: hexagon tops at 30 degrees */
.edge{position:relative}
.edge::before{content:"";position:absolute;inset-inline:0;top:-15px;height:16px;background:var(--edge-c,var(--teal));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='16'%3E%3Cpath d='M0 16 26 1 52 16Z'/%3E%3C/svg%3E") repeat-x bottom/52px 16px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='16'%3E%3Cpath d='M0 16 26 1 52 16Z'/%3E%3C/svg%3E") repeat-x bottom/52px 16px}

/* home hero */
.hero .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center;padding-block:36px 72px}
.hero h1{font-size:clamp(42px,4.8vw,70px)}
.hero .lede{font-size:19px;color:var(--ink-soft);margin-top:24px;max-width:30em}
.field{--w:clamp(90px,11.2vw,150px);justify-self:end}

/* values */
.values-band .wrap{padding-block:96px 88px}
.statement{font-size:clamp(34px,4.2vw,58px);max-width:16em;line-height:1.15}
.chip{display:inline-block;width:.82em;height:.95em;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--c);flex:none}
.vcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px;margin-top:52px;max-width:1080px}
.vcols > div{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline}
.vcols .chip{font-size:24px;grid-row:span 2;align-self:start;margin-top:4px}
.vcols h3{font-size:26px}
.vcols p{color:var(--ink-soft);margin-top:8px}

/* home branches */
.branches{display:grid;grid-template-columns:1fr 1fr}
.branch{background:var(--edge-c);padding-block:84px 88px;padding-inline-start:max(20px,calc((100vw - var(--wrap))/2 + 20px));padding-inline-end:56px}
.branch + .branch{padding-inline-start:56px;padding-inline-end:max(20px,calc((100vw - var(--wrap))/2 + 20px))}
.branch h2{font-size:clamp(36px,4vw,54px)}
.branch p{margin-top:16px;max-width:30em;color:var(--ink-soft)}
.branch[data-dark]{color:var(--vanilla)}
.branch[data-dark] p{color:#d3e6e4}
.branch[data-dark] .lnk{color:var(--vanilla)}
.branch:not([data-dark]) .lnk{color:var(--teal-deep)}
.branch .comb{margin-block:34px 30px}
.classes-comb{--w:84px}
.classes-comb .hex{color:var(--ink);align-content:start;padding:calc(var(--h)*.27) 7% 0;gap:3px}
.classes-comb .hex b{font-size:22px}
.classes-comb .hex small{font-size:11px;line-height:1.2;opacity:.85;text-wrap:balance}

/* explore cards (mood board cards with cut corner) */
.explore .wrap{padding-block:100px 90px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:end}
.explore h2{font-size:clamp(34px,4vw,54px)}
.explore .intro p{margin-top:16px;color:var(--ink-soft)}
.panels{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.panel{text-decoration:none;display:block}
.panel figure{margin:0;aspect-ratio:4/3.2;overflow:hidden;clip-path:polygon(0 0,calc(100% - 46px) 0,100% 27px,100% 100%,0 100%)}
[dir="rtl"] .panel figure{clip-path:polygon(46px 0,100% 0,100% 100%,0 100%,0 27px)}
.panel img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.panel:hover img{transform:scale(1.04)}
.panel .cap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:16px}
.panel h3{font-size:27px}
.panel .lnk{border:0;padding:0}
.cap-text{color:var(--ink-soft);font-size:15.5px;margin-top:6px}

/* families */
.families{--edge-c:var(--sage-pale);background:var(--sage-pale)}
.families .wrap{padding-block:80px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.families h2{font-size:clamp(32px,3.6vw,48px)}
.day{width:100%;max-width:460px;border-collapse:collapse;margin-top:24px;font-variant-numeric:tabular-nums;font-size:16px}
.day td{padding:10px 0;border-bottom:1px solid #b9c9b7}
.day td:last-child{text-align:end;font-weight:700}
.quick{--w:clamp(104px,10vw,136px);justify-self:end}
.quick .hex{gap:8px;color:var(--teal-deep)}
.quick .hex small{font-size:max(12.5px,calc(var(--w)*.1));font-weight:700;color:var(--ink)}
.quick .hex .i{width:max(26px,calc(var(--w)*.22));height:max(26px,calc(var(--w)*.22))}

/* visit band */
.visit{--edge-c:var(--teal);background:var(--teal);color:var(--vanilla);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16.2v32.3L28 64.7 0 48.5V16.2Z M28 64.7V97 M0 48.5v48.5 M56 48.5v48.5' fill='none' stroke='%23157882' stroke-width='1.4'/%3E%3C/svg%3E");background-size:56px 97px;margin-top:16px}
main > .block + .visit{margin-top:96px}
.visit .wrap{padding-block:96px;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px;align-items:start}
.visit h2{font-size:clamp(40px,5vw,72px)}
.visit .lede{color:#d3e6e4;margin-top:18px;max-width:28em;font-size:18px}
.visit .lnk{color:var(--vanilla)}
.addr{background:var(--teal-deep);color:var(--vanilla);padding:34px;display:grid;gap:22px}
.addr > div{display:grid;grid-template-columns:auto 1fr;gap:16px}
.addr .i{color:var(--salmon);margin-top:3px}
.addr b{display:block;font:400 20px/1.25 var(--display)}
.addr span span{display:block;color:#c5dcda;font-size:15.5px;margin-top:2px}

/* ---------- inner pages ---------- */
.phead .wrap{padding-block:40px 64px}
.phead-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:center}
.phead h1{font-size:clamp(44px,5.4vw,78px)}
.phead .alt{font-size:clamp(20px,2vw,26px);color:var(--ink-soft);margin-top:10px}
.phead .lede{font-size:19px;color:var(--ink-soft);margin-top:20px;max-width:34em}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:15px;margin-bottom:18px}
.crumbs a{color:var(--teal);font-weight:700;text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs .i{width:16px;height:16px;color:var(--ink-soft)}
.mini{--w:104px}
.mini .hex .i{width:30px;height:30px}
.mini .hex b{font-size:20px}

.block .wrap{padding-block:72px 0}
main > .block:last-of-type .wrap,main > .block:last-child .wrap{padding-bottom:88px}
.sec-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.sec-head .chip{font-size:30px}
.sec-head h2{font-size:clamp(30px,3.4vw,46px)}
.sec-head .alt{color:var(--ink-soft);font-size:20px}
.sec-head .lnk{margin-inline-start:auto}
.section-lede{font-size:18.5px;color:var(--ink-soft);max-width:40em}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.split-aside{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.split-form{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.prose{max-width:38em}
.prose p + p{margin-top:16px}
.prose p:first-child{font-size:19px}
.photo-frame{margin:0;clip-path:polygon(0 0,calc(100% - 46px) 0,100% 27px,100% 100%,0 100%);aspect-ratio:4/3;overflow:hidden}
[dir="rtl"] .photo-frame{clip-path:polygon(46px 0,100% 0,100% 100%,0 100%,0 27px)}
.photo-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.message{margin:0;background:#fff;padding:36px 40px;max-width:52em;border:1px solid var(--grout)}
.message p{font:400 clamp(22px,2.2vw,28px)/1.4 var(--display)}
html[lang="ar"] .message p{font-family:"Reem Kufi",sans-serif}
.message footer{margin-top:18px;font-weight:700;color:var(--teal)}
.info-table{width:100%;max-width:720px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.info-table th{text-align:start;font-size:14px;color:var(--ink-soft);border-bottom:2px solid var(--ink);padding:8px 0}
.info-table td{padding:14px 0;border-bottom:1px solid var(--grout)}
.info-table td:last-child{text-align:end;font-weight:700}
.branch-intro{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:baseline;margin-bottom:28px}
.meta-line{font-weight:700;color:var(--teal)}
.after-links{margin-top:28px}
.schedule{list-style:none;margin:0;padding:0;display:grid}
.schedule li{display:grid;grid-template-columns:72px 1fr;gap:18px;padding:12px 0;border-bottom:1px solid var(--grout)}
.schedule time{font:400 22px/1.2 var(--display);color:var(--teal);font-variant-numeric:tabular-nums}
.facts{background:var(--sage-pale);padding:28px 30px}
.facts dl{margin:0;display:grid;gap:16px}
.facts dl div{display:grid;gap:2px}
.facts dt{font-size:14px;color:var(--ink-soft)}
.facts dd{margin:0;font:400 21px/1.3 var(--display)}
html[lang="ar"] .facts dd{font-family:"Reem Kufi",sans-serif}
.facts p{margin-top:20px}
.facts a{color:var(--teal-deep)}
.minor-heading{font-size:28px;margin-top:44px}
.subject-list{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}
.subject-list li{display:flex;gap:10px;align-items:center}
.subject-list .i{color:var(--teal);stroke-width:2.2}
.class-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.class-list a{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:14px 20px 14px 14px;background:#fff;border:1px solid var(--grout);text-decoration:none;transition:border-color .2s,transform .3s var(--ease)}
.class-list a:hover{border-color:var(--teal);transform:translateY(-2px)}
.hexcode{width:68px;height:78px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--c);display:grid;place-items:center}
.hexcode b{font:400 19px/1 var(--display);color:var(--ink)}
.cl-text strong{display:block;font:400 22px/1.2 var(--display)}
.cl-text span{color:var(--ink-soft);font-size:15px}
.class-list .i{color:var(--teal)}
.link-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.link-list a{display:inline-flex;gap:10px;align-items:center;font:400 26px/1.2 var(--display);color:var(--teal);text-decoration:none}

/* visit form */
.form-shell{background:#fff;border:1px solid var(--grout);padding:30px}
.vf-send{background:var(--salmon);color:var(--ink);clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%);padding-inline:30px}
.vf-send:hover{background:var(--salmon-deep)}
.visit-done{background:var(--sage-pale);color:var(--teal-deep)}
.visit-done strong{font:400 22px/1.2 var(--display)}
.visit-error{background:#fde3e3;color:#7d2f33}

/* footer */
.foot{background:var(--ink);color:#b9cac8;font-size:15px}
.foot .wrap{padding-block:44px 30px;display:flex;flex-wrap:wrap;gap:24px 48px;align-items:center;justify-content:space-between}
.foot .brand b{color:var(--vanilla)}
.foot .brand img{width:44px;background:var(--vanilla);padding:5px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}
.foot nav a{text-decoration:none}
.foot nav a:hover{color:var(--vanilla)}
.foot .small{flex-basis:100%;border-top:1px solid #2b4645;padding-top:20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13.5px}

@media (max-width:1040px){
  .nav{display:none}
  .menu{display:block}
  .top{position:relative;z-index:9}
  .top.open .nav{display:flex;flex-direction:column;align-items:flex-start;gap:6px;position:absolute;inset-inline:20px;top:84px;background:var(--vanilla);padding:18px 22px;box-shadow:0 18px 36px -18px rgb(22 48 47 / .35)}
  .hero .wrap,.phead-grid{grid-template-columns:1fr;gap:40px}
  .field{justify-self:center}
  .mini{justify-self:start}
  .branches{grid-template-columns:1fr}
  .branch,.branch + .branch{padding-inline:max(20px,env(safe-area-inset-left,0px))}
  .explore .wrap,.families .wrap,.visit .wrap,.split,.split-aside,.split-form{grid-template-columns:1fr}
  .quick{justify-self:start}
}
@media (max-width:640px){
  .field{--cols:3.5!important;--w:calc((100vw - 40px - 3*9px)/3.5)}
  .field .t[data-wide]{display:none}
  .mini{display:none}
  .vcols{grid-template-columns:1fr;gap:28px}
  .panels,.class-list,.subject-list{grid-template-columns:1fr}
  .quick{--w:calc((100vw - 40px - 27px)/4)}
  .quick .hex small{font-size:10.5px}
  .addr,.form-shell{padding:22px}
  .message{padding:24px}
}

/* ---- November update: primary focus, contact links, Facebook ---- */
.nav .fb{display:inline-flex;align-items:center;gap:6px;border:0}
.nav .fb .i{width:22px;height:22px;color:var(--teal)}
@media (min-width:1041px){.nav .fb-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
.foot nav a{display:inline-flex;align-items:center;gap:6px}
.foot .small a{text-decoration:none}
.foot .small a:hover{color:var(--vanilla)}
.branches.primary-first{grid-template-columns:1.55fr 1fr}
.ps-tile{--w:120px}
.ps-tile .hex{align-content:center;padding:14% 10%}
.ps-tile .hex b{font-size:17px;line-height:1.15}
.addr a{display:block;color:#e6f1ef;font-size:15.5px;margin-top:2px;text-decoration:none}
.addr a:hover{color:#fff;text-decoration:underline}
.facts a{color:var(--teal-deep)}
.cl-static{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:14px 20px 14px 14px;background:#fff;border:1px solid var(--grout)}
.curr-names{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.curr-names li{display:flex;gap:12px;align-items:center;font:400 22px/1.25 var(--display)}
html[lang="ar"] .curr-names li{font-family:"Reem Kufi",sans-serif}
.curr-names .i{color:var(--teal)}
.flip-cols > :first-child{order:2}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.branch-card{background:var(--sage-pale);padding:28px 30px;display:grid;gap:16px;align-content:start}
.branch-card h3{font-size:30px}
html[lang="ar"] .branch-card h3{font-family:"Reem Kufi",sans-serif}
.branch-card dl{margin:0;display:grid;gap:14px}
.branch-card dt{font-size:14px;color:var(--ink-soft)}
.branch-card dd{margin:0;font:400 20px/1.3 var(--display)}
html[lang="ar"] .branch-card dd{font-family:"Reem Kufi",sans-serif}
.branch-card a{color:var(--teal-deep)}
.reach{display:flex;flex-wrap:wrap;gap:16px;margin-top:20px}
.reach-item{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--grout);padding:16px 22px;text-decoration:none;transition:border-color .2s}
.reach-item:hover{border-color:var(--teal)}
.reach-item .i{width:28px;height:28px;color:var(--teal)}
.reach-item b{display:block}
.reach-item span span{color:var(--ink-soft);font-size:15px}
@media (max-width:1040px){
  .branches.primary-first{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .flip-cols > :first-child{order:0}
}
/* long addresses and the school email must wrap on phones */
.addr a,.addr span span,.reach-item span,.foot .small,.foot .small a,.branch-card dd,.facts dd{overflow-wrap:anywhere;min-width:0}
.addr > div > span,.reach-item > span{min-width:0}