/* ============================================================
       ITS Education Asia — Design Standards v1.0 tokens
       ============================================================ */
    :root {
      --its-navy:#003A63;      /* section headings | hero gradient start | emphasis text | CTA background */
      --its-blue:#0067AC;      /* body links | fact labels | sub-headings | border emphasis */
      --its-sky:#00A4E4;       /* quick-nav buttons | queries buttons | hero gradient end */
      --its-orange:#CC4E00;    /* primary CTA buttons | status labels | icon emphasis */
      --its-orange-dark:#993B00;
      --its-sky-dark:#0086bc;
      --its-blue-dark:#004f83;
      --its-text:#333333;
      --its-muted:#555555;
      --its-muted-2:#666666;
      --its-border:#dde4ed;
      --its-bg-light:#f7f9fc;
      --its-white:#ffffff;
      --its-form-blue:#27A5D4;  /* client-specified enquiry-band background (matches the existing site form band) */
    }
    * { box-sizing:border-box; }
    body { margin:0; background:var(--its-white); color:var(--its-text); font-family:'Poppins', Arial, sans-serif; font-size:1rem; line-height:1.7; }
    a { color:var(--its-blue); text-decoration:none; transition:color .2s ease; }
    a:hover { color:var(--its-blue-dark); }
    img { max-width:100%; }
    .wrap { max-width:1080px; margin:0 auto; padding:0 20px; }

    /* ---------- Page top ----------
       No site header/footer in this file: the site's global header and footer
       wrap this page, so branding and navigation are not duplicated here. */

    /* ---------- Hero (mandatory 3-stop gradient · white text only) ---------- */
    .hero { background:linear-gradient(135deg, #003A63 0%, #0067AC 65%, #00A4E4 100%); color:#fff; }
    .hero-inner { padding:40px 0; }
    .hero h1 { margin:0 0 16px; font-size:2.2rem; font-weight:900; line-height:1.1; text-transform:uppercase; color:#fff; max-width:620px; }
    .hero-sub { margin:0 0 22px; font-size:1.05rem; font-weight:400; line-height:1.75; color:rgba(255,255,255,.87); max-width:680px; }
    .hero-sub + .hero-sub { margin-top:-12px; }
    /* ---------- Buttons ----------
       One button family, three levels. Use the level, not a one-off style.
         .btn-solid   filled Blue   — in-page primary action (e.g. request a copy)
         .btn-hero    filled Sky    — hero-level action
         .btn-submit  white outline — final form / CTA band on a coloured band
       Every filled button darkens on hover; the outline button fills on hover. */
    .btn-solid { display:inline-flex; align-items:center; gap:9px; background:var(--its-blue); color:var(--its-white); font-size:.95rem; font-weight:600; padding:14px 28px; border-radius:6px; transition:background .2s ease; }
    .btn-solid:hover { background:var(--its-blue-dark); color:var(--its-white); }
    .btn-hero { display:inline-flex; align-items:center; gap:9px; background:var(--its-sky); color:#fff; font-size:.95rem; font-weight:600; padding:14px 28px; border-radius:6px; transition:background .2s ease; }
    .btn-hero:hover { background:var(--its-sky-dark); color:#fff; }

    /* ---------- Why partner with us (moved out of the hero) ---------- */
    .why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
    .why-card { background:var(--its-white); border:1px solid var(--its-border); border-radius:10px; padding:26px 22px; }
    .why-card i { font-size:20px; color:var(--its-orange); }
    .why-card h3 { margin:14px 0 7px; font-size:1.15rem; font-weight:700; line-height:1.4; color:var(--its-blue); }
    .why-card p { margin:0; font-size:.95rem; line-height:1.7; color:var(--its-text); }

    /* ---------- Sub-heading H3 (design guide spec) ---------- */
    .sub-heading { margin:28px 0 14px; font-size:1.15rem; font-weight:700; line-height:1.4; color:var(--its-blue); }

    /* ---------- Sections ---------- */
    .section { padding:52px 0; }
    .section.is-light { background:var(--its-bg-light); }
    /* Two consecutive white sections must not stack their padding (52 + 52px) -
       the doubled gap reads as a void. Collapse them to one section rhythm.
       A light section keeps its own top padding: the background change
       already separates it. */
    .section:not(.is-light) + .section:not(.is-light) { padding-top:0; }

    /* Apply to the FIRST of two consecutive white sections when the two blocks
       belong together: it trims that section's bottom padding as well, so the
       pair reads as one continuous story instead of two islands. */
    .section--tight-bottom { padding-bottom:32px; }

    .sec-heading { margin:0 0 14px; font-size:2.5rem; font-weight:700; line-height:1.3; color:var(--its-navy); }
    .sec-lead { margin:0; font-size:1.05rem; font-weight:400; line-height:1.8; color:var(--its-muted); max-width:720px; }
    .sec-intro { text-align:center; margin:0 auto 34px; }
    .sec-intro .sec-lead { margin-left:auto; margin-right:auto; }

    /* ---------- Partner card grid ---------- */
    .partner-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
    .partner { display:block; background:var(--its-white); border:1px solid var(--its-border); border-radius:10px; overflow:hidden; transition:border-color .2s ease; }
    .partner:hover { border-color:var(--its-blue); }
    /* ---------- Static partner card (no subpage, no outbound link) ---------- */
    .partner--static { cursor:default; }
    .partner--static:hover { border-color:var(--its-border); }
    /* no subpage -> the template's call-to-action line stays hidden */
    .partner--static .partner-more { display:none; }

    .partner-logo { display:flex; align-items:center; justify-content:center; height:92px; margin:16px 16px 0; padding:8px; text-align:center; }
    /* dashed box = placeholder only (an empty slot, "put the logo here") */
    .partner-logo--empty { border:1px dashed var(--its-border); border-radius:6px; background:var(--its-bg-light); color:var(--its-muted-2); font-size:.75rem; font-weight:600; letter-spacing:.04em; }
    .partner-logo img { max-height:56px; max-width:100%; width:auto; object-fit:contain; }
    .partner-body { display:block; padding:15px 16px 18px; }
    .partner h4 { margin:0 0 6px; font-size:1.05rem; font-weight:700; line-height:1.35; color:var(--its-navy); }
    .partner p { margin:0; font-size:.9rem; line-height:1.6; color:var(--its-muted); }
    .partner-more { display:inline-flex; align-items:center; gap:7px; margin-top:13px; font-size:.85rem; font-weight:600; color:var(--its-blue); }
    .partner:hover .partner-more { color:var(--its-blue-dark); }
    .partner-more i { font-size:.7rem; }

    /* ---------- CTA / enquiry band ---------- */
    .cta-band { padding:52px 0; background:var(--its-form-blue); }
    .cta-box { max-width:820px; margin:0 auto; text-align:center; }
    .cta-heading { margin:0 0 12px; font-size:1.9rem; font-weight:800; line-height:1.2; color:#fff; }
    .cta-sub { margin:0 0 26px; font-size:1.05rem; line-height:1.75; color:rgba(255,255,255,.92); }
    form { text-align:left; }
    .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
    .field label { display:block; margin-bottom:6px; font-size:.85rem; font-weight:600; color:#fff; }
    .field input, .field textarea { width:100%; padding:13px 14px; border:1px solid var(--its-border); border-radius:6px; background:var(--its-white); color:var(--its-text); font:400 .95rem 'Poppins', Arial, sans-serif; }
    .field textarea { min-height:104px; resize:vertical; }
    .field input::placeholder, .field textarea::placeholder { color:var(--its-muted-2); }
    .field input:focus, .field textarea:focus { outline:none; border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.35); }
    .form-actions { text-align:center; margin-top:22px; }
    .btn-submit { cursor:pointer; border:2px solid #fff; border-radius:6px; background:transparent; color:#fff; font:600 .95rem 'Poppins', Arial, sans-serif; letter-spacing:.02em; padding:13px 40px; transition:background .2s ease,border-color .2s ease,color .2s ease; }
    .btn-submit:hover, .btn-submit:focus-visible { background:var(--its-blue); border-color:var(--its-blue); color:#fff; }
    .form-note { margin:12px 0 0; font-size:.9rem; font-weight:600; color:#fff; text-align:center; }

    /* ---------- Responsive ---------- */
    @media (max-width:960px) {
      .partner-grid, .why-grid { grid-template-columns:repeat(2,1fr); }
    }
    @media (max-width:768px) {
      .hero-inner { padding:28px 0; }
      .hero h1 { font-size:22px; margin: 0 auto 16px auto; text-align: center;}
      .sec-heading { font-size:1.75rem; }
      .section, .cta-band { padding:40px 0; }
      .hero-split .p-logo-plate { margin: 0 auto; }
    }
    @media (max-width:600px) {
      .form-row, .partner-grid, .why-grid { grid-template-columns:1fr; }
    }
    @media (prefers-reduced-motion:reduce) {
      *, *::before, *::after { transition-duration:.01ms!important; animation-duration:.01ms!important; }
    }
/* ---------- Breadcrumb ---------- */
    .crumbs { padding:18px 0 0; font-size:.9rem; font-weight:400; line-height:1.6; color:var(--its-muted-2); }
    .crumbs a { color:var(--its-blue); }

    /* ---------- Hero: text left, logo plate right ---------- */
    .hero-split .hero-inner { padding:38px 20px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:52px; align-items:center; }
    .p-logo-plate { display:inline-flex; align-items:center; justify-content:center; background:var(--its-white); border-radius:6px; padding:18px 26px; width:290px; }
    .p-logo-plate img { max-height:52px; max-width:100%; width:auto; }

    /* ---------- About: two columns (story | facts) ---------- */
    .about-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(270px,.6fr); gap:52px; align-items:start; }
    .about-main p { margin:0 0 16px; font-size:1rem; font-weight:400; line-height:1.7; color:var(--its-text); }
    .about-main p:last-child { margin-bottom:0; }
    .facts { border-top:2px solid var(--its-navy); padding-top:22px; }
    .facts-label { margin:0 0 16px; font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--its-blue); }
    .fact { margin:0; padding:14px 0; border-bottom:1px solid var(--its-border); }
    .fact dt { margin:0 0 5px; font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--its-muted-2); }
    .fact dd { margin:0; font-size:1rem; font-weight:600; line-height:1.55; color:var(--its-navy); }
    .fact dd em { font-style:italic; font-weight:500; }

    /* ---------- Section intro: left aligned ---------- */
    .sec-intro--left { text-align:left; margin:0 0 38px; max-width:720px; }
    .sec-intro--left .sec-lead { margin:0; }

    /* ---------- Three-column points ---------- */

    /* ---------- The book ---------- */
    .book-grid { display:grid; grid-template-columns:300px minmax(0,1fr); gap:52px; align-items:center; }
    .book-cover { text-align:center; }
    .book-cover img { width:100%; max-width:300px; height:auto; border-radius:6px; }
    .book-copy > p { margin:0 0 20px; font-size:1rem; font-weight:400; line-height:1.7; color:var(--its-text); }
    .book-copy .book-quote { margin:0 0 22px; padding-left:16px; border-left:3px solid var(--its-sky); font-size:1rem; font-weight:400; font-style:italic; line-height:1.7; color:var(--its-muted); }
    .book-list { list-style:none; margin:0 0 24px; padding:0; display:grid; gap:11px; }
    .book-list li { display:flex; gap:11px; font-size:.95rem; font-weight:400; line-height:1.7; color:var(--its-text); }
    .book-list i { color:var(--its-blue); font-size:.8rem; margin-top:6px; }

    /* ---------- Responsive ---------- */
    @media (max-width:960px) {
      .hero-split .hero-inner { grid-template-columns:1fr; gap:26px; padding:28px 20px; }
      .hero-split .p-logo-plate { order:-1; width:250px; padding:15px 22px;}
      .about-grid { grid-template-columns:1fr; gap:34px; }
      .book-grid { grid-template-columns:1fr; gap:30px; }
      .book-cover img { max-width:260px; }
    }