/* =====================================================================
   Commune Coworks — Modernization overlay
   Loads AFTER custom.css. Reuses the existing palette, fonts and images;
   only modernizes layout, spacing, depth, shape and motion.
   Palette in use (unchanged): #f36f2c / #d04e12 / #e05e22 orange,
   #58595b / #868686 / #808285 greys, #f6f6f6 / #f1f2f2 light surfaces.
   ===================================================================== */

:root {
  --cc-orange: #f36f2c;
  --cc-orange-dark: #d04e12;
  --cc-accent: #e05e22;
  --cc-ink: #58595b;
  --cc-muted: #868686;
  --cc-surface: #f6f6f6;
  --cc-radius: 16px;
  --cc-radius-sm: 10px;
  --cc-shadow-sm: 0 4px 16px rgba(40, 30, 20, .07);
  --cc-shadow: 0 14px 38px rgba(40, 30, 20, .10);
  --cc-shadow-lg: 0 26px 60px rgba(40, 30, 20, .16);
  --cc-ease: cubic-bezier(.22, .68, .28, 1);
  --cc-t: .32s var(--cc-ease);
}

html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: .1px;
}

::selection { background: rgba(243, 111, 44, .22); }

img { max-width: 100%; }

/* Gentle, consistent transition on common interactive elements */
a, .btn, button, input, textarea, select { transition: var(--cc-t); }

/* ----------------------------------------------------------------------
   Section rhythm — more generous, even breathing room
   ---------------------------------------------------------------------- */
.content { padding: 64px 0; }
.plans { padding: 72px 0 84px; }
.amenities { padding: 96px 0 24px; }
.testimonials { padding: 80px 0 40px; }
.team { padding: 72px 0; }
.past-events { padding: 64px 0 80px; }
.reachus { padding: 72px 0 0; }

/* ----------------------------------------------------------------------
   Section headings — keep the orange, add a refined accent + spacing
   ---------------------------------------------------------------------- */
.head1 {
  letter-spacing: .4px;
  line-height: 1.3;
}
.plans .head1,
.amenities .head1,
.team .head1,
.past-events .head1,
.reachus .head1 {
  position: relative;
  padding-bottom: 22px;
  margin-bottom: 54px;
}
.plans .head1::after,
.amenities .head1::after,
.team .head1::after,
.past-events .head1::after,
.reachus .head1::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 64px;
  height: 4px;
  border-radius: 4px;
  transform: translateX(-50%);
  background: var(--cc-orange);
}

.wrk-txt p { line-height: 1.85; }

/* ----------------------------------------------------------------------
   Navbar — subtle elevation, blur, refined links with animated underline
   ---------------------------------------------------------------------- */
.navbar-fixed-top { z-index: 1040; }
.navbar-default,
nav.navbar-default {
  background-color: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  box-shadow: 0 6px 24px rgba(40, 30, 20, .07);
  border-bottom: 1px solid rgba(40, 30, 20, .05);
}
.nav.navbar-nav > li > a {
  position: relative;
  padding-top: 16px;
  padding-bottom: 16px;
  letter-spacing: .6px;
}
.nav.navbar-nav > li > a::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--cc-orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--cc-t);
}
.nav.navbar-nav > li > a:hover::after,
.nav.navbar-nav > li.active > a::after { transform: scaleX(1); }

.hsocial a img,
.ffollow a img {
  border-radius: 50%;
  transition: var(--cc-t);
}
.hsocial a:hover img,
.ffollow a:hover img {
  transform: translateY(-3px) scale(1.06);
  box-shadow: var(--cc-shadow-sm);
}

/* ----------------------------------------------------------------------
   Buttons — keep colours, soften shape, add lift + shadow
   ---------------------------------------------------------------------- */
.btn.join, .join, .or-btn,
.subscribe .sub-sbt, .sub-sbt,
.stay .btn-contact-sbt, .join-sbt {
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(243, 111, 44, .28);
  transition: var(--cc-t);
  border: none;
}
.btn.join:hover, .join:hover, .or-btn:hover,
.subscribe .sub-sbt:hover, .sub-sbt:hover,
.stay .btn-contact-sbt:hover, .join-sbt:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(208, 78, 18, .34);
}
.btn.join:active, .join:active, .or-btn:active { transform: translateY(0); }

/* ----------------------------------------------------------------------
   Banner carousel — readable caption, rounded controls + indicators
   ---------------------------------------------------------------------- */
/* One uniform frame height for the whole banner. */
.banner-slider .carousel-inner {
  height: 78vh;
  min-height: 460px;
  max-height: 760px;
  background-color: #1d1b19;
}
/* Each slide already carries its photo as an inline background-image (the
   archived custom.css hid it on desktop with background-size:0 and showed a
   child <img>). We paint the photo on the slide box itself as cover and drop
   the <img>, so the picture appears with the box — no late-painting child. */
.banner-slider .carousel-inner > .item {
  height: 100%;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.banner-slider .carousel-inner > .item > img {
  position: absolute;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  opacity: 0 !important;     /* photo now comes from the item background */
}

/* ----------------------------------------------------------------------
   CROSS-FADE instead of slide.
   The Bootstrap slide briefly exposed the frame between the outgoing and
   incoming slides (the white / black "gap" during a swipe — a real-browser
   paint-timing issue the slide layout can't fully avoid). A cross-fade has
   no such gap: every slide is stacked in the same spot and the incoming one
   fades in ON TOP of the still-opaque outgoing one, so nothing is ever
   uncovered. We neutralise Bootstrap's transform/left motion and drive the
   change purely with opacity + z-index.
   ---------------------------------------------------------------------- */
.banner-slider .carousel-inner > .item {
  position: absolute;
  top: 0; left: 0 !important;
  width: 100%;
  display: block;            /* keep stacked; opacity controls visibility */
  opacity: 0;
  z-index: 1;
  transform: none !important;
  -webkit-transition: opacity .8s ease-in-out;
  transition: opacity .8s ease-in-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.banner-slider .carousel-inner > .item.active { opacity: 1; z-index: 2; }
/* Incoming slide starts transparent on top, then fades in over the active. */
.banner-slider .carousel-inner > .item.next,
.banner-slider .carousel-inner > .item.prev { opacity: 0; z-index: 3; }
.banner-slider .carousel-inner > .item.next.left,
.banner-slider .carousel-inner > .item.prev.right { opacity: 1; }
/* Outgoing slide stays fully opaque underneath until the fade completes. */
.banner-slider .carousel-inner > .item.active.left,
.banner-slider .carousel-inner > .item.active.right { opacity: 1; z-index: 2; }
.banner-slider .item::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 1;
}
.banner-slider .carousel-caption.ban-txt { z-index: 2; }
.ban-txt h2, .ban-txt h3 {
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
  line-height: 1.25;
}
.ban-txt p { text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }

.carousel-indicators li {
  width: 9px; height: 9px;
  margin: 1px 5px;
  border-color: rgba(255, 255, 255, .9);
  transition: var(--cc-t);
}
.carousel-indicators li.active {
  width: 26px;
  border-radius: 6px;
  background: var(--cc-orange);
  border-color: var(--cc-orange);
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
  width: 46px; height: 46px;
  line-height: 46px;
  margin-top: -23px;
  margin-left: -23px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .32);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: var(--cc-t);
}
.carousel-control:hover .glyphicon-chevron-left,
.carousel-control:hover .glyphicon-chevron-right {
  background: var(--cc-orange);
}
.carousel-control { background-image: none !important; opacity: 1; }
/* The Glyphicons icon font isn't bundled with this archived site, so the
   default chevron glyphs render as broken "tofu" boxes. Draw the arrows
   with pure CSS (rotated borders) instead — no font dependency. */
.carousel-control .glyphicon-chevron-left::before,
.carousel-control .glyphicon-chevron-right::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 11px; height: 11px;
  border-style: solid;
  border-color: #fff;
  border-width: 2px 2px 0 0;
}
.carousel-control .glyphicon-chevron-left::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}
.carousel-control .glyphicon-chevron-right::before {
  transform: translate(-70%, -50%) rotate(45deg);
}

/* ----------------------------------------------------------------------
   Plans — turn flat thumbnails into rounded, lifting image cards
   ---------------------------------------------------------------------- */
.plans .col-md-4 {
  margin-bottom: 18px;
  padding-top: 14px;
  padding-bottom: 22px;
  transition: var(--cc-t);
}
.plan-img {
  border-radius: var(--cc-radius);
  overflow: hidden;
  box-shadow: var(--cc-shadow-sm);
  margin-bottom: 22px;
  line-height: 0;
}
.plan-img img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .6s var(--cc-ease);
}
.plans .col-md-4:hover .plan-img { box-shadow: var(--cc-shadow); }
.plans .col-md-4:hover .plan-img img { transform: scale(1.06); }
.plans h3 { letter-spacing: .3px; }

/* ----------------------------------------------------------------------
   Amenities — clean white cards with hovering icons
   ---------------------------------------------------------------------- */
/* Flex rows give equal-height cards purely from content — no fixed
   height, so titles that wrap to 2-3 lines can never overflow/overlap. */
.amenities .row { display: flex; flex-wrap: wrap; }
.amenities .col-md-3 { display: flex; margin-bottom: 26px; }
.am-tab {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(40, 30, 20, .06);
  border-radius: var(--cc-radius);
  padding: 34px 18px 28px;
  margin-bottom: 0;
  box-shadow: var(--cc-shadow-sm);
  transition: var(--cc-t);
}
.am-tab:hover {
  transform: translateY(-6px);
  box-shadow: var(--cc-shadow);
  border-color: rgba(243, 111, 44, .25);
}
.am-tab img { transition: transform var(--cc-t); }
.am-tab:hover img { transform: translateY(-4px) scale(1.05); }
/* Original custom.css pins h4 to a fixed 40px, clipping multi-line titles. */
.am-tab h4 {
  height: auto;
  margin: 22px 0 0;
  line-height: 1.45;
}

/* ----------------------------------------------------------------------
   Testimonials — quote card with ringed avatar
   ---------------------------------------------------------------------- */
.test-wrap {
  background: #fff;
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  padding: 40px 46px;
  position: relative;
}
.testimonials img {
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(243, 111, 44, .12);
}
.test-txt p { line-height: 1.7; }
.test-txt h2 { margin-top: 6px; }
.testimonials .owl-theme .owl-dots { margin-top: 22px; }

/* ----------------------------------------------------------------------
   Clients — tidy greyscale logos that bloom on hover
   ---------------------------------------------------------------------- */
.clients { padding: 40px 0; }
.clients-slider img {
  filter: grayscale(100%);
  opacity: .55;
  transition: var(--cc-t);
}
.clients-slider img:hover {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.05);
}

/* ----------------------------------------------------------------------
   Reach us / map — framed, rounded map and pill location filters
   ---------------------------------------------------------------------- */
#map {
  border-radius: var(--cc-radius);
  overflow: hidden;
  box-shadow: var(--cc-shadow);
  border-top: none !important;
  margin-top: 12px;
}
.map-places { background: transparent; margin-top: 26px; }
.map-nav li {
  border-right: none;
  padding: 8px 6px;
}
.map-nav li a {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(40, 30, 20, .12);
  transition: var(--cc-t);
}
.map-nav li a:hover { border-color: var(--cc-accent); color: var(--cc-accent); }
.map-nav li.active a {
  background: var(--cc-accent);
  border-color: var(--cc-accent);
  color: #fff;
}
.reachus .add { line-height: 1.8; }

/* ----------------------------------------------------------------------
   Team — soft cards, ringed portraits
   ---------------------------------------------------------------------- */
.team-tab {
  background: #fff;
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow-sm);
  padding: 34px 28px 30px;
  transition: var(--cc-t);
  height: 100%;
}
.team .col-md-4 { display: flex; margin-bottom: 30px; }
.team .col-md-4 > .team-tab { width: 100%; }
.team-tab:hover { transform: translateY(-6px); box-shadow: var(--cc-shadow); }
.team-tab .timg img {
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(243, 111, 44, .10);
  transition: var(--cc-t);
}
.team-tab:hover .timg img { box-shadow: 0 0 0 6px rgba(243, 111, 44, .22); }
.team p { line-height: 1.7; }

/* ----------------------------------------------------------------------
   Events & blog cards — rounded media, hover lift
   ---------------------------------------------------------------------- */
.eimg, .blog-img, .blog-wrap .gimg-box, .gimg-box {
  border-radius: var(--cc-radius);
  overflow: hidden;
  box-shadow: var(--cc-shadow-sm);
  line-height: 0;
}
.eimg img, .blog-img img, .gimg-box img {
  display: block;
  width: 100%;
  transition: transform .6s var(--cc-ease);
}
.event-tab:hover .eimg img,
.blog-tab:hover .blog-img img,
.blog-wrap:hover .gimg-box img,
.gimg-box:hover img { transform: scale(1.06); }

.event-tab, .blog-tab {
  transition: var(--cc-t);
}
.blog-tab {
  padding: 32px 0;
  border-bottom: 1px solid rgba(40, 30, 20, .10);
}

/* Gallery grid spacing */
.gallery .blog-wrap, .blog-wrap { margin-bottom: 30px; }

/* ----------------------------------------------------------------------
   Breadcrumb + pagination — lighter, rounded
   ---------------------------------------------------------------------- */
.breadcrumb {
  background: transparent;
  border-top: 1px solid rgba(40, 30, 20, .10);
  border-bottom: 1px solid rgba(40, 30, 20, .10);
  letter-spacing: .3px;
}
.blog-pagenation .pagination > li > a {
  border-radius: 8px !important;
  width: 38px; height: 38px;
  line-height: 26px;
  text-align: center;
  transition: var(--cc-t);
}
.blog-pagenation .pagination > li > a:hover { transform: translateY(-2px); }

/* ----------------------------------------------------------------------
   Forms — rounded fields with a soft orange focus ring
   ---------------------------------------------------------------------- */
.form-control {
  border-radius: var(--cc-radius-sm) !important;
  border: 1px solid rgba(40, 30, 20, .16);
  transition: var(--cc-t);
}
.form-control:focus {
  border-color: var(--cc-orange);
  box-shadow: 0 0 0 4px rgba(243, 111, 44, .14) !important;
}

/* Join form card */
.join-frm {
  border-radius: var(--cc-radius);
  overflow: hidden;
  box-shadow: var(--cc-shadow);
}
.join-frm h2 { letter-spacing: .4px; }
.join-frm .form-wrap { border: none; }
.join-frm .form-wrap .form-control { border-radius: var(--cc-radius-sm) !important; }

/* Price tables (pricing page) */
.price-tab {
  border-radius: var(--cc-radius);
  overflow: hidden;
  box-shadow: var(--cc-shadow-sm);
  transition: var(--cc-t);
}
.price-tab:hover { transform: translateY(-6px); box-shadow: var(--cc-shadow); }

/* ----------------------------------------------------------------------
   Subscribe / footer
   ---------------------------------------------------------------------- */
.subscribe { margin-bottom: 44px; }
.subscribe .subscibe_form .form-control {
  border-radius: 999px 0 0 999px !important;
  border-right: none;
}
.subscribe .subscibe_form .sub-sbt {
  border-radius: 0 999px 999px 0 !important;
  box-shadow: none;
}
footer {
  border-top: 1px solid rgba(40, 30, 20, .08);
  padding-top: 56px;
}
.flinks a, .fcontact a { transition: var(--cc-t); }
.flinks li a:hover { padding-left: 4px; }
.foot-bottom { border-top: 1px solid rgba(40, 30, 20, .06); }

/* ----------------------------------------------------------------------
   Floors — the section has a fixed inline height (707px) and its heading
   sits INSIDE that box above the floor image. So the heading must add NO
   layout height (underline is absolute), and we clip the box so the floor
   image can never bleed onto the amenities cards below.
   ---------------------------------------------------------------------- */
.floors { overflow: hidden; }
.floors .head1 {
  position: relative;
  margin-bottom: 40px; /* original spacing — no extra height added */
}
.floors .head1::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  width: 64px;
  height: 4px;
  border-radius: 4px;
  background: var(--cc-orange);
}
.ft-wrap li { transition: var(--cc-t); }
.ft-wrap li a { transition: color var(--cc-t); }

/* ----------------------------------------------------------------------
   Responsive tidy-ups for the new cards
   ---------------------------------------------------------------------- */
@media (max-width: 991px) {
  .test-wrap { padding: 32px 26px; text-align: center; }
  .amenities .col-md-3 { width: 50%; }
}
@media (max-width: 767px) {
  .content { padding: 44px 0; }
  .plans { padding: 50px 0 56px; }
  .amenities { padding: 56px 0 16px; }
  .amenities .col-md-3 { width: 100%; }
  .team .col-md-4 { display: block; }
  .test-wrap { padding: 28px 20px; }
  .plans .head1, .amenities .head1,
  .team .head1, .past-events .head1, .reachus .head1 { margin-bottom: 40px; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .plan-img img, .eimg img, .blog-img img, .gimg-box img { transition: none !important; }
}