/* Client feedback rounds, 2-4 Nov. */

/* Photo frame. Full-screen slots (heroes, Work panels) always fill edge to edge on phones;
   on desktop JS adds .tn-cover when the photo suits the box. */
.tn-fitbox{position:relative;overflow:hidden;background:#050505;}
.tn-fitbox>.tn-fill{position:absolute;inset:-40px;background-size:cover;background-position:center;filter:blur(28px) brightness(.45) saturate(1.1);transform:scale(1.05);z-index:0;}
.tn-fitbox .tn-pic{display:contents;}
.tn-fitbox .tn-fit{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:contain;object-position:center;z-index:1;margin:0!important;border-radius:0!important;}
.tn-fitbox.tn-cover .tn-fit{object-fit:cover;}
.tn-fitbox.tn-cover>.tn-fill{display:none;}
/* Homepage work panels: desktop and phone can show different cars (same 900px switch as the photos). */
.cph-hpanel .tn-mb{display:none;}
@media (max-width:900px){.cph-hpanel .tn-dk{display:none;}.cph-hpanel .tn-mb{display:inline;}}
/* "Ready to build something exceptional?": taller, with the same smoked fade as the About Us band (client, 5 Nov). */
section.cph-cta.cph-cta{min-height:78vh;display:flex;align-items:center;justify-content:center;padding:120px 24px;}
section.cph-cta.cph-cta .cph-cta-tint{background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 22%,rgba(0,0,0,.5) 78%,#000 100%);}
section.cph-cta.cph-cta .cph-cta-content{width:100%;}
@media (max-width:680px){section.cph-cta.cph-cta{min-height:72vh;min-height:72svh;padding:90px 22px;}}
/* Darker client photo (5 Nov): lighter tint in the middle, black fade top and bottom so no edge shows. */
section.cph-cta.cph-cta .cph-cta-tint{background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 20%,rgba(0,0,0,.3) 80%,#000 100%);}
/* Phones: the section starts closer to the text above it (client, 5 Nov). */
@media (max-width:680px){
	section.cph-cta.cph-cta{margin-top:-90px;padding-top:60px;}
	section.cph-cta.cph-cta .cph-cta-tint{background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 14%,rgba(0,0,0,.3) 82%,#000 100%);}
}
/* Phones: Work panels 02 and 05 show the whole photo so the car is fully in view (client, 5 Nov). */
.cph-hpanel>.tn-mfill{display:none;}
@media (max-width:900px){
	.cph-hpanel.tn-mwhole>.tn-mfill{display:block;position:absolute;inset:-40px;background-size:cover;background-position:center;filter:blur(28px) brightness(.4);transform:scale(1.05);z-index:0;}
	.cph-hpanel.tn-fitbox.tn-fullscreen.tn-mwhole .tn-fit{object-fit:contain!important;object-position:center 42%;}
}
/* Enquire Now: WhatsApp pill button. */
.cph-cta .tn-wa-btn{display:inline-flex!important;align-items:center;gap:14px;padding:9px 28px 9px 9px!important;background:linear-gradient(135deg,#ffffff 0%,#ececec 100%)!important;box-shadow:0 12px 34px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.35);transition:transform .3s ease,box-shadow .3s ease!important;}
.cph-cta .tn-wa-ico{position:relative;flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;}
.cph-cta .tn-wa-ico svg{width:21px;height:21px;fill:#fff;}
.cph-cta .tn-wa-ico:after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:tnWaPulse 2.2s ease-out infinite;}
@keyframes tnWaPulse{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.75);opacity:0}}
.cph-cta .tn-wa-arrow{font-style:normal;font-size:15px;letter-spacing:0;transition:transform .3s ease;}
.cph-cta .tn-wa-btn:hover{transform:translateY(-3px)!important;box-shadow:0 16px 42px rgba(37,211,102,.35),0 0 0 1px rgba(37,211,102,.7);}
.cph-cta .tn-wa-btn:hover .tn-wa-arrow{transform:translateX(5px);}
@media (prefers-reduced-motion:reduce){.cph-cta .tn-wa-ico:after{animation:none}}
.cth-slide.tn-fitbox>.cth-overlay,.cth-slide.tn-fitbox>.cth-content,.cph-hpanel.tn-fitbox>.cph-hpanel-tint,.cph-hpanel.tn-fitbox>.cph-hpanel-text{z-index:2;}
.cth-slide.tn-fitbox{background:#050505;}
.cth-slide.tn-fitbox>.cth-content{z-index:3;}
@media (max-width:900px){
	.tn-fitbox.tn-fullscreen .tn-fit{object-fit:cover!important;}
	.tn-fitbox.tn-fullscreen>.tn-fill{display:none!important;}
}

/* Shared */
body.page-template-page-category,body.page-template-page-category .content,body.page-template-page-category .page_content_wrap{background:#000!important;}
body.page-template-page-category .top_panel_title,body.page-template-page-category .top_panel_title_inner{display:none!important;}
/* Product pages: the hero starts at the very top, under the transparent header, like the homepage. */
body.page-template-page-category .page_content_wrap{padding-top:0!important;}
.tn-eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:.65;margin-bottom:14px;}
.tn-hero,.tn-intro,.tn-pillars,.tn-story,.tn-video,.tn-gallery,.tn-grid,.tn-home-seats,.tn-about-band{position:relative;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;max-width:100vw;box-sizing:border-box;background:#000;color:#fff;}
.tn-head{text-align:center;margin-bottom:40px;padding:0 24px;}
.tn-head h2,.tn-story h2,.tn-home-seats h2,.tn-about-band h2{color:#fff!important;-webkit-text-fill-color:#fff!important;text-transform:uppercase!important;font-weight:600!important;letter-spacing:.05em!important;margin:0!important;}
.tn-head h2{font-size:clamp(24px,3.2vw,36px)!important;line-height:1.2!important;}

/* Hero */
.tn-hero{height:100vh;min-height:560px;display:flex;align-items:center;justify-content:center;}
.tn-hero-tint{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.1) 35%,rgba(0,0,0,.15) 60%,rgba(0,0,0,.75));}
.tn-hero-text{position:relative;z-index:3;text-align:center;padding:0 24px;}
.tn-hero #ccg-hero-title{font-size:clamp(40px,7vw,88px)!important;line-height:1.05!important;letter-spacing:.04em!important;text-transform:uppercase!important;font-weight:500!important;color:#fff!important;-webkit-text-fill-color:#fff!important;margin:0!important;padding:0!important;background:none!important;text-shadow:0 2px 30px rgba(0,0,0,.45)!important;}
.tn-hero .ccg-hero-scroll{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);width:1px;height:46px;background:rgba(255,255,255,.3);z-index:3;overflow:hidden;}
.tn-hero .ccg-hero-scroll span{position:absolute;top:-100%;left:0;width:100%;height:100%;background:#fff;animation:tnScrollLine 2s ease-in-out infinite;}
@keyframes tnScrollLine{0%{top:-100%;}60%{top:100%;}100%{top:100%;}}

/* Intro: centred copy, specs in one balanced row, button below */
.tn-intro{padding:110px clamp(24px,6vw,90px) 60px;text-align:center;}
.tn-intro-desc{max-width:1100px;margin:0 auto 60px!important;font-size:clamp(17px,1.7vw,22px)!important;line-height:1.75!important;color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:.85;}
.tn-specs{max-width:1300px;margin:0 auto 56px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);}
.tn-specs--4{grid-template-columns:repeat(4,1fr);}
.tn-spec{padding:30px 26px;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:flex-start;}
.tn-spec+.tn-spec{border-left:1px solid rgba(255,255,255,.14);}
.tn-spec-label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:.5;}
.tn-spec-value{font-size:15px;line-height:1.6;color:#fff!important;-webkit-text-fill-color:#fff!important;font-weight:500;}
.tn-wa{display:inline-flex;align-items:center;gap:10px;background:#25D366!important;color:#fff!important;-webkit-text-fill-color:#fff!important;text-decoration:none!important;padding:16px 38px;border-radius:999px;text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:600;transition:transform .25s ease,background .25s ease;}
.tn-wa:hover{background:#1ebe5b!important;transform:translateY(-2px);}
.tn-wa i{font-size:17px;}

/* Carbon Seats pillars */
.tn-pillars{padding:40px clamp(24px,6vw,90px) 20px;display:grid;grid-template-columns:repeat(5,1fr);gap:0;max-width:none;}
.tn-pillar{padding:34px 26px;border-top:1px solid rgba(255,255,255,.14);}
.tn-pillar+.tn-pillar{border-left:1px solid rgba(255,255,255,.08);}
.tn-pillar-num{font-size:12px;letter-spacing:.2em;color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:.45;margin-bottom:16px;}
.tn-pillar h3{font-size:15px!important;line-height:1.35!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-weight:600!important;margin:0 0 14px!important;}
.tn-pillar p{font-size:14px;line-height:1.75;color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:.68;margin:0;}

/* Story: wider column */
.tn-story{padding:100px clamp(24px,6vw,90px);text-align:center;}
.tn-story-dot{width:10px;height:10px;border:1px solid rgba(255,255,255,.4);border-radius:50%;margin:0 auto 24px;}
.tn-story h2{font-size:clamp(24px,3.2vw,38px)!important;line-height:1.2!important;max-width:1100px;margin:0 auto 22px!important;}
.tn-story p{max-width:1100px;margin:0 auto;font-size:clamp(15px,1.4vw,18px);line-height:1.85;color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:.75;}

/* Video: edge to edge. An upright video sits sharp in the centre with two real project photos
   either side (no blurred copy), so the full width is filled without enlarging the video. */
.tn-video{height:min(92vh,980px);overflow:hidden;background:#000;--tn-vw:calc(min(92vh,980px) * 9 / 16);}
.tn-video video{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;pointer-events:none;}
.tn-video .tn-video-main{object-fit:contain;z-index:1;}
.tn-video.is-landscape .tn-video-main{object-fit:cover;}
.tn-video video::-webkit-media-controls{display:none!important;}
.tn-video-side{position:absolute;top:0;bottom:0;display:none;overflow:hidden;z-index:0;}
.tn-video-side img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;display:block;}
.tn-video-side::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.18);}
.tn-video-side--l{left:0;width:calc(50% - var(--tn-vw, 0px) / 2 - 8px);}
.tn-video-side--r{right:0;width:calc(50% - var(--tn-vw, 0px) / 2 - 8px);}
.tn-video.is-portrait .tn-video-side{display:block;}
.tn-video.is-portrait .tn-video-main{left:50%!important;right:auto!important;width:var(--tn-vw)!important;transform:translateX(-50%);object-fit:cover;}
.tn-video-toggle{position:absolute;right:24px;bottom:24px;z-index:3;width:42px!important;height:42px!important;padding:0!important;border-radius:50%!important;border:1.5px solid rgba(255,255,255,.7)!important;background:rgba(0,0,0,.35)!important;color:#fff!important;font-size:11px;display:flex!important;align-items:center;justify-content:center;cursor:pointer;}

/* Slider: every slide takes its photo's own shape, so the whole photo shows with no empty edges. */
.tn-gallery{padding:110px 0 60px;}
.tn-slider{position:relative;overflow:hidden;height:min(80vh,860px);cursor:grab;user-select:none;}
.tn-track{display:flex;align-items:center;height:100%;transition:transform .6s cubic-bezier(.22,.61,.36,1);will-change:transform;}
.tn-slide{flex:0 0 auto;width:min(84vw,1400px);height:100%;margin:0 14px!important;border-radius:6px;opacity:.35;transform:scale(.94);transition:opacity .6s ease,transform .6s ease;cursor:zoom-in;}
.tn-slide.is-active{opacity:1;transform:scale(1);}
.tn-slide>.tn-fill{display:none!important;}
.tn-slide .tn-fit{object-fit:cover!important;}
.tn-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:54px!important;height:54px!important;padding:0!important;border-radius:50%!important;background:rgba(0,0,0,.45)!important;border:1px solid rgba(255,255,255,.25)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:19px;display:flex!important;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(4px);}
.tn-nav:hover{background:rgba(0,0,0,.7)!important;}
.tn-prev{left:max(20px,4vw);}
.tn-next{right:max(20px,4vw);}
.tn-count{text-align:center;margin-top:26px;font-size:13px;letter-spacing:.18em;color:#fff;opacity:.7;}
.tn-count-cur{font-weight:600;opacity:1;}

/* Grid: bigger tiles */
.tn-grid{padding:60px clamp(16px,4vw,60px) 120px;}
.tn-cards{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,24px);}
.tn-card{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:6px;background:#111;cursor:zoom-in;}
.tn-card img{width:100%!important;height:100%!important;object-fit:cover;display:block;transition:transform .6s ease;}
.tn-card:hover img{transform:scale(1.04);}

/* Lightbox */
.tn-lightbox{position:fixed;inset:0;z-index:100050;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;}
.tn-lightbox.is-open{opacity:1;visibility:visible;transition:opacity .3s ease;}
.tn-lightbox img{max-width:94vw!important;max-height:90vh!important;width:auto!important;height:auto!important;object-fit:contain;}
.tn-lb-btn{position:absolute;width:50px!important;height:50px!important;padding:0!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.3)!important;background:rgba(0,0,0,.4)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:20px;display:flex!important;align-items:center;justify-content:center;cursor:pointer;}
.tn-lb-close{top:20px;right:20px;}
.tn-lb-prev{left:20px;top:50%;transform:translateY(-50%);}
.tn-lb-next{right:20px;top:50%;transform:translateY(-50%);}

/* Homepage: four category cards, Carbon Seats feature */
.cph-cats .cph-cat{min-width:0;}
.tn-home-seats{display:grid;grid-template-columns:1.1fr .9fr;min-height:88vh;}
.tn-home-seats-media{min-height:520px;}
.tn-home-seats-text{display:flex;flex-direction:column;justify-content:center;padding:80px clamp(28px,6vw,100px);}
.tn-home-seats h2{font-size:clamp(26px,2.8vw,40px)!important;line-height:1.25!important;letter-spacing:.02em!important;text-transform:none!important;margin:0 0 36px!important;}
.tn-home-seats-specs{border-top:1px solid rgba(255,255,255,.14);margin-bottom:40px;}
.tn-home-seats-specs div{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:14.5px;line-height:1.6;color:#fff;}
.tn-home-seats-specs strong{font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.55;padding-top:3px;}
.tn-outline{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.45);color:#fff!important;-webkit-text-fill-color:#fff!important;text-decoration:none!important;padding:15px 32px;border-radius:999px;text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:600;transition:background .25s ease;}
.tn-outline:hover{background:rgba(255,255,255,.1);}

/* Products page: four cards */
.cpp-cats{display:grid!important;grid-template-columns:repeat(4,1fr)!important;}
.cpp-cats .cpp-cat{width:auto!important;min-width:0;}

/* About: text full width, smoked photo band below */
.cab-grid{grid-template-columns:1fr!important;max-width:980px;margin:0 auto;}
.cab-text p{font-size:16px!important;}
.tn-about-band{height:78vh;min-height:460px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.tn-band-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.04);transition:opacity 1.6s ease,transform 7s ease;}
.tn-band-img.is-active{opacity:1;transform:scale(1);}
.tn-about-band-tint{position:absolute;inset:0;background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 22%,rgba(0,0,0,.5) 78%,#000 100%);}
.tn-about-band-text{position:relative;z-index:2;text-align:center;padding:0 24px;}
.tn-about-band h2{font-size:clamp(26px,4vw,48px)!important;line-height:1.2!important;}

/* Menu overlay: one step smaller on desktop */
@media (min-width:681px){
	#ctm-overlay .ctm-list a{font-size:clamp(22px,2.9vw,40px)!important;}
	#ctm-overlay .ctm-list li{margin-bottom:20px!important;}
}

/* Mobile footer: small logo on the left, "Start your project" on the right of the same line */
@media (max-width:680px){
	.tcf-footer .tcf-top{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;}
	.tcf-footer .tcf-top>a:first-child{flex:0 0 auto;line-height:0;}
	.tcf-footer .tcf-logo{width:112px!important;max-width:112px!important;height:auto!important;}
	.tcf-footer .tcf-cta{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;width:auto!important;flex:0 0 auto;align-self:center!important;margin:0!important;padding:10px 16px!important;border:1px solid rgba(255,255,255,.4)!important;border-radius:999px!important;background:rgba(255,255,255,.04)!important;font-size:9.5px!important;letter-spacing:.14em!important;white-space:nowrap;color:#fff!important;}
	.tcf-footer .tcf-cta span{font-size:12px;font-family:Arial,Helvetica,sans-serif;font-variant-emoji:text;}
}

/* Responsive */
@media (max-width:1100px){
	.tn-pillars{grid-template-columns:repeat(2,1fr);}
	.tn-pillar:nth-child(odd){border-left:none;}
	.tn-specs--4{grid-template-columns:repeat(2,1fr);}
	.tn-specs--4 .tn-spec:nth-child(3){border-left:none;}
	.tn-specs--4 .tn-spec:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14);}
	.cph-cats{flex-wrap:wrap;}
	.cph-cats .cph-cat{flex:1 1 50%;}
	.cpp-cats{grid-template-columns:repeat(2,1fr)!important;}
}
@media (max-width:900px){
	.cph-cats .cph-cat{flex:1 1 100%;}
	.tn-home-seats{grid-template-columns:1fr;min-height:0;}
	.tn-home-seats-media{min-height:0;aspect-ratio:4/5;}
	.tn-home-seats-media .tn-fit{object-fit:cover!important;}
	.tn-home-seats-media>.tn-fill{display:none;}
	.tn-home-seats-text{padding:56px 24px 70px;}
}
@media (max-width:760px){
	.tn-intro{padding:70px 22px 40px;}
	.tn-intro-desc{margin-bottom:40px!important;}
	.tn-specs,.tn-specs--4{grid-template-columns:1fr;}
	.tn-spec+.tn-spec{border-left:none;border-top:1px solid rgba(255,255,255,.14);}
	.tn-spec{padding:20px 6px;}
	.tn-pillars{grid-template-columns:1fr;padding:20px 22px;}
	.tn-pillar{border-left:none!important;padding:28px 0;}
	.tn-story{padding:70px 22px;}
}
@media (max-width:680px){
	.tn-hero{height:100vh;height:100svh;min-height:460px;}
	/* Phones: the video sits in normal flow at its own shape, so no browser can crop or zoom it. */
	.tn-video{height:auto!important;aspect-ratio:auto!important;max-height:none;}
	.tn-video video.tn-video-main,.tn-video.is-portrait video.tn-video-main,.tn-video.is-landscape video.tn-video-main{position:relative!important;inset:auto!important;left:0!important;top:auto!important;display:block;width:100%!important;height:auto!important;transform:none!important;object-fit:contain!important;}
	.tn-video .tn-video-side{display:none!important;}
	.tn-gallery{padding:70px 0 40px;}
	/* Phones: one shape for every slide (4:5, the shape of most photos), filled edge to edge. */
	.tn-slider{height:110vw;}
	.tn-slide{width:88vw!important;margin:0 6px!important;}
	.tn-nav{width:40px!important;height:40px!important;font-size:15px;}
	.tn-cards{grid-template-columns:repeat(2,1fr);}
	.cpp-cats{grid-template-columns:1fr!important;}
	.tn-about-band{height:60vh;}
	.tn-home-seats-specs div{grid-template-columns:1fr;gap:6px;}
}
/* Contact form: an old "form css" snippet (Simple Custom CSS) paints the fields #fafafa, so the white typed text was invisible. Keep the dark fields. */
.ccp-form form .nf-field-element input.ninja-forms-field:not([type=submit]):not([type=button]),.ccp-form form .nf-field-element textarea.ninja-forms-field,
.ccp-form form .nf-field-element input.ninja-forms-field:not([type=submit]):not([type=button]):focus,.ccp-form form .nf-field-element textarea.ninja-forms-field:focus{background-color:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.2)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;}
.ccp-form form .nf-field-element input.ninja-forms-field::placeholder,.ccp-form form .nf-field-element textarea.ninja-forms-field::placeholder{color:rgba(255,255,255,.45)!important;-webkit-text-fill-color:rgba(255,255,255,.45)!important;}