/* ============================================================
   SHARED — brand tokens + base resets + components used by every
   custom-coded Academia page (London, Home, ...). Page-specific
   sections stay in that page's own CSS file (london.css, home.css).
   ============================================================ */
.london-page, .home-page{
  --ground:#F5F8FB;
  --ground-raised:#FFFFFF;
  --ink:#132A3A;
  --ink-soft:#4B6371;
  --line:#DCE6ED;
  --teal:#0089D0;
  --teal-deep:#056BA6;
  --orange:#F68220;
  --orange-deep:#D9691A;
  --sky:#00AEF0;
  --green:#A6CE39;
  --green-deep:#8CB32E;
  --stamp:#C0392B;
  --card-bg:#FFFFFF;
  --shadow: 0 1px 2px rgba(19,42,58,.06), 0 8px 24px -12px rgba(19,42,58,.18);

  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-body, 'Work Sans', ui-sans-serif, system-ui, sans-serif);
  font-size:18.4px;
  line-height:1.55;

  /* Astra wraps page content in its own fixed-width container (~1240px,
     centered) - without this, any section here that DOESN'T have its own
     explicit full-bleed override (the 100vw/negative-margin trick used by
     the hero/photo-band/team-carousel) shows Astra's container edge as a
     visible seam against the theme's own outer page background instead of
     running edge to edge. Making the page root itself full-bleed fixes
     every plain section at once; each section's own .wrap still centers
     its content at max-width:1120px exactly as before. */
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}
@media (prefers-color-scheme: dark){
  .london-page:not([data-theme="light"]), .home-page:not([data-theme="light"]){
    --ground:#0D1B24; --ground-raised:#14262F; --ink:#EAF3F8; --ink-soft:#9FB7C4;
    --line:#22394A; --teal:#3AAEEA; --teal-deep:#0089D0; --orange:#FFA05C;
    --orange-deep:#F68220; --sky:#5FC7F5; --green:#C3E06A; --green-deep:#A6CE39;
    --stamp:#E2695C; --card-bg:#14262F;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 28px -14px rgba(0,0,0,.6);
  }
}

.london-page *, .home-page *{box-sizing:border-box;}
.london-page h1, .london-page h2, .london-page h3,
.home-page h1, .home-page h2, .home-page h3{font-family:var(--font-display, 'Fraunces', ui-serif, Georgia, serif); text-wrap:balance; margin:0; color:var(--ink);}
.london-page a, .home-page a{color:inherit;}
.london-page img, .home-page img{max-width:100%; display:block;}
.london-page .wrap, .home-page .wrap{max-width:1250px; margin-inline:auto; padding-inline:20px;}
.london-page .mono, .home-page .mono{font-family:'JetBrains Mono', ui-monospace, monospace;}
.london-page .eyebrow, .home-page .eyebrow{font-family:'JetBrains Mono', ui-monospace, monospace; font-size:0.828rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-deep); font-weight:600;}
.london-page section, .home-page section{padding-block:40px;}
.london-page .section-head, .home-page .section-head{max-width:660px; margin-bottom:36px;}
.london-page .section-head h2, .home-page .section-head h2{font-size:clamp(1.72rem,3.4vw,2.42rem); font-weight:600;}
.london-page .section-head p:not(.eyebrow), .home-page .section-head p:not(.eyebrow){color:var(--ink-soft); margin-top:10px; font-size:1.17rem;}
.london-page .section-head.center, .home-page .section-head.center{margin-inline:auto; text-align:center;}

/* buttons - shared hover/press animation across every page's CTAs */
.london-page .btn, .home-page .btn{display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:var(--radius-btn, 999px); font-weight:600; font-size:1.081rem; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:background-color .3s ease, border-color .3s ease, color .3s ease, transform .2s ease, box-shadow .2s ease;}
.london-page .btn:hover, .home-page .btn:hover{transform:translateY(-3px) scale(1.03); box-shadow:0 10px 22px -8px rgba(19,42,58,.4);}
.london-page .btn:active, .home-page .btn:active{transform:translateY(-1px) scale(1.01);}
.london-page .btn-primary, .home-page .btn-primary{background:var(--orange); color:var(--btn-ink, #fff);}
.london-page .btn-primary:hover, .home-page .btn-primary:hover{background:var(--orange-deep); color:var(--btn-ink, #fff);}
.london-page .btn-ghost, .home-page .btn-ghost{background:transparent; border-color:var(--line); color:var(--ink);}
.london-page .btn-ghost:hover, .home-page .btn-ghost:hover{border-color:var(--teal); background:var(--ground-raised);}
.london-page .hero-photo .btn-ghost{border-color:rgba(255,255,255,.55); color:#fff;}
.london-page .hero-photo .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.16); box-shadow:0 10px 22px -8px rgba(0,0,0,.45);}
@media (prefers-reduced-motion: reduce){
  .london-page .btn, .home-page .btn{transition:none;}
  .london-page .btn:hover, .home-page .btn:hover{transform:none; box-shadow:none;}
}

/* language tests promo - reusable component (academia_language_tests_promo()
   in shared-components.php), a pill per language test + one CTA to the
   /test-znanja/ hub. Plain section, no accent background, so it slots into
   any page's flow without clashing with that page's own orange sections. */
.london-page .lang-tests, .home-page .lang-tests{padding-block:64px;}
/* Orange inset card - same pattern as the other accent sections: card sits
   40px from the real viewport edge on desktop, normal contained .wrap on
   mobile. Content is already centered/capped (pills 820px), so no -inner
   wrapper is needed. */
.london-page .lang-tests .wrap, .home-page .lang-tests .wrap{background:#FBEADA; border-radius:28px; padding:56px 40px;}
/* Studio "Pozadina sekcije" (tones) puts the tone class on the outer <section>, but the
   visible card here is the inner .wrap - repeat the two non-default tone colors on it.
   "Topla" needs no rule (it's this card's own default color already); --card-bg/--ink/--teal
   etc. are redefined on the outer <section> by the "Tamna" tone and inherit into .lang-pill
   without any extra CSS. */
.london-page .lang-tests.studio-tone-sky .wrap, .home-page .lang-tests.studio-tone-sky .wrap{background:#E3F2FB;}
.london-page .lang-tests.studio-tone-dark .wrap, .home-page .lang-tests.studio-tone-dark .wrap{background:#132A3A;}
@media (min-width:701px){
  .london-page .lang-tests .wrap, .home-page .lang-tests .wrap{
    max-width:none; width:calc(100vw - 80px);
    margin-left:calc(50% - 50vw + 40px); margin-right:calc(50% - 50vw + 40px);
    box-sizing:border-box;
  }
}
@media (max-width:700px){
  .london-page .lang-tests .wrap, .home-page .lang-tests .wrap{padding:40px 22px; border-radius:20px;}
}
/* Studio "Širina pozadine" (edge): "Puna širina" drops the gap/rounded corners above, keeping
   the same inner padding so the content itself stays comfortably off the viewport edge. */
.london-page .lang-tests.studio-edge-full .wrap, .home-page .lang-tests.studio-edge-full .wrap{border-radius:0;}
@media (min-width:701px){
  .london-page .lang-tests.studio-edge-full .wrap, .home-page .lang-tests.studio-edge-full .wrap{
    width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  }
}
.london-page .lang-tests-pills, .home-page .lang-tests-pills{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  max-width:820px; margin:32px auto 0;
}
.london-page .lang-pill, .home-page .lang-pill{
  display:inline-flex; align-items:center; padding:10px 22px; border-radius:999px;
  border:1px solid var(--line); background:var(--card-bg); color:var(--ink);
  font-weight:600; font-size:1.02rem; text-decoration:none;
  transition:border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease;
}
.london-page .lang-pill:hover, .home-page .lang-pill:hover{
  border-color:var(--teal); color:var(--teal-deep); background:var(--ground-raised); transform:translateY(-2px);
}
.london-page .lang-tests-cta, .home-page .lang-tests-cta{text-align:center; margin-top:32px;}

/* payment button + popup - reusable component (academia_payment_button()
   in includes/shared-components.php). Unscoped (no .london-page/.home-page
   prefix) since it's plain unique class names, no collision risk, and this
   way it works on every custom page without needing per-page CSS. */
.pay-modal{position:fixed; inset:0; z-index:1000; display:none;}
.pay-modal.is-open{display:block;}
.pay-modal-backdrop{position:absolute; inset:0; background:rgba(7,15,23,.55); backdrop-filter:blur(2px);}
.pay-modal-box{
  position:relative; z-index:1; max-width:440px; margin:8vh auto 0; background:var(--card-bg);
  border-radius:18px; padding:30px 28px; box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
  max-height:84vh; overflow-y:auto;
}
.pay-modal-close{position:absolute; top:16px; right:16px; width:34px; height:34px; min-width:34px; max-width:34px; aspect-ratio:1; border-radius:50%; border:1px solid var(--line); background:var(--ground); color:var(--ink-soft); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;}
.pay-modal-close:hover{border-color:var(--teal); color:var(--teal);}
.pay-modal-close svg{width:16px; height:16px; flex:none;}
.pay-modal-box h3{font-size:1.49rem; padding-right:30px;}
.pay-modal-lede{color:var(--ink-soft); font-size:1.058rem; margin-top:8px;}
.pay-tabs{display:flex; gap:6px; background:var(--ground); border-radius:999px; padding:4px; margin-top:20px;}
.pay-tab{flex:1; border:none; background:transparent; padding:9px 14px; border-radius:999px; font-weight:600; font-size:0.989rem; color:var(--ink-soft); cursor:pointer; transition:background-color .2s ease, color .2s ease;}
.pay-tab.is-active{background:var(--teal); color:#fff;}
.pay-tab-panel{display:none; margin-top:20px;}
.pay-tab-panel.is-active{display:block;}
.pay-fields{margin:0; padding:0; list-style:none; display:grid; gap:12px;}
.pay-fields li{display:flex; flex-direction:column; gap:2px; padding-bottom:10px; border-bottom:1px dashed var(--line);}
.pay-fields li:last-child{border-bottom:none; padding-bottom:0;}
.pay-fields span{font-size:0.828rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);}
.pay-fields strong{font-size:1.127rem; color:var(--ink); font-family:'JetBrains Mono',monospace; font-weight:600;}
.pay-qr-placeholder{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
  border:1px dashed var(--line); border-radius:14px; padding:40px 20px; color:var(--ink-soft);
}
.pay-qr-placeholder p{margin:0; font-size:0.989rem;}

/* blog cards - reusable component (academia_blog_cards() in the plugin),
   used by London (curated ID list) and Home (latest posts query) alike.
   Native scrollbar hidden - arrows (JS in academia-shared.js) drive the
   scroll instead, touch/trackpad swipe still works underneath. */
.london-page .blogs-carousel, .home-page .blogs-carousel{position:relative;}
.london-page .blogs-wrap, .home-page .blogs-wrap{
  overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
}
.london-page .blogs-wrap::-webkit-scrollbar, .home-page .blogs-wrap::-webkit-scrollbar{display:none;}
.london-page .blogs, .home-page .blogs{display:flex; gap:18px;}
.london-page .blog-arrow, .home-page .blog-arrow{
  position:absolute; top:calc(50% - 4px); transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--card-bg);
  color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:var(--shadow); transition:background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
  z-index:2; padding:0;
}
.london-page .blog-arrow:hover, .home-page .blog-arrow:hover{border-color:var(--teal); color:var(--teal);}
.london-page .blog-arrow-prev, .home-page .blog-arrow-prev{left:-14px;}
.london-page .blog-arrow-next, .home-page .blog-arrow-next{right:-14px;}
.london-page .blog-arrow[disabled], .home-page .blog-arrow[disabled]{opacity:0; pointer-events:none;}
@media (max-width:760px){
  .london-page .blog-arrow, .home-page .blog-arrow{display:none;}
}
.london-page .blog-card, .home-page .blog-card{background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-card, 14px); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; flex:0 0 calc((100% - 36px) / 3); scroll-snap-align:start;}
@media (max-width:760px){.london-page .blog-card, .home-page .blog-card{flex-basis:100%;}}
.london-page .blog-card .thumb, .home-page .blog-card .thumb{width:100%; height:200px; object-fit:contain; display:block; background:linear-gradient(135deg, var(--teal), var(--sky));}
.london-page .blog-card img.thumb, .home-page .blog-card img.thumb{background:var(--ground);}
.london-page .blog-card:nth-child(3n+2) .thumb, .home-page .blog-card:nth-child(3n+2) .thumb{background:linear-gradient(135deg, var(--orange), var(--orange-deep));}
.london-page .blog-card:nth-child(3n+3) .thumb, .home-page .blog-card:nth-child(3n+3) .thumb{background:linear-gradient(135deg, var(--green), var(--green-deep));}
.london-page .blog-card .blog-body, .home-page .blog-card .blog-body{padding:16px 20px 20px; display:flex; flex-direction:column; gap:10px; flex:1;}
.london-page .blog-card .tag, .home-page .blog-card .tag{font-family:'JetBrains Mono',monospace; font-size:0.943rem; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-deep);}
.london-page .blog-card h3, .home-page .blog-card h3{font-size:1.52rem; font-weight:600; line-height:1.32;}
.london-page .blog-card p, .home-page .blog-card p{margin:0; color:var(--ink-soft); font-size:1.24rem; line-height:1.55;}
.london-page .blog-card a.read, .home-page .blog-card a.read{margin-top:auto; color:var(--teal-deep); font-weight:600; font-size:1.26rem; text-decoration:none;}
.london-page .blog-card a.read:hover, .home-page .blog-card a.read:hover{color:var(--ink); text-decoration:underline;}

/* BLOG SECTION - rounded, inset card (not edge-to-edge): the dark navy
   background and radius sit on .wrap itself, so the section keeps the
   page's normal side margins instead of bleeding full-width. On desktop
   the BACKGROUND breaks out of the usual 1120px content column and sits
   just 40px from the real viewport edge (a lot of dead white space
   otherwise at wide viewports) - but the actual content (heading, cards)
   stays pinned to its own 1080px column via .blog-content-inner (wider
   than it used to be, on request, so the cards themselves grew too) -
   independent of the page's main 1250px .wrap column.
   Mobile keeps the normal contained .wrap, its viewport is already narrow
   enough that 40px would feel cramped.
   No JS/scrollbar compensation here on purpose (tried it, reverted it) -
   a scrollbar-width CSS var can only be set correctly by a script, and
   that script's very first write to it happens AFTER the browser's first
   paint (whether footer-enqueued or an early <head> inline one - this
   embedded environment's classic reserved-space scrollbar isn't present
   yet that early, since it only appears once body content makes the page
   tall enough to actually scroll), so the section's margin visibly jumped
   right after load. A few px of static left/right asymmetry from the
   scrollbar (uncompensated) is far less noticeable than that jump. */
.london-page .blog-section, .home-page .blog-section{padding-block:56px;}
.london-page .blog-section .wrap, .home-page .blog-section .wrap{
  background:var(--ink); border-radius:28px; padding:56px 40px;
}
.london-page .blog-section .blog-content-inner, .home-page .blog-section .blog-content-inner{max-width:1080px; margin-inline:auto;}
/* Color only, on purpose - no font-size here. Sizing comes straight from
   the base .eyebrow/.section-head rules above (same ones every other
   section on every page uses), so a sitewide type-scale change (like the
   +15% pass already applied once) reaches this section automatically
   instead of needing its own separate edit every time. */
.london-page .blog-section .eyebrow, .home-page .blog-section .eyebrow{color:#BFE7FF;}
.london-page .blog-section .section-head, .home-page .blog-section .section-head{text-align:center; max-width:760px; margin-inline:auto;}
.london-page .blog-section .section-head h2, .home-page .blog-section .section-head h2{color:#fff;}
.london-page .blog-section .section-head p:not(.eyebrow), .home-page .blog-section .section-head p:not(.eyebrow){color:rgba(255,255,255,.75);}
@media (min-width:701px){
  .london-page .blog-section .wrap, .home-page .blog-section .wrap{
    max-width:none;
    width:calc(100vw - 80px);
    margin-left:calc(50% - 50vw + 40px); margin-right:calc(50% - 50vw + 40px);
    box-sizing:border-box;
  }
}
@media (max-width:700px){
  .london-page .blog-section .wrap, .home-page .blog-section .wrap{padding:40px 22px; border-radius:20px;}
}

/* SERVICES grid - shared component (academia_service_cards() in the
   plugin). Default is 2x2 (Home, all 4 services); .cols-3 gives a single
   row of 3 (London's crosssell, which excludes the London card itself).
   Photo is the point of the card - aspect-ratio (not a fixed px height)
   so it scales with the card's own width at every breakpoint. Slow
   infinite Ken-Burns zoom/pan gives it life without needing multiple
   photos per service. */
.london-page .services-grid, .home-page .services-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
.london-page .services-grid.cols-3, .home-page .services-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.london-page .services-grid.cols-4, .home-page .services-grid.cols-4{grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:1000px){
  .london-page .services-grid.cols-4, .home-page .services-grid.cols-4{grid-template-columns:repeat(2,1fr); gap:28px;}
}
@media (max-width:760px){
  .london-page .services-grid, .home-page .services-grid,
  .london-page .services-grid.cols-3, .home-page .services-grid.cols-3,
  .london-page .services-grid.cols-4, .home-page .services-grid.cols-4{grid-template-columns:1fr;}
}
.london-page .service-card, .home-page .service-card{
  background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-card, 18px); overflow:hidden;
  box-shadow:var(--shadow); display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.london-page .service-card:hover, .home-page .service-card:hover{transform:translateY(-4px); box-shadow:0 20px 40px -18px rgba(19,42,58,.3);}
.london-page .service-media, .home-page .service-media{position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--ground);}
.london-page .service-media img, .home-page .service-media img{
  width:100%; height:100%; object-fit:cover; transform-origin:center;
  animation:serviceKenBurns 16s ease-in-out infinite alternate;
}
@keyframes serviceKenBurns{
  0%{ transform:scale(1) translate(0,0); }
  100%{ transform:scale(1.14) translate(-2.5%,-2%); }
}
@media (prefers-reduced-motion: reduce){
  .london-page .service-media img, .home-page .service-media img{animation:none;}
}
.london-page .service-body, .home-page .service-body{padding:22px 24px 26px; display:flex; flex-direction:column; gap:12px; flex:1;}
.london-page .service-card h3, .home-page .service-card h3{font-size:1.38rem;}
.london-page .service-card p, .home-page .service-card p{margin:0; color:var(--ink-soft); font-size:1.081rem;}
.london-page .service-facts, .home-page .service-facts{margin:0; padding:0; list-style:none; display:grid; gap:8px;}
.london-page .service-facts li, .home-page .service-facts li{position:relative; padding-left:20px; color:var(--ink-soft); font-size:0.989rem; line-height:1.4;}
.london-page .service-facts li::before, .home-page .service-facts li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--teal); font-weight:700;}
.london-page .service-card a.read, .home-page .service-card a.read{color:var(--teal-deep); font-weight:600; font-size:1.03rem; margin-top:auto; padding-top:4px;}
.london-page .service-card a.read:hover, .home-page .service-card a.read:hover{text-decoration:underline;}
@media (max-width:760px){
  .london-page .services-grid, .home-page .services-grid{gap:20px;}
  .london-page .service-media, .home-page .service-media{aspect-ratio:16/12;}
  .london-page .service-body, .home-page .service-body{padding:18px 20px 22px;}
}

/* PHOTO GALLERY + LIGHTBOX - shared component (bare selectors, no page
   class prefix, works on any custom page that loads this file). Two
   .photo-gallery layouts share the same .gallery-item + #lightbox markup:
   .gallery-mosaic is a fixed 1-big+2-small layout for exactly 3 photos;
   .gallery-grid is a plain wrapping grid for a bigger, growing set - just
   add more .gallery-item children, nothing to redesign. JS in
   academia-shared.js. */
.photo-gallery{margin-top:8px;}
.gallery-item{
  position:relative; border:none; padding:0; border-radius:16px; cursor:pointer;
  background-size:cover; background-position:center; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.gallery-item:hover{transform:scale(1.015); box-shadow:0 14px 30px -12px rgba(19,42,58,.4);}
.gallery-item::after{
  content:""; position:absolute; inset:0; background:rgba(19,42,58,0); transition:background-color .2s ease;
}
.gallery-item:hover::after{background:rgba(19,42,58,.08);}

.gallery-mosaic{display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:14px; height:440px;}
.gallery-mosaic .gallery-item:nth-child(1){grid-row:1 / 3;}
.gallery-mosaic .gallery-item:nth-child(2){grid-column:2; grid-row:1;}
.gallery-mosaic .gallery-item:nth-child(3){grid-column:2; grid-row:2;}
@media (max-width:760px){
  .gallery-mosaic{grid-template-columns:1fr; grid-template-rows:none; height:auto;}
  .gallery-mosaic .gallery-item{height:240px; grid-column:1 !important; grid-row:auto !important;}
}

.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:170px; gap:12px;}
@media (max-width:920px){.gallery-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:600px){.gallery-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:140px;}}

.lightbox{position:fixed; inset:0; z-index:1000; display:none;}
.lightbox.is-open{display:flex; align-items:center; justify-content:center;}
.lightbox-backdrop{position:absolute; inset:0; background:rgba(5,10,16,.92);}
.lightbox-img{position:relative; z-index:1; max-width:min(1100px,88vw); max-height:86vh; border-radius:10px; box-shadow:0 30px 60px -20px rgba(0,0,0,.6);}
/* Close/nav buttons need to stay legible over ANY photo content (not just
   the dark backdrop) - a near-transparent white tint washes out against
   bright images, so these use a solid dark chip + shadow regardless of
   what's behind them. */
.lightbox-close{position:absolute; top:22px; right:26px; z-index:2; width:42px; height:42px; min-width:42px; max-width:42px; aspect-ratio:1; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(7,15,23,.65); backdrop-filter:blur(4px); box-shadow:0 4px 14px rgba(0,0,0,.35); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;}
.lightbox-close svg{width:20px; height:20px; flex:none;}
.lightbox-close:hover{background:rgba(7,15,23,.85); border-color:#fff;}
.lightbox-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:52px; height:52px; min-width:52px; max-width:52px; aspect-ratio:1; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(7,15,23,.65); backdrop-filter:blur(4px); box-shadow:0 4px 14px rgba(0,0,0,.35); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;}
.lightbox-nav svg{width:24px; height:24px; flex:none;}
.lightbox-nav:hover{background:rgba(7,15,23,.85); border-color:#fff;}
.lightbox-prev{left:20px;}
.lightbox-next{right:20px;}
@media (max-width:600px){
  .lightbox-nav{width:42px; height:42px;}
  .lightbox-prev{left:8px;}
  .lightbox-next{right:8px;}
}

/* ============================================================
   KEY FACTS strip — ecenglish.com-style stat-card row (bare selectors,
   works on any custom page: Sertifikati, Online časovi, ...).
   ============================================================ */
.cert-facts{background:var(--ground-raised); border-bottom:1px solid var(--line); padding-block:32px;}
.cert-facts-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:920px){.cert-facts-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.cert-facts-grid{grid-template-columns:1fr;}}
.cert-fact{display:flex; flex-direction:column; gap:6px; text-align:center; padding:0 12px;}
.cert-fact-num{font-family:var(--font-display, 'Fraunces', serif); font-size:2.07rem; font-weight:600; color:var(--teal-deep);}
.cert-fact-label{font-size:0.989rem; color:var(--ink-soft); line-height:1.4;}

/* ============================================================
   ICON-STEP cards — numbered procedure steps as cards instead of a
   bare list (bare selectors, shared across pages).
   ============================================================ */
.cert-steps{background:var(--ground-raised); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-block:64px;}
.cert-steps-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:20px; margin-top:8px;}
@media (max-width:1100px){.cert-steps-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:700px){.cert-steps-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:460px){.cert-steps-grid{grid-template-columns:1fr;}}
.cert-step{background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-card, 16px); padding:22px 18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px;}
.cert-step-num{width:34px; height:34px; border-radius:50%; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display, 'Fraunces', serif); font-weight:600; flex:none;}
.cert-step h3{font-size:1.15rem; font-weight:600; margin-top:4px;}
.cert-step p{color:var(--ink-soft); font-size:1.012rem; line-height:1.5; margin:0;}
.cert-step p a{color:var(--teal-deep); font-weight:600;}

/* ============================================================
   PRICING cards — 3-tier price grid (bare selectors, shared across pages:
   Online časovi, IELTS priprema, ...).
   ============================================================ */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px;}
@media (max-width:920px){.price-grid{grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto;}}
.price-card{background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-card, 18px); padding:32px 26px; box-shadow:var(--shadow); text-align:center; display:flex; flex-direction:column; gap:6px;}
.price-card-featured{border:2px solid var(--teal); position:relative; transform:translateY(-8px);}
@media (max-width:920px){.price-card-featured{transform:none;}}
.price-card h3{font-family:var(--font-display, 'Fraunces', serif); font-size:1.38rem; font-weight:600;}
.price-card-sub{color:var(--ink-soft); font-size:0.989rem; margin:0 0 10px;}
.price-card-amount{font-size:2.3rem; font-weight:700; color:var(--teal-deep); margin:0 0 18px;}
.price-card-amount span{font-size:1.15rem; font-weight:500; color:var(--ink-soft);}
.price-card ul{list-style:none; margin:0 0 22px; padding:0; text-align:left; display:flex; flex-direction:column; gap:8px;}
.price-card li{font-size:1.012rem; color:var(--ink-soft); padding-left:22px; position:relative;}
.price-card li::before{content:"✓"; position:absolute; left:0; color:var(--teal); font-weight:700;}
.price-card .btn{margin-top:auto;}
.price-note{text-align:center; color:var(--ink-soft); margin-top:28px; font-size:1.058rem;}

/* ============================================================
   APPLY — real WPForms markup, restyled to match the site's inputs
   (bare selectors, shared across pages with a form-embed section).
   ============================================================ */
.cert-apply{background:var(--ink); color:#fff; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding-block:64px;}
.cert-apply .eyebrow{color:#BFE7FF;}
.cert-apply h2{color:#fff;}
.cert-apply-form{color:var(--ink); max-width:640px; margin:32px auto 0; background:#fff; border-radius:18px; padding:32px; box-shadow:0 30px 60px -20px rgba(0,0,0,.4);}
.cert-apply-form .wpforms-field-label{color:var(--ink); font-weight:600; font-size:1.03rem;}
.cert-apply-form .wpforms-required-label{color:var(--orange-deep);} /* the asterisk only (.wpforms-field-required is also on the inputs and options) */
.cert-apply-form input, .cert-apply-form select, .cert-apply-form textarea,
.cert-apply-form .wpforms-field-label-inline{color:var(--ink);}
.cert-apply-form input::placeholder, .cert-apply-form textarea::placeholder{color:var(--ink-soft); opacity:.85;}
.cert-apply-form input[type="text"],
.cert-apply-form input[type="email"],
.cert-apply-form textarea{width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 14px; font:inherit; margin-top:6px;}
.cert-apply-form .wpforms-field{margin-bottom:18px;}
.cert-apply-form ul{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 18px;}
/* options (radio / checkbox): a real touch target instead of a 13px dot */
.cert-apply-form ul li{display:flex; align-items:center; gap:10px; min-height:44px; margin:0;}
.cert-apply-form ul li input[type="radio"], .cert-apply-form ul li input[type="checkbox"]{flex:none; width:22px; height:22px; margin:0; accent-color:var(--teal-deep);}
.cert-apply-form ul li label{margin:0; font-size:1.03rem; line-height:1.3;}
.cert-apply-form select{width:100%; min-height:48px; font-size:16px; margin-top:6px; padding:10px 14px; border:1px solid var(--line); border-radius:10px; background-color:#fff;}
.cert-apply-form .wpforms-submit{background:var(--orange); color:#fff; border:none; border-radius:999px; padding:12px 28px; font-weight:600; cursor:pointer;}
.cert-apply-form .wpforms-submit:hover{background:var(--orange-deep);}

/* FOOTER: moved to academia-footer.css (loaded on every front-end page, not only custom templates). */

.london-page .service-card .read-soon, .home-page .service-card .read-soon{color:var(--ink-soft); font-weight:600; font-size:1.03rem; margin-top:auto; padding-top:4px; opacity:.75;}

/* Service cards - image and title are links too (same URL as the "read" CTA) */
.london-page .service-media-link, .home-page .service-media-link{display:block; width:100%; height:100%;}
.london-page .service-card h3 a, .home-page .service-card h3 a{color:inherit; text-decoration:none; transition:color .15s ease;}
.london-page .service-card h3 a:hover, .home-page .service-card h3 a:hover,
.london-page .service-card h3 a:focus-visible, .home-page .service-card h3 a:focus-visible{color:var(--teal-deep); text-decoration:underline; text-underline-offset:4px;}

/* "Program po danima" - academia_week_overview(): all days visible, no tabs.
   4 cards per row on desktop, last row centered (flex, not grid). */
.london-page .week-overview{padding-block:56px;}
.london-page .week-overview .section-head{margin-bottom:8px;}
.london-page .wo-week{margin-top:40px;}
.london-page .wo-week-title{display:flex; align-items:center; gap:16px; margin:0 0 20px; font-family:'JetBrains Mono',monospace; font-size:1rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-deep);}
.london-page .wo-week-title::after{content:""; flex:1; height:1px; background:var(--line);}
.london-page .wo-grid{--wo-gap:18px; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--wo-gap);}
.london-page .wo-card{flex:0 0 calc((100% - 3 * var(--wo-gap)) / 4); min-width:0; background:var(--card-bg); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;}
.london-page .wo-photo{aspect-ratio:16/10; background-color:var(--ground);}
.london-page .wo-body{padding:18px 18px 22px; display:flex; flex-direction:column; gap:10px; flex:1;}
.london-page .wo-badge{display:inline-flex; align-items:center; gap:7px; width:max-content; background:var(--ground); border-radius:999px; padding:5px 12px 5px 8px; font-family:'JetBrains Mono',monospace; font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-deep);}
.london-page .wo-badge svg{width:15px; height:15px;}
.london-page .wo-body h4{margin:0; font-size:1.2rem; line-height:1.25;}
.london-page .wo-body p{margin:0; color:var(--ink-soft); font-size:1rem; line-height:1.5;}
@media (max-width:1100px){.london-page .wo-card{flex-basis:calc((100% - 2 * var(--wo-gap)) / 3);}}
@media (max-width:820px){.london-page .wo-card{flex-basis:calc((100% - var(--wo-gap)) / 2);}}
@media (max-width:560px){.london-page .wo-card{flex-basis:100%;} .london-page .wo-photo{aspect-ratio:16/9;}}

/* Week overview - dark inset card variant (same treatment as .week-split) */
.london-page .week-overview .wo-inner{max-width:1250px; margin-inline:auto;}
.london-page .week-overview.is-dark{padding-block:64px;}
.london-page .week-overview.is-dark .wrap{background:var(--ink); color:#fff; border-radius:28px; padding:56px 40px;}
.london-page .week-overview.is-dark .section-head h2{color:#fff;}
.london-page .week-overview.is-dark .section-head .eyebrow{color:var(--sky);}
.london-page .week-overview.is-dark .section-head p:not(.eyebrow){color:#9FB7C4;}
.london-page .week-overview.is-dark .wo-week-title{color:var(--sky);}
.london-page .week-overview.is-dark .wo-week-title::after{background:rgba(255,255,255,.18);}
/* Studio "Pozadina sekcije" (tones): this card is dark by default ("Standardna"/"Tamna" need
   no extra rule), so "Topla"/"Svetloplava" must flip the card AND its (otherwise hardcoded
   light-on-dark) text to a readable dark-on-light combination instead. */
.london-page .week-overview.is-dark.studio-tone-warm .wrap{background:#FBEADA; color:var(--ink);}
.london-page .week-overview.is-dark.studio-tone-warm .section-head h2{color:var(--ink);}
.london-page .week-overview.is-dark.studio-tone-warm .section-head .eyebrow{color:var(--teal-deep);}
.london-page .week-overview.is-dark.studio-tone-warm .section-head p:not(.eyebrow){color:var(--ink-soft);}
.london-page .week-overview.is-dark.studio-tone-warm .wo-week-title{color:var(--teal-deep);}
.london-page .week-overview.is-dark.studio-tone-warm .wo-week-title::after{background:var(--line);}
.london-page .week-overview.is-dark.studio-tone-sky .wrap{background:#E3F2FB; color:var(--ink);}
.london-page .week-overview.is-dark.studio-tone-sky .section-head h2{color:var(--ink);}
.london-page .week-overview.is-dark.studio-tone-sky .section-head .eyebrow{color:var(--teal-deep);}
.london-page .week-overview.is-dark.studio-tone-sky .section-head p:not(.eyebrow){color:var(--ink-soft);}
.london-page .week-overview.is-dark.studio-tone-sky .wo-week-title{color:var(--teal-deep);}
.london-page .week-overview.is-dark.studio-tone-sky .wo-week-title::after{background:var(--line);}
/* "Tamna": the wrap's default background is var(--ink) (reused as a dark color since this
   card is dark by default), but the "Tamna" tone redefines --ink itself to a light text
   color for OTHER sections - pin this one back to a literal dark hex so the two don't fight. */
.london-page .week-overview.is-dark.studio-tone-dark .wrap{background:#132A3A;}
@media (min-width:701px){
  .london-page .week-overview.is-dark .wrap{
    max-width:none; width:calc(100vw - 80px);
    margin-left:calc(50% - 50vw + 40px); margin-right:calc(50% - 50vw + 40px);
    box-sizing:border-box;
  }
}
@media (max-width:700px){
  .london-page .week-overview.is-dark .wrap{padding:40px 22px; border-radius:20px;}
}
/* Studio "Širina pozadine" (edge): same full-bleed pattern as .lang-tests above. */
.london-page .week-overview.is-dark.studio-edge-full .wrap{border-radius:0;}
@media (min-width:701px){
  .london-page .week-overview.is-dark.studio-edge-full .wrap{
    width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  }
}

/* Studio: section background tones (opt-in per section type). Doubled class = beats page-specific section backgrounds. */
.london-page .studio-tone.studio-tone-warm, .home-page .studio-tone.studio-tone-warm{background:#FBEADA; border-color:transparent;}
.london-page .studio-tone.studio-tone-sky, .home-page .studio-tone.studio-tone-sky{background:#E3F2FB; border-color:transparent;}
.london-page .studio-tone.studio-tone-dark, .home-page .studio-tone.studio-tone-dark{
  background:#132A3A; border-color:transparent; color:var(--ink);
  --ground:#0D1B24; --ground-raised:#1B3547; --ink:#EAF3F8; --ink-soft:#B7CBD7; --line:#2B4A5E;
  --teal:#3AAEEA; --teal-deep:#7CCBF4; --card-bg:#1B3547; --shadow:0 12px 28px -14px rgba(0,0,0,.6);
}

/* ==========================================================================
   Studio generic appearance controls - every section can get: a background
   color (preset tones above + custom --studio-bg), a text color (--studio-fg)
   and an edge mode (.studio-edge-inset / .studio-edge-full). The classes
   always land on the section's first tag.
   Two section families:
   - "card" sections keep their colored block on the inner .wrap (inset by
     default) -> list in --card below; edge-full widens that .wrap.
   - all others color/inset the section element itself.
   ========================================================================== */

/* Custom background: the section itself, plus the inner card of card sections */
.london-page .studio-bg-custom.studio-bg-custom, .home-page .studio-bg-custom.studio-bg-custom{background:var(--studio-bg); border-color:transparent;}
.london-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-bg-custom .wrap,
.home-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-bg-custom .wrap,
.london-page .kontakt-main.studio-bg-custom .kontakt-form-card, .london-page .lp-story.studio-bg-custom .lp-story-callout{background:var(--studio-bg);}

/* Custom text color: redefine the ink variables (headings/body read them) and
   repaint text that hard-codes its color (e.g. white on dark cards). */
.london-page .studio-fg-custom.studio-fg-custom, .home-page .studio-fg-custom.studio-fg-custom{
  color:var(--studio-fg); --ink:var(--studio-fg);
  --ink-soft:color-mix(in srgb, var(--studio-fg) 78%, transparent);
}
.london-page .studio-fg-custom.studio-fg-custom :is(h1,h2,h3,h4,p,li,summary,.eyebrow,.section-head p),
.home-page .studio-fg-custom.studio-fg-custom :is(h1,h2,h3,h4,p,li,summary,.eyebrow,.section-head p){color:var(--studio-fg);}
.london-page .studio-fg-custom.studio-fg-custom .wrap, .home-page .studio-fg-custom.studio-fg-custom .wrap{color:var(--studio-fg);}

/* "Uvučeno" on a section that colors itself: float it as a rounded card. */
.london-page .studio-edge-inset:not(:is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band)),
.home-page .studio-edge-inset:not(:is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band)){
  margin-inline:12px; width:auto; max-width:calc(100% - 24px); box-sizing:border-box; border-radius:20px; overflow:hidden;
}
@media (min-width:701px){
  .london-page .studio-edge-inset:not(:is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band)),
  .home-page .studio-edge-inset:not(:is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band)){
    margin-inline:40px; width:auto; max-width:calc(100% - 80px); border-radius:28px;
  }
}

/* "Puna širina" on a card section: card runs to the viewport edge. */
.london-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-edge-full .wrap,
.home-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-edge-full .wrap{border-radius:0;}
@media (min-width:701px){
  .london-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-edge-full .wrap,
  .home-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-edge-full .wrap{
    width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  }
}
/* "Puna širina" on a self-colored section: drop any radius/margin it had. */
.london-page .studio-edge-full:not(:is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band)),
.home-page .studio-edge-full:not(:is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band)){
  margin-inline:0; border-radius:0;
}

/* Card sections: tone / custom color paint only the inner card (.wrap), never the band behind it -
   otherwise band and card merge into one color and inset vs. full width is invisible. */
.london-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone.studio-tone-warm,
.london-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone.studio-tone-sky,
.london-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone.studio-tone-dark,
.london-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-bg-custom.studio-bg-custom,
.home-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone.studio-tone-warm,
.home-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone.studio-tone-sky,
.home-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone.studio-tone-dark,
.home-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-bg-custom.studio-bg-custom{background:transparent; border-color:transparent;}
.london-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone-warm .wrap{background:#FBEADA; color:#132A3A; --ink:#132A3A; --ink-soft:#4B6577;}
.london-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone-warm .wrap :is(h1,h2,h3,h4,p,li,summary){color:#132A3A;}
.london-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone-warm .wrap :is(.section-head p:not(.eyebrow)){color:#4B6577;}
.london-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone-warm .wrap .eyebrow{color:var(--teal-deep);}
.home-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone-warm .wrap{background:#FBEADA; color:#132A3A; --ink:#132A3A; --ink-soft:#4B6577;}
.home-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone-warm .wrap :is(h1,h2,h3,h4,p,li,summary){color:#132A3A;}
.home-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone-warm .wrap :is(.section-head p:not(.eyebrow)){color:#4B6577;}
.home-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone-warm .wrap .eyebrow{color:var(--teal-deep);}
.london-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone-sky .wrap{background:#E3F2FB; color:#132A3A; --ink:#132A3A; --ink-soft:#4B6577;}
.london-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone-sky .wrap :is(h1,h2,h3,h4,p,li,summary){color:#132A3A;}
.london-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone-sky .wrap :is(.section-head p:not(.eyebrow)){color:#4B6577;}
.london-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone-sky .wrap .eyebrow{color:var(--teal-deep);}
.home-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone-sky .wrap{background:#E3F2FB; color:#132A3A; --ink:#132A3A; --ink-soft:#4B6577;}
.home-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone-sky .wrap :is(h1,h2,h3,h4,p,li,summary){color:#132A3A;}
.home-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone-sky .wrap :is(.section-head p:not(.eyebrow)){color:#4B6577;}
.home-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone-sky .wrap .eyebrow{color:var(--teal-deep);}
.london-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone-dark .wrap{background:#132A3A; color:#EAF3F8; --ink:#EAF3F8; --ink-soft:#B7CBD7;}
.london-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone-dark .wrap :is(h1,h2,h3,h4,p,li,summary){color:#EAF3F8;}
.london-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone-dark .wrap :is(.section-head p:not(.eyebrow)){color:#B7CBD7;}
.london-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone-dark .wrap .eyebrow{color:var(--sky);}
.home-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone-dark .wrap{background:#132A3A; color:#EAF3F8; --ink:#EAF3F8; --ink-soft:#B7CBD7;}
.home-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone-dark .wrap :is(h1,h2,h3,h4,p,li,summary){color:#EAF3F8;}
.home-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone-dark .wrap :is(.section-head p:not(.eyebrow)){color:#B7CBD7;}
.home-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-tone-dark .wrap .eyebrow{color:var(--sky);}

/* "Uvučeno" on a card section, stated explicitly so it works even where the page's own CSS
   does not define this card (e.g. a section added to another page). Same geometry as the defaults. */
.london-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-edge-inset .wrap, .home-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-edge-inset .wrap{border-radius:20px; padding:40px 22px;}
@media (min-width:701px){
  .london-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-edge-inset .wrap, .home-page :is(.lang-tests, .blog-section, .week-overview, .onama-accred, .team-carousel, .ielts-videos, .week-split, .faq-section, .testi-band).studio-edge-inset .wrap{
    max-width:none; width:calc(100vw - 80px); box-sizing:border-box; border-radius:28px; padding:56px 40px;
    margin-left:calc(50% - 50vw + 40px); margin-right:calc(50% - 50vw + 40px);
  }
}

/* phones: the form card was 335px wide with 32px padding - only 271px left for the fields */
@media (max-width:600px){
  .cert-apply .wrap{padding-inline:12px;}
  .cert-apply-form{padding:22px 16px; border-radius:14px;}
  .cert-apply-form ul{flex-direction:column; gap:0;}
  .cert-apply-form .wpforms-submit{width:100%; min-height:48px;}
}