/* ==========================================================================
   Triple Bow Studios / page sections
   ========================================================================== */

/* ================================================================= HERO == */
body .tbs-hero__media .elementor-widget-image,
body .tbs-hero__media figure{height:100%;}
body .tbs-hero__media img{width:100%;height:100%;object-fit:cover;min-height:520px;}
@media(max-width:1024px){ body .tbs-hero__media img{min-height:0;aspect-ratio:16/10;} }
@media(max-width:767px){ body .tbs-hero__media img{aspect-ratio:4/3;} }
body .tbs-hero__cta{width:100% !important;}
body .tbs-hero__cta > .elementor-widget{width:auto !important;}

/* interior page hero */
body .tbs-phero__media .elementor-widget-image,
body .tbs-phero__media figure{height:100%;}
body .tbs-phero__media img{width:100%;height:100%;object-fit:cover;min-height:420px;}
@media(max-width:1024px){ body .tbs-phero__media img{min-height:0;aspect-ratio:16/9;} }
body .tbs-phero__copy h1{margin-bottom:.32em;}

/* ======================================================== CATEGORY TILE == */
body .tbs-tile .tbs-tile__label .elementor-heading-title{
  font-family:var(--f-body);font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--c-on-dark);
  line-height:1.35;margin:0;
}
@media(max-width:767px){
  body .tbs-tile .tbs-tile__label .elementor-heading-title{font-size:10.5px;letter-spacing:.1em;}
  body .tbs-tile .tbs-tile__arrow .elementor-heading-title{font-size:15px;}
}

/* ================================================= BUILT DIFFERENTLY ===== */
body .tbs-bd__label .elementor-heading-title{
  font-family:var(--f-body);font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;color:var(--c-on-dark);margin:0 0 4px;
}
body .tbs-detailstrip img{aspect-ratio:14/22;object-fit:cover;width:100%;}
@media(max-width:767px){ body .tbs-detailstrip img{aspect-ratio:3/4;} }

/* ============================================================== PROCESS == */
body .tbs-process__eyebrow .elementor-heading-title{
  font-family:var(--f-body);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;color:var(--c-ink-muted);
  text-align:center;margin:0;
}
body .tbs-process__name .elementor-heading-title{
  font-family:var(--f-body);font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.17em;color:var(--c-ink);margin:0;
}
body .tbs-process__body p{font-size:14.5px;line-height:1.7;color:var(--c-ink-muted);margin:0;}

/* process page rows */
body .tbs-prow__media img{aspect-ratio:5/4;object-fit:cover;width:100%;}
body .tbs-prow__title .elementor-heading-title{
  font-family:var(--f-body);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.17em;color:var(--c-ink);margin:0 0 4px;
}
body .tbs-prow:last-child{border-bottom:0 !important;}

/* ============================================================== GALLERY == */
body .tbs-gallery{align-items:flex-start;}
body .tbs-gtile img{width:100%;aspect-ratio:4/3;object-fit:cover;}

/* =============================================================== ABOUT === */
body .tbs-about__copy .elementor-widget-button{margin-top:8px;}
body .tbs-aboutband .tbs-zoom .elementor-widget-image,
body .tbs-aboutband .tbs-zoom figure{height:100%;}
body .tbs-aboutband .tbs-zoom img{width:100%;height:100%;object-fit:cover;min-height:420px;}
@media(max-width:1024px){ body .tbs-aboutband .tbs-zoom img{min-height:0;aspect-ratio:16/10;} }

body .tbs-value{text-align:center;}
body .tbs-value .elementor-icon-box-title{margin:0;}
body .tbs-values{border-top:1px solid var(--c-hair);border-bottom:1px solid var(--c-hair);}

/* ============================================================== BUTTONS == */
body .tbs-btn-outline .elementor-button{
  background:transparent;color:var(--c-ink);
  box-shadow:inset 0 0 0 1px var(--c-ink);
  padding:17px 30px;font-size:11px;letter-spacing:.16em;font-weight:700;
  text-transform:uppercase;font-family:var(--f-body);
  transition:background-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
}
body .tbs-btn-outline .elementor-button:hover{
  background:var(--c-ink);color:var(--c-cream);box-shadow:inset 0 0 0 1px var(--c-ink);
}

/* =============================================================== CONTACT = */
body .tbs-contactband .tbs-contact__copy h2{margin-bottom:.3em;}
body .tbs-contact__form{width:100%;}
body .tbs-contact__form label{
  font-family:var(--f-body);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;color:var(--c-on-dark-muted);
}

/* the whole tile links; keep the caption above the anchor overlay */
body .tbs-tile .elementor-widget-image a{display:block;}

/* ==================================================== FULL-BLEED GUTTER == */
/* Full-width split sections still have to line their copy up with the boxed
   grid, so the inside edge gets the same gutter the header and footer use. */
:root{--edge:max(var(--gutter),calc((100vw - 1280px)/2 + 28px));}
body .tbs-hero__copy{padding-left:var(--edge) !important;}
body .tbs-phero__copy{padding-left:var(--edge) !important;}
body .tbs-about__copy{padding-left:var(--edge) !important;}
@media(max-width:1024px){
  body .tbs-hero__copy,body .tbs-phero__copy,body .tbs-about__copy{
    padding-left:var(--gutter) !important;padding-right:var(--gutter) !important;
  }
}

/* header nav: hold one line without colliding with the CTA */
body .tbs-header .tbs-nav a{
  font-size:10.5px !important;letter-spacing:1px !important;
}
body .tbs-header .tbs-nav ul{gap:clamp(9px,1.15vw,17px);}
body .tbs-header__right{gap:clamp(12px,1.5vw,22px);flex-wrap:nowrap;}
body .tbs-header__right .elementor-widget-button .elementor-button{
  padding:15px 20px;font-size:10.5px;letter-spacing:1.2px;white-space:nowrap;
}
/* The nav widget box was shrink-to-fitting narrower than its own nowrap list,
   so the last item printed over the CTA. Size the box to the list. */
body .tbs-header .tbs-nav,
body .tbs-header .tbs-nav .elementor-widget-container,
body .tbs-header .tbs-nav nav,
body .tbs-footer .tbs-footnav,
body .tbs-footer .tbs-footnav .elementor-widget-container,
body .tbs-footer .tbs-footnav nav{width:max-content;max-width:100%;}
@media(max-width:1024px){
  body .tbs-header .tbs-nav,
  body .tbs-header .tbs-nav .elementor-widget-container,
  body .tbs-header .tbs-nav nav{width:auto;}
}
/* The right group was shrink-to-fit, so the nav lost width to the CTA and its
   nowrap list printed over the button. Let the group take the free space and
   stop the nav shrinking below its own content. */
body .tbs-header__bar > .e-con.tbs-logo{flex:0 0 auto !important;}
body .tbs-header__bar > .e-con.tbs-header__right{flex:1 1 auto !important;justify-content:flex-end;}
body .tbs-header .tbs-nav{flex:0 0 auto !important;}
body .tbs-header__right .elementor-widget-button{flex:0 0 auto !important;}
/* ================================================ HEADER FLEX (FIXED) ==== */
/* Boxed containers wrap their children in .e-con-inner, so child selectors
   never matched and both groups sat at an equal 600px. Descendant selectors
   sidestep the wrapper. */
body .tbs-header__bar > .e-con-inner{
  display:flex;flex-direction:row;flex-wrap:nowrap;
  align-items:center;justify-content:space-between;gap:24px;width:100%;
}
body .tbs-header__bar .tbs-logo{flex:0 0 auto !important;width:auto !important;max-width:none !important;}
body .tbs-header__bar .tbs-header__right{
  flex:1 1 auto !important;width:auto !important;max-width:none !important;
  justify-content:flex-end;
}
body .tbs-footer__row > .e-con-inner{
  display:flex;flex-direction:row;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:28px;width:100%;
}
body .tbs-footer__row .e-con{flex:0 0 auto !important;width:auto !important;max-width:none !important;}

/* the burger already carries Contact, so the header CTA stands down on phones */
@media(max-width:767px){
  body .tbs-header__right .elementor-widget-button{display:none !important;}
  body .tbs-footer__row > .e-con-inner{flex-direction:column;align-items:flex-start;gap:20px;}
}
/* ============================================== HEADING TITLE TARGETS ==== */
/* Elementor wraps every heading in .elementor-heading-title, so class rules
   written against the widget wrapper alone never reach the type. */
body .tbs-label .elementor-heading-title{
  font-family:var(--f-body);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.17em;line-height:1.6;
  color:var(--c-ink-muted);margin:0;
}
body .tbs-on-dark .tbs-label .elementor-heading-title{color:var(--c-on-dark-muted);}
body .tbs-on-dark .elementor-heading-title{color:var(--c-on-dark);}
body .tbs-on-dark p,body .tbs-on-dark .tbs-lead p{color:var(--c-on-dark-muted);}

/* the parquet band carries cream type over the timber */
body .tbs-parquet .elementor-heading-title{color:var(--c-on-dark);font-weight:400;}
body .tbs-parquet{position:relative;}
body .tbs-parquet > .e-con-inner,body .tbs-parquet > .elementor-widget{position:relative;z-index:1;}

/* the about block heading is a small label, not a display line */
body .tbs-about__copy .tbs-label .elementor-heading-title{margin-bottom:2px;}
/* ======================================================= MOBILE MENU ==== */
/* The dropdown panel is position:fixed and ships open until the widget's
   JavaScript closes it, which paints a white sheet over the hero. Elementor
   toggles it by writing an inline display, so hiding it only while untouched
   keeps the burger working in both directions. */
.tbs-header nav.elementor-nav-menu--dropdown:not([style*="display"]){display:none !important;}
.tbs-header nav.elementor-nav-menu--dropdown{
  background-color:var(--c-panel) !important;
  border-top:1px solid var(--c-hair);
}
.tbs-header nav.elementor-nav-menu--dropdown .elementor-item{
  color:var(--c-ink) !important;
  font-family:var(--f-body) !important;font-size:12px !important;font-weight:700 !important;
  text-transform:uppercase !important;letter-spacing:.16em !important;
  padding:15px 22px !important;min-height:44px;display:flex;align-items:center;
}
.tbs-header nav.elementor-nav-menu--dropdown .elementor-item:hover,
.tbs-header nav.elementor-nav-menu--dropdown .elementor-item.elementor-item-active{
  color:var(--c-walnut) !important;background-color:transparent !important;
}
/* Elementor hides the toggle above the dropdown breakpoint with a bare
   .elementor-menu-toggle{display:none}. A class-scoped display:flex outranked
   that and left a burger sitting under the desktop nav, so the box styling
   stays global and the display switch lives inside the query. */
.tbs-header .elementor-menu-toggle{
  color:var(--c-ink) !important;background:transparent !important;
  width:44px;height:44px;align-items:center;justify-content:center;
}
@media(max-width:1024px){.tbs-header .elementor-menu-toggle{display:flex;}}
.tbs-header .elementor-menu-toggle svg{width:24px;height:24px;fill:var(--c-ink);}
/* Any dropdown nav that JS has not yet opened. Elementor ships the panel in the
   markup and relies on script to hide it; without that pass it lands as a fixed
   white sheet over the page, so gate it on the inline style the toggle writes. */
body nav.elementor-nav-menu--dropdown:not([style*="display"]){display:none !important;}
body .tbs-footnav nav.elementor-nav-menu--main .elementor-nav-menu{flex-wrap:wrap;}
@media(max-width:767px){
  body .tbs-footnav nav.elementor-nav-menu--main .elementor-nav-menu{justify-content:flex-start;gap:0 4px;}
}

/* Solace sizes the submit from a percentage of the form, which leaves the label
   spilling out of its fill on a phone. Let the button size to its text instead,
   and go full width where the fields already stack. */
body .solaceform-button-column .submit-button{width:auto !important;min-width:230px;white-space:nowrap;}
@media(max-width:767px){
  body .solaceform-container > .solaceform-field-column{width:100% !important;}
  body .solaceform-button-column .submit-button{width:100% !important;min-width:0;}
}

/* The plates come in three aspect ratios, so a hero or a full-bleed band would
   otherwise be as tall as whichever picture happened to land in it. Crop to a
   band height instead and let the subject centre itself. */
body .tbs-phero__media img{width:100%;height:clamp(360px,40vw,600px);min-height:0;aspect-ratio:auto;object-fit:cover;display:block;}
body .tbs-band img{width:100%;height:clamp(320px,32vw,500px);object-fit:cover;display:block;}
@media(max-width:1024px){body .tbs-phero__media img{height:clamp(300px,44vw,420px);min-height:0;aspect-ratio:auto;}body .tbs-band img{height:300px;}}
@media(max-width:767px){body .tbs-phero__media img{height:260px;aspect-ratio:auto;}body .tbs-band img{height:240px;}}
/* The three value columns were a flat 33.33% each, which overflowed once the
   row's 20px gaps were counted and dropped the third onto its own line. */
body .tbs-values .e-con-inner > .e-con{width:calc((100% - 40px)/3) !important;}
body .tbs-values .tbs-value{width:100% !important;}
@media(max-width:767px){body .tbs-values .e-con-inner > .e-con{width:100% !important;}}

/* Body copy links were falling through to the browser default blue. */
body .elementor-widget-text-editor a{color:var(--c-walnut);text-decoration:none;border-bottom:1px solid rgba(124,86,56,.35);transition:color .25s ease,border-color .25s ease;}
body .elementor-widget-text-editor a:hover{color:var(--c-walnut-deep);border-bottom-color:var(--c-walnut);}
body .tbs-on-dark .elementor-widget-text-editor a{color:var(--c-walnut-light);border-bottom-color:rgba(150,112,76,.45);}
body .tbs-on-dark .elementor-widget-text-editor a:hover{color:#C9A882;border-bottom-color:#C9A882;}

/* The kit's global button fill was showing through the inactive filter chips,
   leaving muted ink on walnut. Chips are outline-only until they are the
   active one. */
body .tbs-filters .elementor-button{background-color:transparent !important;}
body .tbs-filters .elementor-button:hover{background-color:transparent !important;border-color:var(--c-walnut) !important;color:var(--c-walnut) !important;}
body .tbs-filters .tbs-filter-on .elementor-button{background-color:var(--c-ink) !important;border-color:var(--c-ink) !important;color:var(--c-cream) !important;}

/* Process thumbnails kept their native 4:3, so four rows ran the page past
   3500px. Crop them to a band and the list reads at a glance. */
body .tbs-prow__media img{width:100%;height:clamp(200px,20vw,290px);object-fit:cover;display:block;}
body .tbs-prow__copy .tbs-lead p{max-width:62ch;}
@media(max-width:767px){body .tbs-prow__media img{height:200px;}}

/* Seven footer links left the social group 39px wide, which stacked the icons
   into a column. The nav is the only part that should absorb the slack. */
body .tbs-footer__row .tbs-footnav{flex:1 1 auto !important;min-width:0;}
body .tbs-footer__row .tbs-footnav .elementor-nav-menu{flex-wrap:wrap;justify-content:center;}
body .tbs-footer__row .tbs-socials{flex:0 0 auto !important;width:auto !important;}
body .tbs-footer__row .tbs-socials .elementor-social-icons-wrapper{display:flex;flex-direction:row;flex-wrap:nowrap;gap:14px;}
body .tbs-footer__row .tbs-logo{flex:0 0 auto !important;}
@media(max-width:767px){body .tbs-footer__row .tbs-footnav .elementor-nav-menu{justify-content:flex-start;}}

body .tbs-footer__row .tbs-footnav .elementor-nav-menu{gap:6px;}
body .tbs-footer__row .tbs-footnav .elementor-item{padding-left:10px !important;padding-right:10px !important;}

/* Five detail crops across a 375px screen come out 63px wide, which is too
   small to read as joinery. Two-up on a phone, three-up on a tablet. */
@media(max-width:1024px){body .tbs-detailstrip{flex-wrap:wrap;}body .tbs-detailstrip > .e-con{width:calc((100% - 24px)/3) !important;}}
@media(max-width:767px){body .tbs-detailstrip > .e-con{width:calc((100% - 12px)/2) !important;}}
body .tbs-shop-embed .tbs-lead p{max-width:70ch;}