:root{
--navy-900:#1A1A2E;
--navy-800:#22235C;
--navy-700:#2B2E7E;
--navy-600:#3A3DA0;
--navy-100:#E7E8F5;
--navy-50:#F4F4FB;
--orange-700:#C96613;
--orange-600:#F5821F;
--orange-500:#FF9A3D;
--orange-100:#FDE6D0;
--white:#FFFFFF;
--gray-900:#1A1A2E;
--gray-700:#4A4B5C;
--gray-500:#787A8C;
--gray-300:#D3D4DE;
--gray-100:#EEEEF3;
--green-600:#1E8E5A;

--color-bg:var(--white);
--color-bg-inverse:var(--navy-700);
--color-surface:var(--white);
--color-surface-sunken:var(--navy-50);
--color-text:var(--gray-900);
--color-text-muted:var(--gray-700);
--color-text-on-navy:var(--white);
--color-text-on-navy-muted:var(--navy-100);
--color-primary:var(--navy-700);
--color-primary-hover:var(--navy-800);
--color-accent:var(--orange-600);
--color-accent-hover:var(--orange-700);
--color-border:var(--gray-300);
--color-border-on-navy:rgba(255,255,255,0.25);
--color-success:var(--green-600);

--font-display:'Oswald',Impact,'Arial Narrow',sans-serif;
--font-body:'Inter',-apple-system,'Segoe UI',sans-serif;

--text-display-xl:clamp(2.75rem,4vw,4.5rem);
--text-display-lg:clamp(2.25rem,3vw,3.25rem);
--text-display-md:2rem;
--text-h1:2.5rem;
--text-h2:1.875rem;
--text-h3:1.375rem;
--text-h4:1.125rem;
--text-body-lg:1.125rem;
--text-body:1rem;
--text-body-sm:0.9375rem;
--text-caption:0.8125rem;
--text-eyebrow:0.8125rem;

--leading-tight:1.1;
--leading-snug:1.25;
--leading-normal:1.5;
--leading-relaxed:1.65;

--tracking-wide:0.06em;
--tracking-wider:0.12em;

--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;

--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-8:32px;
--space-10:40px;
--space-12:48px;
--space-16:64px;
--space-20:80px;
--space-24:96px;
--space-32:128px;

--radius-sm:4px;
--radius-md:8px;
--radius-lg:12px;
--radius-pill:999px;

--shadow-sm:0 1px 2px rgba(26,26,46,0.06),0 1px 3px rgba(26,26,46,0.08);
--shadow-md:0 4px 12px rgba(26,26,46,0.08),0 2px 4px rgba(26,26,46,0.06);
--shadow-lg:0 12px 32px rgba(26,26,46,0.14),0 4px 8px rgba(26,26,46,0.08);
--shadow-hover:0 16px 40px rgba(26,26,46,0.18);

--container-max:1280px;
--ease-standard:cubic-bezier(0.4,0,0.2,1);
--duration-fast:150ms;
--duration-base:220ms;
}

body{margin:0;background:#fff;font-family:var(--font-body,Inter,sans-serif);color:var(--color-text);}
a{color:var(--color-primary);text-decoration:none}
a:hover{color:var(--color-accent)}
img{max-width:100%;display:block}
.tsl-btn{transition:all .18s ease}
.tsl-container{max-width:var(--container-max);margin:0 auto;padding:0 24px}
.tsl-eyebrow{font-weight:700;font-size:13px;letter-spacing:.12em;color:var(--color-accent);text-transform:uppercase}
.tsl-h2{font-family:var(--font-display);font-size:2.4rem;text-transform:uppercase;color:var(--color-primary);margin:10px 0 18px;line-height:1.15}
.tsl-body{color:#4a4a5e;line-height:1.7;font-size:1.05rem}
@keyframes tsl-scroll-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes tsl-scroll-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.tsl-svc-row{transition:all .18s ease}
.tsl-svc-row:hover{background:#2B2E7E !important;color:#fff !important;border-color:#2B2E7E !important;box-shadow:0 6px 16px rgba(43,46,126,.12)}
.tsl-svc-arrow{opacity:0;transition:opacity .18s ease}
.tsl-svc-row:hover .tsl-svc-arrow{opacity:1}

.tsl-nav-link:hover{color:#F5821F !important}
.tsl-nav-dropdown-wrap{position:relative}
.tsl-nav-dropdown{display:none;top:100% !important}
.tsl-nav-dropdown-wrap:hover .tsl-nav-dropdown{display:block}
.tsl-nav-dropdown-item:hover{background:#F7F7FA}

.tsl-fab{transition:transform .2s ease}
.tsl-fab:hover{transform:scale(1.08)}

.tsl-projects-list .tsl-project-item{transition:background .18s ease}
.tsl-projects-list .tsl-project-item:hover{background:#F7F7FA}
.tsl-projects-grid .tsl-project-item{transition:transform .18s ease,box-shadow .18s ease}
.tsl-projects-grid .tsl-project-item:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(43,46,126,.14)}
.tsl-marquee-left{animation:tsl-scroll-left 30s linear infinite}
.tsl-marquee-right{animation:tsl-scroll-right 30s linear infinite}
.tsl-marquee:hover{animation-play-state:paused}

/* Page hero band used on inner pages */
.tsl-page-hero{position:relative;background:linear-gradient(135deg,var(--navy-700),var(--navy-900));color:#fff;padding:120px 24px 64px;text-align:center}
.tsl-page-hero h1{font-family:var(--font-display);font-size:2.6rem;text-transform:uppercase;margin:0 0 12px}
.tsl-page-hero .tsl-breadcrumb{font-size:14px;color:rgba(255,255,255,.7)}
.tsl-page-hero .tsl-breadcrumb a{color:#fff}
.tsl-page-hero .tsl-breadcrumb .sep{color:var(--color-accent);margin:0 8px}

.tsl-content{max-width:900px;margin:0 auto;padding:80px 24px;line-height:1.8;color:#4a4a5e}
.tsl-content h2{font-family:var(--font-display);color:var(--color-primary);text-transform:uppercase;margin-top:2em}
.tsl-content h3{color:var(--color-primary)}

/* ==========================================================================
   CONTACT FORM 7
   CF7 wraps every field in <span class="wpcf7-form-control-wrap">, so the
   layout lives on our own .tsl-cf7-row wrappers and the controls are styled
   to match the original hand-built inputs.
   ========================================================================== */
.tsl-cf7{display:flex;flex-direction:column;gap:14px}
.tsl-cf7-row{display:grid;grid-template-columns:1fr;gap:14px}
.tsl-cf7-row--2{grid-template-columns:1fr 1fr}
.tsl-cf7 .wpcf7-form-control-wrap{display:block;width:100%}

.tsl-cf7 input[type="text"],
.tsl-cf7 input[type="email"],
.tsl-cf7 input[type="tel"],
.tsl-cf7 select,
.tsl-cf7 textarea{
  width:100%;
  padding:14px 16px;
  border:1px solid #e4e4ec;
  border-radius:4px;
  background:#fff;
  font-size:14px;
  font-family:inherit;
  color:var(--color-text);
}
.tsl-cf7 select{color:#4a4a5e}
.tsl-cf7 textarea{resize:vertical;min-height:96px}
.tsl-cf7 input::placeholder,
.tsl-cf7 textarea::placeholder{color:#8a8ea6;opacity:1}
.tsl-cf7 input:focus,
.tsl-cf7 select:focus,
.tsl-cf7 textarea:focus{outline:none;border-color:#F5821F}

/* The quick form sits on a #F7F7FA panel, so its fields keep that tint */
.tsl-cf7--quick input[type="text"],
.tsl-cf7--quick input[type="email"],
.tsl-cf7--quick input[type="tel"],
.tsl-cf7--quick textarea{background:#F7F7FA}

.tsl-cf7-row--submit{margin-top:6px}
.tsl-cf7 input[type="submit"]{
  justify-self:start;
  background:#F5821F;
  color:#fff;
  border:none;
  padding:14px 32px;
  border-radius:4px;
  font-weight:600;
  font-size:14px;
  font-family:inherit;
  cursor:pointer;
  transition:background .18s ease;
}
.tsl-cf7 input[type="submit"]:hover{background:var(--orange-700)}
.tsl-cf7 .wpcf7-spinner{margin:0 0 0 10px;vertical-align:middle}

/* Validation + response messages */
.tsl-cf7 .wpcf7-not-valid{border-color:#b32d2e !important}
.tsl-cf7 .wpcf7-not-valid-tip{color:#b32d2e;font-size:12.5px;margin-top:6px;display:block}
.wpcf7 form .wpcf7-response-output{
  margin:16px 0 0;padding:12px 16px;border-radius:4px;
  border:1px solid currentColor;font-size:14px;line-height:1.5;
}
.wpcf7 form.sent .wpcf7-response-output{color:#1E8E5A}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{color:#b32d2e}

/* ==========================================================================
   RESPONSIVE LAYER
   The templates use inline styles, which beat normal stylesheet rules.
   Overrides below therefore use attribute selectors + !important so they
   can win inside media queries. Breakpoints:
     Mobile  320-480px
     Tablet  481-1024px
     Desktop 1025px+
   ========================================================================== */

/* ---------- Global safety (all breakpoints) ---------- */
*, *::before, *::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
img, video, iframe, svg{max-width:100%}
img, video{height:auto}
input, select, textarea, button{max-width:100%;font-family:inherit}
/* Long words / URLs must never force a horizontal scrollbar */
h1,h2,h3,h4,p,li,a,span,div{overflow-wrap:break-word}

/* Marquee is intentionally wider than the viewport - keep it exempt */
.tsl-marquee{max-width:none}

/* Grid and flex children default to min-width:auto, which stops them shrinking
   below their content and pushes tracks wider than their container. This is the
   single biggest source of horizontal overflow in this theme. */
[style*="display:grid"] > *,
[style*="display:flex"] > *{min-width:0}
.tsl-marquee > *{min-width:auto}   /* marquee cards must keep their fixed width */

/* ===========================  TABLET & BELOW  ===========================
   (<=1024px) - collapse the wide multi-column layouts                     */
@media (max-width:1024px){

  /* Same gutter model as mobile, one step wider */
  section, header, footer{padding-left:20px !important;padding-right:20px !important}
  .tsl-container{padding-left:0 !important;padding-right:0 !important}
  .tsl-content{padding-left:20px !important;padding-right:20px !important}

  /* NOTE: any element whose .style.* is touched by JS gets its style attribute
     re-serialised by the browser ("repeat(3,1fr)" -> "repeat(3, 1fr)", ".85fr"
     -> "0.85fr"). Selectors below therefore cover both spellings. */

  /* --- Grid collapsing: 3+ col -> 2 col --- */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"]{grid-template-columns:repeat(2,1fr) !important}

  /* --- Asymmetric two-column (image + copy) -> single column --- */
  [style*="grid-template-columns:1fr 1.3fr"],
  [style*="grid-template-columns: 1fr 1.3fr"],
  [style*="grid-template-columns:1fr 340px"],
  [style*="grid-template-columns: 1fr 340px"],
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns:1.15fr .85fr"],
  [style*="grid-template-columns: 1.15fr 0.85fr"],
  [style*="grid-template-columns:1fr auto"],
  [style*="grid-template-columns: 1fr auto"],
  [style*="grid-template-columns:220px 1fr"],
  [style*="grid-template-columns: 220px 1fr"]{grid-template-columns:1fr !important}

  /* --- Even two-column image/text pairs -> stack --- */
  [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
  [style*="grid-template-columns: 1fr 1fr"]:not([style*="1fr 1fr 1fr"]){grid-template-columns:1fr !important}

  /* Spanning children must not re-create the columns we just removed */
  [style*="grid-column:span 2"], [style*="grid-column: span 2"],
  [style*="grid-column:span 3"], [style*="grid-column: span 3"]{grid-column:auto !important}

  /* Large column gaps are wasteful once stacked */
  [style*="gap:72px"]{gap:40px !important}
  [style*="gap:64px"]{gap:36px !important}
  [style*="gap:56px"]{gap:32px !important}

  /* --- Footer: 5 cols -> 2 --- */
  [style*="grid-template-columns:2fr 1fr 1fr 1fr 1.3fr"],
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr 1.3fr"]{grid-template-columns:1fr 1fr !important;gap:32px !important}

  /* --- Section rhythm --- */
  section[style*="padding:100px"], section[style*="padding:110px"],
  section[style*="padding:96px"],  section[style*="padding:88px"]{padding-top:64px !important;padding-bottom:64px !important}

  /* Readability floor - nothing below 12px on a handheld screen */
  [style*="font-size:11.5px"], [style*="font-size: 11.5px"],
  [style*="font-size:11px"],   [style*="font-size: 11px"]{font-size:12px !important}

  /* Compact stat/fact bars stay multi-column (doubled class beats the
     ":not()" rule above, which carries (0,2,0) specificity). */
  .tsl-factbar.tsl-factbar{grid-template-columns:repeat(2,1fr) !important}

  /* Milestone timeline stays horizontal here, but its 170px labels are wider
     than the column they sit in and spill past the last item - cap them. */
  .tsl-timeline [style*="width:170px"],
  .tsl-timeline [style*="width: 170px"]{width:100% !important}
  .tsl-timeline > div:last-child > div{padding:0 6px !important}

  /* --- Touch targets: tablets are touch devices too, so 44px applies here --- */
  a.tsl-btn, button, input[type="submit"]{min-height:44px}
  a.tsl-btn{display:inline-flex;align-items:center;justify-content:center}
  .tsl-hero-prev, .tsl-hero-next,
  .tsl-project-prev, .tsl-project-next,
  .tsl-gallery-prev, .tsl-gallery-next{width:44px !important;height:44px !important}
  /* Pagination dots: the visible bar stays slim, but transparent padding makes
     the button itself a real 44px-tall / 30px-wide target (JS still sets the
     inline width, so background-clip keeps the painted bar the right size). */
  .tsl-hero-dot{
    height:10px !important;              /* painted bar keeps its original height */
    padding:17px 12px !important;        /* 10 + 34 = 44px tall hit area */
    background-clip:content-box !important;
    box-sizing:content-box !important;
    min-height:0 !important;
    position:relative;z-index:5;
  }
  /* Thumbnail strips scroll by touch */
  .tsl-gallery [style*="overflow-x:auto"],
  .tsl-projects-carousel [style*="overflow-x:auto"]{-webkit-overflow-scrolling:touch}
}

/* ===========================  MOBILE ONLY  =============================
   (<=480px) - everything becomes a single column                         */
@media (max-width:480px){

  /* Gutter model on mobile: the section/header/footer owns the side padding and
     inner containers reset theirs, so the two never stack up to a 48px gutter.
     (.tsl-content can appear without a section wrapper, so it keeps its own.) */
  section, header, footer{padding-left:16px !important;padding-right:16px !important}
  .tsl-container{padding-left:0 !important;padding-right:0 !important}
  .tsl-content{padding-left:16px !important;padding-right:16px !important}

  /* --- Every multi-column grid collapses --- */
  [style*="grid-template-columns"]{grid-template-columns:1fr !important}

  /* Compact stat/fact bars stay 2-up (short label + value); content cards do not */
  /* Class doubled deliberately: the tablet ":not([style*=...])" rule above has
     specificity (0,2,0) because :not() inherits its argument's weight, so a
     single class would lose to it regardless of source order. */
  .tsl-factbar.tsl-factbar{grid-template-columns:repeat(2,1fr) !important}
  .tsl-factbar > div{min-height:0 !important;padding:18px 16px !important}

  /* Numbered process steps keep the number beside the copy, just narrower */
  [style*="grid-template-columns:96px 1fr"],
  [style*="grid-template-columns: 96px 1fr"]{grid-template-columns:52px 1fr !important;gap:16px !important}

  /* Items that spanned 2-3 columns must not re-create those columns */
  [style*="grid-column:span 2"], [style*="grid-column:span 3"]{grid-column:span 1 !important}

  /* --- Typography scale-down (headings are set in rem inline) --- */
  h1[style*="font-size:3.4rem"], h1[style*="font-size:3.2rem"]{font-size:1.95rem !important;line-height:1.15 !important}
  h1[style*="font-size:2.8rem"], h1[style*="font-size:2.6rem"]{font-size:1.75rem !important;line-height:1.2 !important}
  [style*="font-size:2.4rem"], [style*="font-size:2.2rem"]{font-size:1.5rem !important;line-height:1.25 !important}
  [style*="font-size:2rem"]{font-size:1.4rem !important;line-height:1.3 !important}
  [style*="font-size:1.9rem"]{font-size:1.35rem !important;line-height:1.35 !important}
  [style*="font-size:1.7rem"]{font-size:1.3rem !important}
  [style*="font-size:2.6rem"]:not(h1){font-size:1.9rem !important}
  [style*="font-size:1.15rem"], [style*="font-size:1.08rem"], [style*="font-size:1.05rem"], [style*="font-size:1.02rem"]{font-size:1rem !important;line-height:1.7 !important}
  /* Never let body copy drop below a readable size */
  [style*="font-size:11.5px"], [style*="font-size:12px"], [style*="font-size:12.5px"]{font-size:12px !important}

  /* --- Section rhythm --- */
  section[style*="padding:100px"], section[style*="padding:110px"], section[style*="padding:96px"],
  section[style*="padding:88px"],  section[style*="padding:80px"],  section[style*="padding:76px"],
  section[style*="padding:72px"],  section[style*="padding:64px"]{padding-top:48px !important;padding-bottom:48px !important}
  [style*="padding:48px 40px"], [style*="padding:48px 44px"], [style*="padding:44px 40px"]{padding:28px 20px !important}
  [style*="padding:40px 34px"], [style*="padding:36px 32px"], [style*="padding:36px"]{padding:24px 20px !important}
  [style*="padding:26px 32px"], [style*="padding:28px 30px"], [style*="padding:32px"]{padding:22px 18px !important}
  [style*="margin-bottom:72px"], [style*="margin-bottom:64px"]{margin-bottom:36px !important}
  [style*="margin-bottom:56px"], [style*="margin-bottom:48px"]{margin-bottom:28px !important}
  [style*="margin-bottom:100px"]{margin-bottom:48px !important}

  /* Embedded maps use height:100%; once their wrapper becomes height:auto that
     resolves to the 150px iframe default, so give them a floor of their own. */
  iframe{min-height:260px}

  /* --- Fixed heights become fluid --- */
  [style*="height:600px"]{height:auto !important;min-height:440px !important}
  [style*="height:460px"], [style*="height:420px"], [style*="height:400px"]{height:auto !important;min-height:240px !important}
  [style*="height:380px"]{height:auto !important;min-height:260px !important}
  [style*="height:230px"], [style*="height:220px"], [style*="height:210px"], [style*="height:190px"]{height:auto !important;min-height:170px !important}
  /* Hero images inside fluid boxes still need to fill */
  section img[style*="object-fit:cover"]{min-height:inherit}

  /* --- Buttons / CTAs: 44px min touch target, full-width stacking --- */
  a.tsl-btn, button, input[type="submit"]{min-height:44px}
  a.tsl-btn{display:inline-flex !important;align-items:center;justify-content:center;padding:13px 22px !important;font-size:14px !important}
  /* Button rows stack and go full width */
  div[style*="display:flex"][style*="gap:16px"] > a.tsl-btn,
  div[style*="display:flex"][style*="gap:14px"] > a.tsl-btn{width:100%}
  div[style*="display:flex"][style*="gap:16px"]:has(> a.tsl-btn),
  div[style*="display:flex"][style*="gap:14px"]:has(> a.tsl-btn){flex-direction:column;align-items:stretch}

  /* --- Contact Form 7 --- */
  .tsl-cf7-row--2{grid-template-columns:1fr !important}
  .tsl-cf7 input[type="submit"]{width:100%;justify-self:stretch}

  /* --- Forms --- */
  input, select, textarea{width:100% !important;font-size:16px !important;min-height:44px}
  textarea{min-height:96px}
  button[style*="align-self:flex-start"], button[style*="justify-self:start"]{width:100% !important;align-self:stretch !important;justify-self:stretch !important}
  /* Footer newsletter row */
  footer div[style*="display:flex"][style*="gap:8px"]{flex-wrap:wrap}
  footer div[style*="display:flex"][style*="gap:8px"] input{flex:1 1 100% !important}
  footer div[style*="display:flex"][style*="gap:8px"] button{width:100%;min-height:44px}

  /* --- Icon badges keep their shape (don't let flex squash them) --- */
  [style*="border-radius:50%"]{flex-shrink:0}
}

/* ===================  SECTION-SPECIFIC MOBILE FIXES  =================== */
@media (max-width:900px){
  /* Projects list view is a 5-col table-like grid - reflow to 2 columns.
     projects.js writes .style.display on each row, which re-serialises the
     style attribute, so both spellings must be matched. */
  .tsl-projects-list [style*="grid-template-columns:64px 1.4fr 1fr 200px 44px"],
  .tsl-projects-list [style*="grid-template-columns: 64px 1.4fr 1fr 200px 44px"]{
    grid-template-columns:56px 1fr !important;
    gap:12px !important;
    row-gap:6px !important;
  }
  /* Hide the trailing arrow column on small screens */
  .tsl-projects-list .tsl-project-item > div:last-child{display:none !important}
  .tsl-projects-list > div > div:first-child > div:nth-child(3),
  .tsl-projects-list > div > div:first-child > div:nth-child(4),
  .tsl-projects-list > div > div:first-child > div:last-child{display:none !important}
  .tsl-projects-list .tsl-project-item > div:nth-child(3),
  .tsl-projects-list .tsl-project-item > div:nth-child(4){grid-column:2 !important}
}

@media (max-width:480px){
  /* "Who We Are" overlapping-image collage -> simple stacked images */
  .tsl-collage{height:auto !important;display:flex !important;flex-direction:column;gap:12px}
  .tsl-collage > *{position:static !important;width:100% !important;height:200px !important;inset:auto !important}
  .tsl-collage > button{position:absolute !important;top:70px !important;left:50% !important;transform:translateX(-50%) !important;width:52px !important;height:52px !important}

  /* Milestone timeline -> vertical list (absolute positioning removed) */
  .tsl-timeline{height:auto !important}
  .tsl-timeline > div:first-child{display:none !important}      /* horizontal rule */
  .tsl-timeline > div:last-child{position:static !important;flex-direction:column !important;gap:28px}
  .tsl-timeline > div:last-child > div{padding:0 0 0 22px !important;border-left:2px solid rgba(245,130,31,.5);text-align:left !important;align-items:flex-start !important}
  .tsl-timeline > div:last-child > div > div[style*="position:absolute"],
  .tsl-timeline > div:last-child > div > div[style*="border-radius:50%"]{position:static !important;transform:none !important;top:auto !important}
  .tsl-timeline > div:last-child > div > div{position:static !important;width:auto !important;align-items:flex-start !important;text-align:left !important}

  /* Hero slider arrows sit closer in but stay a 44px touch target */
  .tsl-hero-prev{left:6px !important}
  .tsl-hero-next{right:6px !important}
  .tsl-hero-prev, .tsl-hero-next{width:44px !important;height:44px !important}

  /* Carousel / gallery step buttons */
  .tsl-project-prev, .tsl-project-next,
  .tsl-gallery-prev, .tsl-gallery-next{width:44px !important;height:44px !important}

  /* Pagination dots stay visually small but get a full 44x44 hit area */
  .tsl-hero-dot{position:relative}
  .tsl-hero-dot::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px}

  /* Gallery / carousel thumbnail strips - smooth touch scrolling */
  .tsl-gallery [style*="overflow-x:auto"],
  .tsl-projects-carousel [style*="overflow-x:auto"]{-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding-bottom:4px}
  .tsl-gallery-thumb, .tsl-project-thumb{scroll-snap-align:start}

  /* Service-detail split hero: image panel sits behind copy, so hide the
     empty left half and let the photo span the full width */
  .tsl-service-hero-bg{grid-template-columns:1fr !important}
  .tsl-service-hero-bg > div:first-child{display:none !important}

  /* Floating action buttons shouldn't crowd the thumb zone */
  .tsl-fab{right:16px !important}
  a.tsl-fab{bottom:16px !important;width:52px !important;height:52px !important}
  #tsl-back-to-top{bottom:80px !important}
}

/* ===========================  HAMBURGER NAV  =========================== */
.tsl-nav-toggle{display:none;background:none;border:1px solid rgba(43,46,126,.35);border-radius:4px;width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0}
.tsl-nav-toggle span{display:block;width:20px;height:2px;background:#2B2E7E;position:relative}
.tsl-nav-toggle span::before,.tsl-nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#2B2E7E;transition:transform .2s ease,top .2s ease}
.tsl-nav-toggle span::before{top:-6px}
.tsl-nav-toggle span::after{top:6px}
.tsl-nav-toggle[aria-expanded="true"] span{background:transparent}
.tsl-nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.tsl-nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* The in-drawer CTA only exists for the collapsed nav */
.tsl-cta-mobile{display:none}

@media (max-width:1024px){
  .tsl-nav-toggle{display:flex}
  .tsl-cta-mobile{display:block !important}
  /* Header bar: logo | spacer | burger */
  .tsl-header-bar{flex-wrap:wrap !important;gap:12px}
  .tsl-header-bar > .tsl-cta-desktop{display:none !important}

  /* The nav becomes a stacked drawer, hidden until toggled */
  .tsl-main-nav{
    display:none !important;
    order:3;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    width:100%;
    border-top:1px solid rgba(43,46,126,.15);
    margin-top:4px;
    padding-bottom:8px;
  }
  .tsl-main-nav.is-open{display:flex !important}
  .tsl-main-nav > a, .tsl-main-nav .tsl-nav-dropdown-wrap > a{
    display:block;padding:14px 4px;min-height:44px;line-height:1.4;
    border-bottom:1px solid rgba(43,46,126,.12);
  }
  .tsl-main-nav .tsl-nav-dropdown-wrap{width:100%}

  /* Dropdowns: no hover on touch - they expand inline when tapped */
  .tsl-main-nav .tsl-nav-dropdown{
    position:static !important;display:none;
    box-shadow:none !important;border:none !important;border-radius:0 !important;
    background:rgba(43,46,126,.04) !important;min-width:0 !important;
    padding:4px 0 8px !important;margin:0 !important;max-height:none !important;
  }
  .tsl-nav-dropdown-wrap:hover .tsl-nav-dropdown{display:none}      /* kill hover-open */
  .tsl-nav-dropdown-wrap.is-open .tsl-nav-dropdown{display:block !important}
  .tsl-main-nav .tsl-nav-dropdown-item{color:#2B2E7E !important;padding:12px 16px !important;min-height:44px;display:flex !important;align-items:center}
  .tsl-main-nav .tsl-nav-dropdown > div[style*="background:#F5821F"]{display:none !important}
  .tsl-main-nav .tsl-nav-dropdown > div[style*="overflow-y:auto"]{max-height:260px !important;padding:0 !important}

  /* Top contact strip gets tight on small screens */
  .tsl-topbar{flex-wrap:wrap !important;gap:8px 14px !important;font-size:12px !important}
}

@media (max-width:480px){
  .tsl-topbar > div:last-child{gap:16px !important}
  .tsl-topbar span[style*="opacity:.3"]{display:none !important}
  .tsl-topbar{justify-content:center !important}
}