/**
 * 2026 mobile polish (phones only).
 * Every rule is inside @media (max-width:767px) so tablet and desktop are unchanged.
 * Loaded after all other theme stylesheets. Page-specific sections are scoped by body template class.
 */

/* ============================== global ============================== */
/* global: Global header, mobile nav menu, footer (all pages) */
@media (max-width:767px) {

  /* Mobile nav: fit the scrolling menu to the remaining viewport so the last
     items (e.g. Stories with Services expanded) can be reached.
     main.js sets an inline ul height that ignores the header offset. */
  .mobile-nav .inner {height:100%; display:flex; flex-direction:column; align-items:stretch;}
  .mobile-nav .search-dd {flex:0 0 auto; width:100%; align-self:stretch; box-sizing:border-box;}
  .mobile-nav .scroll {flex:1 1 auto; width:100%; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;}
  .mobile-nav .scroll ul {height:auto !important; overflow:visible;}

  /* Notification bar close X: ~34px tap area around the same 14px icon
     (negative margin keeps the icon and the text layout exactly where they were) */
  .notif-box.mob .nb-close {padding:10px; margin:-10px;}

  /* Footer bottom links: even wrap, flush left, bigger tap targets */
  .footer .btm .btm-links {display:flex; flex-wrap:wrap; gap:4px 24px;}
  .footer .btm .btm-links a,
  .footer .btm .btm-links a:first-child,
  .footer .btm .btm-links a:last-child {margin:0; padding:6px 0;}
  .footer .btm .copyright {margin-top:22px;}

  /* Footer info: HubSpot bubble is hidden on phones, so the 90px clearance is dead space */
  .footer .btm-info {padding-bottom:40px;}
  .footer .btm-info a {display:inline-block; padding:6px 0;}

  /* Footer lists: same letter-spacing on every page (home inherited 0.08em) */
  .footer.f-refresh .inner-col ul li {letter-spacing:0.8px;}

  /* Search overlay results: the fixed 11px right margin left the two cards
     off-centre (12px gutter left, 27px right); spread them evenly instead */
  #search-overlay .searchResults {justify-content:space-between;}
  #search-overlay .searchItem {margin-right:0;}
  /* long uppercase words (ARCHITECTURE) were clipped in the ~117px title box at 360 wide */
  #search-overlay .searchItem .siText {padding-left:16px; padding-right:16px;}
  #search-overlay .searchItem h2 {font-size:min(17px, 4.4vw); max-height:calc(5em + 10px);} /* 10px top padding + 5 whole lines, no half-cut 6th line */
}

/* ============================== about ============================== */
/* about: About page */
@media (max-width:767px) {

  /* Hero video (.cta-lrg): let the section grow with its content instead of clipping it in a fixed 85vh box */
  body.page-template-page-templatesabout-php .cta-lrg {height:auto; min-height:85vh; display:flex; flex-direction:column;}
  body.page-template-page-templatesabout-php .cta-lrg .section-inner {position:relative; left:auto; top:auto; transform:none; flex:1 0 auto; padding:72px 7% 48px;}
  body.page-template-page-templatesabout-php .cta-lrg .bg-video {position:absolute; top:0; left:0; right:0; bottom:0; width:auto; height:auto; background:#222 url(/wp-content/themes/sls2017/assets/images/about-cta-lrg2.jpg) center/cover no-repeat;}
  body.page-template-page-templatesabout-php .cta-lrg .section-content h2 {line-height:1.2; margin-bottom:16px;}

  /* Purpose panel: tighter vertical rhythm once the columns stack */
  body.page-template-page-templatesabout-php .sls-purpose-panel .sls-inner {padding-top:56px;}
  body.page-template-page-templatesabout-php .sls-purpose-panel .content-top .sls-content {gap:40px 0;}
  body.page-template-page-templatesabout-php .sls-purpose-panel .content-top .content-group:last-child {padding-bottom:56px;}
  body.page-template-page-templatesabout-php .sls-purpose-panel .lbl {padding-bottom:16px;}
  body.page-template-page-templatesabout-php .sls-purpose-panel .boxes {gap:20px; padding-bottom:56px;}
  body.page-template-page-templatesabout-php .sls-purpose-panel .box .txt {padding-top:20px;}

  /* Purpose panel: taller group photo behind the Mission/Vision boxes (desktop overlay look) */
  body.page-template-page-templatesabout-php .sls-purpose-panel .bg-purpose {aspect-ratio:1.25;}
  body.page-template-page-templatesabout-php .sls-purpose-panel .sls-content-boxes {margin-bottom:170px; gap:16px 0;}
  body.page-template-page-templatesabout-php .sls-purpose-panel .sls-content-box {padding:24px 20px;}

  /* Our Model process panel: trim oversized padding */
  body.page-template-page-templatesabout-php .process-panel.p-main.v2 .inner {padding-top:64px; padding-bottom:56px;}

  /* Team sort bar: label on its own row, pills beneath */
  body.page-template-page-templatesabout-php .sls-team-panel .sls-sort-bar {margin-top:24px;}
  body.page-template-page-templatesabout-php .sls-team-panel .sls-sort-bar .sort-lbl {width:100%; margin:0 0 2px;}
  body.page-template-page-templatesabout-php .sls-team-panel .sls-sort-bar button {padding:8px 14px;}

  /* Team grid: 2 columns instead of 38 full-width cards */
  body.page-template-page-templatesabout-php .sls-team-panel .grid-items,
  body.page-template-page-templatesabout-php .sls-team-panel .grid-items.sls-sorted {width:100%; margin-left:0; column-gap:16px; row-gap:32px;}
  body.page-template-page-templatesabout-php .sls-team-panel .grid-items .grid-item,
  body.page-template-page-templatesabout-php .sls-team-panel .grid-items.sls-sorted .grid-item {width:calc((100% - 16px) / 2); min-height:0; margin:0 !important;}
  body.page-template-page-templatesabout-php .sls-team-panel .grid-item .item-content {padding-bottom:14px;}
  body.page-template-page-templatesabout-php .sls-team-panel .grid-item .name {font-size:17px; padding-top:14px;}
  body.page-template-page-templatesabout-php .sls-team-panel .grid-item .lbl {font-size:14px;}
  body.page-template-page-templatesabout-php .sls-team-panel .grid-item .sub-lbl {font-size:13px;}
  /* Read Bio + LinkedIn row: the 85%/15% split left the 24px icon touching the pill at 2 columns */
  body.page-template-page-templatesabout-php .sls-team-panel .grid-item .btm {gap:8px;}
  body.page-template-page-templatesabout-php .sls-team-panel .grid-item .btm .button {width:auto; flex:1 1 auto; min-width:0;}
  body.page-template-page-templatesabout-php .sls-team-panel .grid-item .btm .social {width:auto; flex:0 0 28px;}
  body.page-template-page-templatesabout-php .sls-team-panel .grid-item .btm .button a {padding-left:8px; padding-right:8px;}
  body.page-template-page-templatesabout-php .sls-team-panel .grid-items .sls-group-title,
  body.page-template-page-templatesabout-php .sls-team-panel .grid-items.sls-sorted .sls-group-title {margin-left:0;}

  /* Team bio modal: the phone header is z-index 999999 (style.css, max-width:960px), so it sat on top of the
     z-index 999 modal and its dim layer, hiding the first 76px of the bio (photo top) and staying undimmed.
     Lift the dim layer + modal above the header (as on desktop, where the modal covers the header),
     and move the close label up now that no header covers it; bigger close tap area. */
  body.page-template-page-templatesabout-php .team-modal-bg {z-index:1000000;}
  body.page-template-page-templatesabout-php .team-modal {z-index:1000001;}
  body.page-template-page-templatesabout-php.mobile .team-modal .close-btn {top:64px;}
  body.page-template-page-templatesabout-php .team-modal .close-btn {padding:12px; margin:-12px;}
}

/* ============================== archives ============================== */
/* archives: Archive / listing pages (work, news, podcasts) */
@media (max-width:767px) {
  /* /work/: trim the empty band between the filter row and the grid */
  body.post-type-archive-work .ourWorkContent.v2 .our-work-filters .owf-inner {padding-bottom:20px;}

  /* /news/: smaller featured headline so the excerpt isn't pushed far down */
  body.blog .news-recent .recent-item .col-txt h1 {font-size:30px; line-height:1.15;}
  /* /news/: ~100px blank band between the featured post and the grid */
  body.blog .sls-section.news-recent + .sectionsContainer .pjs-news-landing-grid {padding-top:40px;}

  /* /news/ + /podcast/: tighter spacing between stacked cards */
  body.blog .pjs-news-landing-grid .sub-item,
  body.post-type-archive-podcast .pjs-news-landing-grid .sub-item {margin-bottom:44px;}
  body.blog .pjs-news-landing-grid .sub-item .date,
  body.post-type-archive-podcast .pjs-news-landing-grid .sub-item .date {padding:18px 0 14px;}

  /* /podcast/: 100px gap between the intro text and the first card */
  body.post-type-archive-podcast .section-2023.white-pattern.top-content .section-inner {padding-bottom:40px;}
  /* /podcast/: cards have no excerpt, so drop the extra gap between title and "Read more" */
  body.post-type-archive-podcast .pjs-news-landing-grid .sub-item .desc .link {padding-top:0;}
  /* /podcast/: pagination - larger tap targets, even wrapping, less dead space around it */
  body.post-type-archive-podcast .pagination {display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:0 0 10px;}
  body.post-type-archive-podcast .pagination .page-numbers {min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center; margin:0; box-sizing:border-box;}

  /* /news/: pagination - the "…" item sat ~18px below the number row; center every item on one line */
  body.blog .num-nav ul {display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}
}

/* ============================== careers ============================== */
/* careers: Careers page */
@media (max-width:767px) {
  /* Opened job description: 2x line-height (32-34px) on a ~276px column made one job ~9700px tall.
     Tighter leading keeps the same type, just less scroll. */
  body.page-template-page-templatescareers-php .pjs-accordions .desc p,
  body.page-template-page-templatescareers-php .pjs-accordions .desc ul,
  body.page-template-page-templatescareers-php .pjs-accordions .desc li {line-height:1.6;}
  body.page-template-page-templatescareers-php .pjs-accordions .desc li {margin-bottom:10px;}
  body.page-template-page-templatescareers-php .pjs-accordions .desc h2 {line-height:1.2;}

  /* Form: text fields/textarea stop 20px short of the accordion's right edge; run them to the same edge */
  body.page-template-page-templatescareers-php .formInputItem input[type=text],
  body.page-template-page-templatescareers-php .formTextItem textarea {width:100%; box-sizing:border-box;}

  /* Resume drop zone: the hidden file input sat as an invisible 34px strip under "Browse",
     padding the zone with dead space. Lay it over the whole zone so any tap opens the picker. */
  /* margin-bottom:0 - its 30px margin stacked on the wrapper's 30px padding (60px gap vs 30px between other fields) */
  body.page-template-page-templatescareers-php #drop {padding:28px 16px; position:relative; margin-bottom:0;}
  /* ...but once a file is uploaded, give its chip back the 30px gap below the drop zone */
  body.page-template-page-templatescareers-php #upload ul li:first-child {margin-top:30px;}
  body.page-template-page-templatescareers-php #drop input[type=file] {
    position:absolute; top:0; left:0; width:100%; height:100%; margin:0; max-width:none; border:0; opacity:0; cursor:pointer;
  }
}

/* ============================== connect ============================== */
/* connect: Connect / Let's Connect pages */
@media (max-width:767px) {
  /* ---- /connect/ : centre the white card with equal gutters, round it, trim the gap under the header ---- */
  body.page-template-page-templatesconnect-php .connect-page .inner {display:flow-root; min-height:0;}
  body.page-template-page-templatesconnect-php .connect-page .inner .card {width:auto; margin:88px 12px 24px; border-radius:16px; padding:30px 22px 30px;}
  body.page-template-page-templatesconnect-php .connect-page .inner .card .row {max-width:none;}
  /* headline was the 30px desktop size */
  body.page-template-page-templatesconnect-php .connect-page .inner .card .intro .text {font-size:24px; line-height:29px; max-width:none;}
  /* social icons: keep 46px, just fit four evenly */
  body.page-template-page-templatesconnect-php .connect-page .inner .card .social-links {justify-content:flex-start; gap:18px; margin:0;}
  body.page-template-page-templatesconnect-php .connect-page .inner .card .social-links li {margin:0 0 10px;}
  /* About Us | Staff Page: keep together, bigger tap area */
  body.page-template-page-templatesconnect-php .connect-page .inner .card .ql {justify-content:flex-start; align-items:center; gap:12px; max-width:none;}
  body.page-template-page-templatesconnect-php .connect-page .inner .card .ql .link a {display:inline-block; padding:10px 0;}
  body.page-template-page-templatesconnect-php .connect-page .inner .card .ql .bar {margin:0;}
  /* latest news thumbnail was a fixed 340px and overflowed the card */
  body.page-template-page-templatesconnect-php .connect-page .inner .card .latest {padding-top:20px;}
  body.page-template-page-templatesconnect-php .connect-page .inner .card .latest .image {width:100%; height:auto; aspect-ratio:4/3; margin:14px 0 12px; background-size:contain; background-position:top left;}
  /* "You may be interested in": desktop 35px line-height looked double spaced */
  body.page-template-page-templatesconnect-php .connect-page .inner .card .interested {margin-top:32px;}
  body.page-template-page-templatesconnect-php .connect-page .inner .card .interested .title {padding-bottom:0;}
  body.page-template-page-templatesconnect-php .connect-page .inner .card .interested .container {min-width:0; width:auto; margin:0;}
  body.page-template-page-templatesconnect-php .connect-page .inner .card .interested .image {height:auto; aspect-ratio:16/10; margin:14px 0;}
  body.page-template-page-templatesconnect-php .connect-page .inner .card .interested .text {line-height:26px;}

  /* ---- /lets-connect/ + /lets-connect-locations/ : trim the hero a little (was 104px image above / 100px below the title) without turning it into a strip ---- */
  body.page-template-page-templateslets-connect-php .default-hero.lets-connect-hero {min-height:0; padding-top:146px; padding-bottom:70px; background-position:center;}
  body.page-template-page-templateslets-connect-php .lets-connect-hero #title-masking::after {font-size:34px; line-height:1.1; padding:0 8px;}
  /* form band: no 1000px empty grey block while HubSpot loads, no stray <br> above the form, less dead space under Submit */
  body.page-template-page-templateslets-connect-php .logbook-main-section {min-height:0; padding-top:16px; padding-bottom:16px;}
  body.page-template-page-templateslets-connect-php .logbook-article > p > br {display:none;}
  body.page-template-page-templateslets-connect-php .logbook-article > p {margin-bottom:0;}
  body.page-template-page-templateslets-connect-php .hbspt-form {padding-bottom:0; min-height:600px;}
}

/* ============================== default ============================== */
/* default: Default-template pages */
/* /legal/, /boega-island/, /box-support/, /tony-baxter-recommends-storyland-studios/,
   /themed-attraction-podcast/, /tea-global-experience-index/ (all page-template-default) */
@media (max-width:767px) {

	/* Hero title: 30px + 5px tracking made "RECOMMENDATION" 8px wider than the
	   column at 360 (touching the edges). Slightly tighter tracking, same look. */
	body.page-template-default .default-hero.sub-banner-header h1 {
		font-size:28px; letter-spacing:3px; line-height:1.15; overflow-wrap:break-word;
	}

	/* /box-support/: 160px top padding left a tall empty dark band under the header;
	   match the 90px the other default pages use */
	body.page-id-2517 .default-hero {padding-top:90px;}

	/* Grey content section: min-height:1000px leaves a huge empty band before the
	   footer on short pages (/legal/: ~700px, /box-support/: ~280px) */
	body.page-template-default .logbook-main-section {min-height:0; padding-bottom:40px;}

	/* In-article h1 (/boega-island/): style.css forces margin-top:50px !important,
	   leaving a ~70px empty strip at the top of the white card */
	body.page-template-default .logbook-main-section .logbook-article h1 {margin-top:4px !important;}

	/* WordPress caption figures carry inline widths (525px / 800px) that widened the
	   page to 841px on /themed-attraction-podcast/ (whole page zoomed out, header
	   buttons pushed off-screen) */
	body.page-template-default .logbook-article .wp-caption {max-width:100%; height:auto;}
	body.page-template-default .logbook-article .wp-caption img {width:100%; height:auto;}

	/* /themed-attraction-podcast/ CTA: .right collapsed to 0px because both children are
	   absolute, so the orange box vanished and the text spilled over the photo.
	   Put .content in flow. */
	body.page-id-1162 .two-col.news .right {height:auto; min-height:0;}
	body.page-id-1162 .two-col.news .content {
		position:relative; top:auto; left:auto; right:auto;
		-webkit-transform:none; transform:none;
		padding:48px 24px; text-align:center;
	}
	body.page-id-1162 .two-col.news .content h2 {font-size:24px; letter-spacing:2px; line-height:1.2;}
	body.page-id-1162 .site-main .two-col.news .right p {font-size:16px; letter-spacing:1px; line-height:1.4;}
	body.page-id-1162 .two-col.news .content .btn {text-align:center;}
	body.page-id-1162 .two-col.news .full-img {height:240px;}
}

/* ============================== discipline ============================== */
/* discipline: Discipline/service-line pages (discipline-page template, 14 pages) */
@media (max-width:767px) {
  /* Parallax image band after intro (and services graphic): the JS translateY leaves a blank band
     at phone height (only 21px slack). Pin the layer to the section so it always covers it. */
  body.page-template-page-templatesdiscipline-page-php .bg.intro,
  body.page-template-page-templatesdiscipline-page-php .bg.service {transform:none !important; height:100% !important;}

  /* Intro heading: desktop 40px wraps to 4-7 lines on phones */
  body.page-template-page-templatesdiscipline-page-php .sls-discipline-intro .strategic-two-col .left-content {font-size:32px; line-height:1.15;}

  /* Body copy: cramped 16px/1.3 editor text */
  body.page-template-page-templatesdiscipline-page-php .sls-discipline-intro .right-content .text p,
  body.page-template-page-templatesdiscipline-page-php .sls-services-grid .sls-content > .desc p {font-size:17px; line-height:1.5;}

  /* LEARN MORE tap target */
  body.page-template-page-templatesdiscipline-page-php .sls-discipline-intro .learn-more a {display:inline-block; padding:10px 0;}

  /* Services heading: 36px ran to 4-5 lines on long titles; match the intro heading size */
  body.page-template-page-templatesdiscipline-page-php .sls-services-grid .sls-content h2 {font-size:32px; line-height:1.15;}

  /* "MARKET SECTORS" label: 40px/57.6px wraps to two very loose lines at 360 */
  body.page-template-page-templatesdiscipline-page-php .sls-services-grid .sls-services .col-lbl {font-size:34px; line-height:1.15;}

  /* Services list rhythm */
  body.page-template-page-templatesdiscipline-page-php .sls-services-grid .col-items .sls-service {margin-bottom:28px;}
  /* Only the last column's last card: a .col-1 list keeps its gap above the col-1 divider line */
  body.page-template-page-templatesdiscipline-page-php .sls-services-grid .col-2 .col-items .sls-service:last-child {margin-bottom:0;}
  body.page-template-page-templatesdiscipline-page-php .sls-services-grid .sls-service .desc {font-size:17px; line-height:1.45;}

  /* Testimonial: hide empty title / logo row that leaves ~200px of blank space */
  body.page-template-page-templatesdiscipline-page-php .sls-dynamic-quote .partners > h2:empty {display:none;}
  body.page-template-page-templatesdiscipline-page-php .sls-dynamic-quote .partner-logos:not(:has(img)) {display:none;}
  body.page-template-page-templatesdiscipline-page-php .sls-dynamic-quote .partners > h2:empty ~ .partner-logos:not(:has(img)) + .quote-icon-wrapper {margin-top:0;}

  /* Testimonial quote: 28px is oversized for long quotes on a phone */
  body.page-template-page-templatesdiscipline-page-php .sls-testimonial .partners .quote.discipline p {font-size:22px; line-height:1.4; letter-spacing:-0.3px;}

  /* Empty team panel (no members assigned) and its banner button */
  body.page-template-page-templatesdiscipline-page-php #team.sls-team-panel:not(:has(.grid-item)) {display:none;}
  body.page-template-page-templatesdiscipline-page-php:not(:has(#team .grid-item)) .banner .button a[href="#team"] {display:none;}

  /* Team grid: tighter card spacing, bigger LinkedIn tap target */
  body.page-template-page-templatesdiscipline-page-php .sls-team-panel .grid-item {margin-bottom:40px; min-height:0;}
  body.page-template-page-templatesdiscipline-page-php .sls-team-panel .grid-item .btm .social a {display:flex; align-items:center; justify-content:flex-end; min-height:44px; min-width:44px;}
  /* Cancel the auto margins from 2024-refresh.css (.button + .social span {margin:auto 0 0 auto}) that
     would pin the icon to the bottom of the 44px flex link; keeps it centred on the Read Bio row, right-aligned */
  body.page-template-page-templatesdiscipline-page-php .sls-team-panel .grid-item .btm .social a span {margin:0;}

  /* Team bio modal: the fixed header (z-index 999999) covered the top of the modal (z-index 999).
     Lift overlay + modal above the header (independent of header height); bigger close tap target. */
  body.page-template-page-templatesdiscipline-page-php .team-modal-bg {z-index:1000000;}
  body.page-template-page-templatesdiscipline-page-php .team-modal {z-index:1000001; height:100vh; height:100dvh;}
  body.page-template-page-templatesdiscipline-page-php .team-modal .close-btn {padding:14px 10px; margin-left:-4px;} /* rotated box ~44px wide stays on-screen at 360 (x 1.5-45.5) */
}

/* ============================== entertainment ============================== */
/* entertainment: Entertainment page (own <head>, own design) */
@media (max-width:767px) {
  /* The 367px-wide blue glow is wider than 360px phones and caused a 7px sideways drag */
  body.page-template-page-templatesentertainment-php .section-3 .glow-2 {width:100%; max-width:367px;}

  /* Compact fixed header */
  body.page-template-page-templatesentertainment-php .sls-header {height:84px;}
  body.page-template-page-templatesentertainment-php .sls-header .sh-cols {padding:12px 16px;}
  body.page-template-page-templatesentertainment-php .sls-header .sh-logo {width:122px;}
  body.page-template-page-templatesentertainment-php .sls-header .sh-btn {width:auto;}
  body.page-template-page-templatesentertainment-php .sls-ent-container {padding-top:84px;}

  /* Wider content boxes: less outer side padding */
  body.page-template-page-templatesentertainment-php .sls-section .sls-inner {padding-left:16px; padding-right:16px;}

  /* Hero: smaller headline so the image reaches the first screen; hide the desktop "scroll down" pill */
  body.page-template-page-templatesentertainment-php .section-1 .sls-inner {padding-top:24px;}
  body.page-template-page-templatesentertainment-php .section-1 header {margin-bottom:24px;}
  body.page-template-page-templatesentertainment-php .section-1 header h1 {font-size:3.4rem; letter-spacing:-1.4px;}
  body.page-template-page-templatesentertainment-php .section-1 header h1 .underline svg {width:100%; height:auto; bottom:-6px;}
  body.page-template-page-templatesentertainment-php .section-1 .sls-content-inner {padding:14px;}
  body.page-template-page-templatesentertainment-php .section-1 .scroll-item {display:none;}

  /* Gaps between the bordered sections */
  body.page-template-page-templatesentertainment-php .section-2 {margin-top:32px;}
  body.page-template-page-templatesentertainment-php .section-3,
  body.page-template-page-templatesentertainment-php .section-4 {margin-top:40px;}
  body.page-template-page-templatesentertainment-php .section-2 .col-1,
  body.page-template-page-templatesentertainment-php .section-4 .col-txt {padding-top:28px;}
  body.page-template-page-templatesentertainment-php .section-3 header {padding-top:28px;}
  body.page-template-page-templatesentertainment-php .section-2 .col-1,
  body.page-template-page-templatesentertainment-php .section-2 .col-2,
  body.page-template-page-templatesentertainment-php .section-3 header,
  body.page-template-page-templatesentertainment-php .section-3 .top-content,
  body.page-template-page-templatesentertainment-php .section-3 .grid-items,
  body.page-template-page-templatesentertainment-php .section-4 .col-txt,
  body.page-template-page-templatesentertainment-php .section-4 .col-form {padding-left:20px; padding-right:20px;}

  /* Consistent section heading size */
  body.page-template-page-templatesentertainment-php .section-3 header h2,
  body.page-template-page-templatesentertainment-php .section-4 .col-txt header h2 {font-size:3.6rem;}

  /* Contact: less dead space between intro and form; line the form fields up with the text above */
  body.page-template-page-templatesentertainment-php .section-4 .col-txt {padding-bottom:12px;}
  body.page-template-page-templatesentertainment-php .section-4 .col-form {padding-bottom:28px;}
  body.page-template-page-templatesentertainment-php .section-4 .col-form .nf-form-content,
  body.page-template-page-templatesentertainment-php .section-4 .col-form .nf-cell {padding-left:0; padding-right:0;}

  /* Team cards: tighter stack */
  body.page-template-page-templatesentertainment-php .section-3 .grid-items {padding-top:20px; padding-bottom:4px;}
  body.page-template-page-templatesentertainment-php .section-3 .grid-item {min-height:0; margin:0 0 20px; padding:24px 20px;}
  body.page-template-page-templatesentertainment-php .section-3 .grid-item .img {width:62%; padding-top:62%;}
  body.page-template-page-templatesentertainment-php .section-3 .grid-item .name {padding-top:16px;}

  /* Team bio modal: usable text width, bigger close tap area */
  body.page-template-page-templatesentertainment-php .team-modal .tm-bio {padding:28px 20px 20px;}
  body.page-template-page-templatesentertainment-php .team-modal .tm-bio .tm-right {font-size:1.6rem; margin-top:24px;}
  body.page-template-page-templatesentertainment-php .team-modal .tm-bio .tm-meta {font-size:1.7rem;}
  body.page-template-page-templatesentertainment-php .team-modal .close-btn {padding:14px 12px; left:-56px; top:40px;}

  /* Footer: drop the empty label band, trim padding, smaller logo, full-width copyright */
  body.page-template-page-templatesentertainment-php .sls-footer .footer-top .lbl:empty {display:none;}
  body.page-template-page-templatesentertainment-php .sls-footer .sls-inner {padding:24px 16px 28px;}
  body.page-template-page-templatesentertainment-php .sls-footer .footer-top {padding:24px 0 16px;}
  body.page-template-page-templatesentertainment-php .sls-footer .footer-top .col.logo {margin-bottom:28px;}
  body.page-template-page-templatesentertainment-php .sls-footer .col.logo img {max-width:190px;}
  body.page-template-page-templatesentertainment-php .sls-footer .footer-top ul li {margin-bottom:0; min-height:32px; display:flex; align-items:center;}
  body.page-template-page-templatesentertainment-php .sls-footer .footer-top ul li a {display:inline-block; padding:6px 0;}
  body.page-template-page-templatesentertainment-php .sls-footer .footer-btm {flex-wrap:wrap;}
  body.page-template-page-templatesentertainment-php .sls-footer .footer-btm .info,
  body.page-template-page-templatesentertainment-php .sls-footer .footer-btm .links {width:100%; text-align:left;}
}

/* ============================== feasibility ============================== */
/* feasibility: Theme Park Feasibility Study page */
@media (max-width:767px) {
  /* Banner photo (fixed parallax layer): at 390x844 the min-height:100% + object-fit made it a zoomed crop of plain sky;
     show the whole mobile artwork (mountains + clouds) at full width. It is 393x522, so it still covers the banner box. */
  body.page-template-feasibility-page-2025 .feas-banner .fb-img img.mob {width:100%; max-width:100%; min-width:0; min-height:0; height:auto;}
  /* Banner title artwork: centered and a little smaller so it sits in the sky above the mountain mask */
  body.page-template-feasibility-page-2025 .feas-banner .fb-content-imgs img.mob {width:80%; max-width:310px; height:auto; margin:0 auto;}
  /* Beige area under the banner edge: trim the 15vh top padding */
  body.page-template-feasibility-page-2025 .feas-page .fp-wrapper {padding-top:96px;}
  body.page-template-feasibility-page-2025 .feas-panel1 .sls-inner {padding-top:24px; padding-bottom:24px;}
  /* Panel 1 sits right under the banner; on short phones (360x640) its scroll trigger had not fired at load,
     leaving an empty beige screen under the banner. Show it immediately (beats GSAP inline style). */
  body.page-template-feasibility-page-2025 .feas-panel1.anim-fadein {opacity:1 !important; transform:none !important;}
  /* Panel 2: 80px top / 175px bottom padding left big empty beige bands before "02" and above the orange panel */
  body.page-template-feasibility-page-2025 .feas-panel2 .sls-inner {padding:48px 6% 72px 10%;}
  /* Body copy: match the 18px used in the bottom panel */
  body.page-template-feasibility-page-2025 .feas-panel .item p {font-size:18px;}
  /* Bottom panel: tighter logo stack, tighter heading/graphic spacing, 44px tap target */
  body.page-template-feasibility-page-2025 .feas-btm-panel .fbp-icons img {margin:10px auto; max-width:200px; height:auto;}
  body.page-template-feasibility-page-2025 .feas-btm-panel .fbp-content header {padding-top:28px;}
  body.page-template-feasibility-page-2025 .feas-btm-panel .fbp-cols {padding-top:32px;}
  body.page-template-feasibility-page-2025 .feas-btm-panel .fbp-cols .col-txt .buttons a {min-height:44px;}
}
@media (max-width:389px) {
  /* Keep the "What We Do"/"Our Sources" box from sliding over the orange numerals on narrow phones */
  body.page-template-feasibility-page-2025 .feas-panel header .main {margin-left:0;}
  body.page-template-feasibility-page-2025 .feas-panel header .main .txt h2 {font-size:28px;}
}

/* ============================== home ============================== */
/* home: Homepage */
@media (max-width:767px) {
  /* main.js updateTop() adds margin-bottom = #services-header height (hidden on phones),
     which opens a 97px blank band (and a content jump) under the services intro once you scroll past it */
  body.page-template-page-templateshome-2024-php #p1 {margin-bottom:0 !important;}

  /* hero: buttons side by side so more of the video reel shows */
  body.page-template-page-templateshome-2024-php .pjs-home-banner .info-section .button {display:flex; flex-wrap:nowrap; gap:10px; max-width:420px;}
  body.page-template-page-templateshome-2024-php .pjs-home-banner .info-section .button a {flex:1 1 auto; margin:0; padding:13px 10px 11px; font-size:13px; white-space:nowrap; text-align:center;}
  body.page-template-page-templateshome-2024-php .pjs-home-banner .sml-txt {padding-bottom:18px;}
  /* preloader: center it in the visible (70vh) video area */
  body.page-template-page-templateshome-2024-php .pjs-home-banner #videoPreloader {top:35vh;}

  /* TEA promo banner: small button right of INDEX like desktop, not over the artwork text */
  body.page-template-page-templateshome-2024-php .promotional .full-col {position:relative;}
  body.page-template-page-templateshome-2024-php .promotional .button {left:30%; right:auto; bottom:22%; margin:0;}
  body.page-template-page-templateshome-2024-php .promotional .button a {font-size:10px; line-height:1; padding:7px 14px 6px; margin:0; border-radius:14px;}

  /* service carousels: pagination sits at the top now, drop the leftover bottom padding */
  body.page-template-page-templateshome-2024-php .pjs-home-scroll-panel.mobileOnly .swiper {padding-bottom:4px;}

  /* larger tap area for pagination dots */
  body.page-template-page-templateshome-2024-php .home-scroll-panel .swiper-pagination-bullet {position:relative;}
  body.page-template-page-templateshome-2024-php .home-scroll-panel .swiper-pagination-bullet::after {content:''; position:absolute; inset:-12px -4px;}

  /* project video panels: 24px title on a 24px line-height made the two wrapped lines touch */
  body.page-template-page-templateshome-2024-php .refresh .section.video .wrapper .link .content .title {line-height:1.2;}

  /* case studies: trim the empty space above the brand slider */
  body.page-template-page-templateshome-2024-php .case-study-panel.home .sls-inner {padding-bottom:48px;}
  /* case studies: 24px between items left the Bethany logo (no built-in whitespace) almost touching the previous "Learn More" */
  body.page-template-page-templateshome-2024-php .case-study-panel.home .cs-item {margin-bottom:40px;}
  body.page-template-page-templateshome-2024-php .case-study-panel.home .cs-item:last-child {margin-bottom:0;}

  /* contact CTA: readable white text on the pale sky */
  body.page-template-page-templateshome-2024-php .sls-contact-panel .sls-content h2 {text-shadow:0 1px 14px rgba(0,0,0,.45), 0 0 2px rgba(0,0,0,.25);}
  body.page-template-page-templateshome-2024-php .sls-contact-panel .sls-content .content p {text-shadow:0 1px 10px rgba(0,0,0,.5);}
}

@media (max-width:767px) and (max-height:700px) {
  /* short phones: hide the scroll arrow so the hero video stays visible */
  body.page-template-page-templateshome-2024-php .pjs-home-banner .icon-down {display:none;}
}

/* ============================== leadership ============================== */
/* leadership: Leadership bio pages */
/* Scope: page-templates/leadership-principal.php (body.page-template-page-templatesleadership-principal-php).
   Not scoped by .connect-page.sl alone, because page-templates/connect.php shares that markup.
   The template prints its own <style> inside <body>; the selectors below have higher specificity, so they win without !important. */
@media (max-width:767px) {
  /* bio card: 30px side padding left only ~290px for text on a 390 phone; 20px gives the bio and photo more room */
  body.page-template-page-templatesleadership-principal-php .connect-page .inner .card {padding-left:20px; padding-right:20px; padding-bottom:28px;}
  body.page-template-page-templatesleadership-principal-php .connect-page.sl .inner {padding-bottom:24px;}

  /* vertical rhythm around the divider (was 20+30px above and 50px below it, an ~100px blank band) */
  body.page-template-page-templatesleadership-principal-php .connect-page .inner .card .row .heading {padding-bottom:0;}
  body.page-template-page-templatesleadership-principal-php .connect-page .inner .card .row:first-child {padding-bottom:24px;}
  body.page-template-page-templatesleadership-principal-php .connect-page .inner .card .row:last-child {padding-top:28px;}

  /* bio WYSIWYG: long URLs/emails wrap instead of being clipped by the card */
  body.page-template-page-templatesleadership-principal-php .connect-page .inner .card .row .heading .meta {min-width:0; overflow-wrap:anywhere;}
  /* Matt Ferguson's bio was pasted inside <div class="team-member"> (About-page markup): its 60px top+bottom padding and grey top rule
     left a ~70px blank band above the LinkedIn icon and a stray line under the name */
  body.page-template-page-templatesleadership-principal-php .connect-page .inner .card .row .heading .meta .team-member {padding:0 0 15px; border-top:0;}

  /* "great to connect" icons sat 20px right of the text column (ul margin-left); line them up with the text and the bio icons above */
  body.page-template-page-templatesleadership-principal-php .connect-page .inner .card .social-links {margin-left:0; flex-wrap:wrap;}

  /* About Us | Staff Page: links were 24px tall; give them a real tap target */
  body.page-template-page-templatesleadership-principal-php .connect-page .inner .card .ql {align-items:center;}
  body.page-template-page-templatesleadership-principal-php .connect-page .inner .card .ql .link a {display:inline-block; padding:10px 0;}

  /* latest news: less blank space before it, clear separation between the two articles */
  body.page-template-page-templatesleadership-principal-php .connect-page .inner .card .row .right-side .latest {padding-top:24px;}
  body.page-template-page-templatesleadership-principal-php .connect-page .inner .card .row .right-side .latest .links a {display:block; margin-bottom:24px;}
  body.page-template-page-templatesleadership-principal-php .connect-page .inner .card .row .right-side .latest .links a:last-child {margin-bottom:0;}
  body.page-template-page-templatesleadership-principal-php .connect-page .inner .card .row .right-side .latest .image {margin:12px 0 10px; border-radius:10px;}
}

/* ============================== locations ============================== */
/* locations: Storyland Locations pages */
/* Scopes:
   NEW     = body.page-template-page-templatesstoryland-locations-new-php  (/storylandlocations/theme-park-consultant/)
   OLD     = body.page-template-page-templatesstoryland-locations-php      (/storylandlocations/theme-park-consultant-old/)
   CAREERS = body.page-id-4894 (/storylandlocations/careers/) - covered by careers.css (same template)
   Note: 2025-storyland-locations.css is linked inside <body> on NEW, so it loads after this file;
   every rule keeps the body-class prefix and uses !important where that sheet does. */

@media (max-width:767px) {

  /* ---------- NEW: Market Sectors (compass) + Areas of Expertise (ruler) ---------- */
  /* Let the wrapper size to its list instead of a fixed 700px box + 96px margin */
  body.page-template-page-templatesstoryland-locations-new-php .compass-wrapper,
  body.page-template-page-templatesstoryland-locations-new-php .ruler-wrapper {
    min-height: 0;
    height: auto;
    margin: 24px 0 8px;
    overflow: hidden;
  }
  body.page-template-page-templatesstoryland-locations-new-php .compass-wrapper .compass-items,
  body.page-template-page-templatesstoryland-locations-new-php .ruler-wrapper .ruler-items {
    position: relative;
    top: auto;
    left: auto;
    z-index: 1;
  }
  /* faded compass / ruler art stays behind the list as decoration */
  body.page-template-page-templatesstoryland-locations-new-php .compass-wrapper > img,
  body.page-template-page-templatesstoryland-locations-new-php .ruler-wrapper > img {
    position: absolute;
    top: 0;
    right: -20%;
    left: auto;
    pointer-events: none;
  }
  body.page-template-page-templatesstoryland-locations-new-php .ruler-wrapper > img { right: 12%; }
  /* breathing room before "Choose Your Path" (next section has no top padding) */
  body.page-template-page-templatesstoryland-locations-new-php .ruler-wrapper { margin-bottom: 48px; }
  /* rows: no leftover translate, tighter pitch, label centred on its icon */
  body.page-template-page-templatesstoryland-locations-new-php .compass-wrapper .compass-items .item,
  body.page-template-page-templatesstoryland-locations-new-php .ruler-wrapper .ruler-items .item {
    transform: none !important;
    margin: 0 0 4px !important;
    align-items: center;
  }
  body.page-template-page-templatesstoryland-locations-new-php .compass-wrapper .compass-items .item .service-icon-wrapper,
  body.page-template-page-templatesstoryland-locations-new-php .ruler-wrapper .ruler-items .item .service-icon-wrapper {
    margin-bottom: 0;
  }
  body.page-template-page-templatesstoryland-locations-new-php .compass-wrapper .compass-items .item:last-child,
  body.page-template-page-templatesstoryland-locations-new-php .ruler-wrapper .ruler-items .item:last-child {
    margin-bottom: 0 !important;
  }
  body.page-template-page-templatesstoryland-locations-new-php .compass-wrapper .item .service-icon-wrapper h3.label,
  body.page-template-page-templatesstoryland-locations-new-php .ruler-wrapper .item .service-icon-wrapper h3.label {
    left: calc(100% + 16px) !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%);
    width: calc(100vw - 150px);
    max-width: 240px;
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: 2px;
    text-align: left !important;
  }

  /* ---------- NEW: ARCH letter circles (keep them round) ---------- */
  body.page-template-page-templatesstoryland-locations-new-php .arch-letters-container .service-icon-wrapper.alt {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }
  body.page-template-page-templatesstoryland-locations-new-php .arch-letters-container .service-icon-wrapper.alt .service-icon {
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    flex: 0 0 auto;
    font-size: 26px;
  }

  /* ---------- NEW: vertical rhythm between sections ---------- */
  body.page-template-page-templatesstoryland-locations-new-php .strat-info .sls-inner { padding-top: 44px; padding-bottom: 40px; }
  body.page-template-page-templatesstoryland-locations-new-php .icon-list-group .sls-inner { padding-top: 24px; }
  body.page-template-page-templatesstoryland-locations-new-php .accordion-swiper-container { padding-bottom: 16px; }
  body.page-template-page-templatesstoryland-locations-new-php .arch-mobile-section { padding-top: 0; }

  /* ---------- OLD: list typeface (inherits "icomoon" -> serif fallback) ---------- */
  body.page-template-page-templatesstoryland-locations-php .strat-page ul,
  body.page-template-page-templatesstoryland-locations-php .strat-page ol {
    font-family: 'Geist', sans-serif;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 0.02em;
  }

  /* ---------- OLD: section headings that wrap past the icon (e.g. 4-line "Our Core Services for Real Estate
     Developers & Investors") sat flush on the first sub-heading; padding only matters when the h2 outgrows the 95px icon */
  body.page-template-page-templatesstoryland-locations-php .strat-icon-type .sls-cols .col-icon h2 { padding-top: 8px; padding-bottom: 8px; }

  /* ---------- OLD: stacked grid spacing ---------- */
  body.page-template-page-templatesstoryland-locations-php .strat-grid .item { margin-bottom: 36px; }
  body.page-template-page-templatesstoryland-locations-php .strat-grid .item:last-child { margin-bottom: 0; }
  body.page-template-page-templatesstoryland-locations-php .strat-grid .sls-inner { padding-bottom: 40px; }
  /* 2025-refresh's 992px nth-child(3n+1) margin-left:4.5% survives the 767px margin:auto reset on item 04 */
  body.page-template-page-templatesstoryland-locations-php .strat-grid .item.numbered { margin-left: 0; margin-right: 0; }
  body.page-template-page-templatesstoryland-locations-php .strat-info .sls-inner { padding-top: 44px; padding-bottom: 40px; }
  /* two stacked icon lists (Market Sectors / Areas of Expertise) otherwise touch */
  body.page-template-page-templatesstoryland-locations-php .icon-list-group .sls-cols + .sls-cols { margin-top: 40px; }
  body.page-template-page-templatesstoryland-locations-php .strat-grid .items.icon-list .item {
    margin-bottom: 12px;
    align-items: center;
  }
  body.page-template-page-templatesstoryland-locations-php .strat-grid .items.icon-list .item .service-icon-wrapper {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    margin-bottom: 0;
  }
  body.page-template-page-templatesstoryland-locations-php .strat-grid .items.icon-list .item .service-icon {
    width: 54px;
    height: 54px;
  }

  /* OLD: ARCH line section is height:50vh with the card absolutely centred at 200% of the dot row, so the
     blank band below it grows with the phone's height (and the card can poke past it on short phones).
     Size the section to the dots + a fixed reserve for the tallest card; card hangs from the dot row. */
  body.page-template-page-templatesstoryland-locations-php .arch-line-section { height: auto; }
  body.page-template-page-templatesstoryland-locations-php .arch-line-section .arch-line-container { margin-bottom: 280px; }
  body.page-template-page-templatesstoryland-locations-php .arch-line-section .arch-mobile-content {
    top: calc(100% + 24px);
    transform: translateX(-50%);
  }

  /* CAREERS (/storylandlocations/careers/, body.page-id-4894) uses the careers.php template: careers.css already
     aligns the form fields there, so no locations-specific rules are needed. */
}

/* ============================== process ============================== */
/* process: Our Process page */
@media (max-width:767px) {
  /* Hero: tighter gaps, full-width Big Idea graphic, readable body size */
  body.page-template-page-templatesour-process-php .p-main .inner {padding-bottom:48px;}
  body.page-template-page-templatesour-process-php .p-main .col figure {margin:0 auto;}
  body.page-template-page-templatesour-process-php .p-main .col figure img {width:100%; max-width:280px; height:auto;}
  body.page-template-page-templatesour-process-php .p-main .col .content {padding-top:28px;}
  body.page-template-page-templatesour-process-php .p-main .col .content h1 {font-size:32px;}
  body.page-template-page-templatesour-process-php .p-main .col .content p,
  body.page-template-page-templatesour-process-php .p-main .col .content ol li {font-size:18px; line-height:1.4;}
  body.page-template-page-templatesour-process-php .p-main .col .content ol {margin-left:0;}

  /* Phases list: circles and text were larger than desktop */
  body.page-template-page-templatesour-process-php .p-phases .group {padding-bottom:28px;}
  body.page-template-page-templatesour-process-php .p-phases .txt-start {width:100%;}
  body.page-template-page-templatesour-process-php .p-phases .txt-label .label {font-size:24px;}
  body.page-template-page-templatesour-process-php .p-phases .txt-label.txt-end .label {font-size:20px;}
  body.page-template-page-templatesour-process-php .p-phases .item {padding-bottom:24px;}
  body.page-template-page-templatesour-process-php .p-phases .item .num {width:88px; height:88px; font-size:40px; margin:0 auto;}
  body.page-template-page-templatesour-process-php .p-phases .item .txt {font-size:17px; line-height:1.3;}

  /* Phase title tiles: 350px of mostly empty colour -> 200px; text column sizes to content */
  body.page-template-page-templatesour-process-php .p-two-col .col.is-title {min-height:200px;}
  body.page-template-page-templatesour-process-php .p-two-col .col.is-txt {min-height:0;}
  body.page-template-page-templatesour-process-php .p-two-col .is-title .num {font-size:220px; right:15px;}
  body.page-template-page-templatesour-process-php .p-two-col .is-title .title {left:24px; right:24px;}
  body.page-template-page-templatesour-process-php .p-two-col .is-txt .content {padding-top:36px;}
  /* last paragraph margin stacked on the 40px bottom padding (~65px white band before each tile) */
  body.page-template-page-templatesour-process-php .p-two-col .is-txt .content p:last-child {margin-bottom:0;}
}

/* ============================== service ============================== */
/* service: Market-sector pages (service-page template, 12 pages) */
/* Scope: body.page-template-page-templatesservice-page-php. Phones only. */
@media (max-width:767px) {

  /* 1. Broken parallax on the full-width image above Case Studies (.bg.intro).
     The template script moves the layer by 25% of its distance from the viewport top,
     but the layer is only 10% taller than its 220px box, so a white band opened under it.
     Make it static on phones (!important beats the inline transform the script sets). */
  body.page-template-page-templatesservice-page-php .bg.intro {transform:none !important; top:0 !important; height:100% !important;}

  /* 2. Banner title: 40px + 10px tracking (global h1) clipped long words like ACTIVATIONS / PLACEMAKING.
     The negative right margin cancels the trailing tracking so the centred title is really centred. */
  body.page-template-page-templatesservice-page-php .work-2020 section.banner.v2023.v2024 .inner .title.large h1 {font-size:clamp(26px, 7.8vw, 36px); line-height:1.1; letter-spacing:0.1em; margin-right:-0.1em; overflow-wrap:break-word;}
  body.page-template-page-templatesservice-page-php .work-2020 section.banner.v2023.v2024 .inner .title.large {margin-bottom:24px;}

  /* 3. Banner pill buttons: three full-size stacked rows -> two compact rows */
  body.page-template-page-templatesservice-page-php .banner.v2024 .button {row-gap:10px; column-gap:10px;}
  body.page-template-page-templatesservice-page-php .banner.v2024 .button a {font-size:14px; line-height:1.2; padding:11px 18px 9px; margin:0;}

  /* 4. Intro copy: cramped 130% line height; smaller gap above the image grid */
  body.page-template-page-templatesservice-page-php .sls-service-intro .sls-content,
  body.page-template-page-templatesservice-page-php .sls-service-intro .sls-content p {line-height:1.5;}
  body.page-template-page-templatesservice-page-php .sls-service-intro .sls-content p {margin-bottom:16px;}
  body.page-template-page-templatesservice-page-php .sls-service-intro .sls-content p:last-child {margin-bottom:0;}
  body.page-template-page-templatesservice-page-php .sls-service-intro .sls-images {padding-top:32px;}
  /* intro sat 64px below the banner; 40px matches the rest of the page rhythm */
  body.page-template-page-templatesservice-page-php .sls-service-intro .sls-inner {padding-top:40px;}

  /* 5. Services section: drop empty heading/desc, tighter top padding */
  body.page-template-page-templatesservice-page-php .sls-services-grid .sls-content > h2:empty,
  body.page-template-page-templatesservice-page-php .sls-services-grid .sls-content > .desc:empty {display:none;}
  body.page-template-page-templatesservice-page-php .sls-services-grid .sls-inner {padding-top:16px;}
  /* when a page does fill in the services heading (e.g. /arenas-sports-venues/), it sat flush on the column label */
  body.page-template-page-templatesservice-page-php .sls-services-grid .sls-content > h2:not(:empty) {margin-bottom:20px;}

  /* 6. Services column heading: 40px / 57.6px wrapped to 4-6 lines */
  body.page-template-page-templatesservice-page-php .sls-services-grid .sls-services .col-lbl {font-size:26px; line-height:1.2; letter-spacing:-0.3px;}

  /* 7. Service cards: 48px margin + 32px row-gap = 80px between cards, 20px body text, 79px icon ring */
  body.page-template-page-templatesservice-page-php .sls-services-grid .col-2 .sls-service,
  body.page-template-page-templatesservice-page-php .sls-services-grid .col-1 .sls-service,
  body.page-template-page-templatesservice-page-php .sls-services-grid .col-1 + .col-2 .sls-service {margin-bottom:0;}
  body.page-template-page-templatesservice-page-php .sls-services-grid .sls-services .col-items {row-gap:36px;}
  body.page-template-page-templatesservice-page-php .sls-services-grid .sls-service .service-icon-wrapper {width:60px; height:60px; flex:0 0 60px; margin-bottom:12px;}
  body.page-template-page-templatesservice-page-php .sls-services-grid .sls-service .service-icon-wrapper .service-icon {width:50px; height:50px;}
  body.page-template-page-templatesservice-page-php .sls-services-grid .sls-service .service-icon-wrapper .service-icon em {font-size:22px;}
  body.page-template-page-templatesservice-page-php .sls-services-grid .sls-service .lbl {font-size:20px;}
  body.page-template-page-templatesservice-page-php .sls-services-grid .sls-service .desc,
  body.page-template-page-templatesservice-page-php .sls-services-grid .sls-service .desc p {font-size:16px; line-height:1.45;}
  body.page-template-page-templatesservice-page-php .sls-services-grid .sls-service .desc {padding-top:8px;}
  body.page-template-page-templatesservice-page-php .sls-services-grid .sls-service .link {padding-top:4px;}
  body.page-template-page-templatesservice-page-php .sls-services-grid .sls-service .link a {font-size:16px; display:inline-block; padding:8px 0;}

  /* 8. Case Studies: one 330px card per row -> two columns (tablet shows two as well) */
  body.page-template-page-templatesservice-page-php .case-study-panel .sls-content .title h2 {font-size:36px;}
  body.page-template-page-templatesservice-page-php .case-study-panel .cs-items {display:grid; grid-template-columns:1fr 1fr; column-gap:16px; row-gap:28px; width:100%; margin-left:0; padding-top:32px;}
  body.page-template-page-templatesservice-page-php .case-study-panel .cs-item {width:auto; min-width:0; margin:0;}
  body.page-template-page-templatesservice-page-php .case-study-panel .cs-item .logo {max-width:100px; margin-bottom:10px;}
  body.page-template-page-templatesservice-page-php .case-study-panel .cs-item .logo img {max-width:100%; height:auto;}
  body.page-template-page-templatesservice-page-php .case-study-panel .cs-item .name {font-size:16px; line-height:1.25; padding-bottom:6px; overflow-wrap:break-word;}
  body.page-template-page-templatesservice-page-php .case-study-panel .cs-item .desc,
  body.page-template-page-templatesservice-page-php .case-study-panel .cs-item .desc p {font-size:13px; line-height:1.4; letter-spacing:0.02em;}
  body.page-template-page-templatesservice-page-php .case-study-panel .cs-item .desc {padding-bottom:8px; overflow-wrap:break-word;}
  body.page-template-page-templatesservice-page-php .case-study-panel .cs-item .link .a {font-size:15px; display:inline-block; padding:4px 0;}

  /* 9. Our Team: full-width 351px headshots (~580px per person) -> two columns (as on tablets) */
  body.page-template-page-templatesservice-page-php .sls-team-panel .grid-items {display:grid; grid-template-columns:1fr 1fr; column-gap:16px; width:100%; margin-left:0; padding-top:24px;}
  body.page-template-page-templatesservice-page-php .sls-team-panel .grid-items .sls-group-title {grid-column:1 / -1; margin-left:0;}
  body.page-template-page-templatesservice-page-php .sls-team-panel .grid-item {width:auto; min-width:0; min-height:0; margin:0 0 32px;}
  body.page-template-page-templatesservice-page-php .sls-team-panel .grid-item .item-content {padding-bottom:14px;}
  body.page-template-page-templatesservice-page-php .sls-team-panel .grid-item .name {font-size:18px; line-height:1.15; padding:14px 0 6px;}
  body.page-template-page-templatesservice-page-php .sls-team-panel .grid-item .lbl {font-size:15px; line-height:1.3;}
  body.page-template-page-templatesservice-page-php .sls-team-panel .grid-item .sub-lbl {font-size:13px;}
  body.page-template-page-templatesservice-page-php .sls-team-panel .grid-item .btm .button {width:78%;}
  body.page-template-page-templatesservice-page-php .sls-team-panel .grid-item .btm .button a {font-size:14px; line-height:1.2; padding:10px 8px 8px;}
  body.page-template-page-templatesservice-page-php .sls-team-panel .grid-item .btm .social {width:22%;}
  body.page-template-page-templatesservice-page-php .sls-team-panel .grid-item .btm .social a {display:block; padding:6px 0;}

  /* 10. Bio modal "close" control: enlarge the tap area without moving the visual
     (padding grows the box, equal negative margin keeps the text where it was, rotation centre unchanged) */
  body.page-template-page-templatesservice-page-php .team-modal .close-btn {padding:12px 10px; margin:-12px 0 0 -10px;}

  /* 11. Placemaking (and any page with empty ACF content): hide empty Services / Team sections
     and the banner buttons that would jump to them. Needs :has(); ignored by older browsers.
     :has() may not be nested inside :has(), so the body-level checks use one :has() level with a
     descendant selector (#services .sls-service), which is valid. A browser without :has() drops
     every rule here together, so sections and their pills are always hidden or shown as a pair. */
  body.page-template-page-templatesservice-page-php #services:not(:has(.sls-service, .bg.intro)),
  body.page-template-page-templatesservice-page-php #team:not(:has(.grid-item)) {display:none;}
  body.page-template-page-templatesservice-page-php:not(:has(#services .sls-service)):not(:has(#services .bg.intro)) .banner.v2024 .button a[href="#services"],
  body.page-template-page-templatesservice-page-php:not(:has(#team .grid-item)) .banner.v2024 .button a[href="#team"] {display:none;}
  body.page-template-page-templatesservice-page-php:not(:has(#services .sls-service)):not(:has(#services .bg.intro)):not(:has(#team .grid-item)):not(:has(#cs)) .banner.v2024 .button {display:none;}
  body.page-template-page-templatesservice-page-php:not(:has(#services .sls-service)):not(:has(#services .bg.intro)):not(:has(#team .grid-item)):not(:has(#cs)) .work-2020 section.banner.v2023.v2024 .inner .title.large {margin-bottom:0;}
  /* ...and keep the banner a proper hero height instead of collapsing to a 110px strip */
  body.page-template-page-templatesservice-page-php:not(:has(#services .sls-service)):not(:has(#services .bg.intro)):not(:has(#team .grid-item)):not(:has(#cs)) .work-2020 section.banner.v2023.v2024 .inner {padding-top:90px; padding-bottom:90px;}
}

/* ============================== singles ============================== */
/* singles: Single work case studies, news posts, podcast episodes */
@media (max-width:767px) {

  /* ---------- single work case studies (single-work.php) ---------- */
  /* banner: let the existing 50vh mobile height apply (min-height:425px was overriding it;
     no change on 844px-tall phones, 425->320px on 640px-tall phones; jarallax still covers it) */
  body.single-work .work-2020 section.banner.v2023:not(.v2024) {min-height:320px;}

  /* less blank space between the text groups and the first image panel */
  body.single-work .pjs-news-main-content .inner {padding-top:40px;}
  body.single-work .pjs-news-main-content .pjs-group:last-child {margin-bottom:0;}

  /* legal disclaimer paragraph is absolutely positioned inline (right/bottom:0) with its own 10px
     padding, so on phones it sat 10px from the screen edge instead of on the 20px text gutter:
     put it back in the flow, aligned with the text above it */
  body.single-work .pjs-news-main-content .group-content > p[style*="absolute"] {position:static !important; padding:0 !important; font-size:13px; line-height:1.5;}

  /* image panels: align with the 5% text gutter */
  body.single-work .pjs-img-panel .inner {padding-left:5%; padding-right:5%;}
  body.single-work .pjs-img-panel .pjs-img,
  body.single-work .pjs-img-panel .pjs-imgs .vidframe {margin-left:0; margin-right:0;}
  body.single-work .pjs-img-panel.two-img .pjs-imgs,
  body.single-work .pjs-img-panel.three-img .pjs-imgs,
  body.single-work .pjs-img-panel.four-img .pjs-imgs {flex-wrap:wrap; justify-content:space-between;}
  body.single-work .pjs-img-panel.two-img .pjs-img,
  body.single-work .pjs-img-panel.three-img .pjs-img,
  body.single-work .pjs-img-panel.four-img .pjs-img {width:calc(50% - 8px); margin-bottom:16px;}
  body.single-work .pjs-img-panel.three-img .pjs-img:last-child:nth-child(odd) {width:100%;}
  /* narrow phones: stack full width (existing site behaviour), shorter squares */
  @media (max-width:414px) {
    body.single-work .pjs-img-panel.two-img .pjs-img,
    body.single-work .pjs-img-panel.three-img .pjs-img,
    body.single-work .pjs-img-panel.four-img .pjs-img {width:100%;}
    body.single-work .pjs-img-panel.two-img .pjs-img {aspect-ratio:1.33;}
  }

  /* prev/next case-study nav: a long title (e.g. "Protected: Qiddiya Investment Company") squeezed the
     circled arrow from 27.6px to 13.7px, cutting it in half at the screen edge. Keep the arrow whole;
     the title wraps instead */
  body.single-work .wbn-prev .icon,
  body.single-work .wbn-next .icon {flex-shrink:0;}

  /* ---------- news posts (single.php) ---------- */
  body.single-post .sls-blog-detail .bd-top .bd-txt h1 {font-size:28px; line-height:1.15; padding-bottom:16px;}
  body.single-post .sls-blog-detail .bd-share-group.mob .share-links a {width:40px; height:40px; margin-right:12px;}
  body.single-post .sls-blog-detail .bd-share-group.mob .share-links a:last-child {margin-right:0;}

  /* featured image repeated as the first content image: hide the duplicate.
     .bd-dup-hero is added by a phone-only script in single.php only when the first
     content image is the same file as the featured image */
  body.single-post .sls-blog-detail .bd-content > .bd-dup-hero {display:none;}

  /* safety net: long pasted URLs must wrap instead of causing horizontal scroll */
  body.single-post .sls-blog-detail .bd-content {overflow-wrap:anywhere;}

  /* WordPress [gallery] (e.g. 3-column thumbnail galleries): no gallery grid CSS is loaded, so every
     150px thumbnail sat on its own row with ~200px of blank space beside it (a 2000px blank-ish strip).
     Lay them out in the columns the editor chose (max 3 on phones). */
  body.single-post .bd-content .gallery {display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-bottom:20px;}
  body.single-post .bd-content .gallery-columns-1 {grid-template-columns:minmax(0,1fr);}
  body.single-post .bd-content .gallery-columns-2 {grid-template-columns:repeat(2, minmax(0,1fr));}
  body.single-post .bd-content .gallery .gallery-item {width:auto; margin:0;}
  body.single-post .bd-content .gallery .gallery-icon img {display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover;}
  body.single-post .bd-content .gallery .gallery-caption {font-size:12px; line-height:1.3;}

  /* ---------- podcast episodes (single-podcast.php) ---------- */
  body.single-podcast .section-2023.default-hero.podcast-detail {min-height:230px;}
  body.single-podcast .podcast-content p:not(:last-child) {margin-bottom:20px;}
  body.single-podcast .podcast-content .p-title {font-size:26px; padding-bottom:24px;}
  body.single-podcast .section-2023.white-pattern.podcast-content .section-inner {padding-bottom:48px;}
  body.single-podcast .pjs-news-landing-grid .sub-item {margin-bottom:40px;}
  body.single-podcast .pjs-news-landing-grid .sub-item h2 {margin-bottom:8px;}
  body.single-podcast .pjs-news-landing-grid .sub-item .link {padding-top:8px;}
  /* last card's 40px margin stacked on the grid's 60px bottom padding = 100px of white above the footer */
  body.single-podcast .pjs-news-landing-grid .sub-item:last-child {margin-bottom:0;}
}

/* ============================== sustainability ============================== */
/* sustainability: Sustainability-template pages (Lasting Impact, Omnia) */
@media (max-width:767px) {
  /* Full-width image panel after #p1: the section is only ~220px tall on phones, so the
     JS parallax (translateY) leaves a blank band. Pin the layer and fill the panel. */
  body.page-template-page-templatessustainability-php .bg.scrolling {transform:none !important; top:0; height:100%;}

  /* Previous Years' Reports panel (#cta): side gutters, centered title, button inside the screen */
  body.page-template-page-templatessustainability-php #cta .sls-content {width:100%; padding:0 20px; box-sizing:border-box;}
  body.page-template-page-templatessustainability-php #cta .sls-content h2 {padding-top:0; margin-left:auto; margin-right:auto;}
  body.page-template-page-templatessustainability-php #cta .sls-content .button {padding-top:20px;}
  body.page-template-page-templatessustainability-php #cta .sls-content .button a {white-space:normal; max-width:100%; box-sizing:border-box; padding:10px 24px 8px; line-height:20px; text-align:center;}

  /* Hero: keep the title block inside the 5% gutter at 360px */
  body.page-template-page-templatessustainability-php .impact-hero .inner .title {min-width:0; max-width:100%;}
  body.page-template-page-templatessustainability-php .impact-hero .button a {white-space:normal; text-align:center; letter-spacing:.5px; padding:10px 22px 8px;}

  /* Intro / closing text sections: trim the desktop 80px padding and inline 64px bottom padding */
  body.page-template-page-templatessustainability-php .section-2023.white-pattern.top-content.strategy .strategy-header-content {padding-top:56px; padding-bottom:40px !important;}
  body.page-template-page-templatessustainability-php .strategy-header-content .shc-txt p:last-child {margin-bottom:0;}
  body.page-template-page-templatessustainability-php .section-2023.white-pattern.top-content.strategy .strategy-header-content .shc-lbl h2 {font-size:30px; line-height:1.2; margin-bottom:0;}
  body.page-template-page-templatessustainability-php .strategy-header-content .shc-txt {margin-top:24px;}

  /* Latest Updates: "Read More" sat flush against the last line of the excerpt */
  body.page-template-page-templatessustainability-php .sls-updates-panel .smiBtns {margin-top:20px;}

  /* Omnia: stacked button groups line up as a tidy column */
  body.page-template-page-templatessustainability-php #p1 .content-item .button {display:flex; flex-direction:column; align-items:flex-start; row-gap:12px;}
  body.page-template-page-templatessustainability-php #p1 .content-item .button a {margin:0;}
}