/* tp-footer-x */

/* The theme footer is a logo above one flat list of ten links, which gives a
   visitor at the end of a page nowhere to go and no reason to act. It is
   hidden rather than removed so the theme keeps working if this is switched
   off. */
#site-footer.site-footer{display:none!important}

/* Every colour below carries !important. The site-wide palette work sets ink
   and link colours with !important for the light pages, and on this dark
   ground that rendered the headings #0E1012 on #0E1012 — invisible — and the
   links in gold at about 2:1. */
.tp-footer{background:#0E1012;color:#FFFFFF;
 font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif}
.tp-footer-inner{max-width:1120px;margin-inline:auto;padding:clamp(48px,6vw,72px) clamp(18px,5vw,40px) clamp(24px,3vw,32px)}

.tp-footer-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
 gap:clamp(20px,3vw,40px);padding-bottom:clamp(40px,5vw,56px);margin-bottom:clamp(40px,5vw,56px);
 border-bottom:1px solid rgba(255,255,255,.10)}
.tp-footer-cta h2{margin:0 0 10px;font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
 font-size:clamp(28px,4vw,40px);line-height:1.15;color:#FFFFFF!important}
.tp-footer-cta p{margin:0;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.62)!important;max-width:46ch}
/* The two buttons come from different rule sets, so their padding did not
   agree and their edges sat a few pixels apart. One height, one baseline. */
.tp-footer-cta-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.tp-footer-cta-actions > a{height:52px!important;min-height:52px!important;margin:0!important;
 padding-top:0!important;padding-bottom:0!important;
 display:inline-flex!important;align-items:center;justify-content:center}

/* The primary button is the hero button inverted for a dark ground: the same
   geometry, with the fill and the rim swapped. */
.tp-footer .tp-side-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
 padding:15px 28px;border-radius:14px;border:1px solid rgba(255,255,255,.12);
 background-color:#FFFFFF!important;background-image:none!important;color:#0E1012!important;text-decoration:none;
 font-size:11px;letter-spacing:.18em;text-transform:uppercase;
 box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 10px 24px -12px rgba(0,0,0,.7);
 transition:transform .18s cubic-bezier(.22,.61,.36,1),filter .18s ease}
.tp-footer .tp-side-cta:hover{transform:translateY(-1px);filter:brightness(.94)}
.tp-foot-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
 padding:15px 26px;border-radius:14px;border:1px solid rgba(255,255,255,.22);
 background:transparent!important;color:#FFFFFF!important;text-decoration:none;
 font-size:11px;letter-spacing:.18em;text-transform:uppercase;
 transition:background .18s ease,border-color .18s ease}
.tp-foot-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}

.tp-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1.5fr 1fr;gap:clamp(24px,3.5vw,48px)}
.tp-footer-brand .tp-footer-logo{display:inline-block;line-height:0;margin-bottom:16px}
.tp-footer-brand img{width:118px;height:auto;display:block;filter:brightness(0) invert(1)}
.tp-footer-brand p{margin:0 0 16px;font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.55)!important;max-width:34ch}
.tp-footer-phone{display:inline-block;font-size:15px;color:#FFFFFF!important;text-decoration:none;
 font-variant-numeric:lining-nums tabular-nums;
 border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:3px;transition:border-color .18s ease}
.tp-footer-phone:hover{border-color:#FFFFFF}

.tp-footer-col h3{margin:0 0 16px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
 color:#FFFFFF!important;opacity:0.85;font-weight:600}
.tp-footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.tp-footer-col a{color:rgba(255,255,255,.82)!important;text-decoration:none;font-size:14px;line-height:1.45;
 transition:color .18s ease}
.tp-footer-col a:hover{color:#FFFFFF!important}
.tp-footer-studios li{display:grid;gap:4px}
.tp-footer-studios span{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.45)!important;max-width:34ch}
.tp-footer-hours{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.45)!important;
 padding-top:4px;border-top:1px solid rgba(255,255,255,.08)}

/* Social icons row */
.tp-footer-social{display:flex;align-items:center;gap:8px;
 margin-top:clamp(40px,5vw,56px);padding-top:22px;border-top:1px solid rgba(255,255,255,.10);
 padding-bottom:16px}
.tp-social-link{
 display:inline-flex;align-items:center;justify-content:center;
 width:38px;height:38px;border-radius:10px;
 border:1px solid rgba(255,255,255,.12);
 color:rgba(255,255,255,.55);
 text-decoration:none;
 transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.tp-social-link:hover{
 background:rgba(255,255,255,.08);
 border-color:rgba(255,255,255,.3);
 color:#FFFFFF;
}

.tp-footer-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
 padding-top:16px;border-top:1px solid rgba(255,255,255,.06)}
.tp-footer-bar p{margin:0;font-size:12.5px;color:rgba(255,255,255,.45)!important}
.tp-footer-bar ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:20px}
.tp-footer-bar a{font-size:12.5px;color:rgba(255,255,255,.45)!important;text-decoration:none;transition:color .18s ease}
.tp-footer-bar a:hover{color:#FFFFFF!important}

@media (max-width:900px){
 .tp-footer-grid{grid-template-columns:1fr 1fr;gap:32px 24px}
 .tp-footer-brand{grid-column:1/-1}
}
@media (max-width:600px){
 .tp-footer-grid{grid-template-columns:1fr;gap:32px}
 .tp-footer-cta{flex-direction:column;align-items:flex-start}
 .tp-footer-cta-actions{width:100%}
 .tp-footer-cta-actions > a{flex:1 1 100%}
 .tp-footer-bar{flex-direction:column;align-items:flex-start;gap:12px}
 .tp-footer-bar ul{gap:16px}
}
@media (prefers-reduced-motion:reduce){
 .tp-footer .tp-side-cta,.tp-foot-ghost,.tp-footer-col a{transition:none!important}
}

/* tp-modal-css */

/* Overlay & Backdrop */
.tp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(14, 16, 18, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 36px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
}
.tp-modal-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

/* Modal Window Container */
.tp-modal-container {
  position: relative;
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  background: #FFFFFF;
  border: 1px solid #E6E4DF;
  border-radius: 20px;
  padding: clamp(24px, 4vw, 44px) clamp(22px, 4vw, 40px);
  box-shadow: 0 28px 70px -15px rgba(14, 16, 18, 0.35);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}
.tp-modal-overlay.is-active .tp-modal-container {
  transform: translateY(0) scale(1);
}

/* Close Button */
.tp-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  border-radius: 50% !important;
  border: 1px solid #E6E4DF !important;
  background: #F8F7F4 !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #14161A !important;
  font-size: 20px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: background 0.18s ease, color 0.18s ease !important;
}
.tp-modal-close:hover {
  background: #14161A !important;
  color: #FFFFFF !important;
}

/* Header Elements */
.tp-modal-eyebrow {
  font-family: 'Poppins', -apple-system, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #8E7037 !important;
  margin: 0 0 8px !important;
  font-weight: 600 !important;
}
.tp-modal-h {
  font-family: 'Poppins', -apple-system, sans-serif !important;
  font-size: clamp(22px, 2.8vw, 28px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 16px !important;
  color: #14161A !important;
  font-weight: 600 !important;
}
.tp-modal-h em {
  font-style: normal !important;
  color: #8E7037 !important;
}

/* 3 Communication Options Cards */
.tp-modal-channels {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
}
.tp-channel-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  border-radius: 14px !important;
  border: 1px solid #E6E4DF !important;
  background: #FBFBFA !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}
.tp-channel-card:hover {
  background: #FFFFFF !important;
  border-color: #8E7037 !important;
  box-shadow: 0 8px 24px -6px rgba(142, 112, 55, 0.18) !important;
  transform: translateY(-1px) !important;
}
.tp-channel-icon-wrap {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}
.tp-channel-card:hover .tp-channel-icon-wrap {
  transform: scale(1.05) !important;
}
.tp-icon-wa {
  background: #25D366 !important;
  color: #FFFFFF !important;
}
.tp-icon-call {
  background: #14161A !important;
  color: #FFFFFF !important;
}
.tp-channel-info {
  flex: 1 !important;
  min-width: 0 !important;
}
.tp-channel-badge {
  display: inline-block !important;
  font-family: 'Poppins', -apple-system, sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #8E7037 !important;
  margin-bottom: 2px !important;
}
.tp-channel-title {
  font-family: 'Poppins', -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #14161A !important;
  margin: 0 0 3px 0 !important;
  letter-spacing: -0.01em !important;
}
.tp-channel-desc {
  font-family: 'Poppins', -apple-system, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: #6E7278 !important;
  margin: 0 !important;
}
.tp-channel-arrow {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #8E7037 !important;
  transition: transform 0.2s ease !important;
  padding-left: 4px !important;
}
.tp-channel-card:hover .tp-channel-arrow {
  transform: translateX(4px) !important;
}

/* Divider with text */
.tp-modal-divider {
  display: flex !important;
  align-items: center !important;
  text-align: center !important;
  margin: 18px 0 !important;
  color: #8A8477 !important;
}
.tp-modal-divider::before,
.tp-modal-divider::after {
  content: '' !important;
  flex: 1 !important;
  border-bottom: 1px solid #EBE9E4 !important;
}
.tp-modal-divider span {
  padding: 0 12px !important;
  font-family: 'Poppins', -apple-system, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}

/* Form Layout */
.tp-modal-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
  margin-bottom: 22px;
}
@media (max-width: 600px) {
  .tp-modal-fields {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.tp-modal-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tp-modal-label {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5A5F66;
  font-weight: 600;
}

.tp-modal-input,
.tp-modal-select {
  width: 100%;
  height: 48px;
  border: 1px solid #DCD8D0;
  border-radius: 8px;
  padding: 0 14px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 14px;
  color: #14161A;
  background: #FFFFFF;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tp-modal-input:focus,
.tp-modal-select:focus {
  border-color: #14161A;
  box-shadow: 0 0 0 3px rgba(20, 22, 26, 0.08);
}
.tp-modal-select-wrap {
  position: relative;
}
.tp-modal-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer;
  padding-right: 32px;
}
.tp-modal-select-wrap::after {
  display: none !important;
  content: none !important;
}
.tp-modal-select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E7278' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px !important;
}

/* Submit Button */
.tp-modal-actions {
  margin-top: 10px;
}
.tp-modal-submit-btn {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  border-radius: 999px !important;
  background: #14161A !important;
  background-image: none !important;
  color: #FFFFFF !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 16px rgba(20, 22, 26, 0.15) !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
}
.tp-modal-submit-btn:hover {
  background: #C9A227 !important;
  color: #14161A !important;
  transform: translateY(-1px) !important;
}
.tp-modal-submit-btn:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* Feedback Box */
.tp-modal-feedback {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
}
.tp-modal-feedback.is-success {
  background: #EEF8F1;
  border: 1px solid #C4E7D0;
  color: #1E6B37;
}
.tp-modal-feedback.is-error {
  background: #FDF1F0;
  border: 1px solid #F6C8C5;
  color: #A32822;
}

/* Footer Details */
.tp-modal-footer {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid #EFEDE8;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 12px;
  color: #8A8477;
}
.tp-modal-wa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-weight: 500;
  color: #5A5F66;
}
.tp-modal-wa a {
  color: #14161A;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.18s ease;
}
.tp-modal-wa a:hover {
  color: #C9A227;
}

/* topee-studio-actions-css */


html body .tp-sc-icons{
 display:grid!important;grid-template-columns:repeat(3,1fr)!important;
 gap:8px!important;width:100%!important;margin:var(--tp-action-offset,14px) 0 10px!important;
}
html body .tp-sc-icons a{
 display:flex!important;flex-direction:column!important;align-items:center!important;
 justify-content:center!important;gap:6px!important;padding:12px 6px!important;
 border:1px solid rgba(20,22,26,.12)!important;border-radius:10px!important;
 text-decoration:none!important;color:#14161A!important;background:#FFFFFF!important;
 font-size:10.5px!important;letter-spacing:.05em!important;text-transform:uppercase!important;
 text-align:center!important;line-height:1!important;
 transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease!important;
}
html body .tp-sc-icons a svg{width:19px!important;height:19px!important}
html body .tp-sc-icons a:hover{
 border-color:rgba(20,22,26,.28)!important;transform:translateY(-1px)!important;
 box-shadow:0 8px 18px -12px rgba(20,22,26,.5)!important;
}
html body .tp-sc-icons a:active{transform:translateY(0)!important}
html body .tp-sc-icons a:focus-visible{outline:2px solid var(--tp-accent-text,#8A6E12);outline-offset:3px}
@media (max-width:400px){
 html body .tp-sc-icons a{font-size:9px!important;padding:10px 4px!important}
 html body .tp-sc-icons a svg{width:17px!important;height:17px!important}
}

/* =====================================================================
   CARD FOOTER LAYOUT
   ---------------------------------------------------------------------
   On the contact page the card body is a wrapping flex row, so the icon
   row, the Studio Details button and the Google Maps link all tried to
   share one line. The icons were squeezed until "DIRECTIONS" broke
   across two lines as "DIRECTION / S", and the button sat wedged beside
   them instead of reading as the cards main action.

   Each of the three gets its own full-width row instead.
   ===================================================================== */
/* The container is .tp-studio-actions, and it is a two-column GRID - not
   the flex row on .tp-studio-body that an earlier pass aimed at, which is
   why nothing moved. A grid ignores flex-basis, so the icons row was
   pinned to one 210px column beside the button. One column fixes it. */
/* The class is repeated to raise specificity. The existing rules for this
   container use the same doubled-class trick, so a single class here lost
   to them even with !important - the two rules were equally important and
   the more specific one won. */
html body .tp-studio-actions.tp-studio-actions.tp-studio-actions{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
  align-items:stretch!important;
}
/* grid-column:1/-1 makes each child span every column there is.
   Overriding the container template turned into a specificity fight with a
   rule inside the widget markup that kept winning. This sidesteps it: the
   number of columns no longer matters, because both children take all of
   them either way. */
html body .tp-studio-actions.tp-studio-actions > .tp-sc-icons{
  grid-column:1 / -1!important;
  width:100%!important;
  margin:0!important;
  order:1!important;
}
html body .tp-studio-actions.tp-studio-actions > .tp-side-cta{
  grid-column:1 / -1!important;
  width:100%!important;
  order:2!important;
  text-align:center!important;
  justify-content:center!important;
}

/* The label must never break. Uppercase with letter-spacing is wide, so
   the size steps down with the tile rather than wrapping inside it. */
html body .tp-sc-icons a > span{
  white-space:nowrap!important;
  font-size:clamp(8.5px,1.9vw,10.5px)!important;
  letter-spacing:.04em!important;
}

/* The separate "Google Maps" link is removed: DIRECTIONS does the same
   job one row above it, and does it better - it opens the studios own Google listing, where this link ran a generic text search for the
   business name. Two buttons to the same place, one of them vaguer, is
   worse than one. */
html body .tp-studio-actions.tp-studio-actions > .tp-sd-ghost,
html body .tp-studio-body.tp-studio-body > .tp-sd-ghost,
html body .tp-studio .tp-sd-ghost{
  display:none!important;
}

/* =====================================================================
   iOS OVERFLOW FIX - applies to BOTH icon rows
   ---------------------------------------------------------------------
   Reported as the studio page being cut off on the right on an iPhone,
   with no gutter. It does not reproduce in a desktop browser at any
   width, and that difference is the clue: two iOS-only behaviours
   combine here.

   1. A grid item defaults to min-width:auto, which means it can never
      be narrower than its own content. "DIRECTIONS" and "WHATSAPP" set
      in uppercase with letter-spacing are wide words, so if they do not
      fit, the 1fr tracks stop shrinking and the whole grid grows past
      the viewport - it does not wrap and it does not clip.

   2. Mobile Safari inflates text on its own (the text-size-adjust
      behaviour) in portrait on narrow screens. A desktop browser never
      does this, so the labels are wider there than here - which is
      exactly why the row fits in testing and overflows on the phone.

   min-width:0 lets the tracks shrink to their share of the row again,
   and pinning text-size-adjust stops Safari resizing the labels out
   from under the layout. The word-break is a last resort so a long
   label wraps inside its tile rather than pushing the tile wider.
   ===================================================================== */
html body .tp-sc-icons,
html body .tp-sd-icons{
 max-width:100%!important;
 -webkit-text-size-adjust:100%!important;
 text-size-adjust:100%!important;
}
html body .tp-sc-icons > a,
html body .tp-sd-icons > a{
 min-width:0!important;
 max-width:100%!important;
 overflow-wrap:anywhere!important;
 hyphens:none!important;
}
html body .tp-sc-icons > a > span,
html body .tp-sd-icons > a > span{
 min-width:0!important;
 max-width:100%!important;
 display:block!important;
}
/* The map sits in the same column on the studio pages and is the other
   thing that can push a row wide. An iframe has a default intrinsic
   width of 300px that ignores the column, so state it. */
html body .tp-sd-map,
html body .tp-sd-map iframe{
 max-width:100%!important;
 width:100%!important;
}
/* Belt and braces for the section itself: nothing inside a studio page
   may set the page width. */
html body .tp-sd,
html body .tp-sd > *{
 max-width:100%!important;
}

/* The card main action reads as the main action: it spans the card the way
   the icon row above it does, rather than sitting as a short tab on the
   left. */
html body .tp-studio .tp-studio-body > .tp-side-cta,
html body .tp-studio-body.tp-studio-body > .tp-side-cta{
  display:flex!important;
  width:100%!important;
  align-self:stretch!important;
  justify-content:center!important;
  text-align:center!important;
  box-sizing:border-box!important;
}

/* The last of the four visit points sat with its text against the bottom
   edge: the shared step rule zeroes the bottom padding on the final step,
   which is right for the scroll timeline on How It Works and wrong for a
   card here. */
html body.page-id-60 .tp-stepc:last-child{
  padding-bottom:clamp(20px,2.5vw,32px)!important;
}

/* =====================================================================
   FULL-WIDTH STUDIO CARDS
   ---------------------------------------------------------------------
   Two cards side by side only works while each column is wide enough to
   hold the address, four fact chips, an hours line, three action icons
   and a button. Below roughly 1080px it is not, and the card turns into
   a narrow strip of wrapped text with the chips stacking one per line.

   One card per row below that width gives each one the whole measure -
   the address sits on two lines instead of four, the chips sit two or
   three to a row, and the icons get real tap targets. Above it the
   two-up layout is untouched.
   ===================================================================== */
@media (max-width:1080px){
 html body .tp-studios{
  grid-template-columns:1fr!important;
  display:grid!important;
 }
 html body .tp-studios .tp-studio{
  width:100%!important;max-width:100%!important;
 }
}

/* At a comfortable tablet width and up, a full-width card has room to put
   the photograph beside the detail rather than above it, which stops the
   card becoming very tall once it spans the full measure. */
@media (min-width:700px) and (max-width:1080px){
 html body .tp-studios .tp-studio{
  display:grid!important;
  grid-template-columns:minmax(240px,38%) 1fr!important;
  align-items:stretch!important;
 }
 html body .tp-studios .tp-studio .tp-studio-shot{
  height:100%!important;min-height:100%!important;
 }
 html body .tp-studios .tp-studio .tp-studio-shot img{
  width:100%!important;height:100%!important;object-fit:cover!important;
 }
}


/* tp-top-x */

#tp-top{
 position:fixed;right:clamp(28px,4vw,48px);bottom:clamp(28px,4vw,48px);z-index:900;
 width:46px;height:46px;padding:0;
 display:inline-flex;align-items:center;justify-content:center;
 border:1.5px solid rgba(255,255,255,.55);border-radius:50%;
 background:#14161A;background-image:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 58%,rgba(0,0,0,.18) 100%);
 color:#FFFFFF;cursor:pointer;
 box-shadow:0 10px 26px -12px rgba(20,22,26,.55);
 opacity:0;transform:translateY(10px);pointer-events:none;
 transition:opacity .22s ease,transform .22s ease,background-color .18s ease,border-color .18s ease}
#tp-top.is-on{opacity:1;transform:translateY(0);pointer-events:auto}
#tp-top:hover{background-color:#000000;border-color:#FFFFFF}
#tp-top:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(168,135,28,.55),0 10px 26px -12px rgba(20,22,26,.55)}
#tp-top svg{width:19px;height:19px;display:block}

@media (max-width:600px){
	#tp-top{width:44px;height:44px;right:20px;bottom:calc(22px + env(safe-area-inset-bottom,0px));margin-bottom:0;z-index:10010}
 #tp-top svg{width:17px;height:17px}
}
@media print{ #tp-top{display:none!important} }
@media (prefers-reduced-motion:reduce){ #tp-top{transition:opacity .01s linear} }