.elementor-6064 .elementor-element.elementor-element-fecde05{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:0;}.elementor-6064 .elementor-element.elementor-element-b8f395d{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-6064 .elementor-element.elementor-element-0c86590{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-6064 .elementor-element.elementor-element-509dcac{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-6064 .elementor-element.elementor-element-e3d1ef8{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-6064 .elementor-element.elementor-element-278592a{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-6064 .elementor-element.elementor-element-927645c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}:root{--page-title-display:none;}/* Start custom CSS *//* Last modified: 2026-04-20 15:22 CET | RipTight — shared styles */


/* ══════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   Global CSS custom properties — colours, used throughout all pages.
   ══════════════════════════════════════════════════════════════════ */

:root {
    --white: #FFFFFF; --off-white: #FAF9F6; --black: #000000; --grey: #2D2D2D;
    --grey-light: #F9F9F9; --border: #EEEEEE;
    --accent-1: #bc3626; --accent-2: #131a44; --accent-3: #bc3626;
}
html { overflow-x: hidden; max-width: 100%; }
body { background-color: var(--white); color: var(--grey); font-family: 'Plus Jakarta Sans','Helvetica Neue',sans-serif; margin: 0; -webkit-font-smoothing: antialiased; overflow-x: hidden; max-width: 100%; }
* { box-sizing: border-box; }

/* ══════════════════════════════════════════════════════════════════
   GLOBAL BASE
   html/body defaults, box-sizing, global noise texture overlay.
   ══════════════════════════════════════════════════════════════════ */

body::after { content:""; position:fixed; top:0;left:0;width:100%;height:100%; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); opacity:0.02; pointer-events:none; z-index:9999; }

/* ══════════════════════════════════════════════════════════════════
   SCROLL REVEAL
   .reveal-parent > * starts hidden (opacity 0, translateY 20px).
   Adding .active triggers the staggered fade-in transition.
   ══════════════════════════════════════════════════════════════════ */

.reveal-parent>* { opacity:0; transform:translateY(20px); transition:opacity 1.2s cubic-bezier(0.16,1,0.3,1),transform 1.2s cubic-bezier(0.16,1,0.3,1); overflow:visible; }
.reveal-parent.active>* { opacity:1; transform:translateY(0); overflow:visible; }

/* ══════════════════════════════════════════════════════════════════
   HERO SECTION
   Full-viewport hero with layered bg images, parallax, and
   glitch intro animations (heroColourReveal, heroGlitchR/B).
   ══════════════════════════════════════════════════════════════════ */

.hero { position:relative; width:100%; height:100vh; max-width:100vw; background:#000; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.hero-image-frame { position:absolute; inset:0; width:100%; height:100%; max-width:100%; overflow:hidden; z-index:1; }
@keyframes heroColourReveal { 0%{opacity:0;filter:grayscale(1) brightness(0.85)} 8%{opacity:1;filter:grayscale(1) brightness(0.85)} 44%{opacity:1;filter:grayscale(1) brightness(0.85)} 50%{opacity:1;filter:grayscale(0.6) brightness(1.2)} 58%{opacity:0.8;filter:grayscale(0.8) brightness(0.9)} 65%{opacity:1;filter:grayscale(0.2) brightness(1.1)} 80%{opacity:1;filter:grayscale(0) brightness(1)} 100%{opacity:1;filter:grayscale(0) brightness(1)} }
@keyframes heroGlitchR { 0%,44%,70%,100%{opacity:0;transform:translateX(0);clip-path:inset(0 0 0 0)} 50%{opacity:0.6;transform:translateX(14px);clip-path:inset(15% 0 55% 0)} 55%{opacity:0.5;transform:translateX(-12px);clip-path:inset(55% 0 10% 0)} 60%{opacity:0.7;transform:translateX(10px);clip-path:inset(25% 0 45% 0)} 65%{opacity:0.3;transform:translateX(-6px);clip-path:inset(0 0 0 0)} }
@keyframes heroGlitchB { 0%,44%,70%,100%{opacity:0;transform:translateX(0);clip-path:inset(0 0 0 0)} 50%{opacity:0.6;transform:translateX(-14px);clip-path:inset(15% 0 55% 0)} 55%{opacity:0.5;transform:translateX(12px);clip-path:inset(55% 0 10% 0)} 60%{opacity:0.7;transform:translateX(-10px);clip-path:inset(25% 0 45% 0)} 65%{opacity:0.3;transform:translateX(6px);clip-path:inset(0 0 0 0)} }
.hero .bg-image.glitch-intro { animation:heroColourReveal 2.5s linear forwards; animation-delay:0.2s; }
.hero-rgb-layer { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.05); pointer-events:none; opacity:0; z-index:2; }
.hero-rgb-layer.red { mix-blend-mode:screen; filter:url(#redChannel); animation:heroGlitchR 2.5s steps(2) forwards; animation-delay:0.2s; }
.hero-rgb-layer.blue { mix-blend-mode:screen; filter:url(#blueChannel); animation:heroGlitchB 2.5s steps(2) forwards; animation-delay:0.2s; }
.hero .bg-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.05); will-change:transform,opacity,filter; transition:opacity 5s ease,filter 0.2s ease-out; max-width:none; }
.hero .bg-image.hero-active { opacity:1; }

.hero-text { position:absolute; bottom:calc(5% + 60px); left:0; color:var(--off-white); max-width:min(700px,90vw); padding-left:5%; z-index:10; pointer-events:none; transform-origin:left top; will-change:transform,opacity; }
.hero-text * { pointer-events:auto; }
.hm { position:relative; display:inline; }
.hm::before { content:''; position:absolute; left:var(--mx,-4px); right:var(--mr,-6px); top:var(--mt,-3px); bottom:var(--mb,-4px); background:var(--mc,#131a44); opacity:var(--mo,1); transform:rotate(var(--mr2,-0.4deg)) skewX(var(--ms,-0.8deg)); z-index:-1; border-radius:2px; }
.text-gradient { font-weight:800; background:linear-gradient(-45deg,#FAF9F6,#C8C8C8,#E8E8E8,#B0B0B0,#FAF9F6,#C8C8C8,#FAF9F6); background-size:400% 400%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:inline-block; animation:flowingMesh 16s ease infinite; padding-right:0.15em; margin-right:-0.15em; }
@keyframes flowingMesh { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* ══════════════════════════════════════════════════════════════════
   BUTTONS
   .btn-minimal — dark filled button with hover letter-spacing expand.
   .rt-btn — shared base for pricing/contact submit buttons.
   ══════════════════════════════════════════════════════════════════ */

.btn-minimal { background:var(--grey); color:var(--off-white); padding:20px 40px; font-size:0.65rem; text-transform:uppercase; letter-spacing:3px; font-weight:600; transition:all 0.4s cubic-bezier(0.16,1,0.3,1); box-shadow:0 4px 15px rgba(0,0,0,0.06); display:inline-block; border:none; cursor:pointer; border-radius:2px; }
.btn-minimal:hover { background:var(--black); letter-spacing:5px; transform:translateY(-2px); box-shadow:0 8px 25px rgba(0,0,0,0.1); }

/* ══════════════════════════════════════════════════════════════════
   LAYOUT UTILITIES
   Section padding, max-width containers, heading sizes, accent dot.
   ══════════════════════════════════════════════════════════════════ */

.section-spacing { padding:100px 5%; }
h1,h2,h3 { font-family:'Plus Jakarta Sans','Helvetica Neue',sans-serif; }
h2 { font-size:clamp(2rem,6vw,3.5rem); font-weight:500; letter-spacing:-1px; line-height:1; }
.accent-dot { display:inline-block; width:6px; height:6px; background-color:var(--accent-3); margin-right:12px; margin-bottom:2px; border-radius:1px; vertical-align:middle; }

/* ══════════════════════════════════════════════════════════════════
   SERVICES SECTION
   Accordion items, expand/collapse transitions, background number,
   process step layout, colour-coded service number classes.
   ══════════════════════════════════════════════════════════════════ */

.service-bg-num { position:absolute; right:-20px; top:50%; transform:translateY(-50%) scale(0.8); font-size:clamp(120px,18vw,200px); font-weight:800; color:inherit; opacity:0; line-height:1; pointer-events:none; user-select:none; letter-spacing:-8px; transition:opacity 0.5s ease,transform 0.5s cubic-bezier(0.16,1,0.3,1); z-index:0; }
.service-item.expanded .service-bg-num { opacity:0.25; transform:translateY(-50%) scale(1); }
.service-item.expanded { background-color: rgba(255,255,255,0.02) !important; }
.service-item, .service-item:hover, .service-item:focus, .service-item:active { cursor:pointer; position:relative; overflow:hidden; transition:box-shadow 0.7s cubic-bezier(0.16,1,0.3,1); background-color:transparent !important; background:transparent !important; }
.service-item:hover { background-color: transparent !important; box-shadow: none !important; }
.service-header { display:flex; flex-direction:row; align-items:center; padding:38px 16px; } br.svc-br { display:none; }
.service-content-wrapper { display:grid; grid-template-rows:0fr; transition:grid-template-rows 0.7s cubic-bezier(0.16,1,0.3,1); overflow:hidden; }
.service-item.expanded .service-content-wrapper { grid-template-rows:1fr; }
.service-inner-text { min-height:0; overflow:hidden; padding:0 16px 0 16px; display:flex; gap:0; }
.service-item.expanded .service-inner-text { padding:0 16px 48px 16px; }
.toggle-icon { font-size:1.5rem; font-weight:200; transition:transform 0.5s ease; margin-left:auto; flex-shrink:0; }
.service-item.expanded .toggle-icon { transform:rotate(45deg); }
.service-item h3 { transition:color 0.6s ease; background-size:200% 200%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:inherit; background-image:none; }
.service-item.expanded h3 { background-image:none; -webkit-text-fill-color:#bc3626; color:#bc3626; animation:none; }
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.service-item h3.fading-gradient { background-image:none; -webkit-text-fill-color:#bc3626; color:#bc3626; animation:none; transition:opacity 0.8s ease; opacity:0; }
.service-text-col { width:100%; }
.service-process { margin-top:20px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.08); }
.service-process-label { font-size:0.55rem; text-transform:uppercase; letter-spacing:3px; opacity:0.3; margin-bottom:14px; display:block; }
.service-process-steps { display:flex; flex-direction:column; gap:8px; }
.service-process-step { display:flex; align-items:flex-start; gap:12px; font-size:0.78rem; line-height:1.6; opacity:0.55; }
.service-process-step-title { font-size:0.62rem; font-weight:600; text-transform:uppercase; letter-spacing:2px; opacity:1; color:var(--accent-3); flex-shrink:0; width:140px; }

/* ══════════════════════════════════════════════════════════════════
   FORM ELEMENTS (legacy)
   Minimal underline-style form inputs used in earlier form designs.
   ══════════════════════════════════════════════════════════════════ */

.form-group { position:relative; border-bottom:1px solid rgba(0,0,0,0.1); padding-bottom:12px; transition:border-color 0.4s ease; }
.form-group:focus-within { border-color:var(--grey); }
.form-label { position:absolute; top:0; left:0; text-transform:uppercase; letter-spacing:3px; font-size:0.6rem; opacity:0.3; transition:all 0.4s ease; pointer-events:none; }
.form-input { width:100%; background:transparent; outline:none; font-size:1.875rem; font-weight:300; padding-top:24px; }
.form-group:focus-within .form-label { opacity:1; transform:translateY(-5px); }








/* ══════════════════════════════════════════════════════════════════
   SOCIAL ICONS
   Opacity fade-in on hover, red accent colour for footer social links.
   ══════════════════════════════════════════════════════════════════ */

.social-icon { opacity:0.4; transition:opacity 0.2s ease,letter-spacing 0.5s ease; color:inherit; margin-right:16px; }
.social-icon:hover { opacity:1; color:#bc3626 !important; }
.footer-social-icon { transition:color 0.2s ease, opacity 0.2s ease; }
.footer-social-icon:hover { color:#bc3626 !important; opacity:1; }

/* ══════════════════════════════════════════════════════════════════
   WORK SECTION
   Work grid item reveal animation, image hover grayscale toggle,
   overlay label, and work item number badge.
   ══════════════════════════════════════════════════════════════════ */

.work-item { cursor:pointer; overflow:visible; }
.work-item { opacity:0; transform:translateY(28px); transition:opacity 0.7s ease, transform 0.7s ease; }
.work-item.wi-revealed { opacity:1; transform:translateY(0); }
.work-item .work-item-img-wrap { opacity:0; transform:translateY(12px); transition:opacity 0.6s ease, transform 0.6s ease; }
.work-item.wi-revealed .work-item-img-wrap { opacity:1; transform:translateY(0); }
.work-item .wi-text { opacity:0; transform:translateY(10px); transition:opacity 0.55s ease 0.15s, transform 0.55s ease 0.15s; }
.work-item.wi-revealed .wi-text { opacity:1; transform:translateY(0); }
.work-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,0.7) 0%,transparent 60%); display:none !important; align-items:flex-end; padding:28px; }
.work-item-img-wrap:hover .work-overlay { display:flex !important; }
.work-overlay span { color:#fff; font-size:0.6rem; text-transform:uppercase; letter-spacing:3px; font-weight:600; }
.work-num { position:absolute; top:16px; left:20px; font-size:0.6rem; font-weight:700; letter-spacing:2px; color:#fff; opacity:0.6; transition:opacity 0.4s ease; pointer-events:none; z-index:2; mix-blend-mode:difference; }

/* ══════════════════════════════════════════════════════════════════
   PRICING CALCULATOR
   Selectable calc-item cards, active state, monthly badge,
   category grid layout.
   ══════════════════════════════════════════════════════════════════ */

.calc-item { display:flex; flex-direction:column; gap:6px; padding:20px 24px; border:1px solid #DDDDDD; background:#fff; cursor:pointer; text-align:left; transition:all 0.3s cubic-bezier(0.16,1,0.3,1); position:relative; min-width:160px; border-radius:3px; }
.calc-item:hover { background:#F4F4F4; border-color:#131a44; transform:translateY(-3px); box-shadow:0 8px 20px rgba(19,26,68,0.10); }
.calc-item:hover .calc-item-name { color:#131a44 !important; }
.calc-item:hover .calc-item-price { color:#bc3626 !important; }
.calc-item:not(.active):not(:hover) .calc-item-name { color:#2D2D2D !important; }
.calc-item:not(.active):not(:hover) .calc-item-price { color:rgba(0,0,0,0.55) !important; }
.calc-item:focus { outline:none; }
.calc-item:focus:not(:hover):not(.active) { background:#fff; border-color:#DDDDDD; transform:translateY(0); box-shadow:none; }
.calc-item:focus:not(:hover):not(.active) .calc-item-name { color:#2D2D2D !important; }
.calc-item:focus:not(:hover):not(.active) .calc-item-price { color:rgba(0,0,0,0.55) !important; }
.calc-item.active { background:#EBEBEB; border-color:#2C3E6B; transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.06); }
.calc-item.active:hover { background:#EBEBEB !important; border-color:#2C3E6B !important; color:#2D2D2D !important; }
.calc-item.active .calc-item-name { color:#2D2D2D; }
.calc-item.active .calc-item-price { color:var(--accent-1); }
.calc-item-name { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.75rem; font-weight:600; letter-spacing:0.5px; color:#2D2D2D; transition:color 0.3s; }
.calc-item-price { font-size:0.8rem; font-weight:500; color:rgba(0,0,0,0.55); font-family:'Plus Jakarta Sans',sans-serif; transition:color 0.3s; }
.calc-item--monthly::after { content:'monatlich'; position:absolute; top:8px; right:8px; font-size:0.45rem; text-transform:uppercase; letter-spacing:2px; color:rgba(0,0,0,0.2); font-family:'Plus Jakarta Sans',sans-serif; }
.calc-item--monthly.active::after { color:rgba(255,255,255,0.3); }

/* ══════════════════════════════════════════════════════════════════
   FOOTER
   Footer link hover states and tag cloud (.ft) drift animation.
   ══════════════════════════════════════════════════════════════════ */

.footer-link:hover { color:#bc3626 !important; opacity:1 !important; transition:color 0.3s ease; }
.footer-link { display:inline-block; width:fit-content; }
@keyframes ftDrift {
  0%   { transform:translateY(0px) translateX(0px); }
  25%  { transform:translateY(-3px) translateX(1px); }
  50%  { transform:translateY(-1px) translateX(-2px); }
  75%  { transform:translateY(-4px) translateX(1px); }
  100% { transform:translateY(0px) translateX(0px); }
}
.ft { display:inline-block; padding:5px 12px; border:1px solid rgba(255,255,255,0.18); border-radius:100px; font-size:0.62rem; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.55); opacity:0; transform:translateY(8px); transition:opacity 0.6s ease var(--d), transform 0.6s ease var(--d), border-color 0.3s ease, color 0.3s ease; cursor:default; }
.ft:hover { border-color:rgba(188,54,38,0.3); }
#footer-tags-col.tags-visible .ft { opacity:1; transform:translateY(0); animation:ftDrift 6s ease-in-out infinite; animation-delay:var(--d); }

/* ══════════════════════════════════════════════════════════════════
   FORM AUTOFILL OVERRIDE
   Prevents Chrome's yellow autofill background from breaking the
   dark contact form aesthetic.
   ══════════════════════════════════════════════════════════════════ */

input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus { -webkit-box-shadow:0 0 0px 1000px rgba(0,0,0,0.06) inset,inset 0 2px 6px rgba(0,0,0,0.08) !important; box-shadow:0 0 0px 1000px rgba(0,0,0,0.06) inset,inset 0 2px 6px rgba(0,0,0,0.08) !important; -webkit-text-fill-color:#2D2D2D !important; background-color:rgba(0,0,0,0.06) !important; transition:background-color 5000s ease-in-out 0s; }
.footer-contact-link { transition:color 0.08s ease 0.01s,opacity 0.01s ease !important; display:inline-flex; width:fit-content; }
.footer-contact-link:hover { opacity:1 !important; color:#bc3626 !important; }

/* ══════════════════════════════════════════════════════════════════
   ABOUT SECTION
   Two-column flex layout, polaroid image wrap and glitch effect.
   ══════════════════════════════════════════════════════════════════ */

.about-half { width:100%; box-sizing:border-box; }
.object-cover{object-fit:cover;}
.object-contain{object-fit:contain;}
.group:hover .group-hover\:grayscale-0{filter:grayscale(0);}
.group:hover .group-hover\:scale-105{transform:scale(1.05);}
.transition-all{transition:all;}
.duration-700{transition-duration:700ms;}
.grayscale{filter:grayscale(1);}
.work-item .aspect-\[4\/3\] img,.work-item .aspect-\[4\/5\] img{width:100%;height:100%;object-fit:cover;}
.aspect-\[4\/3\]{aspect-ratio:4/3;}
.aspect-\[4\/5\]{aspect-ratio:4/5;}
.text-\[0\.6rem\]{font-size:0.6rem;}
.text-\[0\.55rem\]{font-size:0.55rem;}
.tracking-\[4px\]{letter-spacing:4px;}
.tracking-\[3px\]{letter-spacing:3px;}
.mb-4{margin-bottom:1rem;}
.font-medium{font-weight:500;}
.text-black{color:#000;}
.space-y-0>*+*{margin-top:0;}
.border-b{border-bottom:1px solid;}
.border-t{border-top:1px solid;}
.border-gray-200{border-color:#e5e7eb;}
.about-flex-row{display:flex;flex-direction:column;gap:3.5rem;align-items:center;}
.gap-20{gap:5rem;}
.gap-24{gap:6rem;}
.items-start{align-items:flex-start;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.flex-shrink-0{flex-shrink:0;}
.mb-10{margin-bottom:2.5rem;}
.mb-16{margin-bottom:4rem;}
.text-lg{font-size:1.125rem;line-height:1.75rem;}
.text-xl{font-size:1.25rem;line-height:1.75rem;}
.px-\[5\%\]{padding-left:5%;padding-right:5%;}
.space-y-0{margin-top:0;}
.border-b.border-gray-200{border-bottom:1px solid #e5e7eb;}
.border-t.border-gray-200{border-top:1px solid #e5e7eb;}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}
.text-\[0\.7rem\]{font-size:0.7rem;}
.tracking-\[2px\]{letter-spacing:2px;}
.group{position:relative;}
.opacity-50{opacity:0.5;}
.opacity-30{opacity:0.3;}
.mb-32{margin-bottom:8rem;}
.k53-lb-nav,.k53-lb-nav:hover,.k53-lb-close,.k53-lb-close:hover,.k53-lb-dot,.k53-lb-dot:hover,.dae20-lb-nav,.dae20-lb-nav:hover,.dae20-lb-close,.dae20-lb-close:hover,.dae20-lb-dot,.dae20-lb-dot:hover,#dae20lp-lightbox button,#dae20lp-lightbox button:hover,.work-item *,.work-item *:hover{color:inherit !important;}
#calc-quote-btn{color:#fff !important;}
#calc-reset-btn{color:#2D2D2D !important;}
.calc-item.active,.calc-item.active:hover{color:#fff !important;}
.k53-lb-nav:hover,.dae20-lb-nav:hover,#dae20lp-lightbox .k53-lb-nav:hover{color:#fff !important;}
.k53-lb-close:hover,.dae20-lb-close:hover{color:#fff !important;}
.calc-cat-grid{display:grid;grid-template-columns:200px 1fr;gap:40px;align-items:start;}
.cf7-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;}
.bunny-logo{height:2.875rem !important;max-height:2.875rem !important;width:auto !important;}
.mx-auto{margin-left:auto;margin-right:auto;}
.max-w-6xl{max-width:72rem;}
.max-w-7xl{max-width:80rem;}
.max-w-xl{max-width:36rem;}
.max-w-lg{max-width:32rem;}
.w-full{width:100%;}
.h-full{height:100%;}
.h-8{height:2.375rem;}
.h-10{height:2.875rem;}
.block{display:block;}
.hidden{display:none;}
.relative{position:relative;}
.overflow-hidden{overflow:hidden;}
.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,0.05);}
.bg-gray-100{background-color:#f3f4f6;}
.bg-image{background-size:cover;background-position:center;}
.uppercase{text-transform:uppercase;}
.font-bold{font-weight:700;}
.font-light{font-weight:300;}
.leading-relaxed{line-height:1.625;}
.leading-snug{line-height:1.375;}
.tracking-tight{letter-spacing:-0.025em;}
.tracking-tighter{letter-spacing:-0.05em;}
.opacity-40{opacity:0.4;}.opacity-60{opacity:0.6;}
.opacity-60{opacity:0.6;}
.opacity-70{opacity:0.7;}
.opacity-80{opacity:0.8;}
.opacity-90{opacity:0.9;}
.hover\:opacity-100:hover{opacity:1;}
.mb-1{margin-bottom:0.25rem;}
.mb-2{margin-bottom:0.5rem;}
.mb-6{margin-bottom:1.5rem;}
.mb-8{margin-bottom:2rem;}
.mb-20{margin-bottom:5rem;}
.mt-6{margin-top:1.5rem;}
.pt-5{padding-top:1.25rem;}
.space-y-8>*+*{margin-top:2rem;}
.flex{display:flex;}
.flex-col{flex-direction:column;}
.flex-1{flex:1;}
.flex-\[2\]{flex:2;}
.gap-6{gap:1.5rem;}
.gap-12{gap:3rem;}
.gap-16{gap:4rem;}
.gap-x-12{column-gap:3rem;}
.gap-y-16{row-gap:4rem;}
.grid{display:grid;}
.col-span-2{grid-column:span 2/span 2;}
.text-xs{font-size:0.75rem;line-height:1rem;}
.text-sm{font-size:0.875rem;line-height:1.25rem;}
.text-2xl{font-size:1.5rem;line-height:2rem;}
.text-4xl{font-size:2.25rem;line-height:2.5rem;}
.text-\[0\.65rem\]{font-size:0.65rem;}
.text-\[1\.25rem\]{font-size:1.25rem;}
.italic{font-style:italic;}
.about-img-wrap{perspective:800px;cursor:pointer;}
.about-img-inner img{width:100%;height:580px;object-fit:cover;display:block;filter:grayscale(100%);transition:filter 0.8s cubic-bezier(0.16,1,0.3,1);}
.about-img-wrap:hover .about-img-inner img{filter:grayscale(0%);}
.about-img-inner::before,.about-img-inner::after{content:'';position:absolute;inset:0;background-image:url('https://riptight.com/wp-content/uploads/2026/03/A_close-up_moody_202603220933-scaled.avif');background-size:cover;background-position:center;opacity:0;mix-blend-mode:screen;transition:opacity 0.05s;}
.about-img-inner::before{background-color:rgba(255,0,0,0.4);mix-blend-mode:multiply;}
.about-img-inner::after{background-color:rgba(0,200,255,0.4);mix-blend-mode:multiply;}
.about-img-wrap.glitching .about-img-inner::before{opacity:1;transform:translateX(-6px);animation:glitch-r 0.3s steps(2) forwards;}
.about-img-wrap.glitching .about-img-inner::after{opacity:1;transform:translateX(6px);animation:glitch-b 0.3s steps(2) forwards;}
@keyframes glitch-r{0%{transform:translateX(-6px) scaleY(1);clip-path:inset(20% 0 60% 0)}25%{transform:translateX(4px) scaleY(1.02);clip-path:inset(50% 0 10% 0)}50%{transform:translateX(-3px);clip-path:inset(70% 0 5% 0)}100%{transform:translateX(0);opacity:0}}
@keyframes glitch-b{0%{transform:translateX(6px) scaleY(0.98);clip-path:inset(10% 0 70% 0)}25%{transform:translateX(-4px);clip-path:inset(60% 0 20% 0)}50%{transform:translateX(2px);clip-path:inset(30% 0 40% 0)}100%{transform:translateX(0);opacity:0}}

/* ══════════════════════════════════════════════════════════════════
   LIGHTBOXES
   Shared styles for K53 and DÄ20 lightbox overlays:
   fullscreen fixed overlay, nav arrows, dot indicators, header/footer.
   ══════════════════════════════════════════════════════════════════ */

#k53-lightbox{position:fixed;inset:0;z-index:99000;background:rgba(0,0,0,0.96);display:none;flex-direction:column;align-items:center;justify-content:center;}
#k53-lightbox.open{display:flex}
#k53-lightbox-img{max-width:88vw;max-height:72vh;object-fit:contain;border-radius:2px;box-shadow:0 32px 80px rgba(0,0,0,0.6);transition:opacity 0.3s ease;}
#k53-lightbox-img.fading{opacity:0}
.k53-lb-header{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:24px 40px;z-index:10;}
.k53-lb-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.65rem;text-transform:uppercase;letter-spacing:4px;color:rgba(255,255,255,0.4);}
.k53-lb-close{background:none;border:none;cursor:pointer;color:rgba(255,255,255,0.5);font-size:1.4rem;line-height:1;transition:color 0.2s;padding:0;}
.k53-lb-close:hover{color:#fff}
.k53-lb-nav{position:fixed;top:50%;transform:translateY(-50%);background:none;border:1px solid rgba(255,255,255,0.15);color:rgba(255,255,255,0.5);width:48px;height:48px;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;transition:border-color 0.2s,color 0.2s;border-radius:0;}
.k53-lb-nav:hover{border-color:rgba(255,255,255,0.5);color:#fff !important;background:rgba(255,255,255,0.1) !important;}
#k53-lb-prev{left:32px}
#k53-lb-next{right:32px}
.k53-lb-footer{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:48px;padding:28px 40px;}
.k53-lb-label{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.7rem;text-transform:uppercase;letter-spacing:3px;color:rgba(255,255,255,0.7);}
.k53-lb-dots{display:flex;gap:8px;align-items:center}
.k53-lb-dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,0.2);cursor:pointer;transition:background 0.3s,transform 0.3s;border:none;padding:0;}
.k53-lb-dot.active{background:#fff;transform:scale(1.4);}

/* ══════════════════════════════════════════════════════════════════
   BACK-TO-TOP BUTTON
   Fixed position, glass blur, glitch animation keyframes.
   ══════════════════════════════════════════════════════════════════ */

#btt{position:fixed;bottom:120px;right:40px;z-index:9000;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity 0.3s ease;border:1px solid rgba(0,0,0,0.15);background:rgba(255,255,255,0.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
#btt.visible{opacity:1;pointer-events:auto;}
#btt-label{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.6rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#111;position:relative;transition:opacity 0.2s;}
#btt-label::before,#btt-label::after{content:attr(data-text);position:absolute;inset:0;font-family:'Plus Jakarta Sans',sans-serif;font-size:0.6rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;opacity:0;pointer-events:none;}
#btt-label::before{color:#bc3626;}
#btt-label::after{color:#131a44;}
@keyframes bttGlitchMain{0%,100%{transform:translateY(0) scaleY(1);opacity:1}10%{transform:translateY(-6px) scaleY(1.05);opacity:0.7}25%{transform:translateY(8px) scaleY(0.95);opacity:0.9}40%{transform:translateY(-5px);opacity:0.6}55%{transform:translateY(6px);opacity:0.85}70%{transform:translateY(-3px);opacity:1}85%{transform:translateY(2px);opacity:0.9}}
@keyframes bttGlitchR{0%,100%{opacity:0;transform:translateY(0)}15%{opacity:0.9;transform:translateY(-10px);clip-path:inset(0 0 60% 0)}30%{opacity:0.7;transform:translateY(8px);clip-path:inset(65% 0 0 0)}45%{opacity:0.8;transform:translateY(-12px);clip-path:inset(0 0 40% 0)}60%{opacity:0.5;transform:translateY(6px);clip-path:inset(75% 0 0 0)}75%{opacity:0.6;transform:translateY(-8px);clip-path:inset(0 0 25% 0)}90%{opacity:0;transform:translateY(0)}}
@keyframes bttGlitchB{0%,100%{opacity:0;transform:translateY(0)}20%{opacity:0.8;transform:translateY(10px);clip-path:inset(55% 0 0 0)}35%{opacity:0.6;transform:translateY(-8px);clip-path:inset(0 0 65% 0)}50%{opacity:0.7;transform:translateY(12px);clip-path:inset(35% 0 0 0)}65%{opacity:0.5;transform:translateY(-6px);clip-path:inset(0 0 70% 0)}80%{opacity:0.4;transform:translateY(8px);clip-path:inset(20% 0 0 0)}95%{opacity:0;transform:translateY(0)}}
#btt.glitching #btt-label{animation:bttGlitchMain 0.55s steps(3) forwards;}
#btt.glitching #btt-label::before{animation:bttGlitchR 0.55s steps(3) forwards;opacity:1;}
#btt.glitching #btt-label::after{animation:bttGlitchB 0.55s steps(3) forwards;opacity:1;}
@keyframes bttFlash{0%{opacity:0}10%{opacity:0.25}20%{opacity:0}40%{opacity:0.18}55%{opacity:0}75%{opacity:0.12}100%{opacity:0}}
#btt-flash{position:absolute;inset:0;background:white;opacity:0;pointer-events:none;}
#btt.glitching #btt-flash{animation:bttFlash 0.55s steps(3) forwards;}
#dae20-lightbox{position:fixed;inset:0;z-index:99001;background:rgba(0,0,0,0.96);display:none;flex-direction:column;align-items:center;justify-content:center;}
#dae20-lightbox.open{display:flex}
.dae20-slide{width:min(900px,88vw);height:min(560px,65vh);border-radius:2px;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,0.6);transition:opacity 0.3s ease;flex-shrink:0;}
.dae20-slide.fading{opacity:0}
.dae20-lb-header{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:24px 40px;z-index:10;}
.dae20-lb-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.65rem;text-transform:uppercase;letter-spacing:4px;color:rgba(255,255,255,0.4);}
.dae20-lb-close{background:none;border:none;cursor:pointer;color:rgba(255,255,255,0.5);font-size:1.4rem;transition:color 0.2s;padding:0;}
.dae20-lb-close:hover{color:#fff}
.dae20-lb-nav{position:fixed;top:50%;transform:translateY(-50%);background:none;border:1px solid rgba(255,255,255,0.15);color:rgba(255,255,255,0.5);width:48px;height:48px;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;transition:border-color 0.2s,color 0.2s;}
.dae20-lb-nav:hover{border-color:rgba(255,255,255,0.5);color:#fff !important;background:rgba(255,255,255,0.1) !important;}
#dae20-lb-prev{left:32px}
#dae20-lb-next{right:32px}
.dae20-lb-footer{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:48px;padding:28px 40px;}
.dae20-lb-label{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.7rem;text-transform:uppercase;letter-spacing:3px;color:rgba(255,255,255,0.7);}
.dae20-lb-dots{display:flex;gap:8px;align-items:center;}
.dae20-lb-dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,0.2);cursor:pointer;transition:background 0.3s,transform 0.3s;border:none;padding:0;}
.dae20-lb-dot.active{background:#fff;transform:scale(1.4);}
.rt-btn:not(:disabled):hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,0.15) !important;}
.rt-btn:not(:disabled):active{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.1) !important;}
.rt-btn--glass:hover{background:rgba(255,255,255,0.45) !important;box-shadow:0 10px 28px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.9) !important;}

/* ══════════════════════════════════════════════════════════════════
   LEGAL OVERLAY
   Backdrop blur overlay + glass card for legal text modals
   (Impressum, Datenschutz, AGB, Cookies, Barrierefreiheit).
   ══════════════════════════════════════════════════════════════════ */

#legal-overlay{position:fixed;inset:0;z-index:99500;background:rgba(0,0,0,0.25);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);display:none;align-items:center;justify-content:center;padding:40px 24px;box-sizing:border-box;}
#legal-overlay.open{display:flex;}
#legal-card{background:rgba(255,255,255,0.07);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid #bc3626;border-radius:3px;width:100%;max-width:760px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 32px 80px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.08);animation:legalFadeIn 0.3s ease forwards;}
@keyframes legalFadeIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
#legal-header{display:flex;align-items:center;justify-content:space-between;padding:28px 36px;border-bottom:1px solid rgba(188,54,38,0.25);flex-shrink:0;}
#legal-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.65rem;text-transform:uppercase;letter-spacing:4px;color:rgba(255,255,255,0.6);margin:0;}
#legal-close{background:none;border:none;cursor:pointer;color:rgba(255,255,255,0.4);font-size:1.4rem;line-height:1;padding:0;transition:color 0.2s;}
#legal-close:hover{color:#bc3626;}
#legal-close:focus,#legal-close:focus-visible{outline:none;}
#legal-body{padding:36px;overflow-y:auto;flex:1;color:rgba(255,255,255,0.75);font-family:'Plus Jakarta Sans',sans-serif;font-size:0.875rem;line-height:1.8;scrollbar-width:thin;scrollbar-color:rgba(188,54,38,0.4) transparent;}
#legal-body::-webkit-scrollbar{width:4px;}
#legal-body::-webkit-scrollbar-track{background:transparent;}
#legal-body::-webkit-scrollbar-thumb{background:rgba(188,54,38,0.4);border-radius:2px;}
#legal-body h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.4rem;font-weight:600;color:#fff;letter-spacing:-0.5px;margin:0 0 24px;}
#legal-body h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:3px;color:#bc3626;margin:28px 0 10px;}
#legal-body p{margin:0 0 16px;}
#legal-body a{color:#bc3626;text-decoration:none;}
#legal-body a:hover{text-decoration:underline;}
#legal-body hr{border:none;border-top:1px solid rgba(255,255,255,0.08);margin:24px 0;}

/* ══════════════════════════════════════════════════════════════════
   ELEMENTOR COMPATIBILITY
   Overrides and fixes for specific elements when embedded in
   Elementor pages (logo sizing, hero image positioning, etc.).
   ══════════════════════════════════════════════════════════════════ */

/* ── CLEANUP STYLES (from document 4) ── */
#hero-bg{object-fit:cover;object-position:center center;}
.work-item.group{overflow:visible;}

/* ══════════════════════════════════════════════════════════════════
   CONTACT SECTION
   Dark background section with glass gradient overlay, form input
   placeholder colour, and button overrides.
   ══════════════════════════════════════════════════════════════════ */

#contact {
    isolation: isolate;
}
#contact::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.08) 35%, transparent 65%);
    pointer-events: none;
    z-index: 1;
}
#rt-contact-form input::placeholder,
#rt-contact-form textarea::placeholder {
    color: rgba(255,255,255,0.35);
}
#cf7-reset-btn {
    color: rgba(255,255,255,0.7) !important;
    border-color: rgba(255,255,255,0.25) !important;
}
#calc-quote-btn:not(:disabled) {
    background: linear-gradient(135deg,#787878 0%,#444444 100%) !important;
    color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════════
   SERVICES COLOUR OVERRIDES
   Forces dark text on the light-background services section,
   overriding any inherited dark-mode or global colour rules.
   ══════════════════════════════════════════════════════════════════ */

#services { color: #111 !important; }
#services h2 { color: #111 !important; }
#services p { color: #2D2D2D !important; }
#services .service-item h3,
#services .service-item:not(.expanded) h3 {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    background-image: none !important;
    opacity: 1 !important;
}
#services .service-item.expanded h3 {
    color: #bc3626 !important;
    -webkit-text-fill-color: #bc3626 !important;
    background-image: none !important;
}
#services .service-process-label { color: rgba(45,45,45,0.4) !important; opacity: 1; }
#services .service-process-step { color: #2D2D2D !important; opacity: 0.7; }
#services .service-process-step * { color: #2D2D2D !important; }
#services .service-process-step-title { color: #bc3626 !important; }
#services .service-inner-text p { color: #2D2D2D !important; }
#services .toggle-icon { color: #2D2D2D !important; }
#services span:not(.accent-dot):not(.service-process-step-title):not(.toggle-icon):not(.service-bg-num) { color: #2D2D2D !important; }
.svc-num-1 { color: #E8621A !important; }
.svc-num-2 { color: #2E86AB !important; }
.svc-num-3 { color: #A23B72 !important; }
.svc-num-4 { color: #3D9970 !important; }
.svc-num-5 { color: #F7C948 !important; }



/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET & DESKTOP (min-width: 768px)
   Two-column layouts, grid switches, typography size bumps.
   ══════════════════════════════════════════════════════════════════ */

@media(min-width:768px){
.about-flex-row{flex-direction:row;}
.about-half{width:50%;}
.service-text-col{width:66.666%;}
.md\:flex{display:flex;}
.md\:hidden{display:none;}
.hidden.md\:flex{display:flex;}
.md\:flex-row{flex-direction:row;}
.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.md\:col-span-1{grid-column:span 1/span 1;}
.md\:col-span-2{grid-column:span 2/span 2;}
.md\:w-1\/2{width:50%;}
.md\:w-2\/3{width:66.666667%;}
.md\:text-2xl{font-size:1.5rem;line-height:2rem;}
.md\:text-4xl{font-size:2.25rem;line-height:2.5rem;}
.md\:text-lg{font-size:1.125rem;line-height:1.75rem;}
.cf7-grid{grid-template-columns:repeat(2,1fr);}
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (max-width: 767px)
   Single-column overrides, reduced padding, lightbox adjustments,
   hero height reduction, mobile form button stacking.
   ══════════════════════════════════════════════════════════════════ */

@media(max-width:767px){.service-process-step{flex-direction:row;gap:8px;align-items:flex-start;}.service-process-step-title{min-width:90px;flex-shrink:0;padding-top:2px;}.service-header{padding:20px 16px;}br.svc-br{display:block;}
.md\:flex{display:none;}
.md\:hidden{display:block;}
.md\:grid-cols-2,.md\:grid-cols-3,.md\:grid-cols-4{grid-template-columns:1fr !important;}
.md\:col-span-1,.md\:col-span-2{grid-column:span 1 !important;}
.hero{height:65vh;min-height:420px;}.section-spacing{padding:60px 5%;}
.hero-text{bottom:auto;top:50%;transform:translateY(-30%);padding-left:6%;padding-right:6%;max-width:100%;}
.calc-cat-grid{grid-template-columns:1fr !important;gap:16px !important;}
.calc-item{min-width:0 !important;width:100%;}
.k53-lb-footer,.dae20-lb-footer{gap:16px;padding:16px 20px;}
.k53-lb-nav,.dae20-lb-nav{width:36px;height:36px;font-size:1rem;}
#k53-lb-prev,#dae20-lb-prev{left:12px;}
#k53-lb-next,#dae20-lb-next{right:12px;}
.k53-lb-header,.dae20-lb-header{padding:16px 20px;}
.footer-grid{gap:2rem !important;}
}
/* ── TIME SLOT PILLS ── */

/* ══════════════════════════════════════════════════════════════════
   CONTACT: TIMESLOT PILLS
   Pill-shaped callback timeslot body.elementor-page-6064 buttons in the contact form.
   ══════════════════════════════════════════════════════════════════ */

.ts-pill { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.55rem; text-transform:uppercase; letter-spacing:2px; color:rgba(255,255,255,0.7) !important; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); border-radius:100px; padding:8px 14px; cursor:pointer; transition:all 0.2s ease; display:inline-block; }
.ts-pill:hover { border-color:rgba(188,54,38,0.6) !important; color:#fff !important; background:rgba(255,255,255,0.12) !important; }
.ts-pill.ts-active { background:rgba(188,54,38,0.15) !important; border-color:#bc3626 !important; color:#fff !important; }

/* ── CONTACT FORM BUTTONS MOBILE ── */
@media (max-width: 767px) {
    #cf7-submit { width:100%; box-sizing:border-box; }
    #cf7-reset-btn { width:auto; padding:12px 24px !important; font-size:0.55rem !important; opacity:0.6; }
}
@media (max-width: 767px) {
    .cf7-btn-row { flex-direction:column; align-items:stretch !important; }
}
/* ══════════════════════════════════════════════════════════════════
   INDEX PAGE — STATS + LEISTUNGEN + FEATURED WORK
   ══════════════════════════════════════════════════════════════════ */

/* Stats grid — 2 cols on mobile */
.index-stats-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border:1px solid #EEEEEE;
  border-radius:3px;
  overflow:hidden;
}

/* Leistungen grid — scroll on mobile */
.index-svc-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1px;
  background:#D8D4CE;
  border-radius:3px;
  overflow:hidden;
}

/* Featured work — stack on mobile */
.index-featured-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
}

@media(max-width:767px){
  .index-stats-grid {
    grid-template-columns:repeat(2,1fr);
  }
  .index-stats-grid > div:nth-child(2) {
    border-right:none;
  }
  .index-stats-grid > div:nth-child(1),
  .index-stats-grid > div:nth-child(2) {
    border-bottom:1px solid #EEEEEE;
  }
  /* Tighter padding on stat cells on mobile */
  .index-stats-grid > div {
    padding:24px 20px !important;
  }
  .index-svc-grid {
    grid-template-columns:1fr 1fr;
  }
  /* Tighter padding on service cards on mobile */
  .index-svc-grid a {
    padding:20px 16px 24px !important;
  }
  .index-featured-grid {
    grid-template-columns:1fr;
    gap:24px;
  }
  /* Text before image on mobile */
  .index-featured-grid .work-item {
    order:2;
  }
  .index-featured-grid .wi-text {
    order:1;
  }
  /* CTA button full width on mobile */
  .index-cta-btn {
    width:100%;
    text-align:center;
    justify-content:center;
  }
}

@media(max-width:480px){
  .index-svc-grid {
    grid-template-columns:1fr;
  }
  /* Hero text smaller on very small screens */
  .hero-text {
    padding-left:5% !important;
    padding-right:5% !important;
  }
}/* End custom CSS */