/* TH3 site-wide layer (21 September 2026).
   Replaces th3-header.css. Six changes, all site-wide:
     1  sticky header: white capsule instead of black
     2  premium CTA hover (soft fill + lift) instead of the shine sweep
     3  "Send us a message" pop-up (short form, th3-forms action th3ms)
     4  dropdown no longer closes when the pointer crosses the gap under the capsule
     5  new mobile menu (full-screen panel, accordions, CTA, phone numbers)
     6  "Let's talk" panel replaces the old grey CTA + service links above the footer
   Undo: remove the th3-site block from functions.php (and re-enqueue th3-header.css). */

:root{
  --th3-green:#5EB748;
  --th3-green-lt:#8fe07a;
  --th3-green-ink:#3B7F2C;
  --th3-ink:#0b0c0b;
  --th3-ink-2:#121412;
  --th3-txt:#eef1ee;
  --th3-mut:#9aa29c;
  --th3-line:rgba(255,255,255,.1);
  --th3-ease:cubic-bezier(.22,1,.36,1);
}

/* ═══════════════════════════════════════════════════════════════
   1  STICKY HEADER — white floating capsule
   ═══════════════════════════════════════════════════════════════ */

:is(#sticky-navigation.is_stuck,body.th3-nav2 #site-navigation){background:transparent!important;box-shadow:none!important;pointer-events:none;padding-top:14px}
:is(#sticky-navigation.is_stuck,body.th3-nav2 #site-navigation) .inside-navigation{
  pointer-events:auto;max-width:1340px;width:calc(100% - 48px);margin:0 auto;padding:0 10px 0 22px;
  border-radius:999px;background:#fff!important;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 18px 50px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.05)
}
/* the green logo is GeneratePress's own sticky logo: no override needed now the bar is white */
:is(#sticky-navigation.is_stuck,body.th3-nav2 #site-navigation) .navigation-branding img{height:38px;width:auto;padding:0}
:is(#sticky-navigation.is_stuck,body.th3-nav2 #site-navigation) .main-nav>ul>li>a,
:is(#sticky-navigation.is_stuck,body.th3-nav2 #site-navigation) .menu-toggle{color:#222!important;line-height:64px;font-size:15px;transition:color .2s}
:is(#sticky-navigation.is_stuck,body.th3-nav2 #site-navigation) .main-nav>ul>li>a:hover,
:is(#sticky-navigation.is_stuck,body.th3-nav2 #site-navigation) .main-nav>ul>li.sfHover>a,
:is(#sticky-navigation.is_stuck,body.th3-nav2 #site-navigation) .main-nav>ul>li[class*="current"]>a{color:var(--th3-green-ink)!important;background:transparent!important}
:is(#sticky-navigation.is_stuck,body.th3-nav2 #site-navigation) .main-nav>ul{display:flex;align-items:center}
/* last menu item stays a green pill */
:is(#sticky-navigation.is_stuck,body.th3-nav2 #site-navigation) .main-nav>ul>li:last-child>a{
  line-height:44px;margin-left:10px;padding:0 22px;border-radius:999px;
  background:var(--th3-green)!important;color:#10200a!important;font-weight:600;
  background-image:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22));
  background-repeat:no-repeat;background-size:0 100%;background-position:left center;
  transition:background-size .45s var(--th3-ease),color .2s
}
:is(#sticky-navigation.is_stuck,body.th3-nav2 #site-navigation) .main-nav>ul>li:last-child>a:hover{background-size:100% 100%;color:#10200a!important}

/* dropdown / mega menu: white card under the white bar */
:is(#sticky-navigation.is_stuck,body.th3-nav2 #site-navigation) .main-nav>ul>li>ul{
  background:#fff!important;border:1px solid rgba(0,0,0,.08);border-radius:28px;margin-top:10px;
  box-shadow:0 30px 70px rgba(0,0,0,.22)
}
:is(#sticky-navigation.is_stuck,body.th3-nav2 #site-navigation) .main-nav ul ul ul{background:transparent!important;border:0;box-shadow:none}
:is(#sticky-navigation.is_stuck,body.th3-nav2 #site-navigation) .main-nav ul ul li a{color:#222!important;background:transparent!important;border-color:rgba(0,0,0,.1)!important;transition:color .2s}
:is(#sticky-navigation.is_stuck,body.th3-nav2 #site-navigation) .main-nav>ul>li>ul>li>a{color:#575760!important}
:is(#sticky-navigation.is_stuck,body.th3-nav2 #site-navigation) .main-nav ul ul li a:hover{color:var(--th3-green-ink)!important}

/* ═══════════════════════════════════════════════════════════════
   4  DROPDOWN HOVER BRIDGE
   The capsule leaves a 10px gap above the dropdown. Crossing it used to
   take the pointer off both the link and the menu, so the menu closed.
   This covers the gap with an invisible strip that only exists while the
   item is already hovered, so it can never swallow other clicks.
   ═══════════════════════════════════════════════════════════════ */

:is(#sticky-navigation.is_stuck,body.th3-nav2 #site-navigation) .main-nav>ul>li.menu-item-has-children>a{position:relative}
:is(#sticky-navigation.is_stuck,body.th3-nav2 #site-navigation) .main-nav>ul>li.menu-item-has-children>a::after{
  content:"";position:absolute;left:-24px;right:-24px;top:100%;height:16px;pointer-events:none
}
:is(#sticky-navigation.is_stuck,body.th3-nav2 #site-navigation) .main-nav>ul>li.menu-item-has-children:hover>a::after,
:is(#sticky-navigation.is_stuck,body.th3-nav2 #site-navigation) .main-nav>ul>li.menu-item-has-children.sfHover>a::after{pointer-events:auto}

/* service pages have their own black anchor bar over the sticky menu */
body:has(.scrolling-bar) #sticky-navigation.is_stuck{visibility:hidden}

/* mobile sticky bar: white capsule to match */
#mobile-header.is_stuck{background:transparent!important;box-shadow:none!important;padding:10px 12px 0}
#mobile-header.is_stuck .inside-navigation{
  border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.08);padding:0 8px 0 14px;
  box-shadow:0 10px 30px rgba(0,0,0,.14)
}
#mobile-header.is_stuck .menu-toggle{color:#222!important}
#mobile-header.is_stuck .site-logo img{content:url(https://www.th3design.co.uk/wp-content/uploads/2022/07/th3-green-1.png)}

/* ═══════════════════════════════════════════════════════════════
   5  MOBILE MENU — full-screen panel
   GeneratePress's off-canvas panel keeps doing the work (open/close and
   the sub-menu accordions); this restyles it and adds a header, a call
   to action and the phone numbers.
   ═══════════════════════════════════════════════════════════════ */

#generate-slideout-menu.slideout-navigation{
  background:var(--th3-ink)!important;
  padding:0!important;
  --gp-slideout-width:100%
}
/* GeneratePress centres the panel's contents; this layout is left-aligned */
#generate-slideout-menu .inside-navigation{
  display:flex;flex-direction:column;align-items:stretch!important;min-height:100%;
  padding:0!important;max-width:none!important;text-align:left
}
/* the panel's own "Hull: … York: …" text widget is replaced by the tiles below */
#generate-slideout-menu .slideout-widget{display:none}
/* close button becomes a round chip, top right */
#generate-slideout-menu .slideout-exit{
  position:absolute;top:18px;right:18px;z-index:3;
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid var(--th3-line);background:rgba(255,255,255,.04);
  color:#fff;padding:0;margin:0;font-size:17px;transition:background .2s,border-color .2s
}
#generate-slideout-menu .slideout-exit:hover,
#generate-slideout-menu .slideout-exit:focus-visible{background:rgba(255,255,255,.12);border-color:rgba(143,224,122,.5)}
/* TH3 logo, injected by th3-site.js */
.th3s-mm-top{display:flex;align-items:center;padding:22px 24px 8px}
.th3s-mm-top img{height:38px;width:auto;display:block}
/* the menu itself */
#generate-slideout-menu .main-nav{flex:1 1 auto;padding:6px 0 0}
#generate-slideout-menu .main-nav>ul{padding:0 24px}
#generate-slideout-menu .main-nav ul li{border-bottom:1px solid rgba(255,255,255,.07)}
#generate-slideout-menu .main-nav ul li:last-child{border-bottom:0}
#generate-slideout-menu .main-nav>ul>li>a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0!important;line-height:60px!important;
  font-size:26px!important;font-weight:500!important;letter-spacing:-.02em;
  color:#fff!important;text-align:left;text-decoration:none!important
}
#generate-slideout-menu .main-nav>ul>li>a:hover,
#generate-slideout-menu .main-nav>ul>li.sfHover>a{color:var(--th3-green-lt)!important;background:transparent!important}
/* the page you are on: green text, no grey block behind it */
#generate-slideout-menu .main-nav ul li[class*="current-menu-"]>a,
#generate-slideout-menu .main-nav ul li[class*="current_page_"]>a{
  background:transparent!important;color:var(--th3-green-lt)!important
}
#generate-slideout-menu :focus-visible{outline:2px solid var(--th3-green-lt);outline-offset:2px}
/* the chevron */
#generate-slideout-menu .dropdown-menu-toggle{
  flex:0 0 auto;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid var(--th3-line);padding:0!important;
  transition:transform .3s var(--th3-ease),border-color .2s,background .2s
}
/* GeneratePress's chevron is sized at 1em and nudged down with position:relative;
   top:.125em so it lines up with body text. In a circle that reads as off-centre,
   so the nudge is removed and the size fixed to the circle rather than the font. */
#generate-slideout-menu .dropdown-menu-toggle .gp-icon{display:flex;align-items:center;justify-content:center;line-height:0}
#generate-slideout-menu .dropdown-menu-toggle svg{display:block;width:20px;height:20px;top:0;position:static}
#generate-slideout-menu li.sfHover>a .dropdown-menu-toggle{transform:rotate(180deg);background:var(--th3-green);border-color:var(--th3-green);color:#10200a}
/* sub-menus: indented, quieter, green when open */
#generate-slideout-menu .main-nav ul ul{background:transparent!important;padding:2px 0 14px}
#generate-slideout-menu .main-nav ul ul li{border:0}
#generate-slideout-menu .main-nav ul ul li a{
  display:block;padding:0 0 0 18px!important;line-height:44px!important;font-size:17px!important;
  color:var(--th3-mut)!important;text-decoration:none!important;text-align:left!important;
  border-left:1px solid rgba(255,255,255,.12)
}
#generate-slideout-menu .main-nav ul ul li a:hover{color:#fff!important;background:transparent!important}
/* footer of the panel: CTA + phone numbers, injected by th3-site.js */
.th3s-mm-foot{padding:22px 24px calc(24px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.08);margin-top:18px}
/* GeneratePress forces display:block on links inside the slideout, which dropped
   the centring and left the label hard against the left edge — hence the id here. */
#generate-slideout-menu .th3s-mm-cta{display:flex!important;text-align:center}
.th3s-mm-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 22px;border-radius:999px;background:var(--th3-green);color:#10200a!important;
  font-size:17px;font-weight:600;text-decoration:none!important;
  background-image:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18));
  background-repeat:no-repeat;background-size:0 100%;background-position:left center;
  transition:background-size .45s var(--th3-ease)
}
.th3s-mm-cta:active{background-size:100% 100%}
.th3s-mm-tels{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.th3s-mm-tels a{
  display:block;padding:12px 14px;border-radius:14px;
  border:1px solid var(--th3-line);background:rgba(255,255,255,.04);
  color:#fff!important;text-decoration:none!important;font-size:16px;font-weight:500;line-height:1.3
}
.th3s-mm-tels small{display:block;font-size:12px;color:var(--th3-mut);font-weight:400}
/* phones and tablets: smaller top-level items (the panel can also be opened on
   desktop, where the larger size still works) */
@media (max-width:1024px){
  #generate-slideout-menu .main-nav>ul>li>a{font-size:21px!important}
}

/* ═══════════════════════════════════════════════════════════════
   6  "LET'S TALK" PANEL  (replaces the old grey CTA + service links)
   ═══════════════════════════════════════════════════════════════ */

/* The old grey CTA + service links are GP element 14736's first container
   (gb-container-9719af70). Hidden here while the change is in review; at go-live
   the container is deleted from the element and this rule comes out. */
body.th3s-on .gb-container-9719af70{display:none!important}
/* The theme's light address bar, site footer and back-to-top are replaced by the
   dark footer below (the same one the homepage uses). */
body.th3s-foot-on .footerlink,
body.th3s-foot-on .site-footer,
body.th3s-foot-on .generate-back-to-top{display:none!important}

.th3s-end{background:var(--th3-ink);padding:88px 0 40px;font-family:Poppins,system-ui,sans-serif}
/* no panel on this page (Contact Us): the footer doesn't need the same run-up */
.th3s-end:not(:has(.th3s-panel)){padding-top:0}
.th3s-end *,.th3s-end *::before,.th3s-end *::after{box-sizing:border-box}
.th3s-wrap{max-width:1340px;margin:0 auto;padding:0 24px}
.th3s-panel{
  position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:72px;align-items:center;padding:88px 80px;border-radius:40px;
  border:1px solid rgba(143,224,122,.18);
  background:linear-gradient(135deg,#10160f 0%,#0b0c0b 60%)
}
.th3s-glow{
  position:absolute;left:-12%;bottom:-55%;width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(94,183,72,.56),transparent 62%);
  filter:blur(50px);pointer-events:none;animation:th3sGlow 15s ease-in-out infinite alternate
}
@keyframes th3sGlow{0%{transform:translate(0,0) scale(1)}100%{transform:translate(14%,-10%) scale(1.25)}}
.th3s-copy,.th3s-actions{position:relative}
.th3s-big{
  font-size:clamp(52px,7.4vw,124px);line-height:.95;letter-spacing:-.06em;font-weight:500;
  margin:0 0 28px;color:#fff
}
.th3s-big a{color:#fff;text-decoration:none;transition:color .3s}
.th3s-big a:hover{color:var(--th3-green-lt)}
.th3s-lede{font-size:20px;line-height:1.5;color:#c9cec9;margin:0;max-width:34ch}
.th3s-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ── 2  premium CTA hover: a soft veil fills from the left, plus a small lift ── */
.th3s-main{
  grid-column:1 / -1;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 26px;border-radius:22px;
  background-color:var(--th3-green);color:#10200a!important;text-decoration:none!important;
  background-image:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18));
  background-repeat:no-repeat;background-size:0 100%;background-position:left center;
  transition:background-size .45s var(--th3-ease),transform .3s var(--th3-ease),box-shadow .3s var(--th3-ease)
}
.th3s-main:hover{background-size:100% 100%;transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.3)}
.th3s-main:active{transform:translateY(0);transition-duration:.1s}
.th3s-main b{display:block;font-size:19px;font-weight:600}
.th3s-main small{display:block;font-size:14px;opacity:.75}
.th3s-main svg{flex:0 0 auto}
.th3s-line{
  display:flex;align-items:center;gap:14px;padding:16px 22px;border-radius:18px;
  color:#fff!important;text-decoration:none!important;
  background:rgba(255,255,255,.04);border:1px solid var(--th3-line);
  transition:background .2s,border-color .2s,transform .3s var(--th3-ease)
}
.th3s-line:hover{background:rgba(255,255,255,.1);border-color:rgba(143,224,122,.45);transform:translateY(-2px)}
.th3s-line:active{transform:translateY(0)}
.th3s-line:last-child{grid-column:1 / -1}
.th3s-line svg{color:var(--th3-green-lt);flex:0 0 auto}
.th3s-line span{font-size:17px;font-weight:500}
.th3s-line small{display:block;font-size:13px;color:var(--th3-mut);font-weight:400}

/* ── the dark footer (same design as the homepage) ── */
.th3s-foot{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding:72px 0 48px}
.th3s-foot img{height:auto;max-width:64px;display:block}
.th3s-foot h3{font-size:14px;font-weight:500;color:var(--th3-mut);letter-spacing:0;margin:0 0 14px;text-transform:none}
.th3s-foot p{margin:0 0 14px;font-size:16px;line-height:1.7;color:#c9cec9}
.th3s-foot a,.th3s-foot-legal a{
  color:#fff;text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:background-size .4s var(--th3-ease)
}
.th3s-foot a:hover,.th3s-foot-legal a:hover{background-size:100% 1px;color:#fff}
.th3s-foot-legal{margin:0;padding-bottom:8px;font-size:13px;color:var(--th3-mut)}
/* footer area links (23 Sep 2026): the location pages */
.th3s-foot-area{margin-top:10px!important}
.th3s-foot-area a{color:var(--th3-green-lt)!important;text-decoration:none;border-bottom:1px solid rgba(143,224,122,.35)}
.th3s-foot-area a:hover{color:#fff!important;border-color:#fff}
.th3s-foot-areas{color:var(--th3-mut);font-size:14px;margin:36px 0 0;padding-top:24px;border-top:1px solid var(--th3-line)}
.th3s-foot-areas a{color:#fff!important;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.th3s-foot-areas a:hover{color:var(--th3-green-lt)!important;border-color:var(--th3-green-lt)}

@media (max-width:1024px){
  .th3s-panel{grid-template-columns:1fr;gap:36px;padding:56px 32px;border-radius:32px}
  .th3s-big{font-size:clamp(46px,11vw,76px)}
  .th3s-foot{grid-template-columns:1fr 1fr;gap:28px;padding:56px 0 36px}
}
@media (max-width:600px){
  .th3s-wrap{padding:0 16px}
  .th3s-end{padding-top:56px}
  .th3s-panel{padding:44px 22px;border-radius:26px}
  .th3s-actions{grid-template-columns:1fr}
  .th3s-lede{font-size:18px}
  .th3s-foot{grid-template-columns:1fr;gap:24px;padding:44px 0 28px}
}
@media (prefers-reduced-motion:reduce){
  .th3s-glow{animation:none!important}
  .th3s-main,.th3s-line,.th3s-mm-cta,#generate-slideout-menu .dropdown-menu-toggle{transition:none!important}
}

/* ═══════════════════════════════════════════════════════════════
   3  POP-UPS — booking (moved here from the homepage) and message
   ═══════════════════════════════════════════════════════════════ */

dialog.th3s-dlg{
  width:min(680px,94vw);padding:0;border:0;border-radius:28px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 40px 120px rgba(0,0,0,.45);
  color:var(--th3-ink);font-family:Poppins,system-ui,sans-serif;
  /* the booking form is taller than a laptop screen: scroll the form, not the page,
     and keep the close button pinned. [open] so the closed dialog still hides. */
  max-height:min(90vh,920px);overflow:hidden
}
dialog.th3s-dlg[open]{display:flex;flex-direction:column}
dialog.th3s-dlg::backdrop{background:rgba(5,7,5,.6)}
dialog.th3s-dlg *,dialog.th3s-dlg *::before,dialog.th3s-dlg *::after{box-sizing:border-box}
.th3s-f,.th3s-done{padding:44px 44px 36px;overflow-y:auto;overscroll-behavior:contain}
.th3s-x{
  position:absolute;right:16px;top:16px;z-index:2;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:0;
  border:1px solid rgba(0,0,0,.12);background:#fff;color:#222;
  cursor:pointer;transition:background .2s,color .2s,border-color .2s
}
.th3s-x svg{display:block}
.th3s-x:hover{background:#222;border-color:#222;color:#fff}
.th3s-h{font-size:clamp(26px,3vw,34px);font-weight:500;letter-spacing:-.02em;color:#222;margin:0 44px 10px 0;line-height:1.15}
.th3s-sub{color:#575760;margin:0 0 26px;font-size:16px;line-height:1.5}
.th3s-set{border:0;padding:0;margin:0 0 24px;min-width:0}
.th3s-set legend{font-size:14px;font-weight:500;color:#222;margin-bottom:10px;padding:0}
.th3s-days{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.th3s-times{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.th3s-chip{position:relative;flex:0 0 auto;cursor:pointer}
.th3s-chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.th3s-chip span{
  display:block;text-align:center;padding:12px 14px;border-radius:14px;
  border:1px solid rgba(0,0,0,.14);font-size:14px;font-weight:500;color:#222;
  transition:background .2s,border-color .2s,color .2s;white-space:nowrap
}
.th3s-chip span small{display:block;font-size:12px;font-weight:400;color:#575760}
.th3s-chip:hover span{border-color:var(--th3-green);background:rgba(94,183,72,.06)}
.th3s-chip input:checked + span{background:var(--th3-green);border-color:var(--th3-green);color:#10200a}
.th3s-chip input:checked + span small{color:#10200a}
.th3s-chip input:focus-visible + span{outline:2px solid var(--th3-green-ink);outline-offset:2px}
.th3s-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
.th3s-grid label{display:block;font-size:14px;font-weight:500;color:#222}
.th3s-grid small{color:#575760;font-weight:400}
.th3s-wide{grid-column:1 / -1}
/* the theme styles inputs by attribute (input[type="text"] etc.), which outranks a
   plain class selector — hence dialog.th3s-dlg in front to win on specificity */
dialog.th3s-dlg .th3s-grid input,
dialog.th3s-dlg .th3s-grid textarea{
  display:block;width:100%;margin-top:6px;padding:13px 14px;border-radius:12px;
  border:1px solid rgba(0,0,0,.16);background:#f7f8f9;color:#222;
  font:400 16px Poppins,system-ui,sans-serif;box-shadow:none
}
dialog.th3s-dlg .th3s-grid input::placeholder,
dialog.th3s-dlg .th3s-grid textarea::placeholder{color:#8a8a93}
dialog.th3s-dlg .th3s-grid input:focus,
dialog.th3s-dlg .th3s-grid textarea:focus{
  outline:0;border-color:var(--th3-green);background:#fff;color:#222;
  box-shadow:0 0 0 3px rgba(94,183,72,.18)
}
.th3s-hp{position:absolute!important;left:-9999px;opacity:0;height:0;width:0}
.th3s-err{
  margin:0 0 16px;padding:12px 14px;border-radius:12px;
  background:rgba(200,40,30,.07);border:1px solid rgba(200,40,30,.3);color:#b3261e;font-size:15px
}
.th3s-err a{color:#b3261e!important}
.th3s-go{
  display:flex;width:100%;align-items:center;justify-content:center;gap:8px;
  padding:16px 26px;border-radius:999px;border:0;cursor:pointer;
  background-color:var(--th3-green);color:#10200a;font:600 16px Poppins,system-ui,sans-serif;
  background-image:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18));
  background-repeat:no-repeat;background-size:0 100%;background-position:left center;
  transition:background-size .45s var(--th3-ease),transform .3s var(--th3-ease)
}
.th3s-go:hover{background-size:100% 100%;transform:translateY(-2px)}
.th3s-go:active{transform:translateY(0);transition-duration:.1s}
.th3s-go[disabled]{opacity:.6;cursor:default;transform:none}
.th3s-ghost{
  display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;
  border:1px solid rgba(0,0,0,.2);background:transparent;color:#222;
  font:600 16px Poppins,system-ui,sans-serif;cursor:pointer;transition:background .2s,color .2s,border-color .2s
}
.th3s-ghost:hover{background:#222;border-color:#222;color:#fff}
.th3s-note{margin:16px 0 0;font-size:13px;color:#575760;line-height:1.5}
.th3s-note a{color:var(--th3-green-ink)}
@media (max-width:600px){
  .th3s-f,.th3s-done{padding:36px 22px 26px}
  .th3s-times{grid-template-columns:repeat(3,1fr)}
  .th3s-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════
   7  ENQUIRY FORM in the new style  (body.th3ef-v2)
   The th3-forms plugin themes itself with CSS variables on .th3ef-wrap,
   so most of this is a retheme; the rest is layout. The plugin is untouched,
   so removing this block puts the old form straight back.
   Applies to the Contact Us form and the service-page forms.
   ═══════════════════════════════════════════════════════════════ */

body.th3ef-v2 .th3ef-wrap{
  --th3-border:#e2e5e2;
  --th3-input-bg:#f7f8f9;
  --th3-text:#222;
  --th3-label:#222;
  --th3-muted:#575760;
  --th3-accent:#5EB748;
  --th3-accent-h:#4da13a;
  --th3-accent-rgb:94,183,72;
  --th3-radius:12px;
}
/* white card on the dark section, matching the pop-ups */
body.th3ef-v2 .th3ef-card{
  background:#fff;
  max-width:860px;
  padding:48px 48px 40px;
  border-radius:28px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 30px 80px rgba(0,0,0,.28)
}
body.th3ef-v2 .th3ef-form{gap:22px}

/* labels */
body.th3ef-v2 .th3ef-form label,
body.th3ef-v2 .th3ef-label{font-size:14px;font-weight:500;color:#222}
body.th3ef-v2 .th3ef-label__hint{color:#575760;font-weight:400}

/* Fields. The plugin marks these !important, so the overrides have to match it. */
body.th3ef-v2 .th3ef-wrap .th3ef-form input[type="text"],
body.th3ef-v2 .th3ef-wrap .th3ef-form input[type="email"],
body.th3ef-v2 .th3ef-wrap .th3ef-form input[type="tel"],
body.th3ef-v2 .th3ef-wrap .th3ef-form select,
body.th3ef-v2 .th3ef-wrap .th3ef-form textarea{
  background:#f7f8f9!important;
  border:1px solid rgba(0,0,0,.16)!important;
  border-radius:12px!important;
  color:#222!important;
  font-size:16px!important;
  padding:13px 14px!important;
  box-shadow:none;
  transition:border-color .2s,box-shadow .2s,background .2s
}
body.th3ef-v2 .th3ef-wrap .th3ef-form input:focus,
body.th3ef-v2 .th3ef-wrap .th3ef-form select:focus,
body.th3ef-v2 .th3ef-wrap .th3ef-form textarea:focus{
  outline:0;
  border-color:var(--th3-green)!important;
  background:#fff!important;
  box-shadow:0 0 0 3px rgba(94,183,72,.18)
}
body.th3ef-v2 .th3ef-wrap .th3ef-form input::placeholder,
body.th3ef-v2 .th3ef-wrap .th3ef-form textarea::placeholder{color:#8a8a93}
/* the plugin's own valid/invalid states, retuned to the new palette */
body.th3ef-v2 .th3ef-wrap .th3ef-form input.th3ef--invalid,
body.th3ef-v2 .th3ef-wrap .th3ef-form textarea.th3ef--invalid{
  border-color:#b3261e!important;box-shadow:0 0 0 3px rgba(200,40,30,.12)
}
body.th3ef-v2 .th3ef-wrap .th3ef-form input.th3ef--valid,
body.th3ef-v2 .th3ef-wrap .th3ef-form textarea.th3ef--valid{
  border-color:var(--th3-green)!important;box-shadow:0 0 0 3px rgba(94,183,72,.12)
}
body.th3ef-v2 .th3ef-select-arrow{color:#575760}

/* service picker: quiet chips that fill green when chosen, like the booking slots */
body.th3ef-v2 .th3ef-checkgroup{gap:8px}
body.th3ef-v2 .th3ef-check__label{
  font-size:14px;font-weight:500;color:#222;
  background:#fff;border:1px solid rgba(0,0,0,.16);border-radius:12px;
  padding:10px 16px;min-height:0;
  transition:background .2s,border-color .2s,color .2s
}
body.th3ef-v2 .th3ef-check__label:hover{border-color:var(--th3-green);background:rgba(94,183,72,.06)}
body.th3ef-v2 .th3ef-check input:checked ~ .th3ef-check__label{
  background:var(--th3-green);border-color:var(--th3-green);color:#10200a;font-weight:600
}
body.th3ef-v2 .th3ef-check input:focus-visible ~ .th3ef-check__label{
  outline:2px solid var(--th3-green-ink);outline-offset:2px
}

/* privacy note */
body.th3ef-v2 .th3ef-privacy{font-size:13px;color:#575760;line-height:1.5}
body.th3ef-v2 .th3ef-privacy a{color:var(--th3-green-ink)}

/* submit: the same pill and veil hover as the pop-ups, full width */
body.th3ef-v2 .th3ef-submit-row{justify-content:stretch}
body.th3ef-v2 .th3ef-btn{
  width:100%;justify-content:center;gap:10px;
  padding:17px 26px;border-radius:999px;border:0;
  background-color:var(--th3-green);color:#10200a;
  font:600 16px Poppins,system-ui,sans-serif;
  background-image:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18));
  background-repeat:no-repeat;background-size:0 100%;background-position:left center;
  box-shadow:none;
  transition:background-size .45s var(--th3-ease),transform .3s var(--th3-ease)
}
body.th3ef-v2 .th3ef-btn:hover:not(:disabled){
  background-color:var(--th3-green);background-size:100% 100%;transform:translateY(-2px);box-shadow:none
}
body.th3ef-v2 .th3ef-btn:active:not(:disabled){transform:translateY(0)}
body.th3ef-v2 .th3ef-btn:disabled{opacity:.6;transform:none}

/* error and success states on the white card */
body.th3ef-v2 .th3ef-errors{
  background:rgba(200,40,30,.07);border:1px solid rgba(200,40,30,.3);
  color:#b3261e;border-radius:12px;padding:12px 14px;font-size:15px
}
body.th3ef-v2 .th3ef-field__error{color:#b3261e;font-size:13px}
body.th3ef-v2 .th3ef-success__message{color:#222}

@media (max-width:820px){
  body.th3ef-v2 .th3ef-card{padding:32px 20px 28px;border-radius:22px}
}
/* The service-page form sits in a half-width column (about 500px), where two
   columns clip the email placeholder and knock the two selects out of line.
   Tighter padding there, and one column per row. */
body.th3ef-v2 .service-form .th3ef-card{padding:32px 28px 28px;border-radius:22px}
body.th3ef-v2 .service-form .th3ef-row--2col{flex-direction:column;gap:18px}
/* Backstop for any other narrow placement: collapse the rows on card width. */
body.th3ef-v2 .th3ef-card{container-type:inline-size}
@container (max-width:560px){
  body.th3ef-v2 .th3ef-row--2col{flex-direction:column;gap:18px}
}
@media (prefers-reduced-motion:reduce){
  body.th3ef-v2 .th3ef-btn,body.th3ef-v2 .th3ef-check__label{transition:none!important}
}

/* ═══════════════════════════════════════════════════════════════
   8  QUOTE POP-UP + SCROLLING SERVICES BAND  (body.th3q-on)
   The old on-page "Let's talk" section (anchor #get-a-quote, which also held
   the SEO and website audit forms) is hidden here while the change is in
   review; at go-live the block is deleted from each page and this rule goes.
   ═══════════════════════════════════════════════════════════════ */

body.th3q-strip #get-a-quote{display:none!important}

/* ── scrolling services band, as on the homepage ── */
.th3s-kinetic{
  background:var(--th3-ink);overflow:hidden;padding:96px 0 0;
  font-family:Poppins,system-ui,sans-serif
}
.th3s-krow{white-space:nowrap;line-height:1;will-change:transform;transform:translate3d(var(--kx1,0),0,0)}
.th3s-krow span{
  display:inline-block;font-size:clamp(44px,6.4vw,104px);font-weight:500;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.2)
}
.th3s-krow span::before{content:attr(data-k)}
@media (max-width:600px){.th3s-kinetic{padding:56px 0 0}}
/* the band sits directly above the panel, so the panel loses its own run-up */
body.th3q-on .th3s-end{padding-top:56px}
@media (max-width:600px){body.th3q-on .th3s-end{padding-top:36px}}
@media (prefers-reduced-motion:reduce){.th3s-krow{transform:none!important}}

/* ── quote pop-up: the enquiry form inside a dialog ── */
dialog.th3s-qt{width:min(860px,94vw)}
.th3s-qt-body{padding:44px 44px 36px;overflow-y:auto;overscroll-behavior:contain}
.th3s-qt-body .th3s-h{margin-right:44px}
/* the dialog is already the white card, so the form's own card steps back */
body.th3ef-v2 dialog.th3s-qt .th3ef-card{
  background:transparent;border:0;box-shadow:none;padding:0;max-width:none;border-radius:0
}
@media (max-width:600px){.th3s-qt-body{padding:36px 22px 26px}}

/* ═══════════════════════════════════════════════════════════════
   9  CONTACT PAGE in the new style  (body.th3c-on)
   Replaces the light hero, the plain office details and the two Google
   Maps iframes. The maps were held back by the cookie banner's
   "preferences" category (data-cc-src), so for anyone who had not
   accepted they rendered as a 620px blank gap; they are now direction
   links instead, which work for everyone and load nothing third-party.
   ═══════════════════════════════════════════════════════════════ */

body.th3c-on .th3c{background:var(--th3-ink);font-family:Poppins,system-ui,sans-serif;color:#fff}
.th3c-wrap{max-width:1340px;margin:0 auto;padding:0 24px}
.th3c *,.th3c *::before,.th3c *::after{box-sizing:border-box}

/* ── hero ──
   The header is merged over the top of this section, so the padding has to clear
   it: 210px matches the homepage hero exactly (46px of air under the nav). At
   150px the headline sat 14px above the header's bottom edge and overlapped it. */
.th3c-hero{position:relative;overflow:hidden;padding:210px 0 80px}
.th3c-hero .th3c-glow{
  position:absolute;left:-10%;top:-40%;width:55%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(94,183,72,.52),transparent 62%);
  filter:blur(60px);pointer-events:none;animation:th3sGlow 15s ease-in-out infinite alternate
}
.th3c-hero > .th3c-wrap{position:relative}
/* same scale as the homepage H1 (it was larger: 84px against 66px at 1440) */
.th3c-h1{
  font-size:clamp(36px,4.6vw,76px);line-height:1.04;letter-spacing:-.03em;font-weight:500;
  margin:0 0 28px;max-width:16ch;color:#fff;text-wrap:balance
}
.th3c-lede{font-size:20px;line-height:1.55;color:#c9cec9;margin:0 0 44px;max-width:56ch}

/* quick contact row: same tiles as the "Let's talk" panel */
.th3c-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:1040px}
.th3c-quick .th3s-main{grid-column:1 / -1}
.th3c-quick .th3s-line:last-child{grid-column:auto}

/* ── offices ── */
.th3c-offices{padding:40px 0 40px}
.th3c-h2{font-size:clamp(28px,3.4vw,44px);font-weight:500;letter-spacing:-.03em;margin:0 0 32px;color:#fff}
.th3c-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.th3c-card{
  position:relative;padding:40px;border-radius:28px;
  border:1px solid rgba(143,224,122,.18);
  background:linear-gradient(135deg,#10160f 0%,#0b0c0b 60%)
}
.th3c-card h3{font-size:24px;font-weight:600;margin:0 0 22px;color:#fff;letter-spacing:-.01em}
.th3c-row{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid rgba(255,255,255,.08)}
.th3c-row:first-of-type{border-top:0;padding-top:0}
.th3c-row svg{color:var(--th3-green-lt);flex:0 0 auto;margin-top:3px}
.th3c-row small{display:block;font-size:13px;color:var(--th3-mut);margin-bottom:2px}
.th3c-row a,.th3c-row span{font-size:17px;font-weight:500;color:#fff;text-decoration:none;line-height:1.45}
.th3c-row a{
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:background-size .4s var(--th3-ease)
}
.th3c-row a:hover{background-size:100% 1px;color:#fff}
.th3c-dir{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  padding:13px 22px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);color:#fff!important;text-decoration:none!important;
  font-size:15px;font-weight:600;background:none!important;
  transition:background-color .2s,border-color .2s,transform .3s var(--th3-ease)
}
.th3c-dir:hover{background-color:rgba(255,255,255,.1)!important;border-color:rgba(143,224,122,.5);transform:translateY(-2px)}
.th3c-dir:active{transform:translateY(0)}

@media (max-width:1024px){
  /* the header is merged on phones too, so the padding has to clear it there as well */
  .th3c-hero{padding:170px 0 60px}
  .th3c-quick{grid-template-columns:1fr 1fr}
  .th3c-grid{grid-template-columns:1fr}
  .th3c-offices{padding:30px 0 30px}
}
@media (max-width:600px){
  .th3c-wrap{padding:0 16px}
  .th3c-hero{padding:140px 0 48px}
  .th3c-lede{font-size:18px;margin-bottom:32px}
  .th3c-quick{grid-template-columns:1fr}
  .th3c-card{padding:28px 22px;border-radius:22px}
}
@media (prefers-reduced-motion:reduce){.th3c-hero .th3c-glow{animation:none!important}}

/* office photo at the top of each card */
.th3c-card{padding:0;overflow:hidden}
.th3c-photo{
  display:block;width:100%;height:230px;object-fit:cover;
  border-bottom:1px solid rgba(143,224,122,.18)
}
.th3c-body{padding:32px 40px 40px}
@media (max-width:600px){
  .th3c-photo{height:180px}
  .th3c-body{padding:26px 22px 30px}
}

/* The "Let's Talk" form section is a #282828 band between two blacks, which reads
   as a seam. Matched to the ink so the page is one surface. */
body.th3c-on .gb-container-f9d7dd68{background-color:var(--th3-ink)!important}
/* "Let's Talk" is an H2 now (it was an H3 under no H2 of its own), styled as the
   page's other H2 rather than at the theme's heading size */
body.th3c-on .gb-headline-e1df81f4{font-size:clamp(28px,3.4vw,44px);font-weight:500;letter-spacing:-.03em;line-height:1.2}

/* "Services of Interest" removed from the enquiry form (kept in the markup, so
   turning it back on is one rule). display:none also takes the checkboxes out of
   the tab order, rather than leaving them reachable but invisible. */
body.th3ef-v2 .th3ef-checkgroup,
body.th3ef-v2 .th3ef-label{display:none}
body.th3ef-v2 .th3ef-field:has(.th3ef-checkgroup){display:none}

/* ── contact page: load-in and reveal, matching the homepage ──
   Everything is gated on html.js-motion, which is only set when JavaScript runs
   and the visitor has not asked for reduced motion, with a 2.5s failsafe that
   drops the flag so nothing can be left invisible. */
@keyframes th3cUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
html.js-motion body.th3c-on .th3c-h1{animation:th3cUp 1s var(--th3-ease) both}
html.js-motion body.th3c-on .th3c-lede{animation:th3cUp 1s var(--th3-ease) .15s both}
html.js-motion body.th3c-on .th3c-quick{animation:th3cUp 1s var(--th3-ease) .3s both}
html.js-motion body.th3c-on [data-reveal]{
  opacity:0;transform:translateY(48px);
  transition:opacity .9s var(--th3-ease),transform 1.1s var(--th3-ease);
  transition-delay:calc(var(--d,0) * 90ms)
}
html.js-motion body.th3c-on [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js-motion body.th3c-on .th3c-h1,
  html.js-motion body.th3c-on .th3c-lede,
  html.js-motion body.th3c-on .th3c-quick{animation:none!important}
  html.js-motion body.th3c-on [data-reveal]{opacity:1!important;transform:none!important}
}

/* The privacy link was green text in a grey line with no underline, so it was
   distinguishable by colour alone (the one accessibility finding on the page). */
body.th3ef-v2 .th3ef-privacy a{text-decoration:underline;text-underline-offset:2px}

/* The "Let's Talk" band carried 120px of its own top padding on top of the 110px
   under the studio cards, which left a 235px hole between the two sections. */
body.th3c-on .gb-container-f9d7dd68 > .gb-inside-container{padding-top:60px}
@media (max-width:600px){
  body.th3c-on .gb-container-f9d7dd68 > .gb-inside-container{padding-top:40px}
}

/* ═══════════════════════════════════════════════════════════════
   10  ABOUT PAGE in the new style  (body.th3a-on)
   Dark page with white rounded panels, as on the homepage: type-led hero,
   team gallery, story + figures (light), Creative Director quote (dark),
   the eight services as links (light), clients + logo marquee + reasons (dark).
   ═══════════════════════════════════════════════════════════════ */

body.th3a-on .th3a{background:var(--th3-ink);font-family:Poppins,system-ui,sans-serif;color:#fff}
.th3a *,.th3a *::before,.th3a *::after{box-sizing:border-box}
.th3a-wrap{max-width:1340px;margin:0 auto;padding:0 24px}
.th3a p{margin:0 0 18px}
.th3a p:last-child{margin-bottom:0}

/* ── hero: the film is the backdrop. It runs to the top and right edges of the page
   and dissolves into the background on the left (and at the bottom), with the
   intro sitting over the faded side. ── */
.th3a-hero{position:relative;overflow:hidden;padding:230px 0 130px;min-height:min(880px,100vh);display:flex;align-items:center}
.th3a-hero > .th3a-wrap{position:relative;z-index:2;width:100%}
.th3a-film{
  position:absolute;top:0;right:0;bottom:0;width:68%;z-index:0;
  background:#0b0c0b url(https://www.th3design.co.uk/wp-content/uploads/2026/09/th3-about-video-poster-1280x720.jpg) 40% 50%/cover;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 38%,#000 66%),linear-gradient(to top,transparent 0%,#000 26%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 38%,#000 66%),linear-gradient(to top,transparent 0%,#000 26%);
  mask-composite:intersect
}
.th3a-video{display:block;width:100%;height:100%;object-fit:cover;object-position:40% 50%}
/* keeps the white menu readable where it crosses the film */
.th3a-hero::before{content:"";position:absolute;inset:0 0 auto 0;height:220px;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(11,12,11,.72),transparent)}
.th3a-intro{max-width:640px}
.th3a-h1{
  font-size:clamp(36px,4.1vw,62px);line-height:1.06;letter-spacing:-.04em;font-weight:500;
  margin:0 0 26px;color:#fff;text-wrap:balance
}
.th3a-lede{font-size:18px;line-height:1.65;color:#d5d9d5;margin:0 0 34px!important;max-width:52ch}
.th3a-btns{display:flex;flex-wrap:wrap;gap:12px}

/* ── team gallery: wider than the text column, led by the one high-res photo ── */
.th3a-gallery{padding:0 0 120px}
.th3a-gallery .th3a-wrap{max-width:1680px}
.th3a-grid{
  display:grid;gap:18px;
  grid-template-columns:repeat(6,1fr);grid-template-rows:320px 320px 300px 300px;
  grid-template-areas:
    "big big big big a a"
    "big big big big a a"
    "b b c c d d"
    "e e f f f f"
}
.th3a-g{margin:0;border-radius:26px;overflow:hidden;background:#151715}
.th3a-g img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--th3-ease)}
.th3a-g:hover img{transform:scale(1.04)}
.g-big{grid-area:big}.g-a{grid-area:a}.g-b{grid-area:b}.g-c{grid-area:c}.g-d{grid-area:d}.g-e{grid-area:e}.g-f{grid-area:f}
.g-big img{object-position:50% 40%}

/* buttons: the same veil-and-lift hover as the rest of the site */
.th3a-btn{
  display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;
  font-weight:600;font-size:16px;text-decoration:none!important;border:1px solid transparent;
  transition:background-size .45s var(--th3-ease),background-color .25s,color .25s,border-color .25s,transform .3s var(--th3-ease)
}
.th3a-btn:hover{transform:translateY(-2px)}
.th3a-btn:active{transform:translateY(0)}
.th3a-btn-primary{
  background-color:var(--th3-green);color:#10200a!important;
  background-image:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18));
  background-repeat:no-repeat;background-size:0 100%;background-position:left center
}
.th3a-btn-primary:hover{background-size:100% 100%}
.th3a-btn-ghost{border-color:rgba(255,255,255,.35);color:#fff!important}
.th3a-btn-ghost:hover{background-color:#fff;color:#111!important;border-color:#fff}
.th3a-btn-dark{border-color:rgba(0,0,0,.25);color:#222!important}
.th3a-btn-dark:hover{background-color:#222;color:#fff!important;border-color:#222}

/* ── light panels ── */
.th3a-light{padding:0 24px}
.th3a-panel{background:#f7f8f9;color:#222;border-radius:40px;padding:110px 0}
.th3a-panel .th3a-wrap{padding:0 56px}
.th3a-h2{
  font-size:clamp(30px,3.8vw,54px);line-height:1.08;letter-spacing:-.035em;font-weight:500;
  margin:0;text-wrap:balance;color:inherit
}
.th3a-story{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:72px;align-items:start}
.th3a-story p{font-size:18px;line-height:1.65}
.th3a-panel .th3a-story p{color:#3c3c42}
.th3a-panel a:not(.th3a-btn){color:var(--th3-green-ink);text-decoration:underline;text-underline-offset:3px}
.th3a-stats{list-style:none;margin:72px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.th3a-stats li{background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:24px;padding:30px 32px}
/* brand green is 2.5:1 on white; #47A034 is the nearest green that passes 3:1 for large type */
.th3a-stats b{display:block;font-size:clamp(40px,4.4vw,64px);font-weight:500;letter-spacing:-.04em;line-height:1;color:#47A034}
.th3a-stats span{display:block;margin-top:10px;font-size:16px;color:#575760}

/* ── quote ── */
.th3a-quote{padding:120px 0}
.th3a-quote-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:72px;align-items:center}
.th3a-portrait{margin:0;border-radius:28px;overflow:hidden}
.th3a-portrait img{display:block;width:100%;height:auto}
.th3a-quote blockquote{margin:0;padding:0;border:0;background:none}
.th3a-quote blockquote p{font-size:clamp(22px,2.5vw,34px);line-height:1.35;letter-spacing:-.02em;font-weight:400;color:#fff;font-style:normal}
.th3a-quote footer{margin-top:28px;display:flex;flex-direction:column;gap:2px}
.th3a-quote footer b{font-size:17px;font-weight:600;color:#fff}
.th3a-quote footer span{font-size:15px;color:var(--th3-mut)}

/* ── services as links ── */
.th3a-head{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:48px}
.th3a-head .th3a-h2{max-width:18ch}
.th3a-svcs{list-style:none;margin:0;padding:0;border-top:1px solid rgba(0,0,0,.12)}
.th3a-svc{border-bottom:1px solid rgba(0,0,0,.12)}
.th3a-svc a{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr) 56px;gap:32px;align-items:center;
  padding:30px 0;color:#111!important;text-decoration:none!important;
  transition:padding .45s var(--th3-ease)
}
.th3a-svc h3{margin:0;font-size:clamp(22px,2.4vw,34px);font-weight:500;letter-spacing:-.025em;line-height:1.15;color:inherit;transition:color .25s}
.th3a-svc p{margin:0;font-size:16px;line-height:1.55;color:#575760}
.th3a-svc p b{color:#222;font-weight:600}
.th3a-go{
  width:52px;height:52px;border-radius:50%;border:1px solid rgba(0,0,0,.2);
  display:flex;align-items:center;justify-content:center;justify-self:end;color:#111;
  transition:background-color .3s,border-color .3s,color .3s,transform .45s var(--th3-ease)
}
.th3a-svc a:hover{padding-left:14px}
.th3a-svc a:hover h3{color:var(--th3-green-ink)}
.th3a-svc a:hover .th3a-go{background-color:var(--th3-green);border-color:var(--th3-green);color:#10200a;transform:rotate(45deg)}

/* ── clients ── */
.th3a-clients{padding:120px 0 40px}
.th3a-clients .th3a-story p{color:#c9cec9}
.th3a-clients .th3a-btn{margin-top:10px}
.th3a-marquee{
  display:flex;overflow:hidden;margin:80px 0 72px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent)
}
.th3a-track{
  list-style:none;margin:0;padding:0 36px 0 0;display:flex;gap:72px;flex:0 0 auto;align-items:center;
  animation:th3aScroll 46s linear infinite
}
.th3a-marquee:hover .th3a-track{animation-play-state:paused}
@keyframes th3aScroll{to{transform:translateX(-100%)}}
/* The logo files are black on a solid white box. A blend mode can't reach the page
   through the animated track (it is its own stacking context), so the invert is
   tuned instead: invert(.957) turns the white box into rgb(11,11,11), one step off
   the page's #0b0c0b, and the black artwork into near-white. */
.th3a-track img{display:block;height:64px;width:auto;filter:invert(.957);opacity:.62}
/* reviews: one at a time, as on the homepage */
.th3a-reviews{margin:0 0 88px;padding:56px 64px;border-radius:32px;border:1px solid var(--th3-line);background:rgba(255,255,255,.03)}
.th3a-rv-stage{display:grid}
.th3a-rv{grid-area:1 / 1;margin:0;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .7s var(--th3-ease),transform .7s var(--th3-ease),visibility 0s .7s}
.th3a-rv.on{opacity:1;visibility:visible;transform:none;transition:opacity .7s var(--th3-ease) .15s,transform .7s var(--th3-ease) .15s,visibility 0s}
.th3a-rv blockquote{margin:0;padding:0;border:0;background:none}
.th3a-rv blockquote p{font-size:clamp(20px,2.2vw,30px);line-height:1.4;letter-spacing:-.015em;color:#fff;margin:0;font-style:normal;max-width:34em}
.th3a-rv figcaption{margin-top:26px;display:flex;flex-direction:column;gap:2px}
.th3a-rv figcaption b{font-size:17px;font-weight:600;color:#fff}
.th3a-rv figcaption span{font-size:15px;color:var(--th3-mut)}
.th3a-rv-dots{display:flex;gap:10px;margin-top:34px}
.th3a-rv-dots button{width:34px;height:6px;border-radius:99px;border:0;padding:0;background:rgba(255,255,255,.22);cursor:pointer;transition:background-color .3s,width .4s var(--th3-ease)}
.th3a-rv-dots button.on{background:var(--th3-green-lt);width:56px}
.th3a-rv-dots button:focus-visible{outline:2px solid var(--th3-green-lt);outline-offset:3px}
.th3a-why{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.th3a-why li{
  display:flex;align-items:center;gap:12px;padding:20px 22px;border-radius:18px;
  background:rgba(255,255,255,.04);border:1px solid var(--th3-line);font-size:16px;font-weight:500;line-height:1.35
}
.th3a-why svg{color:var(--th3-green-lt);flex:0 0 auto}

/* ── motion: same flag and timings as the homepage and contact page ── */
html.js-motion body.th3a-on .th3a-h1{animation:th3cUp 1s var(--th3-ease) both}
html.js-motion body.th3a-on .th3a-lede{animation:th3cUp 1s var(--th3-ease) .12s both}
html.js-motion body.th3a-on .th3a-btns{animation:th3cUp 1s var(--th3-ease) .24s both}
/* The film is the largest element in the first screen, so it paints straight away:
   it settles from a slight zoom but never starts invisible (an opacity-0 start
   pushed Largest Contentful Paint back). */
html.js-motion body.th3a-on .th3a-film{animation:th3aFilm 2.2s var(--th3-ease) both}
@keyframes th3aFilm{from{transform:scale(1.07)}to{transform:none}}
@keyframes th3aRise{from{opacity:0;transform:translateY(60px) scale(.96)}to{opacity:1;transform:none}}
html.js-motion body.th3a-on [data-reveal]{
  opacity:0;transform:translateY(48px);
  transition:opacity .9s var(--th3-ease),transform 1.1s var(--th3-ease);
  transition-delay:calc(var(--d,0) * 90ms)
}
html.js-motion body.th3a-on [data-reveal].in{opacity:1;transform:none}
/* gallery tiles: a curtain wipe instead of the fade-up. Each tile is uncovered from
   its own direction while the photo inside settles from a slight zoom. */
html.js-motion body.th3a-on .th3a-g[data-reveal]{
  opacity:1;transform:none;
  clip-path:inset(100% 0 0 0 round 26px);
  transition:clip-path 1.35s var(--th3-ease);transition-delay:calc(var(--d,0) * 140ms)
}
html.js-motion body.th3a-on .th3a-g[data-wipe="left"]{clip-path:inset(0 100% 0 0 round 26px)}
html.js-motion body.th3a-on .th3a-g[data-wipe="right"]{clip-path:inset(0 0 0 100% round 26px)}
html.js-motion body.th3a-on .th3a-g[data-reveal].in{clip-path:inset(0 0 0 0 round 26px)}
html.js-motion body.th3a-on .th3a-g[data-reveal] img{transform:scale(1.28);transition:transform 1.9s var(--th3-ease);transition-delay:calc(var(--d,0) * 140ms)}
html.js-motion body.th3a-on .th3a-g[data-reveal].in img{transform:scale(1)}
html.js-motion body.th3a-on .th3a-g[data-reveal].in:hover img{transform:scale(1.04);transition-delay:0s;transition-duration:1.4s}

@media (max-width:1024px){
  .th3a-hero{padding:190px 0 90px;min-height:0}
  .th3a-film{width:100%;opacity:.5;-webkit-mask-image:linear-gradient(to top,transparent 0%,#000 45%);mask-image:linear-gradient(to top,transparent 0%,#000 45%);-webkit-mask-composite:source-over;mask-composite:add}
  .th3a-reviews{padding:40px 32px}
  .th3a-grid{grid-template-columns:repeat(4,1fr);grid-template-rows:420px 260px 260px 260px;grid-template-areas:"big big big big" "a a b b" "a a c c" "d e f f"}
  .th3a-story,.th3a-quote-grid{grid-template-columns:1fr;gap:36px}
  .th3a-portrait{max-width:420px}
  .th3a-panel{padding:80px 0;border-radius:32px}
  .th3a-panel .th3a-wrap{padding:0 32px}
  .th3a-svc a{grid-template-columns:1fr 56px;gap:8px 20px}
  .th3a-svc p{grid-column:1;grid-row:2}
  .th3a-go{grid-row:1 / span 2;grid-column:2}
  .th3a-why{grid-template-columns:1fr 1fr}
  .th3a-quote,.th3a-clients{padding-top:88px}
  .th3a-quote{padding-bottom:88px}
}
@media (max-width:600px){
  .th3a-wrap{padding:0 16px}
  .th3a-hero{padding:150px 0 64px}
  .th3a-lede{font-size:17px}
  .th3a-reviews{padding:30px 22px;border-radius:24px;margin-bottom:56px}
  .th3a-gallery{padding-bottom:72px}
  .th3a-grid{gap:10px;grid-template-columns:1fr 1fr;grid-template-rows:250px 170px 170px 150px 200px;grid-template-areas:"big big" "a b" "a c" "d e" "f f"}
  .th3a-g{border-radius:18px}
  .th3a-light{padding:0 10px}
  .th3a-panel{padding:60px 0;border-radius:26px}
  .th3a-panel .th3a-wrap{padding:0 20px}
  .th3a-stats{grid-template-columns:1fr;margin-top:44px}
  .th3a-head{flex-direction:column;align-items:flex-start;margin-bottom:32px}
  .th3a-svc a{padding:22px 0}
  .th3a-go{width:44px;height:44px}
  .th3a-marquee{margin:56px 0}
  .th3a-track{gap:44px}
  .th3a-track img{height:48px}
  .th3a-why{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .th3a-track,.th3a-film{animation:none!important}
  .th3a-rv{transition:none!important}
  html.js-motion body.th3a-on .th3a-g[data-reveal]{clip-path:none!important}
  html.js-motion body.th3a-on .th3a-g[data-reveal] img{transform:none!important}
  .th3a-btn,.th3a-g img,.th3a-svc a,.th3a-go{transition:none!important}
  html.js-motion body.th3a-on [data-reveal]{opacity:1!important;transform:none!important}
}


/* ═══ NAV V2 (22 Sep 2026, preview behind TH3_NAV_V2): the capsule is the header ═══
   Desktop: the primary nav is fixed from page load, styled as the capsule (the rules
   above match body.th3-nav2 #site-navigation too), and never hides; GeneratePress's
   sticky clone is switched off. Mobile: the mobile header becomes fixed, slides away
   when scrolling down and back in when scrolling up (th3-glass.js sets the classes). */
body.th3-nav2 #sticky-navigation{display:none!important}
@media (min-width:1025px){
  body.th3-nav2 #site-navigation{position:fixed;top:14px;left:0;right:0;z-index:1000;background:transparent!important;box-shadow:none!important;pointer-events:none}
  body.th3-nav2 #site-navigation .inside-navigation{pointer-events:auto}
  body.th3-nav2 #site-navigation .navigation-branding,body.th3-nav2 #site-navigation .sticky-navigation-logo{display:block}
  body.th3-nav2 #site-navigation .navigation-branding img{height:38px;width:auto;padding:0}
  /* the theme header's own logo would sit behind the capsule: the capsule carries the logo */
  body.th3-nav2 .site-header .inside-header > .site-logo{display:none}
  body.th3-nav2 .site-header .inside-header{min-height:0;padding:0}
  /* pages without the merged (transparent) header keep room for the fixed bar */
  body.th3-nav2:not(:has(.header-wrap)) .site-header{min-height:104px}
}
@media (max-width:1024px){
  body.th3-nav2 #mobile-header{position:fixed;top:0;left:0;right:0;z-index:1000;transition:transform .45s var(--th3-ease),background-color .3s}
  body.th3-nav2.th3-mob-hide #mobile-header:not(.toggled){transform:translateY(-100%)}
  body.th3-nav2 #mobile-header.th3-mob-glass{padding:10px 12px 0;background:transparent!important}
  body.th3-nav2 #mobile-header.th3-mob-glass .inside-navigation{border-radius:999px;border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.9);padding:0 8px 0 14px;min-height:60px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
  body.th3-nav2 #mobile-header.th3-mob-glass .menu-toggle{color:#222!important}
  body.th3-nav2 #mobile-header.th3-mob-glass .site-logo img{content:url(https://www.th3design.co.uk/wp-content/uploads/2022/07/th3-green-1.png);height:36px;width:auto}
  /* the page hero (posts, blog) sits before .site-content, so the room goes on the body */
  body.th3-nav2:not(:has(.header-wrap)){padding-top:94px}
  body.th3-nav2:not(:has(.header-wrap)) .site-header{display:none}
}

/* ═══ Header "Start a project" (22 Sep 2026, preview behind TH3_NAV_START) ═══
   Desktop: the menu item is appended last by functions.php, so the capsule's
   last-child pill rule above styles it. Mobile: th3-site.js adds a pill to the
   mobile header bar, before the menu toggle. */
.th3-start-m{display:none}
@media (max-width:1024px){
  body.th3-start #mobile-header .inside-navigation{display:flex;align-items:center}
  body.th3-start #mobile-header .th3-start-m{
    display:inline-flex;align-items:center;margin-left:auto;margin-right:6px;
    height:40px;padding:0 16px;border-radius:999px;white-space:nowrap;
    background:var(--th3-green);color:#10200a!important;
    font:600 14px/1 Poppins,system-ui,sans-serif;letter-spacing:0;text-decoration:none!important;
    transition:transform .3s var(--th3-ease)
  }
  body.th3-start #mobile-header .th3-start-m:active{transform:scale(.97)}
  body.th3-start #mobile-header .mobile-menu-control-wrapper{margin-left:0}
}
@media (max-width:360px){
  body.th3-start #mobile-header .th3-start-m{padding:0 12px;font-size:13px}
}

/* ═══ Tweaks for Tom, live 22 Sep late (staged first under body.th3-pv, the
   preview-token body class kept in functions.php for future staging).
   1 Contact hero centred, and the "Two studios, one team" heading with it.
   2 Capsule: logo 44px (the pill's height) and the same 11px inset both ends,
   so logo and pill sit equally close to the edges. ═══ */
.th3c-hero > .th3c-wrap{text-align:center}
.th3c-h1,.th3c-lede{margin-left:auto;margin-right:auto}
.th3c-quick{margin:0 auto;text-align:left}
.th3c-offices .th3c-h2{text-align:center}
@media (min-width:1025px){
  body.th3-nav2 #site-navigation .inside-navigation{padding:0 11px}
  body.th3-nav2 #site-navigation .navigation-branding img{height:44px}
}

/* 24 Sep 2026 (Tom approved): About hero on phones/tablets shows the photo clearly
   across the top, fading into the page behind the text (same treatment as the service pages); hero buttons
   full width on phones. Drop the prefix at go-live. */
@media (max-width:1024px){
  .th3a-hero{padding-top:min(62vw,420px)}
  .th3a-film{opacity:1;top:0;bottom:auto;height:min(100vw,640px);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 100%)}
  .th3a-hero::before{height:150px;background:linear-gradient(to bottom,rgba(11,12,11,.55),transparent)}
  .th3a-h1,.th3a-lede{text-shadow:0 2px 24px rgba(0,0,0,.45)}
}
@media (max-width:600px){
  .th3a-hero{padding-top:min(66vw,290px)}
  .th3a-film{height:min(100vw,430px)}
  .th3a-hero .th3a-btns{display:grid;grid-template-columns:1fr;gap:10px}
  .th3a-hero .th3a-btn{width:100%;justify-content:center;text-align:center}
}

/* 24 Sep 2026 (Tom): no "Start a project" pill in the phone header; the slide-out menu already ends with
   "Book a free consultation" and both phone numbers. Desktop keeps its button. */
#mobile-header .th3-start-m{display:none!important}

/* ═══ Contact hero glow (27 Sep, Tom: the gradient looked odd). The glow sat
   off to the left from before the hero was centred and was cut off in a hard
   line where the hero ends. Now a wide ellipse centred behind the heading,
   drifting gently, and small enough to fade out inside the hero. ═══ */
.th3c-hero .th3c-glow{
  left:calc(50% - min(560px,48vw));top:-6%;width:min(1120px,96vw);aspect-ratio:1.9;
  background:radial-gradient(ellipse at center,rgba(94,183,72,.42),transparent 68%);
  filter:blur(70px);animation-name:th3cGlow
}
@keyframes th3cGlow{0%{transform:translate(-5%,0) scale(1)}100%{transform:translate(5%,6%) scale(1.12)}}
@media (max-width:600px){.th3c-hero .th3c-glow{top:-12%;aspect-ratio:1.1}}