/* styles.css */
:root{
  --green:#0b372b;
  --green2:#0f4b3b;
  --green3:#145944;
  --cream:#fbfaf4;
  --paper:#fffefb;
  --gold:#c99e43;
  --gold2:#d8b55e;
  --ink:#103b2f;
  --muted:#50675e;
  --line:#eadfca;
  --shadow:0 8px 24px rgba(19,54,43,.11);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:56px}
body{margin:0;background:#fff;color:var(--ink);font-family:"Noto Sans Arabic","IBM Plex Sans Arabic",Arial,sans-serif;line-height:1.45;overflow-x:hidden}
a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}img{display:block;max-width:100%}
.container{width:min(856px,calc(100% - 74px));margin-inline:auto}
.topline{display:none}
.site-header{height:55px;position:sticky;top:0;z-index:50;background:#0a2b20;color:#fff;border:0}
.nav-wrap{height:55px;display:flex;align-items:center;gap:18px;direction:rtl}
.brand{display:flex;align-items:center;gap:10px;min-width:185px;order:1}
.brand-mark{width:42px;height:42px;color:var(--gold);display:grid;place-items:center;font-size:34px;line-height:1;border:0;transform:none}
.brand strong,.brand small{display:block;line-height:1.18}.brand strong{font-size:16px;font-weight:700}.brand small{font-size:13px;color:var(--gold);margin-top:1px}
.main-nav{display:flex;align-items:center;justify-content:center;gap:28px;flex:1;order:2;font-size:12px}.main-nav a{opacity:.98}.main-nav a {
    color: #fff;
}

.main-nav a.is-active {
    color: var(--gold-2) !important;
}
.language-switch{order:3;margin-left:0;border:1px solid var(--gold);background:transparent;color:#fff;border-radius:7px;height:34px;padding:0 18px;display:flex;align-items:center;gap:6px;font-size:12px}
.menu-toggle{display:none}

.hero{height:423px;position:relative;overflow:hidden;background:#fcfbf5;isolation:isolate}
.hero:before{content:"";position:absolute;left:0;top:0;width:69%;height:100%;background:
 radial-gradient(circle at 18% 15%,rgba(255,255,255,.95),rgba(252,249,241,.93) 68%,rgba(247,241,229,.95));z-index:0}
.hero:after{content:"";position:absolute;right:0;top:0;width:43%;height:100%;background-color:#0c493a;background-image:linear-gradient(30deg,transparent 24%,rgba(199,161,77,.10) 25%,transparent 26%),linear-gradient(150deg,transparent 24%,rgba(199,161,77,.10) 25%,transparent 26%);background-size:32px 56px;z-index:0}
.hero-pattern{display:none}.hero-pattern-left{display:block;position:absolute;left:0;top:0;width:145px;height:100%;opacity:.17;background-image:linear-gradient(30deg,transparent 24%,rgba(199,161,77,.25) 25%,transparent 26%),linear-gradient(150deg,transparent 24%,rgba(199,161,77,.25) 25%,transparent 26%);background-size:31px 54px;z-index:1}
.hero-grid{height:423px;display:grid;grid-template-columns:55% 45%;grid-template-areas:"copy portrait";align-items:stretch;direction:ltr;position:relative;z-index:2}
.hero-copy{grid-area:copy;direction:rtl;text-align:right;padding:34px 20px 18px 50px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}
.eyebrow{display:none}
.hero h1{font-family:"Noto Naskh Arabic","Noto Sans Arabic",serif;font-size:44px;line-height:1.05;letter-spacing:-1px;margin:0 0 4px;color:#0a4335;font-weight:800;align-self:center;text-align:center}
.hero h2{font-family:"Noto Naskh Arabic","Noto Sans Arabic",serif;font-size:24px;line-height:1.25;color:var(--gold);margin:2px 0 11px;align-self:center;font-weight:700}
.hero-lead{font-size:12px;font-weight:700;line-height:1.7;margin:0 auto 10px;max-width:380px;text-align:right}
.hero-points{list-style:none;padding:0;margin:0 auto 12px;display:grid;gap:3px;font-size:11px;line-height:1.4;max-width:390px;width:100%}.hero-points li{display:flex;align-items:flex-start;gap:7px}.hero-points li>span:first-child{width:14px;height:14px;flex:0 0 14px;background:#0c4e3c;color:#fff;border-radius:50%;font-size:9px;display:grid;place-items:center;margin-top:1px}
.hero-actions{display:flex;gap:14px;justify-content:center;align-self:center}.button{height:35px;border-radius:6px;padding:0 24px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:700;cursor:pointer}.button-gold{background:linear-gradient(90deg,#c39232,#d3aa52);color:white}.button-outline{background:#fff;border-color:#145242;color:#163e34}.hero-email{direction:ltr;display:flex;align-items:center;gap:8px;align-self:center;margin-top:10px;font-size:11px;color:#23493f}
.hero-portrait{grid-area:portrait;position:relative;display:flex;align-items:flex-end;justify-content:center;padding:32px 0 0;direction:ltr}
.portrait-arch{width:292px;height:392px;border:3px solid var(--gold);border-bottom:0;border-radius:160px 160px 0 0;overflow:hidden;background:#143d34;position:relative;margin-right:24px}
.portrait-arch:after{content:"";position:absolute;inset:8px 8px 0;border:1px solid rgba(216,181,94,.8);border-bottom:0;border-radius:153px 153px 0 0;pointer-events:none}
.portrait-arch img{width:100%;height:100%;object-fit:cover;object-position:center 21%;transform:scale(1.18);transform-origin:center top}
.portrait-badge{display:none}

.feature-strip{height:154px;background:linear-gradient(90deg,#0a3a2c,#0c4c3a,#0a3a2c);color:white;padding:19px 0 12px;border:0}
.feature-grid{height:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:15px;direction:rtl}
.feature-card{position:relative;height:117px;border:1px solid #ad8d46;border-radius:16px;text-align:center;padding:28px 12px 10px;background:rgba(255,255,255,.01)}
.round-icon{position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:45px;height:45px;background:linear-gradient(135deg,#c79b40,#d6b25f);border:2px solid rgba(255,255,255,.14);border-radius:50%;display:grid;place-items:center;font-size:20px;color:white}
.feature-card h3{font-size:14px;margin:3px 0 5px;color:#fff}.feature-card p{font-size:10.5px;line-height:1.55;margin:0;color:#f0f2ed}

.section{padding:0}.students-section{height:200px;background:#fff;padding:8px 0 6px}.section-heading{text-align:center;margin:0 auto 9px;max-width:700px}.section-kicker{display:none}.section-heading h2{font-family:"Noto Naskh Arabic","Noto Sans Arabic",serif;margin:0;color:#123f33;font-size:25px;line-height:1.15;font-weight:800}.ornament{font-size:15px;color:var(--gold);line-height:1;margin-top:1px}.student-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;direction:rtl}.white-card{height:112px;background:#fff;border:1px solid #eee3d2;border-radius:12px;box-shadow:0 5px 15px rgba(21,55,45,.09);text-align:center;padding:8px 10px 6px}.card-emoji{font-size:27px;line-height:1.15;margin-bottom:3px}.white-card h3{font-size:12px;margin:0 0 4px;color:#123f33;font-weight:800}.white-card p{font-size:9.5px;line-height:1.5;margin:0;color:#234b40}
.outcomes-section{height:153px;background:#fff;padding:8px 0 10px}.outcomes-section .section-heading{margin-bottom:9px}.outcomes-section .section-heading h2{font-size:22px}.outcome-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;direction:rtl}.outcome-card{height:103px;background:#fff;border:1px solid #eee3d2;border-radius:12px;box-shadow:0 5px 15px rgba(21,55,45,.07);text-align:center;padding:7px 8px}.outcome-card>div{font-size:25px;line-height:1.05;color:#0d4b3b;margin:0 0 2px}.outcome-card h3{font-size:11px;margin:0 0 3px;color:#123f33}.outcome-card p{font-size:8.6px;line-height:1.45;color:#234b40;margin:0}

.about-section{height:186px;position:relative;overflow:hidden;background:#0b3f31;color:#fff;padding:0}.about-pattern{position:absolute;inset:0;opacity:.16;background-image:linear-gradient(30deg,transparent 24%,rgba(199,161,77,.28) 25%,transparent 26%),linear-gradient(150deg,transparent 24%,rgba(199,161,77,.28) 25%,transparent 26%);background-size:30px 52px}.about-grid{height:186px;display:grid;grid-template-columns:25% 75%;gap:12px;align-items:center;direction:ltr;position:relative;z-index:1}.about-photo{align-self:stretch;display:flex;align-items:flex-end;justify-content:center}.about-photo-ring{width:156px;height:173px;border:2px solid var(--gold);border-bottom:0;border-radius:90px 90px 0 0;padding:0;overflow:hidden;background:#173e35}.about-photo-ring img{width:100%;height:100%;object-fit:cover;object-position:center 20%;transform:scale(1.18);transform-origin:center top;border-radius:0}
.about-copy{direction:rtl;text-align:center;padding:13px 40px 10px 0}.about-copy .section-kicker{display:block;color:white;font-size:13px;margin:0 0 2px}.about-copy h2{font-family:"Noto Naskh Arabic","Noto Sans Arabic",serif;font-size:26px;line-height:1.1;color:var(--gold);margin:0 0 2px}.about-copy h3{font-size:12px;margin:0 0 7px;color:#fff}.about-copy p{font-size:10px;line-height:1.55;color:#fff;margin:0 auto 8px;max-width:570px}.about-tags{display:flex;gap:8px;justify-content:center;flex-wrap:nowrap;margin:0}.about-tags span{font-size:9px;padding:6px 12px;border-radius:5px;background:rgba(255,255,255,.07);border:1px solid rgba(199,161,77,.15);white-space:nowrap}

.booking-section{height:290px;background:white;padding:5px 0 7px}.booking-section .section-heading{margin-bottom:5px}.booking-section .section-heading h2{font-size:25px}.booking-shell{height:248px;display:grid;grid-template-columns:49% 51%;direction:ltr;border:1px solid #eadfca;border-radius:12px;overflow:hidden;background:white;box-shadow:0 5px 18px rgba(16,55,43,.08)}
.calendar-panel{direction:rtl;background:linear-gradient(145deg,#0a3b2e,#0b4a39);color:white;padding:10px 12px;display:grid;grid-template-columns:65% 35%;grid-template-rows:30px 1fr;gap:5px 8px}.calendar-head{grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:space-between}.calendar-head small{display:none}.calendar-head strong{font-size:12px}.calendar-nav{width:24px;height:24px;border:0;background:transparent;color:#fff;cursor:pointer}.calendar-weekdays{grid-column:1;grid-row:2;align-self:start;display:grid;grid-template-columns:repeat(7,1fr);gap:2px;font-size:8px;text-align:center;color:#e6eee9;padding-top:2px}.calendar-grid{grid-column:1;grid-row:2;display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:25px;gap:1px;padding-top:20px}.calendar-day{width:24px;height:24px;border:0;background:transparent;color:white;border-radius:50%;font-size:9px;cursor:pointer;margin:auto}.calendar-day:disabled{opacity:.2}.calendar-day.has-slots{color:#fff}.calendar-day.is-selected{background:transparent;border:1px solid var(--gold);color:#fff}.calendar-blank{width:24px;height:24px}.time-wrap{grid-column:2;grid-row:1/3;border-right:1px solid rgba(255,255,255,.14);padding-right:8px;margin:0}.time-wrap h3{text-align:center;font-size:10px;margin:0 0 8px}.time-slots{display:grid;grid-template-columns:1fr;gap:5px}.time-slot{height:22px;border:0;border-radius:4px;background:#fff;color:#344a43;font-size:8.5px}.time-slot.is-selected{background:#0d4a38;color:white;border:1px solid var(--gold)}.muted{font-size:8px;color:#d6e0dc}
.booking-form{direction:rtl;padding:10px 13px;background:white}.form-heading{text-align:center}.form-heading h3{font-size:12px;margin:0;color:#123e33}.form-heading p{font-size:8px;color:#777;margin:1px 0 7px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 7px}.booking-form label{display:grid;gap:2px;font-size:8px;font-weight:700;color:#25463d}.booking-form input,.booking-form select,.booking-form textarea{height:24px;width:100%;border:1px solid #e1ddd5;border-radius:4px;padding:2px 7px;background:#fff;color:#394e48;outline:none;font-size:8px}.booking-form textarea{height:34px;resize:none}.full-width{margin-top:5px}.guardian-fields{display:none;margin-top:5px}.consent-line{display:none!important}.honeypot{position:absolute!important;left:-10000px!important}.selected-slot{display:none}.submit-button{height:26px;width:100%;margin-top:5px;border-radius:4px;font-size:10px}.form-status{font-size:8px;min-height:0;margin-top:2px}.booking-note{height:24px;margin:0;display:flex;align-items:center;justify-content:center;font-size:8px;color:#777;border-top:1px solid #eee7da}

.payment-section{display:none}
.faq-section{height:100px;background:#fff;padding:20px 0 10px;border-top:1px solid #eee3d1}.faq-section .section-heading{margin:-12px auto 10px}.faq-section .section-heading h2{font-size:15px}.faq-section .section-heading h2:before{content:"كيف تتم الدروس؟";font-size:15px}.faq-section .section-heading h2{font-size:0}.faq-section .ornament{display:none}.faq-list{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;direction:rtl}.faq-list details{height:34px;background:#fbfaf6;border:1px solid #e9dfcf;border-radius:8px;box-shadow:0 4px 10px rgba(16,55,43,.04);padding:0 10px;overflow:hidden}.faq-list summary{list-style:none;cursor:pointer;font-size:9px;font-weight:700;color:#153f34;line-height:32px;white-space:nowrap}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:before{content:"⌄";float:left;color:#1e5345;margin-right:6px}.faq-list p{display:none}

.site-footer{height:123px;position:relative;overflow:hidden;background:#0b3f31;color:white;padding:13px 0 0}.footer-pattern{display:none}.footer-grid{height:83px;display:grid;grid-template-columns:1.3fr .8fr 1fr;gap:28px;direction:rtl}.footer-brand{order:1}.footer-brand .brand{justify-content:flex-start}.footer-brand .brand-mark{font-size:35px}.footer-brand p{font-size:8px;line-height:1.5;color:#e1ebe7;margin:6px 0 0;max-width:260px}.footer-grid>div:not(.footer-brand){display:flex;flex-direction:column;align-items:flex-start;gap:4px;border-inline-start:1px solid rgba(199,161,77,.5);padding-inline-start:25px}.footer-grid h3{font-size:10px;margin:0 0 3px;color:white}.footer-grid a,.footer-grid span{font-size:8px;color:white}.footer-bottom{height:26px;text-align:center;margin:0;padding:6px 0 0;border:0;font-size:8px;color:#fff}.mobile-book{display:none}
.reveal{opacity:1!important;transform:none!important}

@media(max-width:980px){
  .container{width:min(100% - 24px,620px)}
  .site-header,.nav-wrap{height:64px}.main-nav{display:none}.menu-toggle{display:flex;order:2;margin-right:auto;border:1px solid rgba(255,255,255,.25);background:transparent;color:white;border-radius:6px;height:36px;width:36px;align-items:center;justify-content:center}.language-switch{order:3}.brand{order:1;min-width:0}.hero{height:auto}.hero:before{width:100%;height:50%}.hero:after{width:100%;height:50%;top:50%}.hero-grid{height:auto;grid-template-columns:1fr;grid-template-areas:"copy" "portrait"}.hero-copy{padding:38px 10px 26px}.hero h1{font-size:40px}.hero-portrait{height:430px}.feature-strip{height:auto;padding:38px 0 20px}.feature-grid{grid-template-columns:1fr 1fr;gap:30px 12px}.feature-card{height:120px}.students-section,.outcomes-section,.about-section,.booking-section,.faq-section,.site-footer{height:auto}.student-grid{grid-template-columns:1fr 1fr}.white-card{height:130px}.outcome-grid{grid-template-columns:1fr 1fr}.outcome-card{height:120px}.about-grid{height:auto;grid-template-columns:1fr;padding-top:20px}.about-photo-ring{height:250px;width:210px}.about-copy{padding:15px 10px 30px}.booking-shell{height:auto;grid-template-columns:1fr}.calendar-panel{min-height:300px}.booking-form{padding:20px}.form-grid{grid-template-columns:1fr}.faq-list{grid-template-columns:1fr}.faq-list details{height:auto;min-height:38px}.site-footer{padding:28px 0 70px}.footer-grid{height:auto;grid-template-columns:1fr;gap:25px}.footer-grid>div:not(.footer-brand){border:0;padding:0}.mobile-book{display:block;position:fixed;bottom:12px;left:12px;right:12px;z-index:60;background:var(--gold);color:white;text-align:center;padding:11px;border-radius:10px;font-weight:700}
}

/* ===== APPROVED MOCKUP ALIGNMENT OVERRIDES ===== */
@media (min-width:981px){
  .hero{background:#fbfaf4;}
  .hero:before,.hero:after,.hero-pattern{display:none!important;}
  .hero-grid.container{width:100%;max-width:none;margin:0;grid-template-columns:56.58% 43.42%;gap:0;}
  .hero-copy{padding:35px 55px 14px 102px;align-items:flex-end;text-align:right;}
  .hero h1{align-self:flex-end;text-align:right;margin:0 0 4px;font-size:45px;max-width:350px;}
  .hero h2{align-self:flex-end;text-align:right;font-size:24px;margin:0 0 10px;}
  .hero-lead{align-self:stretch;margin:0 0 10px;text-align:right;max-width:none;font-size:11.5px;}
  .hero-points{align-self:stretch;margin:0 0 12px;max-width:none;font-size:10.5px;}
  .hero-actions{direction:ltr;align-self:flex-end;justify-content:flex-end;}
  .hero-email{align-self:center;margin-inline-start:65px;}
  .hero-portrait{
    padding:0;
    background-image:url('hero-approved-hires.png');
    background-repeat:no-repeat;
    background-position:center top;
    background-size:cover;
}
  .portrait-arch,.portrait-badge{display:none;}
}
.brand-mark{position:relative;font-size:0!important;border:0!important;transform:none;background:none!important;box-shadow:none!important;}
.brand-mark:before,.brand-mark:after{content:"";position:absolute;inset:10px;border:2px solid var(--gold);}
.brand-mark:before{transform:rotate(22.5deg);}
.brand-mark:after{transform:rotate(67.5deg);}
.ui-icon{color:#0b4a3a;display:grid;place-items:center;margin:0 auto 4px;}
.ui-icon svg{width:28px;height:28px;display:block;}
.round-icon .ui-icon{color:#fff;margin:0;}
.round-icon .ui-icon svg{width:25px;height:25px;}
.white-card>.ui-icon{height:31px;margin-bottom:2px;}
.outcome-card>.ui-icon{height:29px;margin-bottom:2px;}
.outcome-card>.ui-icon svg{width:26px;height:26px;}

/* Approved image uses a slightly taller white content block before About. */
.students-section{height:201px;padding-top:9px;}
.outcomes-section{height:152px;padding-top:7px;}

@media (min-width:981px){
  .about-grid{grid-template-columns:27% 73%;}
  .about-photo{position:relative;}
  .about-photo-ring{display:none;}
  .about-photo:before{content:"";position:absolute;left:-39px;top:0;width:285px;height:186px;background:url('about-approved-hires.png') left top/285px 186px no-repeat;}
  .about-copy{padding:10px 34px 9px 0;text-align:center;}
}

/* The approved booking mockup has exactly 3 two-column rows + notes. */
.booking-form .conditional-field{display:none;margin-top:4px;}
.booking-form .guardian-fields{display:none;margin-top:4px;}
.booking-form .notes-field{margin-top:5px;}
.booking-form .notes-field textarea{height:34px;}
.booking-form .form-grid{gap:4px 7px;}
.booking-form input,.booking-form select{height:23px;}

/* FAQ in the approved mockup is a compact five-card strip. */
.faq-section .section-heading h2:before{content:none!important;}
.faq-section .section-heading h2{font-size:15px!important;}

/* Match the approved footer ordering: contact left, links centre, brand right. */
@media (min-width:981px){
  .footer-grid{direction:ltr;grid-template-columns:1fr .8fr 1.3fr;grid-template-areas:"contact links brand";}
  .footer-brand{grid-area:brand;order:initial;text-align:right;direction:rtl;}
  .footer-grid>div:nth-child(2){grid-area:links;direction:rtl;align-items:center!important;border-inline-start:1px solid rgba(199,161,77,.5);border-inline-end:1px solid rgba(199,161,77,.5);padding:0 25px!important;}
  .footer-grid>div:nth-child(3){grid-area:contact;direction:rtl;align-items:flex-start!important;border:0!important;padding:0!important;}
}
html{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
@media (min-width:981px){
  .hero-copy{align-items:flex-start;}
  .hero h1,.hero h2{align-self:flex-start;}
  .hero-actions{align-self:flex-start;}
}
@media (min-width:981px){
  .hero h1{font-size:49px;line-height:1.02;}
  .hero-points{font-size:11px;line-height:1.5;gap:4px;}
  .hero-actions .button-gold{width:145px;padding-inline:14px;}
  .hero-actions .button-outline{width:165px;padding-inline:14px;}
  .feature-card{padding-top:43px;}
  .round-icon{top:-8px;}
  .about-copy{width:445px;justify-self:start;padding:10px 0 9px 0;}
  .booking-section{padding:3px 0 6px;overflow:visible;}
  .booking-section .section-heading{height:39px;margin-bottom:3px;}
  .booking-section .section-heading h2{font-size:25px;line-height:28px;}
  .booking-section .ornament{height:11px;line-height:11px;margin-top:0;}
  .booking-shell{width:840px;max-width:100%;height:235px;margin-inline:auto;grid-template-columns:48.2% 51.8%;}
  .booking-form{padding:8px 12px;}
  .form-heading p{margin:1px 0 5px;}
  .booking-form .form-grid{gap:3px 7px;}
  .booking-form .notes-field{margin-top:4px;}
  .booking-form .notes-field textarea{height:31px;}
  .booking-form .submit-button{height:24px;margin-top:4px;}
}
/* Colour calibration against the approved 935×1683 reference. */
.feature-strip{background:#0e382a;}
.feature-card{background:rgba(255,255,255,.008);}
.about-section,.site-footer{background:#0b3527;}
.calendar-panel{background:#0b3428;}
.students-section,.outcomes-section,.faq-section{background:#fffefb;}


/* ==========================================================================
   DESKTOP ARTBOARD SCALING
   --------------------------------------------------------------------------
   The approved design is a 935px-wide artboard. On wide desktop monitors the
   old version kept the artboard's vertical dimensions but stretched the page
   backgrounds across the monitor, which made the typography/cards look tiny.

   Keep the live site on the same 935px coordinate system and scale the whole
   artboard uniformly to the current desktop viewport. This preserves the exact
   proportions of the approved 935 x 1683 mockup at 1366/1440/1920/etc.
   Mobile keeps the responsive layout below 761px.
   ========================================================================== */
@media (min-width:981px){
  html{
    width:100%;
    min-width:100%;
    overflow-x:hidden;
    background:#fff;
  }
  body{
    width:935px;
    min-width:935px;
    max-width:935px;
    zoom:var(--desktop-zoom,1);
    margin:0;
    overflow-x:hidden;
  }
}

@media (max-width:980px){
  body{
    width:auto;
    min-width:0;
    max-width:none;
    zoom:1;
  }
}

/* ==========================================================================
   V4 POLISH — typography, sticky navigation, animated emblem, spacing, mobile
   ========================================================================== */

/* Header brand cluster and animated geometric menu/emblem */
.brand-cluster{display:flex;align-items:center;gap:8px;order:1;min-width:185px;direction:rtl}
.brand-cluster .brand{order:initial;min-width:0;gap:0}
.brand-menu-toggle{width:42px;height:42px;flex:0 0 42px;padding:0;border:0;background:transparent;color:var(--gold);display:grid;place-items:center;cursor:pointer;border-radius:10px}
.brand-menu-toggle:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
.spinning-mark{transform-origin:50% 50%;animation:emblemSlowCCW 18s linear infinite;will-change:transform}
@keyframes emblemSlowCCW{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
@keyframes emblemFastOpen{from{transform:rotate(0deg)}to{transform:rotate(-720deg)}}
@keyframes emblemFastClose{from{transform:rotate(0deg)}to{transform:rotate(720deg)}}
.brand-menu-toggle.spin-open .spinning-mark{animation:emblemFastOpen .48s cubic-bezier(.2,.72,.22,1)}
.brand-menu-toggle.spin-close .spinning-mark{animation:emblemFastClose .48s cubic-bezier(.2,.72,.22,1)}

/* Sticky header + clear current-section state */
.site-header{position:sticky;top:0;z-index:100;box-shadow:0 5px 18px rgba(2,31,23,.08)}
.main-nav a{position:relative;transition:color .2s ease,opacity .2s ease}
.main-nav a::after{content:"";position:absolute;left:50%;right:50%;bottom:-8px;height:2px;background:var(--gold);border-radius:2px;transition:left .22s ease,right .22s ease}
.main-nav a.is-active{color:var(--gold2)!important}
.main-nav a.is-active::after{left:10%;right:10%}

/* Desktop text is intentionally a little quieter than V3. */
@media (min-width:981px){
  .brand strong{font-size:14px}.brand small{font-size:11.5px}
  .main-nav{font-size:10.5px}.language-switch{font-size:10.5px}
  .hero h1{font-size:43px;line-height:1.04}
  .hero h2{font-size:21px}
  .hero-lead{font-size:10.2px;line-height:1.62}
  .hero-points{font-size:9.7px;line-height:1.48;gap:3px}
  .button{font-size:10.5px}.hero-email{font-size:9.7px}
  .feature-card h3{font-size:12.2px}.feature-card p{font-size:9.2px}
  .section-heading h2{font-size:22px}.outcomes-section .section-heading h2{font-size:19.5px}
  .white-card h3{font-size:10.5px}.white-card p{font-size:8.4px}
  .outcome-card h3{font-size:9.7px}.outcome-card p{font-size:7.7px}
  .about-copy .section-kicker{font-size:11.5px}.about-copy h2{font-size:23px}.about-copy h3{font-size:10.6px}.about-copy p{font-size:8.9px}.about-tags span{font-size:8px}
  .booking-section .section-heading h2{font-size:22px;line-height:26px}
  .calendar-head strong{font-size:10.7px}.calendar-weekdays{font-size:7.2px}.calendar-day{font-size:8px}
  .time-wrap h3{font-size:9px}.time-slot{font-size:7.6px}
  .form-heading h3{font-size:10.7px}.form-heading p{font-size:7.2px}.booking-form label{font-size:7.2px}.booking-form input,.booking-form select,.booking-form textarea{font-size:7.2px}.submit-button{font-size:9px}
  .booking-note{font-size:7.2px}
  .faq-section .section-heading h2{font-size:13.2px!important}.faq-list summary{font-size:8px}
  .footer-grid h3{font-size:9px}.footer-grid a,.footer-grid span,.footer-brand p,.footer-bottom{font-size:7.2px}

  /* V3's booking region was 20–25px too short, causing the note and FAQ to collide. */
  .booking-section{height:316px;padding-bottom:12px;overflow:visible}
  .booking-shell{height:235px}
  .booking-note{height:29px;padding-top:3px;border-top:0}
  .faq-section{height:104px;padding-top:14px;border-top:1px solid #eee3d1}
}

/* Tablet / phone header and navigation. */
@media (max-width:980px){
  html{scroll-padding-top:72px}
  .site-header,.nav-wrap{height:68px}
  .nav-wrap{position:relative;gap:10px}
  .brand-cluster{min-width:0;order:1;gap:6px}
  .brand-menu-toggle{display:grid;width:42px;height:42px;flex-basis:42px}
  .brand-text{min-width:0}
  .brand strong{font-size:14px}.brand small{font-size:11px}
  .language-switch{order:3;margin-inline-start:auto;height:36px;padding-inline:12px;font-size:11px}
  .main-nav{position:absolute;top:calc(100% + 8px);inset-inline:12px;display:none!important;flex-direction:column;align-items:stretch;gap:0;padding:9px;background:rgba(7,47,37,.985);border:1px solid rgba(216,181,94,.28);border-radius:14px;box-shadow:0 18px 45px rgba(0,0,0,.2);z-index:120;font-size:14px;overflow:hidden}
  .main-nav.open{display:flex!important}
  .main-nav a{padding:12px 14px;border-radius:9px}
  .main-nav a:hover,.main-nav a.is-active{background:rgba(255,255,255,.06)}
  .main-nav a::after{display:none}

  .hero{min-height:0;height:auto}
  .hero-grid{height:auto;grid-template-columns:1fr;grid-template-areas:"copy" "portrait"}
  .hero-copy{padding:44px 18px 30px;align-items:center!important;text-align:center!important}
  .hero h1,.hero h2{align-self:center!important;text-align:center!important}
  .hero h1{font-size:42px;max-width:600px;line-height:1.05}
  .hero h2{font-size:22px}
  .hero-lead{max-width:620px;text-align:center;font-size:14px}
  .hero-points{max-width:620px;font-size:13px;gap:7px}
  .hero-actions{align-self:center!important;justify-content:center!important;flex-wrap:wrap}
  .hero-email{margin-inline-start:0;font-size:12px}
  .hero-portrait{height:470px;padding-top:26px;background:none}
  .portrait-arch{display:block;width:min(390px,88vw);height:450px;margin:0;border-radius:210px 210px 0 0}
  .portrait-badge{display:none}

  .feature-strip{height:auto;padding:45px 0 28px}
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 15px}
  .feature-card{height:auto;min-height:128px;padding:37px 16px 18px}
  .feature-card h3{font-size:16px}.feature-card p{font-size:12px}

  .students-section,.outcomes-section{height:auto;padding:36px 0}
  .section-heading{margin-bottom:22px}.section-heading h2{font-size:30px}.outcomes-section .section-heading h2{font-size:28px}
  .student-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
  .white-card{height:auto;min-height:145px;padding:20px 16px}.white-card h3{font-size:15px}.white-card p{font-size:12px}
  .outcome-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
  .outcome-card{height:auto;min-height:140px;padding:18px 14px}.outcome-card h3{font-size:14px}.outcome-card p{font-size:11px}

  .about-section{height:auto;padding:38px 0}
  .about-grid{height:auto;grid-template-columns:1fr;gap:22px}
  .about-photo{align-self:auto}
  .about-photo:before{display:none}
  .about-photo-ring{display:block;width:min(280px,72vw);height:310px;border-radius:155px 155px 0 0}
  .about-copy{width:auto;justify-self:stretch;padding:0 16px 6px;text-align:center}
  .about-copy .section-kicker{font-size:14px}.about-copy h2{font-size:30px}.about-copy h3{font-size:14px}.about-copy p{font-size:13px;max-width:650px}.about-tags{flex-wrap:wrap}.about-tags span{font-size:11px;padding:8px 11px}

  .booking-section{height:auto;padding:36px 0 24px}
  .booking-section .section-heading{height:auto;margin-bottom:20px}.booking-section .section-heading h2{font-size:30px;line-height:1.2}
  .booking-shell{height:auto;width:100%;grid-template-columns:1fr;border-radius:16px;overflow:hidden}
  .calendar-panel{min-height:390px;padding:22px;grid-template-columns:1fr;grid-template-rows:auto auto auto auto;gap:10px}
  .calendar-head{grid-column:1;grid-row:1}.calendar-head strong{font-size:18px}
  .calendar-weekdays{grid-column:1;grid-row:2;font-size:11px;padding-top:0}
  .calendar-grid{grid-column:1;grid-row:3;padding-top:0;grid-auto-rows:38px}.calendar-day,.calendar-blank{width:36px;height:36px}.calendar-day{font-size:12px}
  .time-wrap{grid-column:1;grid-row:4;border:0;border-top:1px solid rgba(255,255,255,.15);padding:16px 0 0;margin-top:6px}.time-wrap h3{font-size:13px}.time-slots{grid-template-columns:repeat(3,1fr)}.time-slot{height:38px;font-size:11px}
  .booking-form{padding:24px}.form-heading h3{font-size:20px}.form-heading p{font-size:12px;margin-bottom:16px}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.booking-form label{font-size:12px}.booking-form input,.booking-form select,.booking-form textarea{height:42px;font-size:12px;padding:8px 10px}.booking-form .notes-field textarea{height:84px}.submit-button{height:46px;font-size:14px}
  .booking-note{height:auto;min-height:44px;padding:12px 14px;font-size:11px;text-align:center;border:0}

  .faq-section{height:auto;padding:30px 0 38px}.faq-section .section-heading{margin:0 auto 18px}.faq-section .section-heading h2{font-size:24px!important}
  .faq-list{grid-template-columns:1fr;gap:10px}.faq-list details{height:auto;min-height:48px;padding:0 14px}.faq-list summary{font-size:13px;line-height:46px}.faq-list p{display:block;font-size:12px;line-height:1.7;color:#4e665e;padding:0 0 14px;margin:0}

  .site-footer{height:auto;padding:36px 0 82px}.footer-grid{height:auto;grid-template-columns:1fr;grid-template-areas:none!important;gap:26px;direction:rtl}
  .footer-brand,.footer-grid>div:nth-child(2),.footer-grid>div:nth-child(3){grid-area:auto!important;align-items:center!important;text-align:center!important;border:0!important;padding:0!important;direction:rtl}
  .footer-brand .brand{justify-content:center}.footer-brand p{font-size:11px;max-width:420px;margin-inline:auto}.footer-grid h3{font-size:14px}.footer-grid a,.footer-grid span{font-size:11px}.footer-bottom{height:auto;font-size:10px;padding-top:20px}
  .mobile-book{display:block}
}

@media (max-width:700px){
  .container{width:calc(100% - 28px)}
  .brand strong{font-size:13px}.brand small{font-size:10px}
  .hero-copy{padding:36px 8px 24px}.hero h1{font-size:36px}.hero h2{font-size:20px}.hero-lead{font-size:13px}.hero-points{font-size:12px}
  .hero-portrait{height:410px}.portrait-arch{height:390px;width:min(350px,92vw)}
  .feature-grid,.student-grid,.outcome-grid{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
}

@media (max-width:520px){
  .site-header,.nav-wrap{height:64px}.container{width:calc(100% - 22px)}
  .brand-cluster{gap:3px}.brand-menu-toggle{width:38px;height:38px;flex-basis:38px}.brand-mark{width:38px;height:38px}.brand-mark:before,.brand-mark:after{inset:9px}
  .brand strong{font-size:12px}.brand small{font-size:9px}
  .language-switch{height:34px;padding-inline:9px;font-size:10px}
  .hero h1{font-size:32px;letter-spacing:-.4px}.hero h2{font-size:18px}.hero-lead{font-size:12.5px;line-height:1.65}.hero-points{font-size:11.5px}
  .hero-actions{width:100%}.hero-actions .button{flex:1;min-width:0;padding-inline:10px;font-size:11px}
  .hero-email{font-size:10.5px;flex-wrap:wrap;justify-content:center}
  .hero-portrait{height:355px}.portrait-arch{height:340px;width:min(305px,92vw)}
  .feature-grid,.student-grid,.outcome-grid{grid-template-columns:1fr;gap:30px}
  .feature-card{min-height:120px}.white-card,.outcome-card{min-height:0;padding:20px 16px}
  .section-heading h2,.outcomes-section .section-heading h2{font-size:26px}
  .about-copy h2{font-size:27px}.about-copy p{font-size:12px}
  .calendar-panel{padding:18px 12px;min-height:360px}.calendar-weekdays{font-size:9px}.calendar-grid{grid-auto-rows:34px}.calendar-day,.calendar-blank{width:32px;height:32px}.time-slots{grid-template-columns:1fr 1fr}
  .booking-form{padding:20px 14px}.booking-section .section-heading h2{font-size:27px}
  .faq-list summary{font-size:12px;white-space:normal;line-height:1.4;padding:14px 0}
}

@media (max-width:390px){
  .brand-text small{display:none}.brand strong{font-size:11px}.language-switch{padding-inline:7px;font-size:9px}
  .hero h1{font-size:29px}.hero h2{font-size:17px}.hero-lead{font-size:12px}.hero-points{font-size:11px}
  .hero-portrait{height:325px}.portrait-arch{height:315px;width:min(285px,92vw)}
  .time-slots{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .spinning-mark{animation:none!important}
  html{scroll-behavior:auto}
}


/* ==========================================================================
   V5 REFINEMENTS — fixed desktop header, more breathing room, CSS-built about
   ========================================================================== */
@media (min-width:981px){
  html{scroll-padding-top:72px}
  body{padding-top:55px}
  .site-header{position:fixed!important;top:0;left:0;right:0;width:100%;z-index:500}

  /* Give the outcomes row a little more air before the About section. */
  .outcomes-section{height:auto!important;padding:7px 0 20px!important}
  .outcomes-section .section-heading{margin-bottom:11px!important}
  .outcome-grid{margin-bottom:4px}

  /* Rebuild the About banner with CSS + normal assets, not a baked banner image. */
  .about-section{height:186px;position:relative;overflow:hidden;padding:0;background:
    radial-gradient(circle at 71% 18%, rgba(23,98,73,.5), rgba(23,98,73,0) 24%),
    linear-gradient(90deg,#08392c 0%, #0a4032 33%, #09372b 100%)!important}
  .about-section .about-pattern{display:none!important}
  .about-grid{height:186px;grid-template-columns:25.2% 74.8%!important;gap:0;align-items:stretch;width:min(935px,100%);margin-inline:auto;direction:ltr;position:relative;z-index:1}
  .about-photo{position:relative;align-self:stretch;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;background:
      linear-gradient(90deg, rgba(8,57,44,.75) 0%, rgba(8,57,44,.55) 58%, rgba(8,57,44,0) 100%),
      linear-gradient(30deg,transparent 24%,rgba(199,161,77,.12) 25%,transparent 26%),
      linear-gradient(150deg,transparent 24%,rgba(199,161,77,.12) 25%,transparent 26%);
    background-size:auto,30px 52px,30px 52px;background-position:center center,0 0,0 0}
  .about-photo:before{display:none!important}
  .about-photo::after{content:"";position:absolute;right:0;top:0;bottom:0;width:1px;background:rgba(216,181,94,.28)}
  .about-photo-ring{display:block!important;position:relative;width:154px;height:173px;border:2px solid var(--gold);border-bottom:0;border-radius:88px 88px 0 0;overflow:hidden;background:#173e35;margin:0 auto 0}
  .about-photo-ring::after{content:"";position:absolute;inset:8px 8px 0;border:1px solid rgba(216,181,94,.75);border-bottom:0;border-radius:80px 80px 0 0;pointer-events:none}
  .about-photo-ring img{width:100%;height:100%;object-fit:cover;object-position:center 22%;transform:scale(1.18);transform-origin:center top}

  .about-copy{position:relative;direction:rtl;text-align:center;padding:13px 72px 8px 16px!important;overflow:hidden}
  .about-copy::before{content:"";position:absolute;inset:0;background:
      radial-gradient(circle at 72% 20%, rgba(17,88,66,.55), rgba(17,88,66,0) 22%),
      repeating-linear-gradient(-27deg, rgba(255,255,255,.045) 0 2px, transparent 2px 25px);
      opacity:.28;pointer-events:none}
  .about-copy > *{position:relative;z-index:1}
  .about-copy .section-kicker{display:block;color:#fff;font-size:12px;margin:0 0 2px}
  .about-copy h2{font-family:"Noto Naskh Arabic","Noto Sans Arabic",serif;font-size:28px;line-height:1.08;color:var(--gold);margin:0 0 2px}
  .about-copy h3{font-size:13px;line-height:1.25;margin:0 0 8px;color:#fff}
  .about-copy p{font-size:10px;line-height:1.55;color:#fff;max-width:560px;margin:0 auto 10px}
  .about-tags{display:flex;justify-content:center;gap:10px;flex-wrap:nowrap;margin:0}
  .about-tags span{font-size:9px;padding:6px 13px;border-radius:6px;background:rgba(255,255,255,.06);border:1px solid rgba(216,181,94,.16);white-space:nowrap}
}

@media (max-width:980px){
  body{padding-top:0}
}


/* V6 — header/banner navigation hover */
.main-nav a:hover,
.main-nav a:focus-visible{
  color:var(--gold2)!important;
  opacity:1;
}

@media (min-width:981px){
  .main-nav a:hover::after,
  .main-nav a:focus-visible::after{
    left:10%;
    right:10%;
  }
}


/* V7 — finer, richer royal-gold navigation underline */
@media (min-width:981px){
  .main-nav a::after{
    height:1px;
    bottom:-7px;
    border-radius:999px;
    background:linear-gradient(90deg,
      rgba(151,105,28,0) 0%,
      #b88a32 18%,
      #e3c471 50%,
      #b88a32 82%,
      rgba(151,105,28,0) 100%
    );
    box-shadow:0 0 4px rgba(211,170,82,.28);
  }

    .hero-copy{
    transform:translateY(15%);
  }
}


/* ==========================================================================\n   FINAL NAVIGATION UNDERLINE OVERRIDE\n   Thin, flat gold, square edges\n   ========================================================================== */
.main-nav a{
    position:relative;
    color:#fff;
    opacity:.98;
    text-decoration:none;
    transition:color .2s ease, opacity .2s ease;
}

.main-nav a::after{
    content:"";
    position:absolute;
    left:50%;
    right:50%;
    bottom:-7px;
    height:1px;
    background:#d8b55e;
    border-radius:0;
    box-shadow:none;
    opacity:1;
    transition:left .22s ease, right .22s ease;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a.is-active{
    color:#d8b55e !important;
    opacity:1;
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.main-nav a.is-active::after{
    left:10%;
    right:10%;
}

@media (max-width:980px){
    .main-nav a::after{
        display:none;
    }
}
/* More breathing room above "لمن هذه الدروس؟" */
.students-section {
    padding-top: 30px !important;
    height: auto !important;
    padding-bottom: 18px !important;
}

/* Clean, minimal hero button icons */
.hero-button-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    display: inline-grid;
    place-items: center;
    line-height: 1;
}

.hero-button-icon svg {
    width: 15px;
    height: 15px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.button-gold .hero-button-icon {
    color: #fff;
}

.button-outline .hero-button-icon {
    color: #0b5544;
}

.hero-actions .button {
    gap: 7px;
}

/* Ultra-clean booking icon — replaces the ugly ▣ */
.hero-actions .button-gold > span:last-child {
    font-size: 0 !important;

    width: 13px;
    height: 12px;
    flex: 0 0 13px;

    display: inline-block;
    position: relative;

    border: 1.4px solid currentColor;
    border-radius: 2px;

    opacity: .9;
}

/* Simple calendar divider */
.hero-actions .button-gold > span:last-child::before {
    content: "";

    position: absolute;
    left: 2px;
    right: 2px;
    top: 3px;

    height: 1px;
    background: currentColor;
    opacity: .9;
}

/* Two tiny calendar bindings */
.hero-actions .button-gold > span:last-child::after {
    content: "";

    position: absolute;
    top: -2px;
    left: 3px;

    width: 1.4px;
    height: 3px;

    background: currentColor;

    box-shadow: 5px 0 0 currentColor;
}

/* Tighten the hero so the space below the buttons
   matches the space above the main heading */
@media (min-width:981px){

    .hero,
    .hero-grid{
        height:365px !important;
    }

    .hero-copy{
        padding-top:35px !important;
        padding-bottom:35px !important;
    }

    .feature-strip{
        margin-top:0 !important;
    }
}

/* =========================================================
   Subtle matte shimmer behind feature cards
   ========================================================= */

.feature-strip {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #0e382a !important;
}

/* Slowly moving soft green depth */
.feature-strip::before {
    content: "";
    position: absolute;
    inset: -40% -25%;
    z-index: 0;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 25% 45%,
            rgba(38, 102, 78, 0.34),
            transparent 34%
        ),
        radial-gradient(
            circle at 72% 55%,
            rgba(18, 77, 57, 0.42),
            transparent 38%
        ),
        radial-gradient(
            circle at 50% 20%,
            rgba(78, 123, 97, 0.12),
            transparent 32%
        );

    filter: blur(18px);
    opacity: 0.72;

    animation: matteGreenDrift 16s ease-in-out infinite alternate;
}

/* Keep the actual cards/text above the moving background */
.feature-strip .feature-grid {
    position: relative;
    z-index: 1;
}

@keyframes matteGreenDrift {
    0% {
        transform: translate3d(-2%, -1%, 0) scale(1);
    }

    35% {
        transform: translate3d(1.5%, 1%, 0) scale(1.025);
    }

    70% {
        transform: translate3d(-0.5%, 2%, 0) scale(1.015);
    }

    100% {
        transform: translate3d(2%, -1.5%, 0) scale(1.035);
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .feature-strip::before {
        animation: none;
    }
}

.hero-points li > span:first-child {
    display: grid;
    place-items: center;
}

.hero-points li > span:first-child {
    text-indent: 0px;
    padding-top: 0.5px;
}

/* =========================================================
   PREMIUM MICRO-ANIMATIONS — STUDENT + OUTCOME ICONS
   ========================================================= */

.student-grid .ui-icon svg,
.outcome-grid .ui-icon svg {
    overflow: visible;
    transform-origin: center;
    will-change: transform;
}

/* -----------------------------------------
   STUDENTS
   ----------------------------------------- */

/* 1. Boy — subtle breathing / confidence lift */
.student-grid .white-card:nth-child(1) .ui-icon svg {
    animation: icon-breathe 5.8s ease-in-out infinite;
}

/* 2. Girl — very gentle side-to-side movement */
.student-grid .white-card:nth-child(2) .ui-icon svg {
    animation: icon-soft-sway 6.4s ease-in-out infinite;
}

/* 3. Women — calm floating movement */
.student-grid .white-card:nth-child(3) .ui-icon svg {
    animation: icon-calm-float 7s ease-in-out infinite;
}

/* 4. University — tiny graduation-cap tilt */
.student-grid .white-card:nth-child(4) .ui-icon svg {
    animation: icon-cap-tilt 6.2s ease-in-out infinite;
}


/* -----------------------------------------
   OUTCOMES
   ----------------------------------------- */

/* 1. Progress arrow — gently progresses up/right */
.outcome-grid .outcome-card:nth-child(1) .ui-icon svg {
    animation: icon-progress 5.5s ease-in-out infinite;
}

/* 2. Exam medal — subtle achievement pulse */
.outcome-grid .outcome-card:nth-child(2) .ui-icon svg {
    animation: icon-medal 6s ease-in-out infinite;
}

/* 3. Pencil — tiny writing motion */
.outcome-grid .outcome-card:nth-child(3) .ui-icon svg {
    animation: icon-writing 4.8s ease-in-out infinite;
}

/* 4. Speech bubble itself stays almost still */
.outcome-grid .outcome-card:nth-child(4) .ui-icon svg {
    animation: icon-conversation 6.5s ease-in-out infinite;
}

/* 5. University — gentle cap lift */
.outcome-grid .outcome-card:nth-child(5) .ui-icon svg {
    animation: icon-graduate 6.8s ease-in-out infinite;
}


/* =========================================================
   MOTION
   ========================================================= */

@keyframes icon-breathe {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-1px) scale(1.018);
    }
}

@keyframes icon-soft-sway {
    0%, 100% {
        transform: rotate(0deg);
    }
    40% {
        transform: rotate(-1.2deg);
    }
    70% {
        transform: rotate(.8deg);
    }
}

@keyframes icon-calm-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-1.5px);
    }
}

@keyframes icon-cap-tilt {
    0%, 100% {
        transform: rotate(0deg);
    }
    45% {
        transform: rotate(-1.6deg) translateY(-1px);
    }
    70% {
        transform: rotate(.6deg);
    }
}

@keyframes icon-progress {
    0%, 100% {
        transform: translate(0, 0);
    }
    45% {
        transform: translate(1.5px, -1.5px);
    }
    65% {
        transform: translate(.5px, -.5px);
    }
}

@keyframes icon-medal {
    0%, 100% {
        transform: scale(1);
    }
    48% {
        transform: scale(1.035);
    }
    62% {
        transform: scale(1.01);
    }
}

@keyframes icon-writing {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    35% {
        transform: translate(1px, -1px) rotate(-1deg);
    }
    55% {
        transform: translate(-.5px, .5px) rotate(.8deg);
    }
}

@keyframes icon-conversation {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-.8px);
    }
}

@keyframes icon-graduate {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    45% {
        transform: translateY(-1.5px) rotate(-1deg);
    }
    70% {
        transform: translateY(-.4px) rotate(.4deg);
    }
}


/* =========================================================
   TYPING DOTS
   ========================================================= */

.typing-dot {
    opacity: .25;
}

.typing-dot-1 {
    animation: typing-dot 2.1s ease-in-out infinite;
}

.typing-dot-2 {
    animation: typing-dot 2.1s ease-in-out .22s infinite;
}

.typing-dot-3 {
    animation: typing-dot 2.1s ease-in-out .44s infinite;
}

@keyframes typing-dot {
    0%, 55%, 100% {
        opacity: .22;
    }

    25% {
        opacity: 1;
    }
}


/* Respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
    .student-grid .ui-icon svg,
    .outcome-grid .ui-icon svg,
    .typing-dot {
        animation: none !important;
    }
}

/* =========================================================
   Graduation cap — tassel-only animation
   ========================================================= */

/* Stop the old whole-cap movement */
.student-grid .white-card:nth-child(4) .ui-icon svg,
.outcome-grid .outcome-card:nth-child(5) .ui-icon svg {
    animation: none !important;
    transform: none !important;
}

/* Only the tassel moves */
.cap-tassel {
    transform-box: view-box;
    transform-origin: 22px 9px;
    animation: tassel-sway 3.8s ease-in-out infinite;
}

/* Slightly offset the second cap so they don't move identically */
.outcome-grid .outcome-card:nth-child(5) .cap-tassel {
    animation-delay: -1.35s;
    animation-duration: 4.2s;
}

@keyframes tassel-sway {
    0% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(5deg);
    }

    100% {
        transform: rotate(-5deg);
    }
}

@media (prefers-reduced-motion: reduce) {
.cap-tassel {
    animation: tassel-sway 3.2s ease-in-out infinite;
}
}

/* Exam prep tick — occasional 360° clockwise spin */
.exam-check-spin {
    transform-box: fill-box;
    transform-origin: center;
    animation: exam-check-rotate 6s ease-in-out infinite;
}

@keyframes exam-check-rotate {
    0%,
    68% {
        transform: rotate(0deg);
    }

    82% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.exam-check-spin {
    transform-box: fill-box;
    transform-origin: center;
    translate: 0 1px;
}

/* "تقدم خطوة بخطوة" — arrow end pops up/out like a stock spike */
.progress-arrow-pop{
    transform-box: fill-box;
    transform-origin: center;
    animation: progressArrowPop 5.8s ease-in-out infinite;
}

@keyframes progressArrowPop{
    0%,
    72%,
    100%{
        transform: translate(0, 0) scale(1, 1);
    }

    78%{
        transform: translate(0.6px, -0.8px) scale(1.08, 1.12);
    }

    82%{
        transform: translate(1.2px, -1.5px) scale(1.18, 1.22);
    }

    88%{
        transform: translate(0.7px, -0.9px) scale(1.08, 1.1);
    }

    92%{
        transform: translate(0, 0) scale(1, 1);
    }
}

@media (prefers-reduced-motion: reduce){
    .progress-arrow-pop{
        animation: none !important;
    }
}

/* =========================================================
   Hijab icon based directly on reference artwork
   ========================================================= */

.hijab-reference-icon {
    position: relative;
    width: 30px;
    height: 30px;
    margin-inline: auto;
    color: #0b4a3a;
}

/* Exact uploaded hijab silhouette */
.hijab-reference-icon .hijab-shape {
    position: absolute;
    inset: 0;

    background: currentColor;

    -webkit-mask:
        url('hijab-reference.png')
        center / contain
        no-repeat;

    mask:
        url('hijab-reference.png')
        center / contain
        no-repeat;
}


/* Eyes */
.hijab-reference-icon .hijab-eye {
    position: absolute;

    top: 42.5%;

    width: 1.7px;
    height: 1.7px;

    background: currentColor;
    border-radius: 50%;

    transform-origin: center;

    animation: hijabReferenceBlink 5.8s ease-in-out infinite;
}

.hijab-reference-icon .hijab-eye-left {
    left: 43%;
}

.hijab-reference-icon .hijab-eye-right {
    left: 55%;
}


/* . .  ->  _ _ */
@keyframes hijabReferenceBlink {

    0%,
    43%,
    48%,
    89%,
    94%,
    100% {
        width: 1.7px;
        height: 1.7px;
        border-radius: 50%;
        transform: translateX(0);
    }

    45%,
    46%,
    91%,
    92% {
        width: 3px;
        height: 1px;
        border-radius: 1px;
        transform: translateX(-0.65px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hijab-reference-icon .hijab-eye {
        animation: none !important;
    }
}

/* ==========================================
   Girl icon — cute blink
   ========================================== */

.girl-icon {
    width: 27px;
    height: 27px;
    margin-inline: auto;
    color: #0b4a3a;
}

.girl-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.girl-eyes-open {
    animation: girlEyesOpen 5.4s linear infinite;
}

.girl-eyes-closed {
    opacity: 0;
    animation: girlEyesClosed 5.4s linear infinite;
}

@keyframes girlEyesOpen {
    0%, 43%, 48%, 90%, 95%, 100% {
        opacity: 1;
    }

    44%, 47%, 91%, 94% {
        opacity: 0;
    }
}

@keyframes girlEyesClosed {
    0%, 43%, 48%, 90%, 95%, 100% {
        opacity: 0;
    }

    44%, 47%, 91%, 94% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .girl-eyes-open,
    .girl-eyes-closed {
        animation: none !important;
    }
}

/* ==========================================
   Boy icon — cute blink
   ========================================== */

.boy-icon {
    width: 27px;
    height: 27px;
    margin-inline: auto;
    color: #0b4a3a;
}

.boy-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.boy-eyes-open {
    animation: boyEyesOpen 5.7s linear infinite;
}

.boy-eyes-closed {
    opacity: 0;
    animation: boyEyesClosed 5.7s linear infinite;
}

@keyframes boyEyesOpen {
    0%, 42%, 47%, 88%, 93%, 100% {
        opacity: 1;
    }

    43%, 46%, 89%, 92% {
        opacity: 0;
    }
}

@keyframes boyEyesClosed {
    0%, 42%, 47%, 88%, 93%, 100% {
        opacity: 0;
    }

    43%, 46%, 89%, 92% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .boy-eyes-open,
    .boy-eyes-closed {
        animation: none !important;
    }
}

.hijab-shape {
  fill: #0b4a3a;
  fill-rule: evenodd;
  clip-rule: evenodd;
  stroke: #0b4a3a;
  stroke-width: 10;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.section-divider{
    width: 52px;
    height: 2px;
    margin: 14px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent 0%, var(--gold) 20%, var(--gold) 80%, transparent 100%);
}
.ornament{
    display:none !important;
}

/* =========================================================
   ABOUT SECTION — approved image on desktop
   ========================================================= */

@media (min-width:981px) {

    /* Use the approved image as the full About-section background */
    .about-section {
        background:
            url('about-approved-hires.png') left center / cover no-repeat !important;
    }

    /* Remove the separate left image block entirely */
    .about-photo,
    .about-photo-ring {
        display: none !important;
    }

    /* Make the content layout one-column so text can sit over the image */
    .about-grid {
        display: block !important;
        position: relative !important;
        min-height: 310px !important;
    }

    /* Remove the vertical divider / left-column feel */
    .about-grid::before,
    .about-copy::before {
        display: none !important;
        content: none !important;
    }

    /* Put the text over the image, with no green box behind it */
    .about-copy {
        background: transparent !important;
        position: relative !important;
        z-index: 2 !important;

        width: 58% !important;
        max-width: 560px !important;

        margin-left: auto !important;
        margin-right: 26px !important;

        padding: 20px 20px 36px !important;

        text-align: center !important;
    }

    .about-copy p {
        max-width: 520px !important;
        margin-inline: auto !important;
    }

    .about-tags {
        justify-content: center !important;
    }
}

/* =========================================================
   About tags — tiny custom premium icons
   ========================================================= */

.about-tag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
}

.about-tag-icon {
    width: 11px !important;
    height: 11px !important;
    flex: 0 0 11px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.55 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;

    opacity: .95;
}

/* =========================================================
   FINAL ABOUT TAG CLEANUP
   Only our custom SVG icons — no nested boxes
   ========================================================= */

.about-tags > .about-tag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    padding: 6px 13px !important;
    border-radius: 6px !important;

    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(216,181,94,.16) !important;

    white-space: nowrap !important;
}

/* IMPORTANT:
   Stop the text span inside each tag becoming another box */
.about-tags > .about-tag > span {
    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
    white-space: nowrap !important;
}

/* Our SVG only */
.about-tags .about-tag-icon {
    width: 11px !important;
    height: 11px !important;
    flex: 0 0 11px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.55 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;

    padding: 0 !important;
    margin: 0 !important;
}

/* =========================================================
   Globe — fixed shell, rotating surface illusion
   ========================================================= */

.language-switch-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;

    display: grid;
    place-items: center;

    color: currentColor;
    opacity: .95;
}

.language-switch-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/*
   Only the longitude lines move.
   6px = exact spacing between repeated ellipses,
   so the reset is seamless.
*/
.globe-moving-lines {
    animation: globeSurfaceMove 5.5s linear infinite;
}

@keyframes globeSurfaceMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-6px);
    }
}

/* =========================================================
   BOOKING HEADING — balanced breathing room
   ========================================================= */

@media (min-width:981px) {

    .booking-section {
        padding-top: 16px !important;
    }

    .booking-section .section-heading {
        height: auto !important;
        margin: 0 auto 16px !important;
    }

    .booking-section .section-heading h2 {
        margin: 0 !important;
    }

    .booking-section .section-divider {
        margin-top: 7px !important;
    }
}

@media (min-width:981px) {
    .booking-section {
        height: 336px !important;
    }
}

/* =========================================================
   CRISP GOLD UNDERLINES
   Same visual language as header navigation
   ========================================================= */

/* Section heading lines */
.section-divider {
    width: 34px !important;
    height: 1px !important;

    margin: 10px auto 0 !important;

    background: #c99e43 !important;
    border-radius: 999px !important;

    box-shadow: 0 0 4px rgba(211,170,82,.22) !important;
}

/* Header navigation underline — same treatment */
.main-nav a::after {
    height: 1px !important;
    background: #c99e43 !important;
    border-radius: 999px !important;

    box-shadow: 0 0 4px rgba(211,170,82,.22) !important;
}

/* Section dividers only — banner underline stays unchanged */
.section-divider {
    width: 34px !important;
    height: 2px !important;

    margin: 10px auto 0 !important;

    background: #c99e43 !important;
    border-radius: 999px !important;

    box-shadow: 0 0 3px rgba(211,170,82,.18) !important;
}

/* =========================================================
   FINAL SECTION DIVIDERS
   Exact same thickness everywhere except header navigation
   ========================================================= */

.students-section .section-divider,
.outcomes-section .section-divider,
.booking-section .section-divider {
    display: block !important;

    width: 34px !important;
height: 2px !important;
min-height: 2px !important;
max-height: 2px !important;

    margin: 10px auto 0 !important;

    padding: 0 !important;
    border: 0 !important;

    background: #c99e43 !important;
    border-radius: 999px !important;

    box-shadow: none !important;
    opacity: 1 !important;
}

/* =========================================================
   BOOKING AREA — richer depth, elegance, softer luxury
   ========================================================= */

.booking-shell{
    border: 1px solid rgba(201,158,67,.22) !important;
    border-radius: 26px !important;
    overflow: hidden !important;

    box-shadow:
        0 24px 60px rgba(7, 45, 37, .10),
        0 10px 24px rgba(7, 45, 37, .06),
        0 1px 0 rgba(255,255,255,.55) inset !important;

    background: linear-gradient(180deg, #fffdf9 0%, #ffffff 100%) !important;
}


/* Left calendar side */
.calendar-panel{
    position: relative;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.05), transparent 32%),
        linear-gradient(145deg, #04362d 0%, #064337 45%, #063b31 100%) !important;

    box-shadow:
        inset -1px 0 0 rgba(255,255,255,.06),
        inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.calendar-panel::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), transparent 24%, transparent 76%, rgba(0,0,0,.04));
}


/* Right form side */
.booking-form{
    background:
        linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,1) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.75) !important;
}


/* Inputs feel more premium */
.booking-form input,
.booking-form select,
.booking-form textarea{
    border: 1px solid rgba(18, 78, 64, .14) !important;
    background: linear-gradient(180deg, #ffffff 0%, #fcfbf8 100%) !important;

    box-shadow:
        0 1px 2px rgba(11, 50, 41, .03),
        inset 0 1px 0 rgba(255,255,255,.85) !important;

    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease,
        background .22s ease !important;
}

.booking-form input:hover,
.booking-form select:hover,
.booking-form textarea:hover{
    border-color: rgba(201,158,67,.34) !important;
}

.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus{
    border-color: rgba(201,158,67,.72) !important;
    box-shadow:
        0 0 0 4px rgba(201,158,67,.12),
        0 6px 16px rgba(11, 50, 41, .06),
        inset 0 1px 0 rgba(255,255,255,.9) !important;
    transform: translateY(-1px);
}


/* Time slot buttons */
.time-slot{
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
    border: 1px solid rgba(223,193,120,.32) !important;
    box-shadow:
        0 2px 8px rgba(0,0,0,.06),
        inset 0 1px 0 rgba(255,255,255,.05) !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        background .18s ease !important;
}

.time-slot:hover{
    transform: translateY(-1px);
    border-color: rgba(223,193,120,.58) !important;
    box-shadow:
        0 8px 18px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.07) !important;
}

.time-slot.is-selected{
    background: linear-gradient(180deg, #ddb659 0%, #c99e43 100%) !important;
    color: #08382d !important;
    border-color: rgba(255,255,255,.18) !important;
    box-shadow:
        0 10px 18px rgba(201,158,67,.22),
        inset 0 1px 0 rgba(255,255,255,.35) !important;
}


/* Calendar day buttons */
.calendar-day{
    transition:
        transform .16s ease,
        background .16s ease,
        box-shadow .16s ease,
        color .16s ease !important;
}

.calendar-day:hover:not(:disabled){
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

.calendar-day.is-selected{
    box-shadow:
        0 8px 18px rgba(201,158,67,.22),
        inset 0 1px 0 rgba(255,255,255,.24) !important;
}


/* Submit button — more luxurious without going gaudy */
.submit-button,
.booking-form .button-gold,
.booking-form button[type="submit"]{
    background: linear-gradient(180deg, #d7ae4f 0%, #c99e43 100%) !important;
    box-shadow:
        0 14px 28px rgba(201,158,67,.22),
        inset 0 1px 0 rgba(255,255,255,.34) !important;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease !important;
}

.submit-button:hover,
.booking-form .button-gold:hover,
.booking-form button[type="submit"]:hover{
    transform: translateY(-1px);
    box-shadow:
        0 18px 34px rgba(201,158,67,.28),
        inset 0 1px 0 rgba(255,255,255,.38) !important;
    filter: brightness(1.015);
}

/* =========================================================
   BOOKING FORM — elegant right-hand panel
   ========================================================= */

.booking-form {
    position: relative !important;
    overflow: hidden !important;

    padding: 11px 14px 10px !important;

    background:
        radial-gradient(
            circle at 88% 0%,
            rgba(216,181,94,.08),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #fffefb 0%,
            #fffdfa 45%,
            #faf7f0 100%
        ) !important;

    box-shadow:
        inset 1px 0 0 rgba(201,158,67,.12),
        inset 0 1px 0 rgba(255,255,255,.9) !important;
}


/* Fine gold separation from calendar */
.booking-form::before {
    content: "";
    position: absolute;

    left: 0;
    top: 8%;
    bottom: 8%;

    width: 1px;

    background: rgba(201,158,67,.35);

    pointer-events: none;
}


/* =========================================================
   Form heading
   ========================================================= */

.form-heading {
    position: relative !important;
    text-align: center !important;

    margin: 0 0 8px !important;
    padding: 0 0 7px !important;
}

.form-heading h3 {
    margin: 0 !important;

    font-family:
        "Noto Naskh Arabic",
        "Noto Sans Arabic",
        serif !important;

    font-size: 13px !important;
    line-height: 1.15 !important;

    font-weight: 800 !important;
    color: #073f35 !important;
}

.form-heading p {
    margin: 2px 0 0 !important;

    font-size: 7.5px !important;
    line-height: 1.4 !important;

    color: #77877f !important;
}


/* Tiny clean gold underline */
.form-heading::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: 0;

    width: 28px;
    height: 1.5px;

    transform: translateX(-50%);

    background: #c99e43;

    border-radius: 999px;
}


/* =========================================================
   Labels
   ========================================================= */

.booking-form label {
    gap: 3px !important;
}

.booking-form label > span {
    display: block;

    font-size: 7.4px !important;
    font-weight: 700 !important;

    color: #17493c !important;

    transition:
        color .2s ease,
        transform .2s ease !important;
}


/* Label reacts when field is active */
.booking-form label:focus-within > span {
    color: #a97822 !important;
    transform: translateX(-1px);
}


/* =========================================================
   Inputs / selects / textarea
   ========================================================= */

.booking-form input,
.booking-form select,
.booking-form textarea {

    border: 1px solid rgba(15,72,59,.14) !important;
    border-radius: 7px !important;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fdfcf9 100%
        ) !important;

    color: #163f35 !important;

    box-shadow:
        0 2px 5px rgba(8,55,44,.035),
        inset 0 1px 0 rgba(255,255,255,1) !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease,
        transform .2s ease !important;
}


/* Slightly stronger hover */
.booking-form input:hover,
.booking-form select:hover,
.booking-form textarea:hover {
    border-color: rgba(201,158,67,.40) !important;

    background: #fff !important;
}


/* Elegant focus */
.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
    outline: none !important;

    border-color: #c99e43 !important;

    background: #fff !important;

    box-shadow:
        0 0 0 2px rgba(201,158,67,.10),
        0 5px 12px rgba(8,55,44,.055),
        inset 0 1px 0 rgba(255,255,255,1) !important;

    transform: translateY(-1px);
}


/* Softer placeholder */
.booking-form input::placeholder,
.booking-form textarea::placeholder {
    color: #9aa39f !important;
    opacity: .9 !important;
}


/* =========================================================
   Notes field
   ========================================================= */

.booking-form .notes-field {
    display: grid !important;

    margin-top: 6px !important;
}

.booking-form .notes-field textarea {
    background:
        linear-gradient(
            145deg,
            #fff 0%,
            #fcfaf5 100%
        ) !important;

    border-radius: 8px !important;
}


/* =========================================================
   Submit button
   ========================================================= */

.booking-form .submit-button {
    position: relative !important;

    overflow: hidden !important;

    border: 1px solid rgba(167,120,29,.20) !important;
    border-radius: 7px !important;

    letter-spacing: .1px;

    box-shadow:
        0 7px 16px rgba(157,112,28,.16),
        inset 0 1px 0 rgba(255,255,255,.32) !important;
}


/* Soft highlight across button */
.booking-form .submit-button::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            120deg,
            transparent 25%,
            rgba(255,255,255,.14) 48%,
            transparent 70%
        );

    transform: translateX(100%);
    transition: transform .6s ease;

    pointer-events: none;
}

.booking-form .submit-button:hover::before {
    transform: translateX(-100%);
}


/* Keep button contents above highlight */
.booking-form .submit-button > * {
    position: relative;
    z-index: 1;
}

/* =========================================================
   BOOKING FORM — moving gold glow + more bottom room
   ========================================================= */

.booking-section{
    padding-bottom: 8px !important;
}

.booking-shell{
    min-height: unset !important;
    height: auto !important;
    align-items: stretch !important;
}

.booking-form{
    padding: 18px 14px 18px !important;
}

.booking-form::after{
    content: "";
    position: absolute;
    inset: -6% -14% -6% -14%;
    pointer-events: none;
    z-index: 0;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 38%,
            rgba(216,181,94,.03) 47%,
            rgba(216,181,94,.055) 50%,
            rgba(216,181,94,.03) 53%,
            transparent 62%,
            transparent 100%
        );

    animation: bookingGoldDrift 12s ease-in-out infinite;
}

/* Keep actual form content above the animated glow */
.booking-form > *{
    position: relative;
    z-index: 1;
}

@keyframes bookingGoldDrift{
    0%{
        transform: translateX(14%) translateY(0);
        opacity: .55;
    }
    50%{
        transform: translateX(-14%) translateY(0);
        opacity: .82;
    }
    100%{
        transform: translateX(14%) translateY(0);
        opacity: .55;
    }
}

/* Give the form side enough breathing room without stretching the whole section */
.booking-form .submit-button,
.booking-form button[type="submit"]{
    margin-top: 12px !important;
    margin-bottom: 8px !important;
}

.booking-form textarea{
    margin-bottom: 4px !important;
}

.calendar-day.is-selected {
    position: relative !important;
    top: -3px !important;
    right: -1px !important;
}

/* Available lesson times — white text */
.time-slot,
.time-slot:hover,
.time-slot.is-selected {
    color: #fff !important;
}

/* =========================================================
   TIME PICKER — compact scrollable slot window
   ========================================================= */

.time-scroll-shell {
    width: 100%;
    display: grid;
    grid-template-rows: 18px 128px 18px;
    align-items: center;
    gap: 3px;
}


/* Only show a handful of times at once */
.time-scroll-shell .time-slots {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;

    height: 128px !important;
    max-height: 128px !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    scroll-behavior: smooth;
    scrollbar-width: none;

    padding: 1px 2px !important;
}

.time-scroll-shell .time-slots::-webkit-scrollbar {
    display: none;
}


/* Small elegant arrows */
.time-scroll-arrow {
    width: 28px;
    height: 18px;

    margin: 0 auto;
    padding: 0;

    display: grid;
    place-items: center;

    border: 0;
    background: transparent;

    color: #d8b55e;

    cursor: pointer;

    opacity: .9;

    transition:
        opacity .18s ease,
        transform .18s ease,
        color .18s ease;
}

.time-scroll-arrow svg {
    width: 13px;
    height: 13px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.time-scroll-arrow:hover {
    color: #f0cf78;
    transform: scale(1.12);
}

.time-scroll-arrow.is-hidden {
    opacity: .18;
    pointer-events: none;
}


/* Down arrow gets a tiny breathing animation */
.time-scroll-down:not(.is-hidden) svg {
    animation: timeArrowHint 2.4s ease-in-out infinite;
}

@keyframes timeArrowHint {
    0%, 100% {
        transform: translateY(-1px);
    }

    50% {
        transform: translateY(2px);
    }
}

/* Confirm booking button — taller */
.booking-form .submit-button,
.booking-form button[type="submit"] {
    height: 34px !important;
    min-height: 34px !important;
}

/* =========================================================
   BOOKING SECTION — CONSISTENT VERTICAL RHYTHM
   ========================================================= */

@media (min-width:981px){

    /* -----------------------------------------------------
       Main booking heading
       ----------------------------------------------------- */

    .booking-section .section-heading{
        height:auto !important;
        margin:0 auto 14px !important;
    }

    .booking-section .section-heading h2{
        margin:0 !important;
    }

    .booking-section .section-divider{
        margin-top:8px !important;
    }


    /* -----------------------------------------------------
       Calendar side
       ----------------------------------------------------- */

    .calendar-panel{
        padding-top:12px !important;
        padding-bottom:12px !important;
    }

    .calendar-head{
        height:30px !important;
        margin-bottom:8px !important;
    }

    .calendar-weekdays{
        padding-top:0 !important;
        margin-top:4px !important;
    }

    .calendar-grid{
        padding-top:21px !important;

        grid-auto-rows:27px !important;
        row-gap:2px !important;
    }

    .calendar-day{
        margin:auto !important;
    }


    /* -----------------------------------------------------
       Available times
       ----------------------------------------------------- */

    .time-wrap{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;

        padding-top:0 !important;
        padding-bottom:0 !important;
    }

    .time-wrap h3{
        margin:0 0 9px !important;
        line-height:18px !important;
    }

    .time-scroll-shell{
        flex:1;
        align-content:start;
    }


    /* -----------------------------------------------------
       Right-hand booking form
       ----------------------------------------------------- */

    .booking-form{
        display:flex !important;
        flex-direction:column !important;

        padding-top:14px !important;
        padding-bottom:14px !important;
    }


    /* Form title */
    .form-heading{
        margin:0 0 11px !important;
        padding-bottom:8px !important;
    }

    .form-heading h3{
        margin:0 !important;
    }

    .form-heading p{
        margin:3px 0 0 !important;
    }


    /* Two-column fields */
    .booking-form .form-grid{
        display:grid !important;

        grid-template-columns:1fr 1fr !important;

        column-gap:8px !important;
        row-gap:9px !important;
    }


    /* Label -> field spacing */
    .booking-form label{
        gap:4px !important;
    }

    .booking-form label > span{
        line-height:11px !important;
    }


    /* Inputs */
    .booking-form input,
    .booking-form select{
        height:27px !important;
        min-height:27px !important;
    }


    /* Notes */
    .booking-form .notes-field{
        margin-top:10px !important;
        gap:4px !important;
    }

    .booking-form .notes-field textarea{
        height:34px !important;
        min-height:34px !important;
    }


    /* Conditional fields, when shown */
    .guardian-fields,
    .conditional-field{
        margin-top:9px !important;
    }


    /* Confirm button */
    .booking-form .submit-button,
    .booking-form button[type="submit"]{
        height:34px !important;
        min-height:34px !important;

        margin-top:11px !important;
        margin-bottom:0 !important;
    }


    /* -----------------------------------------------------
       Text below booking box
       ----------------------------------------------------- */

    .booking-note{
        height:auto !important;

        margin:0 !important;
        padding:13px 0 14px !important;

        line-height:1.5 !important;
    }


    /* -----------------------------------------------------
       Space before FAQ
       ----------------------------------------------------- */

    .faq-section{
        padding-top:15px !important;
    }
}

@media (min-width:981px){

    /* Undo the previous whole-section movement */
    .faq-section{
        margin-top: 0 !important;
    }

    /* Add breathing room between the gold line above
       and the FAQ heading */
    .faq-section .section-heading{
        padding-top: 12px !important;
    }
}

/* =========================================================
   FAQ DROPDOWNS — FIX + POLISH
   ========================================================= */

.faq-section{
    height:auto !important;
    min-height:104px !important;
    overflow:visible !important;
    padding-bottom:16px !important;
}

.faq-list{
    align-items:start !important;
}


/* Closed question */
.faq-list details{
    height:auto !important;
    min-height:34px !important;

    overflow:hidden !important;

    background:#fbfaf6 !important;
    border:1px solid #e9dfcf !important;
    border-radius:8px !important;

    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease !important;
}


/* Question itself */
.faq-list summary{
    display:block !important;
    cursor:pointer !important;
    pointer-events:auto !important;

    line-height:32px !important;
    user-select:none !important;
}


/* Remove browser's default triangle */
.faq-list summary::-webkit-details-marker{
    display:none !important;
}


/* Our arrow */
.faq-list summary::before{
    content:"⌄" !important;

    float:left;

    color:#1e5345 !important;

    margin-right:6px !important;

    transform:rotate(0deg);
    transform-origin:center;

    transition:
        transform .22s ease,
        color .22s ease !important;
}


/* THE IMPORTANT FIX:
   your old CSS had display:none here */
.faq-list details p{
    display:block !important;

    max-height:0;
    opacity:0;
    overflow:hidden;

    margin:0 !important;
    padding:0 10px !important;

    font-size:8px !important;
    line-height:1.65 !important;
    color:#5f7069 !important;

    transition:
        max-height .28s ease,
        opacity .22s ease,
        padding .28s ease !important;
}


/* Open state */
.faq-list details[open]{
    border-color:rgba(201,158,67,.38) !important;

    background:#fffdf8 !important;

    box-shadow:
        0 8px 20px rgba(16,55,43,.07),
        inset 0 1px 0 rgba(255,255,255,.8) !important;
}


.faq-list details[open] p{
    max-height:180px !important;
    opacity:1 !important;

    padding:2px 10px 11px !important;
}


/* Flip arrow when opened */
.faq-list details[open] summary::before{
    transform:rotate(180deg);
    color:#c99e43 !important;
}

/* =========================================================
   FAQ ARROW — custom SVG based on supplied reference
   ========================================================= */

.faq-list summary::before{
    content:"" !important;

    float:left !important;

    width:12px !important;
    height:12px !important;

    margin-top:10px !important;
    margin-right:6px !important;

    color:#1e5345 !important;
    background:currentColor !important;

    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 10.5L12 3.5L19 10.5M12 3.5V20' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / contain no-repeat;

    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 10.5L12 3.5L19 10.5M12 3.5V20' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / contain no-repeat;

    transform:rotate(0deg) !important;
    transform-origin:50% 50% !important;

    transition:
        transform .32s cubic-bezier(.4,0,.2,1),
        color .22s ease !important;
}


/* Question opened — rotate clockwise around centre */
.faq-list details[open] summary::before{
    transform:rotate(180deg) !important;
    transform-origin:50% 50% !important;

    color:#c99e43 !important;
}

/* =========================================================
   BOOKING SECTION — grow naturally with expanding form
   ========================================================= */

@media (min-width:981px){

    .booking-section{
        height:auto !important;
        min-height:0 !important;
        overflow:visible !important;

        /* breathing room before the next section */
        padding-bottom:12px !important;
    }

    .booking-shell{
        height:auto !important;
        min-height:0 !important;

        /* both sides follow the height of the tallest side */
        align-items:stretch !important;
    }

    .calendar-panel,
    .booking-form{
        height:auto !important;
        min-height:100% !important;
    }

    .booking-note{
        position:relative !important;
        height:auto !important;
    }

    .faq-section{
        position:relative !important;
        clear:both !important;
        height:auto !important;
    }
}

@media (min-width:981px){
    .booking-note{
        padding-top:20px !important;
        padding-bottom:14px !important;
    }
}

/* Footer quick links — gold hover, no underline/bar */
.site-footer .footer-grid a{
    transition: color .2s ease !important;
}

.site-footer .footer-grid a:hover{
    color: var(--gold2) !important;
}

/* Make absolutely sure no decorative bar appears */
.site-footer .footer-grid a::before,
.site-footer .footer-grid a::after{
    content: none !important;
    display: none !important;
}

/* ==========================================================================
   V10 — MOBILE SHOWPIECE
   Premium responsive redesign for phones + tablets
   Desktop (>980px) is intentionally untouched.
   ========================================================================== */

@media (max-width:980px){

    :root{
        --mobile-edge: clamp(14px, 4vw, 28px);
        --mobile-radius: 22px;
        --mobile-shadow:
            0 20px 50px rgba(5, 46, 36, .10),
            0 7px 18px rgba(5, 46, 36, .055);
    }


    /* ======================================================================
       GLOBAL MOBILE FOUNDATION
       ====================================================================== */

    html{
        scroll-padding-top:82px !important;
        background:#fffdf9;
    }

    body{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;

        zoom:1 !important;

        margin:0 !important;

        padding-top:0 !important;

        /* room for floating booking CTA + iPhone home indicator */
        padding-bottom:
            calc(82px + env(safe-area-inset-bottom, 0px)) !important;

        overflow-x:hidden !important;

        background:
            radial-gradient(
                circle at 88% 11%,
                rgba(216,181,94,.055),
                transparent 20%
            ),
            linear-gradient(
                180deg,
                #fffefa 0%,
                #ffffff 48%,
                #fffdf8 100%
            );
    }

    .container{
        width:
            min(
                calc(100% - (var(--mobile-edge) * 2)),
                720px
            ) !important;

        margin-inline:auto !important;
    }

    button,
    a,
    select{
        touch-action:manipulation;
    }

    button,
    input,
    select,
    textarea,
    a{
        -webkit-tap-highlight-color:transparent;
    }


    /* ======================================================================
       HEADER — GLASSY, COMPACT, PREMIUM
       ====================================================================== */

    .site-header{
        position:sticky !important;

        top:0;

        width:100%;
        height:68px !important;

        z-index:1000 !important;

        background:
            linear-gradient(
                180deg,
                rgba(5,48,38,.97),
                rgba(5,44,35,.955)
            ) !important;

        border-bottom:
            1px solid rgba(216,181,94,.20) !important;

        box-shadow:
            0 10px 30px rgba(3,35,27,.13) !important;

        backdrop-filter:blur(16px);
        -webkit-backdrop-filter:blur(16px);
    }

    .nav-wrap{
        position:relative !important;

        width:
            min(
                calc(100% - (var(--mobile-edge) * 2)),
                720px
            ) !important;

        height:68px !important;

        padding:0 !important;

        gap:8px !important;
    }

    .brand-cluster{
        flex:1 1 auto !important;

        min-width:0 !important;

        gap:4px !important;
    }

    /* You currently have two literal <br>s here. Don't let them waste mobile space. */
    .brand-text br{
        display:none !important;
    }

    .brand-text{
        min-width:0 !important;
    }

    .brand-text strong{
        font-size:13px !important;
        line-height:1.25 !important;

        white-space:nowrap;
    }

    .brand-text small{
        font-size:10px !important;
        line-height:1.2 !important;

        margin-top:2px !important;

        white-space:nowrap;
    }

    .brand-menu-toggle{
        display:grid !important;

        width:40px !important;
        height:40px !important;
        flex:0 0 40px !important;

        border-radius:50% !important;

        transition:
            background .2s ease,
            transform .2s ease !important;
    }

    .brand-menu-toggle:active{
        background:rgba(255,255,255,.07) !important;
        transform:scale(.96);
    }

    .brand-menu-toggle .brand-mark{
        width:38px !important;
        height:38px !important;
    }

    .brand-menu-toggle .brand-mark::before,
    .brand-menu-toggle .brand-mark::after{
        inset:10px !important;

        border-width:1.5px !important;
    }


    /* Language switch */
    .language-switch{
        flex:0 0 auto !important;

        height:36px !important;

        margin:0 !important;

        padding-inline:11px !important;

        border:
            1px solid rgba(216,181,94,.55) !important;

        border-radius:999px !important;

        background:
            rgba(255,255,255,.035) !important;

        font-size:10.5px !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.05) !important;
    }

    .language-switch:active{
        background:
            rgba(216,181,94,.10) !important;
    }


    /* ======================================================================
       MOBILE NAVIGATION PANEL
       ====================================================================== */

    .main-nav{
        position:absolute !important;

        top:calc(100% + 10px) !important;

        left:0 !important;
        right:0 !important;

        width:100% !important;

        display:none !important;

        padding:9px !important;

        gap:2px !important;

        direction:inherit !important;

        border:
            1px solid rgba(216,181,94,.24) !important;

        border-radius:20px !important;

        background:
            linear-gradient(
                145deg,
                rgba(5,50,39,.985),
                rgba(8,61,48,.985)
            ) !important;

        box-shadow:
            0 28px 70px rgba(0,0,0,.28),
            inset 0 1px 0 rgba(255,255,255,.05) !important;

        backdrop-filter:blur(20px);
        -webkit-backdrop-filter:blur(20px);

        overflow:hidden !important;
    }

    .main-nav.open{
        display:flex !important;
    }

    .main-nav a{
        display:flex !important;

        align-items:center !important;

        min-height:46px;

        padding:10px 14px !important;

        border-radius:12px !important;

        font-size:13px !important;
        font-weight:600;

        text-align:start;

        transition:
            color .18s ease,
            background .18s ease,
            padding .18s ease !important;
    }

    .main-nav a::after{
        display:none !important;
    }

    .main-nav a.is-active{
        color:var(--gold2) !important;

        background:
            rgba(255,255,255,.055) !important;
    }

    .main-nav a:active{
        color:var(--gold2) !important;

        background:
            rgba(216,181,94,.09) !important;
    }


    /* ======================================================================
       HERO — THIS IS THE BIG MOBILE FIX
       ====================================================================== */

    .hero{
        height:auto !important;

        padding:0 0 30px !important;

        overflow:hidden !important;

        background:
            radial-gradient(
                circle at 12% 12%,
                rgba(216,181,94,.11),
                transparent 25%
            ),
            radial-gradient(
                circle at 92% 32%,
                rgba(11,75,58,.05),
                transparent 30%
            ),
            linear-gradient(
                180deg,
                #fffdf7 0%,
                #ffffff 100%
            ) !important;
    }

    .hero::before,
    .hero::after,
    .hero-pattern{
        display:none !important;
    }

    .hero-grid{
        height:auto !important;

        display:grid !important;

        grid-template-columns:1fr !important;
        grid-template-areas:
            "copy"
            "portrait" !important;

        gap:4px !important;
    }

    .hero-copy{
        direction:rtl !important;

        padding:
            clamp(38px, 9vw, 58px)
            2px
            28px !important;

        align-items:center !important;

        text-align:center !important;
    }

    html[dir="ltr"] .hero-copy{
        direction:ltr !important;
    }

    .hero h1{
        align-self:center !important;

        max-width:620px !important;

        margin:0 0 7px !important;

        font-size:
            clamp(34px, 9.5vw, 50px) !important;

        line-height:1.04 !important;

        letter-spacing:-.025em !important;

        text-align:center !important;

        text-wrap:balance;
    }

    .hero h2{
        align-self:center !important;

        margin:0 0 16px !important;

        font-size:
            clamp(18px, 5.3vw, 24px) !important;

        text-align:center !important;
    }

    .hero-lead{
        max-width:610px !important;

        margin:0 auto 18px !important;

        font-size:
            clamp(12.5px, 3.3vw, 15px) !important;

        line-height:1.8 !important;

        font-weight:600 !important;

        text-align:center !important;

        color:#244d42 !important;
    }


    /* Hero benefits become beautiful tactile rows */
    .hero-points{
        width:100% !important;

        max-width:620px !important;

        margin:0 auto 20px !important;

        gap:7px !important;

        font-size:
            clamp(11.5px, 3vw, 13px) !important;

        line-height:1.58 !important;
    }

    .hero-points li{
        width:100%;

        align-items:center !important;

        gap:9px !important;

        padding:9px 11px !important;

        text-align:start !important;

        border:
            1px solid rgba(12,78,60,.08);

        border-radius:13px;

        background:
            rgba(255,255,255,.62);

        box-shadow:
            0 4px 14px rgba(12,64,50,.035);
    }

    .hero-points li > span:first-child{
        width:17px !important;
        height:17px !important;

        flex:0 0 17px !important;

        margin:0 !important;

        font-size:10px !important;

        box-shadow:
            0 3px 8px rgba(12,78,60,.16);
    }


    /* Hero CTAs */
    .hero-actions{
        width:100% !important;

        max-width:520px !important;

        align-self:center !important;

        justify-content:center !important;

        gap:10px !important;

        direction:inherit !important;
    }

    .hero-actions .button{
        flex:1 1 0 !important;

        min-height:48px !important;
        height:48px !important;

        padding-inline:14px !important;

        border-radius:13px !important;

        font-size:12px !important;

        box-shadow:
            0 8px 20px rgba(9,59,46,.08);
    }

    .hero-actions .button-gold{
        box-shadow:
            0 12px 28px rgba(201,158,67,.22),
            inset 0 1px 0 rgba(255,255,255,.28) !important;
    }

    .hero-actions .button:active{
        transform:translateY(1px) scale(.985);
    }


    /* THE CURRENT HTML HAS NO IMAGE CHILD.
       So the approved portrait becomes the mobile visual itself. */
    .hero-portrait{
        position:relative !important;

        display:block !important;

        width:100% !important;

        height:
            clamp(335px, 92vw, 520px) !important;

        margin:4px auto 0 !important;

        padding:0 !important;

        border:
            1px solid rgba(201,158,67,.45) !important;

        border-radius:
            clamp(22px, 6vw, 32px) !important;

        overflow:hidden !important;

        background:
            url('hero-approved-hires.png')
            center 8% / cover no-repeat !important;

        box-shadow:
            0 28px 60px rgba(5,53,41,.16),
            0 8px 20px rgba(5,53,41,.08) !important;
    }

    .hero-portrait::after{
        content:"";

        position:absolute;

        inset:7px;

        border:
            1px solid rgba(216,181,94,.28);

        border-radius:
            calc(clamp(22px, 6vw, 32px) - 6px);

        pointer-events:none;

        box-shadow:
            inset 0 0 30px rgba(5,50,39,.035);
    }

    .portrait-arch,
    .portrait-badge{
        display:none !important;
    }


    /* ======================================================================
       FEATURE STRIP
       ====================================================================== */

    .feature-strip{
        height:auto !important;

        position:relative;

        overflow:hidden;

        padding:54px 0 36px !important;

        background:
            radial-gradient(
                circle at 18% 0%,
                rgba(30,108,82,.24),
                transparent 32%
            ),
            radial-gradient(
                circle at 90% 100%,
                rgba(216,181,94,.08),
                transparent 28%
            ),
            linear-gradient(
                145deg,
                #07372b,
                #084b3a
            ) !important;
    }

    .feature-grid{
        position:relative;

        z-index:2;

        height:auto !important;

        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;

        gap:34px 12px !important;
    }

    .feature-card{
        height:auto !important;

        min-height:145px !important;

        padding:38px 13px 18px !important;

        border:
            1px solid rgba(216,181,94,.34) !important;

        border-radius:20px !important;

        background:
            linear-gradient(
                155deg,
                rgba(255,255,255,.045),
                rgba(255,255,255,.012)
            ) !important;

        box-shadow:
            0 15px 34px rgba(0,0,0,.09),
            inset 0 1px 0 rgba(255,255,255,.05) !important;
    }

    .round-icon{
        top:-24px !important;

        width:49px !important;
        height:49px !important;

        border-radius:50% !important;

        box-shadow:
            0 10px 22px rgba(0,0,0,.17),
            inset 0 1px 0 rgba(255,255,255,.24) !important;
    }

    .feature-card h3{
        margin:2px 0 7px !important;

        font-size:
            clamp(13px, 3.7vw, 16px) !important;
    }

    .feature-card p{
        font-size:
            clamp(10.5px, 2.9vw, 12px) !important;

        line-height:1.65 !important;

        color:#edf4f1 !important;
    }


    /* ======================================================================
       SECTION HEADINGS
       ====================================================================== */

    .students-section,
    .outcomes-section{
        height:auto !important;

        padding:
            clamp(42px, 10vw, 62px)
            0 !important;

        background:
            radial-gradient(
                circle at 93% 8%,
                rgba(216,181,94,.055),
                transparent 22%
            ),
            #fff !important;
    }

    .outcomes-section{
        padding-top:
            clamp(38px, 9vw, 54px) !important;
    }

    .section-heading{
        margin:
            0 auto
            clamp(22px, 6vw, 32px) !important;
    }

    .section-heading h2,
    .outcomes-section .section-heading h2{
        font-size:
            clamp(25px, 7vw, 34px) !important;

        line-height:1.22 !important;

        text-wrap:balance;
    }

    .section-divider{
        width:34px !important;

        height:2px !important;

        margin:10px auto 0 !important;
    }


    /* ======================================================================
       STUDENT + OUTCOME CARDS
       ====================================================================== */

    .student-grid,
    .outcome-grid{
        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;

        gap:12px !important;
    }

    .white-card,
    .outcome-card{
        height:auto !important;

        min-height:148px !important;

        padding:19px 13px 17px !important;

        border:
            1px solid rgba(213,194,157,.48) !important;

        border-radius:18px !important;

        background:
            linear-gradient(
                155deg,
                #ffffff 0%,
                #fffdf8 100%
            ) !important;

        box-shadow:
            0 13px 30px rgba(13,59,47,.07),
            0 3px 9px rgba(13,59,47,.035),
            inset 0 1px 0 #fff !important;
    }

    .white-card > .ui-icon,
    .outcome-card > .ui-icon{
        height:38px !important;

        margin-bottom:6px !important;
    }

    .white-card > .ui-icon svg,
    .outcome-card > .ui-icon svg{
        width:34px !important;
        height:34px !important;
    }

    .white-card h3{
        margin-bottom:6px !important;

        font-size:
            clamp(12px, 3.3vw, 15px) !important;
    }

    .white-card p{
        font-size:
            clamp(10.5px, 2.8vw, 12px) !important;

        line-height:1.65 !important;
    }

    .outcome-card h3{
        margin-bottom:5px !important;

        font-size:
            clamp(11.5px, 3.2vw, 14px) !important;
    }

    .outcome-card p{
        font-size:
            clamp(10px, 2.75vw, 11.5px) !important;

        line-height:1.6 !important;
    }


    /* Avoid the fifth card feeling like an orphan */
    .outcome-card:last-child{
        grid-column:1 / -1;

        width:min(100%, 360px);

        justify-self:center;
    }


    /* ======================================================================
       ABOUT — CINEMATIC MOBILE PANEL
       ====================================================================== */

    .about-section{
        height:auto !important;

        position:relative !important;

        padding:
            clamp(28px, 8vw, 44px)
            0
            clamp(38px, 9vw, 54px) !important;

        overflow:hidden !important;

        background:
            radial-gradient(
                circle at 80% 5%,
                rgba(31,112,84,.30),
                transparent 28%
            ),
            linear-gradient(
                145deg,
                #07372b,
                #0a4938
            ) !important;
    }

    .about-grid{
        width:
            min(
                calc(100% - (var(--mobile-edge) * 2)),
                720px
            ) !important;

        height:auto !important;

        display:grid !important;

        grid-template-columns:1fr !important;

        gap:26px !important;

        padding:0 !important;
    }

    .about-photo{
        display:block !important;

        width:100% !important;

        height:
            clamp(250px, 68vw, 400px) !important;

        align-self:auto !important;

        border:
            1px solid rgba(216,181,94,.38);

        border-radius:24px;

        overflow:hidden;

        background:
            url('about-approved-hires.png')
            left center / cover no-repeat !important;

        box-shadow:
            0 24px 52px rgba(0,0,0,.20),
            inset 0 1px 0 rgba(255,255,255,.05);
    }

    .about-photo::before{
        display:none !important;
        content:none !important;
    }

    .about-photo::after{
        content:"";

        position:absolute;

        inset:0;

        background:
            linear-gradient(
                180deg,
                transparent 60%,
                rgba(4,43,33,.12)
            );

        pointer-events:none;
    }

    .about-photo-ring{
        display:none !important;
    }

    .about-copy{
        width:100% !important;

        padding:0 4px !important;

        direction:rtl !important;

        text-align:center !important;
    }

    html[dir="ltr"] .about-copy{
        direction:ltr !important;
    }

    .about-copy .section-kicker{
        margin-bottom:5px !important;

        font-size:13px !important;

        color:#fff !important;
    }

    .about-copy h2{
        margin-bottom:5px !important;

        font-size:
            clamp(27px, 7.5vw, 36px) !important;
    }

    .about-copy h3{
        margin-bottom:12px !important;

        font-size:
            clamp(12px, 3.4vw, 15px) !important;

        line-height:1.6 !important;
    }

    .about-copy p{
        max-width:620px !important;

        margin:0 auto 18px !important;

        font-size:
            clamp(11.5px, 3.1vw, 13.5px) !important;

        line-height:1.85 !important;
    }

    .about-tags{
        width:100% !important;

        display:grid !important;

        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;

        gap:8px !important;
    }

    .about-tags > .about-tag{
        min-height:38px;

        width:100%;

        margin:0 !important;

        padding:7px 9px !important;

        border:
            1px solid rgba(216,181,94,.20) !important;

        border-radius:10px !important;

        background:
            rgba(255,255,255,.06) !important;
    }

    .about-tags > .about-tag > span{
        font-size:
            clamp(9px, 2.8vw, 11px) !important;
    }


    /* ======================================================================
       BOOKING — THE MOBILE CENTREPIECE
       ====================================================================== */

    .booking-section{
        height:auto !important;

        padding:
            clamp(46px, 10vw, 64px)
            0
            30px !important;

        overflow:visible !important;

        background:
            radial-gradient(
                circle at 90% 3%,
                rgba(216,181,94,.075),
                transparent 24%
            ),
            linear-gradient(
                180deg,
                #fffefa,
                #fff
            ) !important;
    }

    .booking-section .section-heading{
        height:auto !important;

        margin:0 auto 25px !important;
    }

    .booking-section .section-heading h2{
        font-size:
            clamp(27px, 7.6vw, 36px) !important;

        line-height:1.2 !important;
    }


    .booking-shell{
        width:100% !important;

        height:auto !important;
        min-height:0 !important;

        display:grid !important;

        grid-template-columns:1fr !important;

        align-items:stretch !important;

        border:
            1px solid rgba(201,158,67,.24) !important;

        border-radius:
            clamp(20px, 5vw, 28px) !important;

        overflow:hidden !important;

        background:#fff !important;

        box-shadow:
            0 28px 70px rgba(7,52,41,.12),
            0 10px 24px rgba(7,52,41,.06),
            inset 0 1px 0 rgba(255,255,255,.8) !important;
    }


    /* Calendar */
    .calendar-panel{
        width:100%;

        height:auto !important;
        min-height:0 !important;

        direction:rtl !important;

        display:grid !important;

        grid-template-columns:1fr !important;
        grid-template-rows:auto auto auto auto !important;

        gap:12px !important;

        padding:
            20px
            clamp(12px, 4vw, 22px)
            22px !important;

        background:
            radial-gradient(
                circle at 12% 3%,
                rgba(255,255,255,.07),
                transparent 26%
            ),
            linear-gradient(
                150deg,
                #063c30 0%,
                #07503e 56%,
                #063b30 100%
            ) !important;

        box-shadow:
            inset 0 -1px 0 rgba(216,181,94,.16) !important;
    }

    html[dir="ltr"] .calendar-panel{
        direction:ltr !important;
    }


    .calendar-head{
        grid-column:1 !important;
        grid-row:1 !important;

        height:48px !important;

        margin:0 !important;

        display:grid !important;

        grid-template-columns:44px 1fr 44px !important;

        align-items:center !important;

        gap:4px;
    }

    .calendar-head > div{
        text-align:center;
    }

    .calendar-head strong{
        font-size:
            clamp(16px, 4.5vw, 20px) !important;

        font-weight:700 !important;
    }

    .calendar-nav{
        width:44px !important;
        height:44px !important;

        border-radius:50% !important;

        font-size:25px;

        transition:
            background .18s ease,
            color .18s ease,
            transform .18s ease;
    }

    .calendar-nav:active{
        color:var(--gold2) !important;

        background:
            rgba(255,255,255,.07) !important;

        transform:scale(.94);
    }


    .calendar-weekdays{
        grid-column:1 !important;
        grid-row:2 !important;

        display:grid !important;

        grid-template-columns:
            repeat(7, minmax(0,1fr)) !important;

        gap:2px !important;

        margin:0 !important;

        padding:0 !important;

        font-size:
            clamp(9px, 2.7vw, 11px) !important;

        color:rgba(255,255,255,.78) !important;
    }


    .calendar-grid{
        grid-column:1 !important;
        grid-row:3 !important;

        display:grid !important;

        grid-template-columns:
            repeat(7, minmax(0,1fr)) !important;

        grid-auto-rows:
            clamp(38px, 10.5vw, 45px) !important;

        gap:2px !important;

        padding:0 !important;
    }

    .calendar-day,
    .calendar-blank{
        width:
            clamp(34px, 9.6vw, 42px) !important;

        height:
            clamp(34px, 9.6vw, 42px) !important;
    }

    .calendar-day{
        min-width:34px;

        margin:auto !important;

        padding:0 !important;

        font-size:
            clamp(11px, 3vw, 13px) !important;

        border-radius:50% !important;

        transition:
            transform .16s ease,
            background .16s ease,
            border-color .16s ease,
            box-shadow .16s ease !important;
    }

    .calendar-day:disabled{
        opacity:.19 !important;
    }

    .calendar-day.has-slots{
        color:#fff !important;
    }

    .calendar-day.is-selected{
        top:0 !important;
        right:auto !important;

        transform:
            translate(1px,-1px) !important;

        border:
            1.5px solid #e0b958 !important;

        background:
            rgba(255,255,255,.035) !important;

        box-shadow:
            0 0 0 3px rgba(216,181,94,.055),
            0 6px 14px rgba(0,0,0,.11) !important;
    }


    /* Time selector */
    .time-wrap{
        grid-column:1 !important;
        grid-row:4 !important;

        width:100%;

        margin:6px 0 0 !important;

        padding:17px 0 0 !important;

        border:0 !important;

        border-top:
            1px solid rgba(255,255,255,.13) !important;
    }

    .time-wrap h3{
        margin:0 0 9px !important;

        font-size:
            clamp(12px, 3.5vw, 14px) !important;

        line-height:1.4 !important;
    }

    .time-scroll-shell{
        width:100% !important;

        display:grid !important;

        grid-template-rows:
            22px
            148px
            22px !important;

        gap:4px !important;
    }

    .time-scroll-shell .time-slots{
        width:100% !important;

        height:148px !important;
        max-height:148px !important;

        display:grid !important;

        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;

        grid-auto-rows:42px;

        gap:7px !important;

        padding:1px 2px !important;

        overflow-y:auto !important;

        scrollbar-width:none !important;

        overscroll-behavior:contain;

        scroll-behavior:smooth;
    }

    .time-slot{
        height:42px !important;

        min-height:42px !important;

        padding:0 8px !important;

        border:
            1px solid rgba(223,193,120,.30) !important;

        border-radius:10px !important;

        background:
            rgba(255,255,255,.045) !important;

        color:#fff !important;

        font-size:
            clamp(11px, 3.1vw, 13px) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.045) !important;
    }

    .time-slot.is-selected{
        border-color:
            rgba(240,207,120,.82) !important;

        background:
            linear-gradient(
                145deg,
                rgba(201,158,67,.22),
                rgba(216,181,94,.10)
            ) !important;

        color:#fff !important;

        box-shadow:
            0 7px 18px rgba(0,0,0,.12),
            inset 0 1px 0 rgba(255,255,255,.10) !important;
    }

    .time-scroll-arrow{
        width:38px !important;
        height:22px !important;
    }

    .time-scroll-arrow svg{
        width:15px !important;
        height:15px !important;
    }


    /* ======================================================================
       BOOKING FORM
       ====================================================================== */

    .booking-form{
        width:100%;

        height:auto !important;
        min-height:0 !important;

        direction:rtl !important;

        padding:
            clamp(22px, 5.5vw, 30px)
            clamp(15px, 4.5vw, 26px)
            clamp(25px, 6vw, 34px) !important;

        background:
            radial-gradient(
                circle at 88% 0%,
                rgba(216,181,94,.085),
                transparent 27%
            ),
            linear-gradient(
                150deg,
                #fffefb,
                #fffdfa 48%,
                #faf7f0
            ) !important;
    }

    html[dir="ltr"] .booking-form{
        direction:ltr !important;
    }


    .form-heading{
        margin:0 0 20px !important;

        padding-bottom:10px !important;
    }

    .form-heading h3{
        font-size:
            clamp(19px, 5.3vw, 23px) !important;
    }

    .form-heading p{
        margin-top:5px !important;

        font-size:
            clamp(10.5px, 3vw, 12.5px) !important;

        line-height:1.6 !important;
    }

    .form-heading::after{
        width:34px !important;
        height:2px !important;
    }


    .booking-form .form-grid{
        display:grid !important;

        grid-template-columns:1fr !important;

        gap:13px !important;
    }

    .booking-form label{
        gap:6px !important;
    }

    .booking-form label > span{
        font-size:
            clamp(11px, 3.1vw, 12.5px) !important;

        line-height:1.4 !important;

        font-weight:700 !important;
    }


    /* 16px is intentional:
       prevents iOS Safari from zooming the page when an input receives focus. */
    .booking-form input,
    .booking-form select,
    .booking-form textarea{
        width:100% !important;

        min-height:50px !important;

        padding:
            9px
            12px !important;

        border:
            1px solid rgba(15,72,59,.14) !important;

        border-radius:12px !important;

        background:
            rgba(255,255,255,.92) !important;

        font-size:16px !important;

        line-height:1.3 !important;

        box-shadow:
            0 4px 12px rgba(8,55,44,.035),
            inset 0 1px 0 #fff !important;
    }

    .booking-form textarea{
        min-height:92px !important;
        height:92px !important;

        padding-top:12px !important;
    }

    .booking-form input:focus,
    .booking-form select:focus,
    .booking-form textarea:focus{
        transform:none !important;

        border-color:
            rgba(201,158,67,.80) !important;

        box-shadow:
            0 0 0 4px rgba(201,158,67,.10),
            0 8px 20px rgba(8,55,44,.055),
            inset 0 1px 0 #fff !important;
    }


    .guardian-fields,
    .conditional-field{
        margin-top:13px !important;
    }

    .booking-form .notes-field{
        margin-top:13px !important;

        gap:6px !important;
    }


    /* Gold CTA */
    .booking-form .submit-button,
    .booking-form button[type="submit"]{
        width:100% !important;

        height:54px !important;
        min-height:54px !important;

        margin-top:16px !important;
        margin-bottom:4px !important;

        border-radius:13px !important;

        font-size:
            clamp(13px, 3.7vw, 15px) !important;

        box-shadow:
            0 14px 28px rgba(201,158,67,.22),
            inset 0 1px 0 rgba(255,255,255,.36) !important;
    }

    .booking-form .submit-button:active{
        transform:translateY(1px) scale(.99) !important;
    }


    .form-status{
        margin-top:8px !important;

        font-size:12px !important;

        line-height:1.6 !important;

        text-align:center;
    }

    .booking-note{
        height:auto !important;

        margin:0 !important;

        padding:
            20px
            14px
            12px !important;

        font-size:
            clamp(10.5px, 2.9vw, 12px) !important;

        line-height:1.7 !important;

        text-align:center !important;

        color:#6c7a75 !important;

        border:0 !important;
    }


    /* ======================================================================
       FAQ
       ====================================================================== */

    .faq-section{
        height:auto !important;
        min-height:0 !important;

        position:relative !important;

        margin:0 !important;

        padding:
            38px
            0
            48px !important;

        clear:both !important;

        overflow:visible !important;

        border-top:
            1px solid rgba(201,158,67,.25) !important;

        background:
            radial-gradient(
                circle at 8% 5%,
                rgba(216,181,94,.055),
                transparent 22%
            ),
            #fffefb !important;
    }

    .faq-section .section-heading{
        margin:0 auto 23px !important;

        padding-top:0 !important;
    }

    .faq-section .section-heading h2{
        font-size:
            clamp(25px, 7vw, 32px) !important;

        line-height:1.22 !important;
    }

    .faq-section .ornament{
        display:block !important;

        width:34px;
        height:2px;

        margin:10px auto 0;

        overflow:hidden;

        border-radius:999px;

        background:#c99e43;

        font-size:0;
        line-height:0;
    }


    .faq-list{
        display:grid !important;

        grid-template-columns:1fr !important;

        gap:10px !important;

        align-items:start !important;
    }

    .faq-list details{
        width:100%;

        height:auto !important;
        min-height:54px !important;

        padding:0 15px !important;

        border:
            1px solid rgba(221,209,187,.78) !important;

        border-radius:14px !important;

        background:
            linear-gradient(
                145deg,
                #fff 0%,
                #fffdf8 100%
            ) !important;

        box-shadow:
            0 7px 20px rgba(16,55,43,.045) !important;
    }

    .faq-list details[open]{
        border-color:
            rgba(201,158,67,.36) !important;

        box-shadow:
            0 14px 30px rgba(16,55,43,.07),
            inset 0 1px 0 #fff !important;
    }


    .faq-list summary{
        min-height:54px;

        display:block !important;

        padding:
            16px
            0 !important;

        line-height:1.55 !important;

        font-size:
            clamp(12px, 3.35vw, 14px) !important;

        white-space:normal !important;
    }


    /* Your custom SVG arrow, just made a little more substantial for touch UI */
    .faq-list summary::before{
        width:15px !important;
        height:15px !important;

        margin-top:3px !important;
        margin-right:8px !important;
    }

    html[dir="ltr"] .faq-list summary::before{
        float:right !important;

        margin-right:0 !important;
        margin-left:8px !important;
    }


    .faq-list details p{
        display:block !important;

        max-height:0;

        margin:0 !important;

        padding:
            0
            2px !important;

        opacity:0;

        overflow:hidden;

        font-size:
            clamp(11px, 3vw, 12.5px) !important;

        line-height:1.8 !important;

        color:#586e66 !important;
    }

    .faq-list details[open] p{
        max-height:260px !important;

        opacity:1 !important;

        padding:
            1px
            2px
            16px !important;
    }


    /* ======================================================================
       FOOTER
       ====================================================================== */

    .site-footer{
        height:auto !important;

        padding:
            42px
            0
            calc(30px + env(safe-area-inset-bottom, 0px)) !important;

        overflow:hidden !important;

        background:
            radial-gradient(
                circle at 88% 0%,
                rgba(25,103,76,.23),
                transparent 28%
            ),
            linear-gradient(
                145deg,
                #052f25,
                #073d30
            ) !important;
    }

    .footer-grid{
        width:
            min(
                calc(100% - (var(--mobile-edge) * 2)),
                720px
            ) !important;

        height:auto !important;

        display:grid !important;

        grid-template-columns:1fr !important;
        grid-template-areas:none !important;

        gap:27px !important;
    }

    .footer-brand,
    .footer-grid > div:nth-child(2),
    .footer-grid > div:nth-child(3){
        grid-area:auto !important;

        align-items:center !important;

        padding:0 !important;

        border:0 !important;

        text-align:center !important;
    }

    .footer-brand .brand{
        justify-content:center !important;
    }

    .footer-brand p{
        max-width:430px !important;

        margin:10px auto 0 !important;

        font-size:11px !important;

        line-height:1.75 !important;
    }

    .footer-grid h3{
        margin-bottom:7px !important;

        font-size:14px !important;

        color:#fff !important;
    }

    .footer-grid a,
    .footer-grid span{
        min-height:28px;

        display:flex;

        align-items:center;

        justify-content:center;

        font-size:11.5px !important;
    }

    .footer-grid a:active{
        color:var(--gold2) !important;
    }

    .footer-bottom{
        width:
            min(
                calc(100% - (var(--mobile-edge) * 2)),
                720px
            );

        height:auto !important;

        margin:24px auto 0 !important;

        padding:
            18px
            0
            0 !important;

        border-top:
            1px solid rgba(216,181,94,.14) !important;

        font-size:10px !important;

        line-height:1.6;
    }


    /* ======================================================================
       FLOATING MOBILE BOOKING BUTTON
       ====================================================================== */

    .mobile-book{
        position:fixed !important;

        left:var(--mobile-edge) !important;
        right:var(--mobile-edge) !important;

        bottom:
            max(
                12px,
                env(safe-area-inset-bottom, 0px)
            ) !important;

        z-index:1500 !important;

        width:auto !important;

        min-height:52px;

        display:flex !important;

        align-items:center;
        justify-content:center;

        gap:9px;

        padding:0 18px !important;

        border:
            1px solid rgba(255,255,255,.17);

        border-radius:16px !important;

        background:
            linear-gradient(
                120deg,
                #c69536,
                #d8ad4e 52%,
                #c89635
            ) !important;

        color:#fff !important;

        font-size:13px !important;
        font-weight:700 !important;

        box-shadow:
            0 16px 36px rgba(84,61,16,.24),
            0 5px 14px rgba(8,55,44,.11),
            inset 0 1px 0 rgba(255,255,255,.30) !important;

        backdrop-filter:blur(12px);
        -webkit-backdrop-filter:blur(12px);
    }

    .mobile-book::before{
        content:"";

        width:17px;
        height:17px;

        flex:0 0 17px;

        background:currentColor;

        -webkit-mask:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5.5' width='16' height='14' rx='2' fill='none' stroke='white' stroke-width='1.8'/%3E%3Cpath d='M8 3.5v4M16 3.5v4M4 9.5h16' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")
            center / contain no-repeat;

        mask:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5.5' width='16' height='14' rx='2' fill='none' stroke='white' stroke-width='1.8'/%3E%3Cpath d='M8 3.5v4M16 3.5v4M4 9.5h16' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")
            center / contain no-repeat;
    }

    .mobile-book:active{
        transform:
            translateY(1px)
            scale(.987);
    }


    /* ======================================================================
       ENGLISH / LTR SUPPORT
       ====================================================================== */

    html[dir="ltr"] .hero-copy,
    html[dir="ltr"] .booking-form,
    html[dir="ltr"] .about-copy{
        direction:ltr !important;
    }

    html[dir="ltr"] .hero-points li,
    html[dir="ltr"] .booking-form,
    html[dir="ltr"] .footer-grid{
        text-align:left;
    }
}


/* ==========================================================================
   TABLETS / LARGE PHONES
   iPad Mini, iPad portrait, Pixel Fold open, Galaxy Tab etc.
   ========================================================================== */

@media (min-width:721px) and (max-width:980px){

    :root{
        --mobile-edge:28px;
    }

    .container{
        max-width:860px !important;
    }


    /* Editorial split hero rather than enormous vertical stack */
    .hero-grid{
        grid-template-columns:
            minmax(0,1.03fr)
            minmax(290px,.97fr) !important;

        grid-template-areas:
            "copy portrait" !important;

        align-items:center !important;

        gap:26px !important;

        padding:
            38px
            0
            44px !important;
    }

    html[dir="rtl"] .hero-grid{
        direction:ltr;
    }

    .hero-copy{
        padding:16px 0 !important;

        align-items:stretch !important;

        text-align:start !important;
    }

    .hero h1,
    .hero h2,
    .hero-lead{
        align-self:stretch !important;

        text-align:start !important;
    }

    .hero h1{
        font-size:
            clamp(36px, 5.3vw, 46px) !important;
    }

    .hero h2{
        font-size:20px !important;
    }

    .hero-lead{
        font-size:13px !important;
    }

    .hero-points{
        font-size:11.5px !important;
    }

    .hero-points li{
        padding:7px 9px !important;
    }

    .hero-actions{
        align-self:stretch !important;

        justify-content:flex-start !important;
    }

    .hero-portrait{
        height:
            clamp(390px, 55vw, 480px) !important;
    }


    .feature-grid{
        grid-template-columns:
            repeat(4, minmax(0,1fr)) !important;

        gap:14px !important;
    }

    .feature-card{
        min-height:155px !important;
    }


    .student-grid{
        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;
    }

    .outcome-grid{
        grid-template-columns:
            repeat(3, minmax(0,1fr)) !important;
    }

    .outcome-card:last-child{
        grid-column:auto;

        width:auto;
    }


    /* About: photograph beside text */
    .about-grid{
        grid-template-columns:
            minmax(270px,.82fr)
            minmax(0,1.18fr) !important;

        align-items:center !important;

        gap:28px !important;

        direction:ltr;
    }

    .about-photo{
        height:410px !important;
    }

    .about-copy{
        text-align:start !important;
    }

    .about-copy p{
        margin-inline:0 !important;
    }


    /* Tablet form gets its two columns back */
    .booking-form .form-grid{
        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;

        column-gap:12px !important;
    }


    .footer-grid{
        grid-template-columns:
            1.15fr
            .8fr
            1fr !important;

        gap:28px !important;
    }

    .footer-brand,
    .footer-grid > div:nth-child(2),
    .footer-grid > div:nth-child(3){
        align-items:flex-start !important;

        text-align:start !important;
    }

    .footer-brand .brand{
        justify-content:flex-start !important;
    }

    .footer-brand p{
        margin-inline:0 !important;

        text-align:start;
    }

    .footer-grid a,
    .footer-grid span{
        justify-content:flex-start;
    }
}


/* ==========================================================================
   NORMAL MODERN PHONES
   iPhone Pro/Plus/Max, Pixel, Galaxy S, Galaxy A, etc.
   ========================================================================== */

@media (max-width:720px){

    .hero-grid{
        grid-template-columns:1fr !important;

        grid-template-areas:
            "copy"
            "portrait" !important;
    }

    .student-grid,
    .outcome-grid,
    .feature-grid{
        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;
    }

    .booking-form .form-grid{
        grid-template-columns:1fr !important;
    }
}


/* ==========================================================================
   COMPACT PHONES
   360–430ish widths
   ========================================================================== */

@media (max-width:540px){

    :root{
        --mobile-edge:12px;
    }

    .site-header,
    .nav-wrap{
        height:64px !important;
    }

    html{
        scroll-padding-top:76px !important;
    }

    .brand-menu-toggle{
        width:38px !important;
        height:38px !important;
        flex-basis:38px !important;
    }

    .brand-menu-toggle .brand-mark{
        width:36px !important;
        height:36px !important;
    }

    .brand-text strong{
        font-size:12px !important;
    }

    .brand-text small{
        font-size:9px !important;
    }

    .language-switch{
        height:34px !important;

        padding-inline:8px !important;

        font-size:9.5px !important;
    }


    .hero-copy{
        padding:
            36px
            2px
            25px !important;
    }

    .hero h1{
        font-size:
            clamp(31px, 9.4vw, 39px) !important;
    }

    .hero h2{
        font-size:
            clamp(17px, 5vw, 20px) !important;
    }

    .hero-actions{
        gap:8px !important;
    }

    .hero-actions .button{
        padding-inline:8px !important;

        font-size:10.5px !important;
    }


    .hero-portrait{
        height:
            clamp(315px, 95vw, 420px) !important;

        border-radius:22px !important;
    }


    .feature-card,
    .white-card,
    .outcome-card{
        padding-inline:10px !important;
    }


    .calendar-panel{
        padding:
            18px
            10px
            20px !important;
    }

    .calendar-grid{
        grid-auto-rows:
            clamp(35px, 10vw, 40px) !important;
    }

    .calendar-day,
    .calendar-blank{
        width:
            clamp(31px, 9vw, 37px) !important;

        height:
            clamp(31px, 9vw, 37px) !important;
    }


    .booking-form{
        padding:
            22px
            13px
            27px !important;
    }

    .booking-form input,
    .booking-form select,
    .booking-form textarea{
        font-size:16px !important;
    }


    .mobile-book{
        border-radius:14px !important;
    }
}


/* ==========================================================================
   SMALL BUT STILL REAL-WORLD PHONES
   iPhone SE / older Android / 360px class
   ========================================================================== */

@media (max-width:370px){

    :root{
        --mobile-edge:10px;
    }

    .brand-text small{
        display:none !important;
    }

    .brand-text strong{
        font-size:11px !important;
    }

    .language-switch{
        padding-inline:7px !important;

        font-size:9px !important;
    }


    .hero h1{
        font-size:30px !important;
    }

    .hero h2{
        font-size:16.5px !important;
    }

    .hero-lead{
        font-size:11.8px !important;
    }

    .hero-points{
        font-size:10.8px !important;
    }


    .hero-actions{
        flex-direction:column !important;
    }

    .hero-actions .button{
        width:100% !important;

        flex:none !important;
    }


    .feature-grid,
    .student-grid,
    .outcome-grid{
        grid-template-columns:1fr !important;

        gap:28px !important;
    }

    .outcome-card:last-child{
        grid-column:auto;

        width:100%;
    }


    .about-tags{
        grid-template-columns:1fr 1fr !important;
    }


    .time-scroll-shell .time-slots{
        grid-template-columns:1fr !important;
    }

    .calendar-weekdays{
        font-size:8.5px !important;
    }

    .calendar-day{
        font-size:10.5px !important;
    }
}


/* ==========================================================================
   MOBILE LANDSCAPE
   Stops phones becoming ridiculous when rotated sideways.
   ========================================================================== */

@media
    (max-width:980px)
    and (orientation:landscape)
    and (max-height:520px){

    .site-header,
    .nav-wrap{
        height:58px !important;
    }

    html{
        scroll-padding-top:68px !important;
    }

    .hero-grid{
        grid-template-columns:
            minmax(0,1.05fr)
            minmax(270px,.95fr) !important;

        grid-template-areas:
            "copy portrait" !important;

        align-items:center !important;

        gap:20px !important;

        padding:
            22px
            0
            28px !important;
    }

    .hero-copy{
        padding:8px 0 !important;

        align-items:stretch !important;

        text-align:start !important;
    }

    .hero h1{
        font-size:
            clamp(29px, 5vw, 37px) !important;

        text-align:start !important;
    }

    .hero h2{
        margin-bottom:9px !important;

        font-size:17px !important;

        text-align:start !important;
    }

    .hero-lead{
        margin-bottom:9px !important;

        font-size:11px !important;

        line-height:1.5 !important;

        text-align:start !important;
    }

    .hero-points{
        margin-bottom:10px !important;

        gap:3px !important;

        font-size:9.5px !important;
    }

    .hero-points li{
        padding:4px 7px !important;
    }

    .hero-actions .button{
        height:41px !important;
        min-height:41px !important;
    }

    .hero-portrait{
        height:330px !important;
    }

    .mobile-book{
        left:auto !important;

        width:220px !important;
    }
}


/* ==========================================================================
   TOUCH + ACCESSIBILITY POLISH
   ========================================================================== */

@media (max-width:980px){

    :focus-visible{
        outline:
            2px solid var(--gold2) !important;

        outline-offset:3px !important;
    }

    @media (hover:hover){

        .feature-card,
        .white-card,
        .outcome-card{
            transition:
                transform .2s ease,
                box-shadow .2s ease,
                border-color .2s ease;
        }

        .feature-card:hover,
        .white-card:hover,
        .outcome-card:hover{
            transform:translateY(-2px);

            border-color:
                rgba(201,158,67,.42) !important;
        }

        .site-footer .footer-grid a:hover{
            color:var(--gold2) !important;
        }
    }
}


/* Respect people who disable animations */
@media
    (max-width:980px)
    and (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;

        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;
    }
}

/* Mobile — optically raise About tag icons slightly */
@media (max-width:720px){
    .about-tags .about-tag-icon{
        transform:translateY(-1.0px) !important;
    }
}

/* Mobile header brand — horizontal spacing between the two phrases */
@media (max-width:720px){

    .brand-text{
        display:flex !important;
        align-items:center !important;
        gap:8px !important;
        white-space:nowrap;
    }

    .brand-text strong,
    .brand-text small{
        display:inline-block !important;
        margin:0 !important;
    }
}

/* =========================================================
   MOBILE HEADER BRAND — put both phrases side-by-side
   ========================================================= */

@media (max-width:720px){

    /* Remove the two old line breaks in the header */
    .site-header .brand-text > br{
        display:none !important;
    }

    /* THIS is the actual wrapper around strong + small */
    .site-header .brand-text > span{
        display:flex !important;
        flex-direction:row !important;
        align-items:baseline !important;
        justify-content:flex-start !important;

        gap:10px !important;

        white-space:nowrap !important;
    }

    .site-header .brand-text strong,
    .site-header .brand-text small{
        display:inline-block !important;
        width:auto !important;

        margin:0 !important;
        padding:0 !important;

        white-space:nowrap !important;
    }
}


/* =========================================================
   FOOTER LOGO — REMOVE LITERAL STAR FROM THE CENTRE
   Keep only the geometric gold logo
   ========================================================= */

.footer-brand .brand-mark{
    font-size:0 !important;
    line-height:0 !important;

    /* hides the literal ✦ without affecting the CSS-drawn logo */
    color:transparent !important;
}

/* Keep both geometric pieces gold */
.footer-brand .brand-mark::before,
.footer-brand .brand-mark::after{
    border-color:var(--gold) !important;
}

/* =========================================================
   MOBILE HEADER BRAND — STACKED
   ========================================================= */

@media (max-width:720px){

    .site-header .brand-text > br{
        display:none !important;
    }

    .site-header .brand-text > span{
        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;
        justify-content:center !important;

        gap:3px !important;

        white-space:nowrap !important;
    }

    .site-header .brand-text strong,
    .site-header .brand-text small{
        display:block !important;

        width:auto !important;

        margin:0 !important;
        padding:0 !important;

        white-space:nowrap !important;
    }

    .site-header .brand-text small{
        margin-top:2px !important;
    }
}

/* =========================================================
   MOBILE FOOTER BRAND — FINAL FIX
   Stack brand text + remove centre star
   ========================================================= */

@media (max-width:720px){

    /* Keep the logo and text group together */
    .site-footer .footer-brand .brand{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:10px !important;
    }


    /* The span containing BOTH pieces of brand text */
    .site-footer .footer-brand .brand > span:not(.brand-mark){
        display:flex !important;
        flex-direction:column !important;

        align-items:center !important;
        justify-content:center !important;

        gap:4px !important;

        width:auto !important;
        min-height:0 !important;

        margin:0 !important;
        padding:0 !important;

        line-height:1.2 !important;
        white-space:nowrap !important;
    }


    /* Force them onto separate lines */
    .site-footer .footer-brand .brand > span:not(.brand-mark) > strong,
    .site-footer .footer-brand .brand > span:not(.brand-mark) > small{
        display:block !important;

        width:auto !important;

        margin:0 !important;
        padding:0 !important;

        white-space:nowrap !important;
    }


    /* A little breathing room between the two lines */
    .site-footer .footer-brand .brand > span:not(.brand-mark) > small{
        margin-top:2px !important;
    }


    /* =====================================================
       REMOVE THE WHITE ✦ FROM INSIDE THE FOOTER LOGO
       ===================================================== */

    .site-footer .footer-brand .brand-mark{
        font-size:0 !important;
        line-height:0 !important;

        color:transparent !important;

        width:42px !important;
        height:42px !important;
        min-height:42px !important;
        flex:0 0 42px !important;

        display:grid !important;
        place-items:center !important;

        overflow:hidden !important;
    }


    /* Keep ONLY the gold geometric outline */
    .site-footer .footer-brand .brand-mark::before,
    .site-footer .footer-brand .brand-mark::after{
        border-color:var(--gold) !important;
    }
}

/* =========================================================
   MOBILE FOOTER BRAND — CENTRE THE WHOLE LOGO + TEXT GROUP
   ========================================================= */

@media (max-width:720px){

    .site-footer .footer-brand{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        text-align:center !important;
    }

    .site-footer .footer-brand .brand{
        width:max-content !important;
        max-width:100% !important;

        margin-left:auto !important;
        margin-right:auto !important;

        justify-content:center !important;
        align-items:center !important;
    }

    .site-footer .footer-brand .brand > span:not(.brand-mark){
        align-items:center !important;
        text-align:center !important;
    }

    .site-footer .footer-brand .brand > span:not(.brand-mark) > strong,
    .site-footer .footer-brand .brand > span:not(.brand-mark) > small{
        text-align:center !important;
    }
}

/* MOBILE FOOTER — logo/name ABOVE tagline */
@media (max-width:720px){

    .site-footer .footer-brand .brand{
        order:0 !important;
    }

    .site-footer .footer-brand > p{
        order:1 !important;

        margin-top:12px !important;
        margin-bottom:0 !important;
    }
}

/* =========================================================
   OUTCOME CARDS — VERTICALLY CENTRE CONTENT
   ========================================================= */

.outcome-card{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
}

/* =========================================================
   STUDENT CARDS — VERTICALLY CENTRE CONTENT
   ========================================================= */

.white-card{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
}

/* =========================================================
   SELECTED LESSON TIME + LOCAL TIME
   ========================================================= */

.selected-slot{
    display:block !important;
    width:100% !important;
    margin:12px 0 4px !important;
    padding:13px 15px !important;

    background:#f8f6ef !important;
    border:1px solid rgba(201,158,67,.28) !important;
    border-radius:10px !important;

    text-align:center !important;
    color:#234b40 !important;

    font-size:12px !important;
    line-height:1.55 !important;
}

.selected-slot > span{
    display:block !important;
    margin-bottom:4px !important;

    font-size:11px !important;
    font-weight:600 !important;
    color:#71827c !important;
}

.selected-slot > strong{
    display:block !important;
    font-size:12px !important;
    font-weight:700 !important;
    color:#0b372b !important;
}

/* =========================================================
   SELECTED LESSON TIME — INSIDE CALENDAR
   ========================================================= */

@media (min-width:981px){

    .calendar-panel{
        grid-template-rows:30px 1fr auto !important;
    }

    .calendar-panel .selected-slot{
        grid-column:1 !important;
        grid-row:3 !important;

        display:block !important;
        width:100% !important;

        margin:6px 0 0 !important;
        padding:9px 12px !important;

        background:rgba(255,255,255,.055) !important;
        border:1px solid rgba(216,181,94,.34) !important;
        border-radius:8px !important;

        text-align:center !important;
        color:#fff !important;

        font-size:9px !important;
        line-height:1.5 !important;
    }

    .calendar-panel .selected-slot > span{
        display:block !important;
        margin:0 0 3px !important;

        color:#d8b55e !important;
        font-size:8px !important;
        font-weight:700 !important;
    }

    .calendar-panel .selected-slot > strong{
        display:block !important;

        color:#fff !important;
        font-size:9px !important;
        font-weight:700 !important;
    }

    .calendar-panel .time-wrap{
        grid-row:1 / 4 !important;
    }
}


/* Mobile/tablet */
@media (max-width:980px){

    .calendar-panel{
        grid-template-rows:
            auto
            auto
            auto
            auto
            auto !important;
    }

    .calendar-panel .selected-slot{
        grid-column:1 !important;
        grid-row:4 !important;

        display:block !important;
        width:100% !important;

        margin:2px 0 0 !important;
        padding:13px 14px !important;

        background:rgba(255,255,255,.055) !important;
        border:1px solid rgba(216,181,94,.35) !important;
        border-radius:12px !important;

        text-align:center !important;
        color:#fff !important;

        font-size:12px !important;
        line-height:1.55 !important;
    }

    .calendar-panel .selected-slot > span{
        display:block !important;
        margin-bottom:4px !important;

        color:#d8b55e !important;
        font-size:11px !important;
        font-weight:700 !important;
    }

    .calendar-panel .selected-slot > strong{
        display:block !important;

        color:#fff !important;
        font-size:12px !important;
        font-weight:700 !important;
    }

    .calendar-panel .time-wrap{
        grid-column:1 !important;
        grid-row:5 !important;
    }
}

/* =========================================================
   DESKTOP CALENDAR — REMOVE DEAD SPACE + FULL HEIGHT TIMES
   ========================================================= */

@media (min-width:981px){

    /* Don't stretch the dates row */
    .calendar-panel{
        grid-template-rows:
            30px
            auto
            auto !important;

        align-content:start !important;
    }

    /* Selected-time box sits immediately beneath the dates */
    .calendar-panel .selected-slot{
        align-self:start !important;
        margin-top:8px !important;
    }


    /* =====================================================
       LEFT-HAND TIME COLUMN — USE ALL AVAILABLE HEIGHT
       ===================================================== */

    .calendar-panel .time-wrap{
        grid-column:2 !important;
        grid-row:1 / 4 !important;

        height:100% !important;
        min-height:0 !important;

        display:flex !important;
        flex-direction:column !important;

        padding-bottom:0 !important;
    }

    .calendar-panel .time-wrap h3{
        flex:0 0 auto !important;
    }


    /* Fill all remaining vertical space between the arrows */
    .calendar-panel .time-scroll-shell{
        flex:1 1 auto !important;
        min-height:0 !important;
        height:auto !important;

        display:grid !important;

        grid-template-rows:
            22px
            minmax(0,1fr)
            22px !important;

        align-items:stretch !important;
        gap:5px !important;
    }


    /* Remove the old 128px limit */
    .calendar-panel .time-scroll-shell .time-slots{
        height:100% !important;
        max-height:none !important;
        min-height:0 !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;

        align-content:start !important;
    }
}

/* =========================================================
   DESKTOP CALENDAR — FIXED NATURAL HEIGHT / ZERO DEAD SPACE
   ========================================================= */

@media (min-width:981px){

    /*
     * The booking form determines the natural height.
     * Calendar content is NOT allowed to make the shell taller.
     */
    .booking-shell{
        align-items:stretch !important;
    }

    .calendar-panel{
        position:relative !important;

        height:100% !important;
        min-height:0 !important;
        max-height:100% !important;

        overflow:hidden !important;

        display:block !important;
    }


    /* =====================================================
       RIGHT SIDE — MONTH
       ===================================================== */

    .calendar-panel .calendar-head{
        position:absolute !important;

        top:12px !important;
        right:12px !important;

        width:calc(65% - 16px) !important;
        height:30px !important;

        margin:0 !important;
        padding:0 !important;
    }


    /* =====================================================
       RIGHT SIDE — WEEKDAYS
       ===================================================== */

    .calendar-panel .calendar-weekdays{
        position:absolute !important;

        top:52px !important;
        right:12px !important;

        width:calc(65% - 16px) !important;
        height:18px !important;

        margin:0 !important;
        padding:0 !important;

        align-items:center !important;
    }


    /* =====================================================
       RIGHT SIDE — DATES

       They automatically stretch through ALL remaining room
       between weekdays and the selected-time box.
       ===================================================== */

    .calendar-panel .calendar-grid{
        position:absolute !important;

        top:78px !important;
        right:12px !important;

        /*
         * Leave exactly enough room at bottom
         * for selected-time box.
         */
        bottom:112px !important;

        width:calc(65% - 16px) !important;

        height:auto !important;
        min-height:0 !important;

        margin:0 !important;
        padding:0 !important;

        display:grid !important;

        grid-template-columns:
            repeat(7, minmax(0,1fr)) !important;

        /*
         * This is the important bit:
         * every calendar week shares the available height.
         */
        grid-auto-rows:
            minmax(0,1fr) !important;

        row-gap:0 !important;

        align-items:center !important;

        overflow:hidden !important;
    }


    .calendar-panel .calendar-day,
    .calendar-panel .calendar-blank{
        align-self:center !important;
        justify-self:center !important;

        margin:0 !important;
    }


    /* =====================================================
       RIGHT SIDE — TRANSLATED TIME

       Permanently anchored to bottom.
       Never pushes the calendar taller.
       ===================================================== */

    .calendar-panel .selected-slot{
        position:absolute !important;

        right:12px !important;
        bottom:12px !important;

        width:calc(65% - 16px) !important;

        height:88px !important;
        min-height:88px !important;
        max-height:88px !important;

        margin:0 !important;
        padding:10px 12px !important;

        display:flex !important;
        flex-direction:column !important;
        justify-content:center !important;
        align-items:center !important;

        overflow:hidden !important;

        background:rgba(255,255,255,.055) !important;

        border:
            1px solid rgba(216,181,94,.35) !important;

        border-radius:9px !important;

        text-align:center !important;
    }


    .calendar-panel .selected-slot > span{
        flex:0 0 auto !important;

        margin:0 0 4px !important;
    }


    .calendar-panel .selected-slot > strong{
        flex:0 0 auto !important;

        margin:0 !important;

        line-height:1.55 !important;
    }



    /* =====================================================
       LEFT SIDE — AVAILABLE TIMES

       Uses the entire height but can NEVER make the
       green calendar panel taller.
       ===================================================== */

    .calendar-panel .time-wrap{
        position:absolute !important;

        top:12px !important;
        bottom:12px !important;
        left:12px !important;

        width:calc(35% - 16px) !important;

        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        margin:0 !important;
        padding:0 8px 0 0 !important;

        border:0 !important;

        border-right:
            1px solid rgba(255,255,255,.14) !important;

        display:flex !important;
        flex-direction:column !important;

        overflow:hidden !important;
    }


    .calendar-panel .time-wrap h3{
        flex:0 0 24px !important;

        height:24px !important;

        margin:0 0 6px !important;
        padding:0 !important;

        line-height:24px !important;
    }


    /* arrows + scroll area occupy exactly the available height */
    .calendar-panel .time-scroll-shell{
        flex:1 1 0 !important;

        width:100% !important;

        height:auto !important;
        min-height:0 !important;
        max-height:100% !important;

        overflow:hidden !important;

        display:grid !important;

        grid-template-rows:
            22px
            minmax(0,1fr)
            22px !important;

        gap:4px !important;
    }


    /*
     * CRUCIAL:
     * 5 available times or 25 available times =
     * SAME HEIGHT.
     *
     * Extra times scroll inside this area.
     */
    .calendar-panel
    .time-scroll-shell
    .time-slots{

        width:100% !important;

        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        margin:0 !important;
        padding:1px 2px !important;

        display:grid !important;

        grid-template-columns:1fr !important;
        grid-auto-rows:38px !important;

        gap:6px !important;

        align-content:start !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;

        overscroll-behavior:contain !important;

        scrollbar-width:none !important;
    }


    .calendar-panel
    .time-scroll-shell
    .time-slots::-webkit-scrollbar{
        display:none !important;
    }


    .calendar-panel .time-slot{
        width:100% !important;

        height:38px !important;
        min-height:38px !important;
        max-height:38px !important;

        margin:0 !important;
    }


    .calendar-panel .time-scroll-arrow{
        width:32px !important;
        height:22px !important;

        margin:0 auto !important;
    }
}

/* =========================================================
   BOOKING SUBMIT — LOADING STATE
   ========================================================= */

#submitBooking{
    position:relative !important;
    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        opacity .2s ease,
        transform .2s ease !important;
}


#submitBooking.is-loading{
    background:#a8aaa6 !important;
    border-color:#a8aaa6 !important;

    color:transparent !important;

    cursor:wait !important;

    opacity:.9 !important;

    pointer-events:none !important;

    box-shadow:none !important;

    transform:none !important;
}


/* Hide original contents while submitting */
#submitBooking.is-loading > *{
    visibility:hidden !important;
}


/* Loading spinner */
#submitBooking.is-loading::after{

    content:"";

    position:absolute;

    top:50%;
    left:50%;

    width:18px;
    height:18px;

    margin:
        -9px
        0
        0
        -9px;

    border:
        2px solid rgba(255,255,255,.42);

    border-top-color:#ffffff;

    border-radius:50%;

    animation:
        bookingButtonSpin .7s linear infinite;
}


@keyframes bookingButtonSpin{

    to{
        transform:rotate(360deg);
    }

}



/* =========================================================
   BOOKING SUCCESS MODAL
   ========================================================= */

.booking-success-modal{

    position:fixed;

    inset:0;

    z-index:99999;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:20px;

    opacity:0;

    visibility:hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


.booking-success-modal.is-visible{

    opacity:1;

    visibility:visible;
}



/* Dark green translucent page overlay */

.booking-success-backdrop{

    position:absolute;

    inset:0;

    background:
        rgba(3,35,28,.72);

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);
}



/* Main card */

.booking-success-card{

    position:relative;

    z-index:1;

    width:min(
        440px,
        100%
    );

    max-height:
        calc(100vh - 40px);

    overflow-y:auto;

    padding:
        34px
        34px
        25px;

    background:
        linear-gradient(
            180deg,
            #fffefb 0%,
            #faf7ef 100%
        );

    border:
        1px solid rgba(216,181,94,.5);

    border-radius:24px;

    box-shadow:
        0 35px 90px rgba(0,0,0,.28),
        0 12px 30px rgba(4,57,44,.17),
        inset 0 1px 0 rgba(255,255,255,.9);

    text-align:center;

    color:#173d33;

    transform:
        translateY(18px)
        scale(.96);

    transition:
        transform .3s
        cubic-bezier(.2,.8,.2,1);
}


.booking-success-modal.is-visible
.booking-success-card{

    transform:
        translateY(0)
        scale(1);
}



/* Close button */

.booking-success-close{

    position:absolute;

    top:13px;
    right:15px;

    width:31px;
    height:31px;

    padding:0;

    display:grid;
    place-items:center;

    border:0;

    border-radius:50%;

    background:
        rgba(5,61,48,.07);

    color:#527067;

    font-size:21px;
    line-height:1;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}


[dir="rtl"]
.booking-success-close{

    right:auto;
    left:15px;
}


.booking-success-close:hover{

    background:
        rgba(5,61,48,.12);

    color:#0b372b;

    transform:
        rotate(4deg);
}



/* Website emblem */

.booking-success-emblem{

    width:58px;
    height:58px;

    margin:
        2px auto
        14px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:#0b372b;

    box-shadow:
        0 9px 22px
        rgba(5,58,45,.15);
}


.booking-success-emblem img{

    display:block;

    width:36px;
    height:36px;

    object-fit:contain;
}



/* Top confirmation label */

.booking-success-kicker{

    margin-bottom:6px;

    color:#c3983f;

    font-size:11px;

    font-weight:800;

    letter-spacing:1.15px;

    text-transform:uppercase;
}


.booking-success-card h2{

    margin:
        0 0
        12px;

    color:#0b372b;

    font-size:
        clamp(
            22px,
            5vw,
            27px
        );

    line-height:1.3;

    font-weight:800;
}


.booking-success-intro{

    max-width:350px;

    margin:
        0 auto
        20px;

    color:#587168;

    font-size:13px;

    line-height:1.75;
}



/* =========================================================
   BOOKING ID
   ========================================================= */

.booking-success-id{

    margin:
        0 auto
        20px;

    padding:
        14px 17px;

    background:#0b372b;

    border:
        1px solid
        rgba(216,181,94,.36);

    border-radius:13px;

    color:#ffffff;

    box-shadow:
        0 12px 26px
        rgba(5,55,43,.12);
}


.booking-success-id span{

    display:block;

    margin-bottom:5px;

    color:#d8b55e;

    font-size:10px;

    font-weight:700;

    letter-spacing:.7px;

    text-transform:uppercase;
}


.booking-success-id strong{

    display:block;

    color:#ffffff;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size:21px;

    line-height:1.2;

    letter-spacing:2px;
}



/* =========================================================
   EMAIL SENT
   ========================================================= */

.booking-success-email{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:13px;

    padding:14px 15px;

    background:#f3f7f4;

    border:
        1px solid
        rgba(15,82,64,.10);

    border-radius:12px;

    text-align:left;
}


[dir="rtl"]
.booking-success-email{

    text-align:right;
}


.booking-success-email-icon{

    flex:
        0 0
        34px;

    width:34px;
    height:34px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:#0b372b;

    color:#d8b55e;
}


.booking-success-email-icon svg{

    width:17px;
    height:17px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.6;

    stroke-linecap:round;
    stroke-linejoin:round;
}


.booking-success-email strong{

    display:block;

    margin-bottom:2px;

    color:#173d33;

    font-size:13px;
}


.booking-success-email p{

    margin:0;

    color:#657c74;

    font-size:11.5px;

    line-height:1.55;
}



/* =========================================================
   VERY IMPORTANT SPAM REMINDER
   ========================================================= */

.booking-success-spam{

    margin-bottom:20px;

    padding:14px 16px;

    background:
        linear-gradient(
            180deg,
            #fff8e8,
            #fffaf0
        );

    border:
        1px solid
        rgba(201,158,67,.42);

    border-radius:12px;

    color:#685634;

    font-size:12px;

    line-height:1.65;

    text-align:left;
}


[dir="rtl"]
.booking-success-spam{

    text-align:right;
}


.booking-success-spam-title{

    margin-bottom:4px;

    color:#9a7122;

    font-size:13px;

    font-weight:800;
}


.booking-success-spam strong{

    color:#654b19;
}



/* =========================================================
   DONE BUTTON
   ========================================================= */

.booking-success-done{

    width:100%;

    min-height:44px;

    padding:
        11px
        20px;

    border:
        1px solid
        #b98c34;

    border-radius:9px;

    background:
        linear-gradient(
            180deg,
            #d6ac54,
            #c79a41
        );

    color:#ffffff;

    font-size:13px;

    font-weight:800;

    cursor:pointer;

    box-shadow:
        0 8px 18px
        rgba(180,131,36,.16);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


.booking-success-done:hover{

    transform:
        translateY(-1px);

    box-shadow:
        0 11px 22px
        rgba(180,131,36,.21);
}



/* Little brand footer */

.booking-success-footer{

    margin-top:13px;

    color:#8a9893;

    font-size:10px;

    line-height:1.5;
}



/* =========================================================
   MOBILE MODAL
   ========================================================= */

@media (max-width:520px){

    .booking-success-modal{

        padding:13px;

        align-items:center;
    }


    .booking-success-card{

        width:100%;

        max-height:
            calc(100dvh - 26px);

        padding:
            29px
            20px
            21px;

        border-radius:20px;
    }


    .booking-success-emblem{

        width:52px;
        height:52px;

        margin-bottom:12px;
    }


    .booking-success-emblem img{

        width:32px;
        height:32px;
    }


    .booking-success-card h2{

        font-size:22px;
    }


    .booking-success-intro{

        font-size:12px;
    }


    .booking-success-id strong{

        font-size:18px;
    }

}



/* Respect reduced motion */

@media (prefers-reduced-motion:reduce){

    #submitBooking.is-loading::after{

        animation-duration:1.4s;
    }


    .booking-success-modal,
    .booking-success-card{

        transition:none !important;
    }

}

/* =========================================================
   BOOKING SUCCESS MODAL — COMPACT / FULLY VISIBLE
   ========================================================= */

.booking-success-modal{
    padding:14px !important;
    align-items:center !important;
    justify-content:center !important;
}

.booking-success-card{
    width:min(390px, calc(100vw - 28px)) !important;

    max-height:calc(100dvh - 28px) !important;
    overflow-y:auto !important;

    padding:24px 26px 18px !important;

    border-radius:20px !important;

    scrollbar-width:none !important;
}

.booking-success-card::-webkit-scrollbar{
    display:none !important;
}


/* smaller emblem */
.booking-success-emblem{
    width:46px !important;
    height:46px !important;

    margin:0 auto 10px !important;
}

.booking-success-emblem img{
    width:29px !important;
    height:29px !important;
}


/* tighter heading */
.booking-success-kicker{
    margin-bottom:4px !important;

    font-size:9px !important;
    letter-spacing:1.2px !important;
}

.booking-success-card h2{
    margin:0 0 8px !important;

    font-size:23px !important;
    line-height:1.25 !important;
}


/* intro */
.booking-success-intro{
    max-width:320px !important;

    margin:0 auto 14px !important;

    font-size:11.5px !important;
    line-height:1.6 !important;
}


/* booking ID */
.booking-success-id{
    margin:0 auto 13px !important;

    padding:10px 14px !important;

    border-radius:11px !important;
}

.booking-success-id span{
    margin-bottom:3px !important;
    font-size:8.5px !important;
}

.booking-success-id strong{
    font-size:18px !important;
    letter-spacing:1.6px !important;
}


/* email confirmation */
.booking-success-email{
    gap:10px !important;

    margin-bottom:10px !important;

    padding:11px 12px !important;

    border-radius:10px !important;
}

.booking-success-email-icon{
    flex:0 0 30px !important;

    width:30px !important;
    height:30px !important;
}

.booking-success-email-icon svg{
    width:15px !important;
    height:15px !important;
}

.booking-success-email strong{
    font-size:11.5px !important;
}

.booking-success-email p{
    font-size:10.5px !important;
    line-height:1.45 !important;
}


/* spam reminder — still prominent */
.booking-success-spam{
    margin-bottom:13px !important;

    padding:11px 13px !important;

    border-radius:10px !important;

    font-size:10.5px !important;
    line-height:1.5 !important;
}

.booking-success-spam-title{
    margin-bottom:3px !important;
    font-size:11.5px !important;
}


/* button */
.booking-success-done{
    min-height:38px !important;

    padding:8px 18px !important;

    font-size:11.5px !important;
}


/* footer */
.booking-success-footer{
    margin-top:8px !important;
    font-size:9px !important;
}


/* close */
.booking-success-close{
    top:10px !important;
    right:11px !important;

    width:27px !important;
    height:27px !important;

    font-size:18px !important;
}

[dir="rtl"] .booking-success-close{
    right:auto !important;
    left:11px !important;
}


/* Extra protection for short laptop screens */
@media (max-height:720px){

    .booking-success-card{
        padding-top:18px !important;
        padding-bottom:15px !important;
    }

    .booking-success-emblem{
        width:40px !important;
        height:40px !important;
        margin-bottom:7px !important;
    }

    .booking-success-emblem img{
        width:25px !important;
        height:25px !important;
    }

    .booking-success-card h2{
        font-size:20px !important;
    }

    .booking-success-intro{
        margin-bottom:10px !important;
    }

}

/* =========================================================
   BOOKING — DATE/TIME REQUIRED MODAL
   ========================================================= */

.booking-warning-card{
    width:min(370px,calc(100vw - 28px)) !important;

    padding:
        27px
        27px
        22px !important;
}


.booking-warning-emblem{
    background:#0b372b !important;

    width:48px !important;
    height:48px !important;

    margin-bottom:11px !important;
}


.booking-warning-emblem img{
    width:30px !important;
    height:30px !important;
}


.booking-warning-card h2{
    max-width:310px !important;

    margin:
        0 auto
        10px !important;

    font-size:22px !important;

    line-height:1.3 !important;
}


.booking-warning-card .booking-success-intro{
    max-width:310px !important;

    margin-bottom:18px !important;

    font-size:11.5px !important;

    line-height:1.65 !important;
}


.booking-warning-done{
    width:100% !important;

    min-height:40px !important;
}

/* =========================================================
   NEVER DISPLAY THE OLD INLINE BOOKING ERROR
   ========================================================= */

#formStatus{
    display:none !important;
}



/* =========================================================
   MULTIPLE BOOKING ISSUES POPUP
   ========================================================= */

.booking-issues-card{
    width:min(
        400px,
        calc(100vw - 28px)
    ) !important;
}


.booking-issues-list{

    display:flex;

    flex-direction:column;

    gap:8px;

    max-height:245px;

    overflow-y:auto;

    margin:
        0 0
        17px;

    padding:
        2px;

    scrollbar-width:thin;

    text-align:left;
}


[dir="rtl"]
.booking-issues-list{
    text-align:right;
}



.booking-issue-row{

    display:flex;

    align-items:flex-start;

    gap:10px;

    padding:
        10px
        11px;

    background:#faf7ef;

    border:
        1px solid
        rgba(201,158,67,.30);

    border-radius:10px;

    color:#526b63;
}


[dir="rtl"]
.booking-issue-row{
    flex-direction:row;
}



.booking-issue-icon{

    flex:
        0 0
        23px;

    width:23px;
    height:23px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#0b372b;

    color:#d8b55e;

    font-family:
        Georgia,
        serif;

    font-size:13px;

    font-weight:700;

    line-height:1;
}



.booking-issue-text{

    flex:1;

    padding-top:2px;

    font-size:11.5px;

    font-weight:600;

    line-height:1.55;
}



.booking-issues-done{
    margin-top:2px !important;
}



/* Short screens */

@media (max-height:700px){

    .booking-issues-list{
        max-height:185px;
    }

}

/* =========================================================
   BOOKING CONFIRMATION — DESKTOP VIEWPORT FIX
   ========================================================= */

@media (min-width:981px){

    .booking-success-modal{
        box-sizing:border-box !important;

        padding:
            48px
            22px !important;

        align-items:center !important;
        justify-content:center !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;
    }


    .booking-success-card{
        width:min(
            420px,
            calc(100vw - 44px)
        ) !important;

        max-height:
            calc(100vh - 96px) !important;

        max-height:
            calc(100dvh - 96px) !important;

        margin:auto !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;

        overscroll-behavior:contain !important;

        scrollbar-width:thin !important;

        box-sizing:border-box !important;
    }


    .booking-success-card::-webkit-scrollbar{
        display:block !important;
        width:6px !important;
    }


    .booking-success-card::-webkit-scrollbar-thumb{
        border-radius:99px !important;
    }

}

/* =========================================================
   BOOKING CONFIRMATION — MATCH MAIN WEBSITE TYPOGRAPHY
   ========================================================= */

/*
 * Exact same primary typeface used by the main website.
 * Applies identically to Arabic AND English.
 */

.booking-success-modal,
.booking-success-modal *{
    font-family:
        "Noto Sans Arabic",
        "IBM Plex Sans Arabic",
        Arial,
        sans-serif !important;
}


/*
 * Major popup headings use the same elegant heading
 * typography as the main website.
 */

.booking-success-card h2{
    font-family:
        "Noto Naskh Arabic",
        "Noto Sans Arabic",
        serif !important;

    font-weight:800 !important;
}


/*
 * Sham Cash title.
 */

.booking-success-card
.booking-success-kicker,

.booking-success-card
.booking-success-spam-title{
    font-family:
        "Noto Sans Arabic",
        "IBM Plex Sans Arabic",
        Arial,
        sans-serif !important;
}


/*
 * Buttons — stop the browser substituting its own
 * ugly system/button font.
 */

.booking-success-card button{
    font-family:
        "Noto Sans Arabic",
        "IBM Plex Sans Arabic",
        Arial,
        sans-serif !important;
}


/*
 * Payment code itself.
 * Keep it in the site's normal font as requested,
 * instead of browser monospace.
 */

.booking-success-card
[dir="ltr"]{
    font-family:
        "Noto Sans Arabic",
        "IBM Plex Sans Arabic",
        Arial,
        sans-serif !important;
}

/* =========================================================
   MAGICAL LANGUAGE TRANSLATION
   ========================================================= */


/*
 * Full-screen invisible stage for the travelling light.
 */

.language-magic-wave{

    position:fixed;

    inset:0;

    z-index:999999;

    pointer-events:none;

    overflow:hidden;

    opacity:1;

}


/*
 * Main golden ripple.
 *
 * Wide curved light front that travels downward.
 */

.language-magic-wave::before{

    content:"";

    position:absolute;

    left:-20vw;
    top:-34vh;

    width:140vw;
    height:34vh;

    border-radius:
        0
        0
        50%
        50%;

    background:

        radial-gradient(
            ellipse at center,

            rgba(255,255,255,.30)
            0%,

            rgba(235,214,161,.20)
            20%,

            rgba(216,181,94,.19)
            36%,

            rgba(201,158,67,.08)
            55%,

            rgba(201,158,67,0)
            74%
        );

    border-bottom:
        1px solid
        rgba(216,181,94,.42);

    box-shadow:

        0 16px 38px
        rgba(201,158,67,.10),

        0 3px 14px
        rgba(216,181,94,.10);

    animation:
        languageMagicWave
        1.24s
        cubic-bezier(
            .22,
            .72,
            .25,
            1
        )
        forwards;

}



/*
 * Tiny dust / glints travelling just behind the ripple.
 */

.language-magic-wave::after{

    content:"";

    position:absolute;

    left:0;
    top:-22vh;

    width:100%;
    height:24vh;

    opacity:0;

    background-image:

        radial-gradient(
            circle,
            rgba(216,181,94,.75)
            0 1px,
            transparent 1.8px
        ),

        radial-gradient(
            circle,
            rgba(255,255,255,.72)
            0 1px,
            transparent 1.7px
        );

    background-size:
        91px 73px,
        137px 109px;

    background-position:
        17px 12px,
        58px 31px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 24%,
            #000 65%,
            transparent
        );

    animation:
        languageMagicDust
        1.30s
        ease-out
        forwards;

}



/* =========================================================
   WORD BLOOM
   ========================================================= */

.language-magic-text{

    position:relative;

    z-index:2;

    transform-origin:
        center center;

    will-change:
        transform,
        filter,
        text-shadow;

    animation:

        languageMagicTextBloom

        590ms

        cubic-bezier(
            .19,
            .78,
            .25,
            1
        )

        var(
            --language-magic-delay,
            0ms
        )

        both;

}


/*
 * Inline links/spans otherwise cannot visibly scale.
 */

.language-magic-inline{

    display:inline-block !important;

}



/* =========================================================
   LANGUAGE BUTTON MAGIC
   ========================================================= */

.language-switch{

    position:relative;

    isolation:isolate;

}


.language-switch.is-translating{

    pointer-events:none;

    animation:

        languageButtonSpell
        1.35s
        cubic-bezier(
            .2,
            .8,
            .2,
            1
        )
        both;

}



/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes languageMagicWave{

    0%{

        transform:
            translateY(0);

        opacity:0;

    }


    8%{

        opacity:1;

    }


    82%{

        opacity:1;

    }


    100%{

        transform:
            translateY(145vh);

        opacity:0;

    }

}



@keyframes languageMagicDust{

    0%{

        transform:
            translateY(0);

        opacity:0;

    }


    18%{

        opacity:.46;

    }


    72%{

        opacity:.32;

    }


    100%{

        transform:
            translateY(145vh);

        opacity:0;

    }

}



@keyframes languageMagicTextBloom{

    0%{

        transform:
            scale(1);

        filter:
            brightness(1);

        text-shadow:
            0 0 0
            rgba(
                216,
                181,
                94,
                0
            );

    }


    28%{

        transform:
            scale(1.025);

        filter:
            brightness(1.04);

    }


    /*
     * Translation occurs around here.
     */

    48%{

        transform:
            scale(1.075);

        filter:
            brightness(1.12);

        text-shadow:

            0 0 11px
            rgba(
                216,
                181,
                94,
                .25
            ),

            0 0 22px
            rgba(
                201,
                158,
                67,
                .10
            );

    }


    67%{

        transform:
            scale(1.035);

        filter:
            brightness(1.06);

    }


    100%{

        transform:
            scale(1);

        filter:
            brightness(1);

        text-shadow:
            0 0 0
            rgba(
                216,
                181,
                94,
                0
            );

    }

}



@keyframes languageButtonSpell{

    0%{

        transform:
            scale(1);

        box-shadow:
            0 0 0
            rgba(
                216,
                181,
                94,
                0
            );

    }


    32%{

        transform:
            scale(1.055);

        box-shadow:

            0 0 0 4px
            rgba(
                216,
                181,
                94,
                .09
            ),

            0 0 22px
            rgba(
                216,
                181,
                94,
                .28
            );

    }


    60%{

        transform:
            scale(1.025);

        box-shadow:

            0 0 0 7px
            rgba(
                216,
                181,
                94,
                0
            ),

            0 0 13px
            rgba(
                216,
                181,
                94,
                .16
            );

    }


    100%{

        transform:
            scale(1);

        box-shadow:
            0 0 0
            rgba(
                216,
                181,
                94,
                0
            );

    }

}



/*
 * Accessibility:
 * no magical motion if the visitor explicitly
 * requests reduced motion.
 */

@media (prefers-reduced-motion:reduce){

    .language-magic-wave{
        display:none !important;
    }

    .language-magic-text,
    .language-switch.is-translating{
        animation:none !important;
    }

}

.about-copy{
    position:relative !important;
    top:-8px !important;
}