/* ========================================================= THE INNER SHIFT GLOBAL DESIGN SYSTEM ========================================================= */
/* ========================================================= ROOT VARIABLES ========================================================= */
 :root {
    /* Brand Colors */
     --tis-black: #10100f;
     --tis-black-soft: #1b1916;
     --tis-gold: #c28a2b;
     --tis-gold-light: #d6a64d;
     --tis-brown: #7d5a2b;
     --tis-cream: #f7f5f1;
     --tis-white: #ffffff;
    /* Lines */
     --tis-line: rgba(194, 138, 43, 0.22);
    /* Shadow */
     --tis-shadow: 0 18px 60px rgba(0, 0, 0, 0.12);
    /* Header */
     --header-height: 92px;
}
/* ========================================================= RESET ========================================================= */
 *, *::before, *::after {
     box-sizing: border-box;
}
 html {
     scroll-behavior: smooth;
}
 body {
     margin: 0;
     padding: 0;
     font-family: "DM Sans", sans-serif;
     color: var(--tis-black);
     background: var(--tis-cream);
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
}
 a {
     color: inherit;
     text-decoration: none;
}
 button {
     font: inherit;
}
/* ========================================================= HEADER ========================================================= */
/* ========================================================= THE INNER SHIFT — FIXED HEADER ========================================================= */
 .site-header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: var(--header-height);
     padding: 14px 24px;
     z-index: 9999;
    /* IMPORTANT: Header NEVER moves away while scrolling */
     transform: translateY(0);
     transition: height 0.45s cubic-bezier(.22, 1, .36, 1), padding 0.45s ease;
}
/* ========================================================= HEADER GLASS SHELL ========================================================= */
 .site-header::before {
     content: "";
     position: absolute;
     top: 0px;
     right: 0px;
     bottom: 8px;
     left: 0px;
     border: 1px solid transparent;
    /* border-radius: 22px;
     */
     pointer-events: none;
     background: transparent;
     transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}
/* ========================================================= SCROLLED HEADER ========================================================= */
 .site-header.is-scrolled {
     height: 100px;
     padding-top: 6px;
     padding-bottom: 9px;
}
 .site-header.is-scrolled::before {
     background: rgba(247, 245, 241);
    /* border-color: */
    /* rgba(16, 16, 15, 0.1);
     */
     border-bottom: 1px solid #c28a2b;
     box-shadow: 0 14px 50px rgba(0, 0, 0, 0.10);
     backdrop-filter: blur(18px);
     -webkit-backdrop-filter: blur(18px);
}
/* ========================================================= IMPORTANT HEADER MUST NEVER HIDE ON DOWN SCROLL ========================================================= */
 .site-header.is-hidden {
     transform: translateY(0);
}
/* ========================================================= NAV SHELL ========================================================= */
 .nav-shell {
     position: relative;
     width: min( 1600px, 100% );
     height: 100%;
     margin: 0 auto;
     padding: 0 18px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 30px;
}
/* ========================================================= BRAND ========================================================= */
 .brand {
     position: relative;
     z-index: 2;
     display: inline-flex;
     align-items: center;
     gap: 13px;
}
 .brand-mark {
     width: 54px;
     height: 54px;
     flex: 0 0 54px;
     border-radius: 50%;
     overflow: hidden;
     background: var(--tis-white);
     border: 1px solid rgba( 194, 138, 43, 0.50 );
     box-shadow: 0 5px 18px rgba( 0, 0, 0, 0.10 ), 0 0 0 4px rgba( 194, 138, 43, 0.07 );
}
 .brand-mark img {
     width: 100%;
     height: 100%;
     display: block;
     object-fit: cover;
}
/* Brand Text */
 .brand-copy {
     display: flex;
     flex-direction: column;
     gap: 3px;
}
 .brand-name {
     display: flex;
     align-items: baseline;
     gap: 6px;
     line-height: 1;
     font-family: "Manrope", sans-serif;
     font-size: 18px;
     font-weight: 800;
     letter-spacing: 0.08em;
}
 .brand-inner {
     color: var(--tis-black);
}
 .brand-inner-footer{
     color:var(--tis-cream) 
}
 .brand-shift {
     color: var(--tis-gold);
}
 .brand-tagline {
     font-size: 9px;
     color: rgba( 16, 16, 15, 0.58 );
     letter-spacing: 0.18em;
     text-transform: uppercase;
     white-space: nowrap;
}
/* ========================================================= NAVIGATION ========================================================= */
 .main-nav {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: clamp( 18px, 2vw, 34px );
}
/* Nav Links */
 .nav-link {
     position: relative;
     padding: 12px 0;
     color: rgba( 16, 16, 15, 0.72 );
     font-size: 13px;
     font-weight: 600;
     transition: color 0.3s ease;
}
/* Animated Gold Underline */
 .nav-link::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: 5px;
     width: 100%;
     height: 1px;
     background: var(--tis-gold);
     transform: scaleX(0);
     transform-origin: right;
     transition: transform 0.35s cubic-bezier( .22, 1, .36, 1 );
}
 .nav-link:hover, .nav-link.is-active {
     color: var(--tis-black);
}
 .nav-link:hover::after, .nav-link.is-active::after {
     transform: scaleX(1);
     transform-origin: left;
}
/* ========================================================= CTA ========================================================= */
 .nav-cta {
     min-height: 46px;
     padding: 0 17px 0 19px;
     display: inline-flex;
     align-items: center;
     gap: 13px;
     color: var(--tis-white);
     background: var(--tis-gold);
     border: 1px solid var(--tis-gold-light);
     border-radius: 999px;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 0.04em;
     text-transform: uppercase;
     box-shadow: 0 10px 28px rgba( 16, 16, 15, 0.14 );
     transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
 .nav-cta-arrow {
     width: 25px;
     height: 25px;
     display: grid;
     place-items: center;
     border-radius: 50%;
     color: var(--tis-gold);
     background: var(--tis-cream);
     transition: transform 0.3s ease;
}
 .nav-cta:hover {
     color: var(--tis-black);
     background: var(--tis-gold);
     border-color: var(--tis-gold);
     transform: translateY(-2px);
     box-shadow: 0 14px 34px rgba( 194, 138, 43, 0.24 );
}
 .nav-cta:hover .nav-cta-arrow {
     transform: rotate(45deg);
}
/* ========================================================= MOBILE TOGGLE ========================================================= */
 .nav-toggle {
     display: none;
     width: 46px;
     height: 46px;
     border: 1px solid rgba( 16, 16, 15, 0.14 );
     border-radius: 50%;
     background: rgba( 255, 255, 255, 0.72 );
     align-items: center;
     justify-content: center;
     flex-direction: column;
     gap: 6px;
     cursor: pointer;
     position: relative;
     z-index: 1002;
}
 .nav-toggle span {
     width: 19px;
     height: 1.5px;
     background: var(--tis-black);
     transition: transform 0.3s ease, opacity 0.3s ease;
}
 .nav-toggle.is-open span:first-child {
     transform: translateY(3.75px) rotate(45deg);
}
 .nav-toggle.is-open span:last-child {
     transform: translateY(-3.75px) rotate(-45deg);
}
/* ========================================================= ACCESSIBILITY ========================================================= */
 .nav-link:focus-visible, .nav-cta:focus-visible, .nav-toggle:focus-visible, .brand:focus-visible {
     outline: 2px solid var(--tis-gold);
     outline-offset: 4px;
}
 @media (prefers-reduced-motion: reduce) {
     html {
         scroll-behavior: auto;
    }
     *, *::before, *::after {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
    }
}
/* ========================================================= THE INNER SHIFT — HERO EXPERIENCE ========================================================= */
 .tis-home {
     position: relative;
     overflow: hidden;
     background: #f5f2eb;
     color: #171614;
}
 .tis-hero {
     position: relative;
     min-height: 100svh;
     overflow: hidden;
     background: #f5f2eb;
}
 .tis-hero-inner {
     position: relative;
     z-index: 5;
     width: min(1380px, calc(100% - 80px));
     min-height: 100svh;
     margin: auto;
     padding: 125px 0 35px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
}
 .tis-hero-top {
     display: flex;
     align-items: center;
     justify-content: space-between;
     color: #71634f;
     font-size: 9px;
     font-weight: 700;
     letter-spacing: .22em;
     text-transform: uppercase;
}
 .tis-hero-top span:last-child {
     color: #9a7a3b;
}
 .tis-hero-content {
     display: grid;
     grid-template-columns: .92fr 1.08fr;
     align-items: center;
     gap: 30px;
     min-height: 650px;
}
 .tis-hero-copy {
     position: relative;
     z-index: 10;
     max-width: 650px;
}
 .tis-mini-label {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 25px;
     color: #94733a;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: .2em;
}
 .tis-mini-label span {
     width: 42px;
     height: 1px;
     background: #bd8a32;
}
 .tis-hero-copy h1 {
     margin: 0;
     font-size: clamp(65px, 7.4vw, 112px);
     line-height: .88;
     letter-spacing: -.07em;
     font-weight: 650;
}
 .tis-hero-copy h1 em {
     display: block;
     padding-left: 70px;
     color: #b98228;
     font-family: Georgia, serif;
     font-weight: 400;
     line-height: 1.08;
}
 .tis-hero-copy p {
     max-width: 500px;
     margin: 35px 0 0;
     color: #625d54;
     font-size: 16px;
     line-height: 1.85;
}
 .tis-hero-buttons {
     display: flex;
     align-items: center;
     gap: 28px;
     margin-top: 35px;
}
 .tis-btn-primary {
     display: inline-flex;
     align-items: center;
     gap: 20px;
     min-height: 58px;
     padding: 6px 8px 6px 25px;
     border-radius: 50px;
     background: #171614;
     color: #fff;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: .08em;
     text-transform: uppercase;
     box-shadow: 0 18px 45px rgba(23,22,20,.15);
     transition: .45s cubic-bezier(.2,.8,.2,1);
}
 .tis-btn-primary i {
     display: grid;
     place-items: center;
     width: 43px;
     height: 43px;
     border-radius: 50%;
     background: #bd8a32;
     color: #171614;
     font-size: 18px;
     font-style: normal;
     transition: .45s ease;
}
 .tis-btn-primary:hover {
     transform: translateY(-5px);
     box-shadow: 0 25px 55px rgba(23,22,20,.22);
}
 .tis-btn-primary:hover i {
     transform: rotate(45deg);
}
 .tis-btn-link {
     display: flex;
     align-items: center;
     gap: 10px;
     color: #514d46;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: .08em;
     text-transform: uppercase;
}
 .tis-btn-link span {
     display: grid;
     place-items: center;
     width: 35px;
     height: 35px;
     border: 1px solid rgba(23,22,20,.2);
     border-radius: 50%;
     transition: .35s ease;
}
 .tis-btn-link:hover span {
     background: #bd8a32;
     border-color: #bd8a32;
     transform: translateY(4px);
}
 .tis-hero-art {
     position: relative;
     min-height: 650px;
     display: grid;
     place-items: center;
}
 .tis-art-word {
     position: absolute;
     top: 50%;
     left: 50%;
     z-index: 0;
     transform: translate(-50%,-50%);
     color: rgba(23,22,20,.035);
     font-size: clamp(150px, 21vw, 330px);
     font-weight: 800;
     letter-spacing: -.09em;
     line-height: 1;
     pointer-events: none;
}
 .tis-art-circle {
     position: relative;
     z-index: 5;
     width: min(430px, 60%);
     aspect-ratio: 1;
     padding: 12px;
     border: 1px solid rgba(189,138,50,.55);
     border-radius: 50%;
     background: rgba(255,255,255,.35);
     box-shadow: 0 35px 100px rgba(23,22,20,.14), 0 0 0 18px rgba(189,138,50,.035);
}
 .tis-art-image {
     width: 100%;
     height: 100%;
     overflow: hidden;
     border-radius: 50%;
     background: #fff;
}
 .tis-art-image img {
     width: 100%;
     height: 100%;
     display: block;
     object-fit: cover;
}
 .tis-orbit {
     position: absolute;
     z-index: 3;
     border-radius: 50%;
     border: 1px solid rgba(189,138,50,.25);
     pointer-events: none;
}
 .orbit-a {
     width: 500px;
     height: 500px;
     transform: rotate(25deg) scaleX(1.25);
}
 .orbit-b {
     width: 560px;
     height: 560px;
     border-style: dashed;
     border-color: rgba(23,22,20,.11);
     transform: rotate(-30deg) scaleX(1.25);
}
 .orbit-c {
     width: 620px;
     height: 620px;
     border-color: rgba(189,138,50,.12);
     transform: rotate(60deg) scaleX(1.25);
}
 .tis-floating-tag {
     position: absolute;
     z-index: 8;
     display: flex;
     align-items: center;
     gap: 9px;
     padding: 9px 14px;
     border: 1px solid rgba(23,22,20,.1);
     border-radius: 50px;
     background: rgba(255,255,255,.68);
     backdrop-filter: blur(12px);
     color: #4c4841;
     font-size: 8px;
     font-weight: 800;
     letter-spacing: .14em;
     box-shadow: 0 12px 35px rgba(23,22,20,.08);
}
 .tis-floating-tag small {
     color: #b98228;
     font-size: 8px;
}
 .tag-one {
     top: 17%;
     left: 4%;
     animation: tagFloat 5s ease-in-out infinite;
}
 .tag-two {
     right: 2%;
     top: 38%;
     animation: tagFloat 6s ease-in-out infinite reverse;
}
 .tag-three {
     bottom: 15%;
     left: 8%;
     animation: tagFloat 5.5s ease-in-out infinite;
}
 @keyframes tagFloat {
     0%,100% {
         transform: translateY(0);
    }
     50% {
         transform: translateY(-12px);
    }
}
 .tis-art-dot {
     position: absolute;
     z-index: 9;
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: #bd8a32;
     box-shadow: 0 0 0 7px rgba(189,138,50,.08);
}
 .dot-one {
     top: 20%;
     right: 15%;
}
 .dot-two {
     bottom: 20%;
     right: 12%;
     width: 5px;
     height: 5px;
}
 .dot-three {
     top: 28%;
     left: 13%;
     width: 4px;
     height: 4px;
}
 .tis-hero-bottom {
     display: flex;
     align-items: center;
     gap: 20px;
     color: #8b7b63;
     font-size: 8px;
     font-weight: 700;
     letter-spacing: .25em;
}
 .tis-progress {
     position: relative;
     width: 100px;
     height: 1px;
     background: rgba(23,22,20,.12);
}
 .tis-progress span {
     position: absolute;
     top: 0;
     left: 0;
     width: 35px;
     height: 1px;
     background: #bd8a32;
     animation: progressMove 2.4s ease-in-out infinite;
}
 @keyframes progressMove {
     0%,100% {
         transform: translateX(0);
    }
     50% {
         transform: translateX(65px);
    }
}
 .tis-hero-bg-word {
     position: absolute;
     right: -4%;
     bottom: -12%;
     color: rgba(189,138,50,.045);
     font-size: 27vw;
     font-weight: 800;
     letter-spacing: -.1em;
     line-height: .7;
     pointer-events: none;
}
 .tis-hero-glow {
     position: absolute;
     border-radius: 50%;
     filter: blur(2px);
     pointer-events: none;
}
 .tis-glow-one {
     width: 500px;
     height: 500px;
     right: -200px;
     top: 10%;
     background: radial-gradient(circle, rgba(189,138,50,.13), transparent 68%);
     animation: glowMove 9s ease-in-out infinite;
}
 .tis-glow-two {
     width: 350px;
     height: 350px;
     left: -180px;
     bottom: -100px;
     background: radial-gradient(circle, rgba(132,96,49,.08), transparent 70%);
     animation: glowMove 11s ease-in-out infinite reverse;
}
 @keyframes glowMove {
     0%,100% {
         transform: translate(0,0);
    }
     50% {
         transform: translate(20px,-25px);
    }
}
/* ========================================================= DISCOVER — CONTINUATION ========================================================= */
 .tis-discover {
     position: relative;
     min-height: 100svh;
     overflow: hidden;
     background: #171614;
     color: #f6f2e9;
}
 .tis-discover::before {
     content: "";
     position: absolute;
     top: -180px;
     left: 50%;
     width: 700px;
     height: 400px;
     transform: translateX(-50%);
     border-radius: 50%;
     background: radial-gradient(ellipse, rgba(189,138,50,.16), transparent 68%);
}
 .tis-discover-inner {
     position: relative;
     z-index: 5;
     width: min(1260px, calc(100% - 80px));
     min-height: 100svh;
     margin: auto;
     padding: 120px 0 50px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
}
 .tis-discover-number {
     color: #bd8a32;
     font-size: 13px;
     font-weight: 700;
     letter-spacing: .25em;
}
 .tis-discover-grid {
     display: grid;
     grid-template-columns: 1.1fr .9fr;
     align-items: center;
     gap: 100px;
}
 .tis-discover-heading > span {
     display: block;
     margin-bottom: 15px;
     color: rgba(246,242,233,.45);
     font-family: Georgia, serif;
     font-size: 20px;
     font-style: italic;
}
 .tis-discover-heading h2 {
     margin: 0;
     font-size: clamp(52px, 6.5vw, 95px);
     line-height: .95;
     letter-spacing: -.065em;
     font-weight: 500;
}
 .tis-discover-heading h2 em {
     color: #bd8a32;
     font-family: Georgia, serif;
     font-weight: 400;
}
 .tis-discover-text {
     position: relative;
     padding-left: 45px;
     border-left: 1px solid rgba(189,138,50,.4);
}
 .tis-discover-text::before {
     content: "";
     position: absolute;
     top: 0;
     left: -3px;
     width: 5px;
     height: 45px;
     background: #bd8a32;
}
 .tis-discover-text p {
     max-width: 470px;
     margin: 0 0 22px;
     color: rgba(246,242,233,.62);
     font-size: 16px;
     line-height: 1.9;
}
 .tis-text-arrow {
     display: inline-flex;
     align-items: center;
     gap: 15px;
     margin-top: 20px;
     color: #f6f2e9;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: .1em;
     text-transform: uppercase;
}
 .tis-text-arrow span {
     display: grid;
     place-items: center;
     width: 38px;
     height: 38px;
     border: 1px solid rgba(189,138,50,.45);
     border-radius: 50%;
     color: #bd8a32;
     transition: .4s ease;
}
 .tis-text-arrow:hover span {
     background: #bd8a32;
     color: #171614;
     transform: rotate(45deg);
}
 .tis-discover-bg {
     position: absolute;
     right: -5%;
     bottom: -15%;
     color: rgba(255,255,255,.025);
     font-size: 30vw;
     font-weight: 800;
     letter-spacing: -.12em;
     line-height: .7;
     pointer-events: none;
}
 .tis-discover-bottom {
     display: flex;
     justify-content: space-between;
     color: rgba(246,242,233,.3);
     font-size: 8px;
     font-weight: 700;
     letter-spacing: .25em;
}
/* ========================================================= RESPONSIVE ========================================================= */
 @media (max-width: 950px) {
     .tis-hero-inner, .tis-discover-inner {
         width: min(100% - 45px, 850px);
    }
     .tis-hero-content {
         grid-template-columns: 1fr;
    }
     .tis-hero-copy {
         max-width: 700px;
         margin: auto;
         text-align: center;
    }
     .tis-mini-label {
         justify-content: center;
    }
     .tis-hero-copy h1 em {
         padding-left: 0;
    }
     .tis-hero-copy p {
         margin-left: auto;
         margin-right: auto;
    }
     .tis-hero-buttons {
         justify-content: center;
    }
     .tis-hero-art {
         min-height: 520px;
    }
     .tis-discover-grid {
         grid-template-columns: 1fr;
         gap: 50px;
    }
}
 @media (max-width: 600px) {
     .tis-hero-inner, .tis-discover-inner {
         width: calc(100% - 30px);
    }
     .tis-hero-inner {
         padding-top: 110px;
    }
     .tis-hero-top {
         font-size: 7px;
         letter-spacing: .14em;
    }
     .tis-hero-top span:last-child {
         display: none;
    }
     .tis-hero-copy h1 {
         font-size: clamp(52px, 15vw, 75px);
    }
     .tis-hero-copy p {
         font-size: 14px;
         line-height: 1.75;
    }
     .tis-hero-buttons {
         flex-direction: column;
         gap: 18px;
    }
     .tis-btn-primary {
         width: 100%;
         justify-content: space-between;
    }
     .tis-hero-art {
         min-height: 390px;
    }
     .tis-art-circle {
         width: 70%;
    }
     .orbit-a {
         width: 82%;
         height: auto;
         aspect-ratio: 1;
    }
     .orbit-b {
         width: 94%;
         height: auto;
         aspect-ratio: 1;
    }
     .orbit-c {
         width: 105%;
         height: auto;
         aspect-ratio: 1;
    }
     .tis-floating-tag {
         font-size: 6px;
         padding: 7px 9px;
    }
     .tag-one {
         left: 0;
    }
     .tag-two {
         right: 0;
    }
     .tag-three {
         left: 3%;
    }
     .tis-hero-bottom {
         font-size: 6px;
         gap: 10px;
    }
     .tis-progress {
         width: 55px;
    }
     .tis-discover-inner {
         padding-top: 100px;
    }
     .tis-discover-heading h2 {
         font-size: clamp(45px, 13vw, 65px);
    }
     .tis-discover-text {
         padding-left: 25px;
    }
     .tis-discover-text p {
         font-size: 14px;
    }
     .tis-discover-bottom {
         font-size: 6px;
    }
}
/* ========================================================= 02 — THE PATTERN / IMMERSIVE ========================================================= */
 .tis-pattern-new {
     position: relative;
     min-height: 100svh;
     overflow: hidden;
     background: #ebe5d9;
     color: #171614;
}
 .tis-pattern-new-inner {
     position: relative;
     z-index: 3;
     width: min(1280px, calc(100% - 80px));
     min-height: 100svh;
     margin: auto;
     padding: 90px 0 45px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
}
 .tis-section-marker {
     display: flex;
     align-items: center;
     gap: 16px;
     color: #a77a35;
}
 .tis-section-marker span {
     font-size: 38px;
     font-weight: 300;
     letter-spacing: -.06em;
}
 .tis-section-marker div {
     width: 70px;
     height: 1px;
     background: #b98a48;
}
 .tis-section-marker small {
     font-size: 13px;
     font-weight: 800;
     letter-spacing: .22em;
}
 .tis-pattern-heading {
     position: relative;
     width: min(850px, 80%);
     margin: 35px auto 0;
     text-align: center;
}
 .tis-overline {
     margin: 0 0 20px;
     color: #a77a35;
     font-size: 9px;
     font-weight: 800;
     letter-spacing: .25em;
}
 .tis-pattern-heading h2 {
     position: relative;
     z-index: 2;
     margin: 0;
     font-size: clamp(65px, 8.5vw, 125px);
     line-height: .84;
     letter-spacing: -.085em;
     font-weight: 500;
}
 .tis-pattern-heading h2 span {
     display: block;
     color: #ad803d;
     font-family: Georgia, serif;
     font-weight: 400;
}
 .tis-heading-orbit {
     position: absolute;
     z-index: 1;
     right: 2%;
     bottom: -30px;
     width: 190px;
     height: 70px;
     border: 1px solid rgba(167,122,53,.35);
     border-radius: 50%;
     transform: rotate(-15deg);
}
 .tis-pattern-statement {
     position: relative;
     max-width: 700px;
     margin: 20px 0 0 auto;
     padding-left: 30px;
}
 .tis-statement-line {
     position: absolute;
     left: 0;
     top: 5px;
     width: 2px;
     height: 100%;
     background: #b98235;
}
 .tis-pattern-statement p {
     margin: 0 0 8px;
     color: #777065;
     font-family: Georgia, serif;
     font-size: 18px;
     line-height: 1.5;
}
 .tis-pattern-statement strong {
     display: block;
     font-size: clamp(25px, 3vw, 40px);
     line-height: 1.1;
     letter-spacing: -.04em;
     font-weight: 500;
}
 .tis-pattern-statement em {
     color: #a77a35;
     font-family: Georgia, serif;
     font-weight: 400;
}
 .tis-pattern-stream {
     display: flex;
     justify-content: center;
     align-items: stretch;
     margin-top: 30px;
}
 .tis-stream-item {
     min-width: 220px;
     padding: 22px 25px;
     border-top: 1px solid rgba(23,22,20,.18);
     border-bottom: 1px solid rgba(23,22,20,.18);
     border-left: 1px solid rgba(23,22,20,.1);
     transition: .5s cubic-bezier(.2,.8,.2,1);
}
 .tis-stream-item:last-child {
     border-right: 1px solid rgba(23,22,20,.1);
}
 .tis-stream-item span {
     display: block;
     margin-bottom: 20px;
     color: #ad803d;
     font-size: 8px;
     font-weight: 800;
}
 .tis-stream-item strong {
     color: #38332c;
     font-size: 9px;
     letter-spacing: .12em;
}
 .tis-stream-item:hover {
     background: #171614;
     transform: translateY(-12px);
}
 .tis-stream-item:hover strong {
     color: #f4efe5;
}
 .tis-pattern-bottom {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 18px;
     color: #827665;
     font-size: 8px;
     font-weight: 800;
     letter-spacing: .2em;
}
 .tis-bottom-arrow {
     color: #b98235;
     font-size: 14px;
}
 .tis-pattern-bg-text {
     position: absolute;
     right: -8%;
     bottom: -10%;
     color: rgba(23,22,20,.035);
     font-size: 25vw;
     font-weight: 800;
     letter-spacing: -.1em;
     line-height: .7;
     pointer-events: none;
}
/* =========================================================
   02 — THE PATTERN
   FINAL RESPONSIVE FIX
   Desktop remains untouched
   ========================================================= */


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 850px) {

    .tis-pattern-new {
        width: 100%;
        min-height: auto;
        overflow: hidden;
    }

    .tis-pattern-new-inner {
        width: calc(100% - 40px);
        min-height: auto;

        padding: 80px 0 45px;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        box-sizing: border-box;
    }

    /* Heading */
    .tis-pattern-heading {
        width: 100%;
        max-width: 850px;
        margin: 50px auto 0;
    }

    .tis-pattern-heading h2 {
        font-size: clamp(55px, 8vw, 82px);
    }

    /* Statement */
    .tis-pattern-statement {
        width: 100%;
        max-width: 700px;
        margin: 55px 0 0 auto;

        box-sizing: border-box;
    }

    /* Cards */
    .tis-pattern-stream {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        width: 100%;
        margin-top: 55px;

        flex-wrap: unset;

        box-sizing: border-box;
    }

    .tis-stream-item {
        width: 100%;
        min-width: 0;

        box-sizing: border-box;
    }

    .tis-stream-item:last-child {
        border-right: 1px solid rgba(23,22,20,.1);
    }

    /* Bottom */
    .tis-pattern-bottom {
        margin-top: 55px;
        padding-top: 10px;

        width: 100%;
    }

    /* Background */
    .tis-pattern-bg-text {
        right: -15%;
        bottom: -3%;
        font-size: 25vw;
        white-space: nowrap;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .tis-pattern-new {
        min-height: auto;
        height: auto;

        overflow-x: hidden;
       
    }

    .tis-pattern-new-inner {
        width: calc(100% - 30px);
        max-width: none;

        min-height: auto;
        height: auto;

        padding: 70px 0 35px;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        box-sizing: border-box;
    }


    /* =====================================================
       SECTION MARKER
       ===================================================== */

    .tis-pattern-new .tis-section-marker {
        width: 100%;
        gap: 11px;

        flex-shrink: 0;
    }

    .tis-pattern-new .tis-section-marker span {
        font-size: 28px;
    }

    .tis-pattern-new .tis-section-marker div {
        width: 42px;
        flex-shrink: 0;
    }

    .tis-pattern-new .tis-section-marker small {
        font-size: 7px;
        letter-spacing: .17em;
        white-space: nowrap;
    }


    /* =====================================================
       MAIN HEADING
       ===================================================== */

    .tis-pattern-heading {
        width: 100%;
        max-width: none;

        margin: 48px 0 0;

        text-align: center;

        box-sizing: border-box;
    }

    .tis-overline {
        margin-bottom: 17px;

        font-size: 8px;
        letter-spacing: .18em;
        line-height: 1.5;
    }

    .tis-pattern-heading h2 {
        width: 100%;
        max-width: none;

        font-size: clamp(42px, 12vw, 58px);
        line-height: .88;

        letter-spacing: -.07em;

        overflow-wrap: normal;
        word-break: normal;
    }

    .tis-pattern-heading h2 span {
        display: block;
        margin-top: 3px;
    }


    /* =====================================================
       ORBIT
       ===================================================== */

    .tis-heading-orbit {
        right: 1%;
        bottom: -24px;

        width: 125px;
        height: 48px;

        opacity: .8;
    }


    /* =====================================================
       STATEMENT
       ===================================================== */

    .tis-pattern-statement {
        width: 100%;
        max-width: none;

        margin: 60px 0 0;

        padding-left: 20px;

        box-sizing: border-box;
    }

    .tis-statement-line {
        left: 0;
        top: 4px;
        width: 1px;
    }

    .tis-pattern-statement p {
        width: 100%;
        max-width: none;

        margin: 0 0 10px;

        font-size: 14px;
        line-height: 1.65;
    }

    .tis-pattern-statement strong {
        width: 100%;
        max-width: none;

        font-size: clamp(24px, 7vw, 32px);
        line-height: 1.1;

        letter-spacing: -.035em;
    }


    /* =====================================================
       PATTERN CARDS
       IMPORTANT: MOBILE = 1 COLUMN
       All 4 cards will ALWAYS be visible
       ===================================================== */

    .tis-pattern-stream {
        display: grid;

        grid-template-columns: minmax(0, 1fr);

        width: 100%;
        max-width: 100%;

        margin-top: 48px;

        flex-wrap: unset;

        box-sizing: border-box;
    }

    .tis-stream-item {
        display: block;

        width: 100%;
        min-width: 0;
        max-width: 100%;

        padding: 19px 5px 19px 4px;

        box-sizing: border-box;

        border-left: 0;
        border-right: 0;

        overflow: hidden;

        transform: none;
    }

    .tis-stream-item:first-child {
        border-top: 1px solid rgba(23,22,20,.18);
    }

    .tis-stream-item:last-child {
        border-right: 0;
    }

    .tis-stream-item span {
        margin-bottom: 10px;

        font-size: 8px;
    }

    .tis-stream-item strong {
        display: block;

        width: 100%;
        max-width: 100%;

        font-size: 9px;
        line-height: 1.5;
        letter-spacing: .12em;

        overflow-wrap: break-word;
    }


    /* =====================================================
       MOBILE HOVER
       ===================================================== */

    .tis-stream-item:hover {
        background: transparent;
        transform: none;
    }

    .tis-stream-item:hover strong {
        color: #38332c;
    }


    /* =====================================================
       BOTTOM FLOW
       ===================================================== */

    .tis-pattern-bottom {
        display: flex;
        justify-content: center;
        align-items: center;

        width: 100%;

        margin-top: 48px;
        padding-top: 0;

        gap: 8px;

        font-size: 6px;
        letter-spacing: .14em;

        box-sizing: border-box;
    }

    .tis-bottom-arrow {
        font-size: 12px;
    }


    /* =====================================================
       BACKGROUND WORD
       ===================================================== */

    .tis-pattern-bg-text {
        right: -25%;
        bottom: 2%;

        font-size: 30vw;

        line-height: .7;

        white-space: nowrap;

        pointer-events: none;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .tis-pattern-new-inner {
        width: calc(100% - 26px);
        padding-top: 62px;
    }

    .tis-pattern-new .tis-section-marker {
        gap: 9px;
    }

    .tis-pattern-new .tis-section-marker span {
        font-size: 25px;
    }

    .tis-pattern-new .tis-section-marker div {
        width: 34px;
    }

    .tis-pattern-new .tis-section-marker small {
        font-size: 6.5px;
    }


    .tis-pattern-heading {
        margin-top: 43px;
    }

    .tis-overline {
        font-size: 7px;
        letter-spacing: .16em;
    }

    .tis-pattern-heading h2 {
        font-size: clamp(39px, 11.8vw, 53px);
    }


    .tis-heading-orbit {
        width: 105px;
        height: 42px;

        right: 0;
        bottom: -20px;
    }


    .tis-pattern-statement {
        margin-top: 52px;
        padding-left: 17px;
    }

    .tis-pattern-statement p {
        font-size: 13px;
    }

    .tis-pattern-statement strong {
        font-size: 24px;
    }


    .tis-pattern-stream {
        margin-top: 42px;
    }

    .tis-stream-item {
        padding: 17px 3px;
    }

    .tis-stream-item span {
        margin-bottom: 8px;
    }


    .tis-pattern-bottom {
        margin-top: 40px;
        gap: 7px;
        font-size: 5.5px;
    }

    .tis-bottom-arrow {
        font-size: 11px;
    }


    .tis-pattern-bg-text {
        right: -35%;
        font-size: 34vw;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

    .tis-pattern-new-inner {
        width: calc(100% - 22px);
        padding-top: 55px;
    }

    .tis-pattern-heading {
        margin-top: 38px;
    }

    .tis-pattern-heading h2 {
        font-size: 37px;
    }

    .tis-pattern-statement {
        margin-top: 47px;
        padding-left: 15px;
    }

    .tis-pattern-statement p {
        font-size: 12.5px;
    }

    .tis-pattern-statement strong {
        font-size: 22px;
    }

    .tis-stream-item {
        padding: 16px 2px;
    }

    .tis-stream-item strong {
        font-size: 8px;
    }

    .tis-pattern-bottom {
        font-size: 5px;
    }
}


/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    .tis-stream-item {
        transition: none;
    }

    .tis-stream-item:hover {
        transform: none;
        background: transparent;
    }
}
/* ========================================================= THE INNER SHIFT SECTION 03 — THE RECOGNITION ========================================================= */
 .tis-recognition {
     position: relative;
     overflow: hidden;
     background: var(--tis-cream);
     color: var(--tis-black);
     padding: 150px 0 170px;
}
/* --------------------------------------------------------- BACKGROUND WORD --------------------------------------------------------- */
 .tis-recognition-bg {
     position: absolute;
     top: 50%;
     left: -20px;
     transform: translateY(-50%);
     font-family: "DM Sans", sans-serif;
     font-size: clamp(130px, 18vw, 300px);
     font-weight: 700;
     line-height: 0.8;
     letter-spacing: -0.08em;
     color: rgba(16, 16, 15, 0.025);
     white-space: nowrap;
     pointer-events: none;
     user-select: none;
     transition: transform 1.2s cubic-bezier(.2,.7,.2,1), opacity 1s ease;
}
/* --------------------------------------------------------- CONTAINER --------------------------------------------------------- */
 .tis-recognition-inner {
     position: relative;
     z-index: 2;
     width: min(1180px, calc(100% - 80px));
     margin: 0 auto;
}
/* --------------------------------------------------------- TOP LABEL --------------------------------------------------------- */
 .tis-recognition-top {
     display: flex;
     align-items: center;
     gap: 16px;
     margin-bottom: 105px;
}
 .tis-section-number {
     font-size: 34px;
     font-weight: 300;
     color: var(--tis-gold);
     line-height: 1;
}
 .tis-section-line {
     width: 70px;
     height: 1px;
     background: var(--tis-gold);
     transform-origin: left;
}
 .tis-section-label {
     font-size: 13px;
     font-weight: 700;
     letter-spacing: 0.28em;
     text-transform: uppercase;
     color: var(--tis-brown);
}
/* --------------------------------------------------------- GRID --------------------------------------------------------- */
 .tis-recognition-grid {
     display: grid;
     grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
     gap: 120px;
     align-items: start;
}
/* --------------------------------------------------------- LEFT INTRO --------------------------------------------------------- */
 .tis-recognition-intro {
     position: relative;
     padding-top: 5px;
}
 .tis-eyebrow {
     margin-bottom: 27px;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 0.28em;
     text-transform: uppercase;
     color: var(--tis-gold);
}
 .tis-recognition-title {
     max-width: 570px;
     margin: 0;
     font-size: clamp(56px, 6vw, 86px);
     font-weight: 500;
     line-height: 0.95;
     letter-spacing: -0.055em;
}
 .tis-recognition-title span {
     display: block;
     color: var(--tis-gold);
}
 .tis-recognition-rule {
     width: 90px;
     height: 1px;
     margin: 45px 0 30px;
     background: var(--tis-gold);
     transform-origin: left;
}
 .tis-recognition-lead {
     max-width: 470px;
     margin: 0 0 14px;
     font-size: 17px;
     line-height: 1.8;
     color: #3d4a57;
}
 .tis-recognition-lead.muted {
     color: #7a7d80;
}
/* --------------------------------------------------------- QUESTION BLOCK --------------------------------------------------------- */
 .tis-recognition-question {
     margin-top: 70px;
     padding-left: 22px;
     border-left: 1px solid var(--tis-gold);
}
 .tis-recognition-question span {
     display: block;
     margin-bottom: 13px;
     font-size: 9px;
     font-weight: 700;
     letter-spacing: 0.25em;
     color: var(--tis-gold);
}
 .tis-recognition-question p {
     max-width: 390px;
     margin: 0;
     font-size: 18px;
     line-height: 1.6;
     color: var(--tis-black);
}
/* --------------------------------------------------------- RIGHT SIDE --------------------------------------------------------- */
 .tis-recognition-patterns {
     padding-top: 12px;
}
 .tis-pattern-intro {
     margin-bottom: 35px;
     font-size: 9px;
     font-weight: 700;
     letter-spacing: 0.25em;
     color: var(--tis-gold);
}
/* --------------------------------------------------------- PATTERN --------------------------------------------------------- */
 .tis-pattern {
     position: relative;
     display: grid;
     grid-template-columns: 65px 1fr 40px;
     gap: 20px;
     align-items: center;
     min-height: 135px;
     padding: 25px 0;
     border-top: 1px solid var(--tis-line);
     cursor: default;
     transition: padding 0.5s cubic-bezier(.2,.7,.2,1), background 0.5s ease;
}
 .tis-pattern:last-of-type {
     border-bottom: 1px solid var(--tis-line);
}
 .tis-pattern-number {
     align-self: start;
     padding-top: 5px;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 0.15em;
     color: var(--tis-gold);
}
 .tis-pattern-content h3 {
     margin: 0 0 10px;
     font-size: clamp(24px, 2.5vw, 34px);
     font-weight: 500;
     line-height: 1.05;
     letter-spacing: -0.035em;
     transition: color 0.4s ease, transform 0.4s ease;
}
 .tis-pattern-content p {
     max-width: 490px;
     margin: 0;
     font-size: 14px;
     line-height: 1.7;
     color: #69717a;
     transition: color 0.4s ease;
}
 .tis-pattern-arrow {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 34px;
     height: 34px;
     border: 1px solid var(--tis-line);
     border-radius: 50%;
     font-size: 17px;
     color: var(--tis-gold);
     opacity: 0;
     transform: translate(-10px, 10px) rotate(-20deg);
     transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.2,.7,.2,1), background 0.4s ease, color 0.4s ease;
}
/* --------------------------------------------------------- HOVER --------------------------------------------------------- */
 .tis-pattern:hover {
     padding-left: 18px;
     padding-right: 18px;
     background: rgba(194, 138, 43, 0.035);
}
 .tis-pattern:hover .tis-pattern-content h3 {
     color: var(--tis-gold);
     transform: translateX(4px);
}
 .tis-pattern:hover .tis-pattern-content p {
     color: #424b53;
}
 .tis-pattern:hover .tis-pattern-arrow {
     opacity: 1;
     transform: translate(0, 0) rotate(0deg);
}
/* --------------------------------------------------------- BOTTOM STATEMENT --------------------------------------------------------- */
 .tis-recognition-bottom {
     display: grid;
     grid-template-columns: 80px auto;
     column-gap: 20px;
     margin-top: 65px;
}
 .tis-bottom-line {
     width: 60px;
     height: 1px;
     margin-top: 12px;
     background: var(--tis-gold);
}
 .tis-recognition-bottom p {
     grid-column: 2;
     margin: 0 0 8px;
     font-size: 13px;
     color: #73777b;
}
 .tis-recognition-bottom strong {
     grid-column: 2;
     font-size: clamp(25px, 3vw, 40px);
     font-weight: 500;
     line-height: 1.1;
     letter-spacing: -0.04em;
}
/* --------------------------------------------------------- REVEAL ANIMATION INITIAL STATE --------------------------------------------------------- */
/* ========================================================= RECOGNITION REVEAL SYSTEM ========================================================= */
 .reveal-recognition {
     opacity: 1;
     transform: translateY(0);
}
/* Animation only when JS is available */
 .js-reveal .reveal-recognition {
     opacity: 0;
     transform: translateY(35px);
     transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1);
}
 .js-reveal .reveal-recognition.is-visible {
     opacity: 1;
     transform: translateY(0);
}
/* --------------------------------------------------------- STAGGER --------------------------------------------------------- */
 .tis-recognition-top.reveal-recognition {
     transition-delay: 0.05s;
}
 .tis-eyebrow.reveal-recognition {
     transition-delay: 0.1s;
}
 .tis-recognition-title.reveal-recognition {
     transition-delay: 0.18s;
}
 .tis-recognition-rule.reveal-recognition {
     transition-delay: 0.28s;
}
 .tis-recognition-lead.reveal-recognition:nth-of-type(1) {
     transition-delay: 0.34s;
}
 .tis-recognition-lead.reveal-recognition:nth-of-type(2) {
     transition-delay: 0.4s;
}
 .tis-recognition-question.reveal-recognition {
     transition-delay: 0.48s;
}
 .tis-pattern:nth-child(2) {
     transition-delay: 0.1s;
}
 .tis-pattern:nth-child(3) {
     transition-delay: 0.18s;
}
 .tis-pattern:nth-child(4) {
     transition-delay: 0.26s;
}
 .tis-pattern:nth-child(5) {
     transition-delay: 0.34s;
}
/* --------------------------------------------------------- REDUCED MOTION --------------------------------------------------------- */
 @media (prefers-reduced-motion: reduce) {
     .reveal-recognition {
         opacity: 1;
         transform: none;
         transition: none;
    }
     .tis-recognition-bg {
         transition: none;
    }
     .tis-pattern, .tis-pattern-content h3, .tis-pattern-arrow {
         transition: none;
    }
}
/* ========================================================= 04 — THE ROOT ========================================================= */
 .tis-root {
     position: relative;
     background: var(--tis-black);
     color: var(--tis-white);
     min-height: 100vh;
}
 .tis-root-shell {
     display: grid;
     grid-template-columns: minmax(360px, .86fr) minmax(0, 1.14fr);
     width: min(1440px, 100%);
     margin: 0 auto;
}
 .tis-root-visual {
     position: relative;
     height: 100vh;
     min-height: 720px;
     position: sticky;
     top: 0;
     align-self: start;
     padding: 40px;
}
 .tis-root-image-wrap {
     position: relative;
     width: 100%;
     height: calc(100vh - 80px);
     min-height: 640px;
     overflow: hidden;
}
 .tis-root-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     filter: saturate(.75) contrast(1.04);
     transform: scale(1.04);
}
 .tis-root-image-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient( 180deg, rgba(16,16,15,.05) 20%, rgba(16,16,15,.72) 100% );
}
 .tis-root-image-caption {
     position: absolute;
     left: 30px;
     bottom: 28px;
     display: flex;
     align-items: center;
     gap: 14px;
}
 .tis-root-image-caption span {
     color: var(--tis-gold-light);
     font-size: 11px;
     font-weight: 700;
}
 .tis-root-image-caption p {
     margin: 0;
     font-size: 9px;
     letter-spacing: .25em;
     font-weight: 800;
}
 .tis-root-image-circle {
     position: absolute;
     right: 30px;
     top: 30px;
     width: 92px;
     height: 92px;
     border: 1px solid rgba(214,166,77,.7);
     border-radius: 50%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     color: var(--tis-gold-light);
     font-size: 8px;
     letter-spacing: .18em;
     line-height: 1.7;
}
 .tis-root-scroll {
     padding: 150px 10% 130px 12%;
}
 .tis-root-intro {
     max-width: 650px;
     padding-bottom: 130px;
}
 .tis-root-intro .tis-section-marker {
     margin-bottom: 80px;
}
 .tis-root-intro h2 {
     margin: 25px 0 30px;
     font-size: clamp(55px, 6vw, 92px);
     line-height: .92;
     letter-spacing: -.075em;
     font-weight: 500;
}
 .tis-root-intro h2 span {
     display: block;
     color: var(--tis-gold-light);
     font-family: Georgia, serif;
     font-style: italic;
     font-weight: 400;
}
 .tis-root-lead {
     max-width: 540px;
     margin: 0;
     color: rgba(255,255,255,.57);
     font-size: 16px;
     line-height: 1.9;
}
 .tis-root-chapters {
     border-top: 1px solid rgba(255,255,255,.14);
}
 .tis-root-chapter {
     display: grid;
     grid-template-columns: 60px 1fr;
     gap: 25px;
     padding: 55px 0;
     border-bottom: 1px solid rgba(255,255,255,.14);
}
 .chapter-no {
     color: var(--tis-gold-light);
     font-size: 10px;
     font-weight: 800;
     letter-spacing: .15em;
     padding-top: 8px;
}
 .tis-root-chapter h3 {
     margin: 0 0 17px;
     font-size: clamp(30px, 3vw, 44px);
     line-height: 1;
     letter-spacing: -.05em;
     font-weight: 500;
}
 .tis-root-chapter p {
     max-width: 560px;
     margin: 0;
     color: rgba(255,255,255,.52);
     font-size: 15px;
     line-height: 1.9;
}
 .tis-root-quote {
     padding: 150px 0 50px;
}
 .tis-root-quote blockquote {
     max-width: 760px;
     margin: 0 0 30px;
     font-family: Georgia, serif;
     font-size: clamp(38px, 5vw, 72px);
     line-height: 1;
     letter-spacing: -.055em;
     font-weight: 400;
}
 .tis-root-quote > p {
     max-width: 500px;
     color: rgba(255,255,255,.52);
     line-height: 1.8;
}

/* =========================================================
   THE ROOT — RESPONSIVE
   Desktop design remains untouched
   Mobile + Tablet layout only
   ========================================================= */


/* ---------------------------------------------------------
   TABLET — 1024px and below
   --------------------------------------------------------- */

@media (max-width: 1024px) {

    .tis-root-shell {
        grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr);
    }

    .tis-root-visual {
        padding: 28px;
        min-height: 650px;
        height: 100vh;
    }

    .tis-root-image-wrap {
        height: calc(100vh - 56px);
        min-height: 590px;
    }

    .tis-root-scroll {
        padding: 110px 8% 100px 9%;
    }

    .tis-root-intro {
        padding-bottom: 100px;
    }

    .tis-root-intro .tis-section-marker {
        margin-bottom: 60px;
    }

    .tis-root-intro h2 {
        font-size: clamp(48px, 6vw, 72px);
    }

    .tis-root-chapter {
        grid-template-columns: 45px 1fr;
        gap: 18px;
        padding: 45px 0;
    }

    .tis-root-chapter h3 {
        font-size: clamp(28px, 3.5vw, 38px);
    }

    .tis-root-chapter p {
        font-size: 14px;
        line-height: 1.85;
    }

    .tis-root-quote {
        padding: 110px 0 40px;
    }

    .tis-root-quote blockquote {
        font-size: clamp(34px, 5vw, 58px);
    }
}


/* ---------------------------------------------------------
   MOBILE — 767px and below
   --------------------------------------------------------- */

@media (max-width: 767px) {

    /* Main section */
    .tis-root {
        min-height: auto;
        width: 100%;
        overflow: hidden;
    }


    /* -----------------------------------------------------
       CHANGE DESKTOP GRID → MOBILE STACK
       Image first
       Content second
       ----------------------------------------------------- */

    .tis-root-shell {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0;
    }


    /* -----------------------------------------------------
       IMAGE AREA
       Sticky desktop behaviour removed
       ----------------------------------------------------- */

    .tis-root-visual {
        position: relative;
        top: auto;
        align-self: auto;

        width: 100%;
        height: auto;
        min-height: 0;

        padding: 18px 18px 0;
    }


    .tis-root-image-wrap {
        width: 100%;
        height: 72vw;
        min-height: 390px;
        max-height: 560px;

        overflow: hidden;
    }


    .tis-root-image {
        width: 100%;
        height: 100%;
        object-fit: cover;

        /* Keep the existing visual treatment */
        filter: saturate(.75) contrast(1.04);
        transform: scale(1.04);
    }


    /* Image overlay */
    .tis-root-image-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(16,16,15,.04) 15%,
                rgba(16,16,15,.78) 100%
            );
    }


    /* -----------------------------------------------------
       IMAGE CAPTION
       ----------------------------------------------------- */

    .tis-root-image-caption {
        left: 20px;
        bottom: 20px;

        gap: 10px;
    }

    .tis-root-image-caption span {
        font-size: 10px;
    }

    .tis-root-image-caption p {
        font-size: 8px;
        letter-spacing: .22em;
    }


    /* -----------------------------------------------------
       IMAGE CIRCLE
       ----------------------------------------------------- */

    .tis-root-image-circle {
        right: 18px;
        top: 18px;

        width: 72px;
        height: 72px;

        font-size: 7px;
        letter-spacing: .15em;
    }


    /* -----------------------------------------------------
       RIGHT CONTENT
       ----------------------------------------------------- */

    .tis-root-scroll {
        width: 100%;

        padding:
            80px
            22px
            80px;

        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       INTRO
       ----------------------------------------------------- */

    .tis-root-intro {
        width: 100%;
        max-width: none;

        padding-bottom: 80px;
    }


    .tis-root-intro .tis-section-marker {
        margin-bottom: 42px;
    }


    .tis-root-kicker {
        font-size: 9px;
        letter-spacing: .20em;
        line-height: 1.5;
    }


    .tis-root-intro h2 {
        margin: 20px 0 24px;

        font-size: clamp(42px, 12vw, 60px);
        line-height: .94;

        letter-spacing: -.065em;
    }


    .tis-root-intro h2 span {
        display: block;
    }


    .tis-root-lead {
        max-width: 100%;

        font-size: 14px;
        line-height: 1.8;

        color: rgba(255,255,255,.58);
    }


    /* -----------------------------------------------------
       CHAPTERS
       ----------------------------------------------------- */

    .tis-root-chapters {
        width: 100%;
    }


    .tis-root-chapter {
        display: grid;

        grid-template-columns: 32px minmax(0, 1fr);

        gap: 14px;

        padding: 38px 0;
    }


    .chapter-no {
        font-size: 9px;
        letter-spacing: .12em;
        padding-top: 6px;
    }


    .tis-root-chapter h3 {
        margin: 0 0 13px;

        font-size: clamp(27px, 8vw, 38px);
        line-height: 1;

        letter-spacing: -.045em;
    }


    .tis-root-chapter p {
        width: 100%;
        max-width: none;

        margin: 0;

        font-size: 13.5px;
        line-height: 1.85;

        color: rgba(255,255,255,.54);
    }


    /* -----------------------------------------------------
       QUOTE
       ----------------------------------------------------- */

    .tis-root-quote {
        padding: 90px 0 20px;
    }


    .tis-root-quote blockquote {
        width: 100%;
        max-width: none;

        margin: 0 0 24px;

        font-size: clamp(34px, 9.5vw, 50px);
        line-height: 1.02;

        letter-spacing: -.045em;
    }


    .tis-root-quote > p {
        width: 100%;
        max-width: none;

        font-size: 13.5px;
        line-height: 1.8;
    }


    .tis-mini-label {
        font-size: 8px;
        letter-spacing: .20em;
    }
}


/* ---------------------------------------------------------
   SMALL MOBILE — 480px and below
   --------------------------------------------------------- */

@media (max-width: 480px) {

    .tis-root-visual {
        padding: 14px 14px 0;
    }


    .tis-root-image-wrap {
        height: 118vw;
        min-height: 390px;
        max-height: 520px;
    }


    .tis-root-image-circle {
        right: 15px;
        top: 15px;

        width: 66px;
        height: 66px;

        font-size: 6.5px;
    }


    .tis-root-image-caption {
        left: 17px;
        bottom: 17px;
    }


    .tis-root-scroll {
        padding:
            68px
            18px
            65px;
    }


    .tis-root-intro {
        padding-bottom: 65px;
    }


    .tis-root-intro .tis-section-marker {
        margin-bottom: 36px;
    }


    .tis-root-intro h2 {
        font-size: clamp(40px, 12.5vw, 54px);
        line-height: .93;
    }


    .tis-root-lead {
        font-size: 13.5px;
        line-height: 1.8;
    }


    .tis-root-chapter {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 12px;

        padding: 34px 0;
    }


    .tis-root-chapter h3 {
        font-size: clamp(26px, 8.5vw, 34px);
        margin-bottom: 12px;
    }


    .tis-root-chapter p {
        font-size: 13px;
        line-height: 1.82;
    }


    .tis-root-quote {
        padding-top: 75px;
    }


    .tis-root-quote blockquote {
        font-size: clamp(32px, 10vw, 46px);
    }
}


/* ---------------------------------------------------------
   VERY SMALL DEVICES — 360px and below
   --------------------------------------------------------- */

@media (max-width: 360px) {

    .tis-root-visual {
        padding: 12px 12px 0;
    }


    .tis-root-image-wrap {
        min-height: 360px;
        height: 120vw;
    }


    .tis-root-scroll {
        padding-left: 16px;
        padding-right: 16px;
    }


    .tis-root-intro h2 {
        font-size: 39px;
    }


    .tis-root-chapter {
        grid-template-columns: 25px minmax(0, 1fr);
        gap: 10px;
    }


    .tis-root-chapter h3 {
        font-size: 27px;
    }


    .tis-root-chapter p {
        font-size: 12.5px;
    }
}


/* ---------------------------------------------------------
   TOUCH DEVICES
   Prevent accidental horizontal overflow
   --------------------------------------------------------- */

@media (hover: none) and (pointer: coarse) {

    .tis-root,
    .tis-root-shell,
    .tis-root-visual,
    .tis-root-scroll {
        max-width: 100%;
        overflow-x: hidden;
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   Existing GSAP can still work, but static users
   shouldn't receive unnecessary movement.
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .tis-root-image {
        transform: none;
    }

    .tis-root *,
    .tis-root *::before,
    .tis-root *::after {
        scroll-behavior: auto !important;
    }
}

/* ========================================================= SECTION 05 — THE TRIGGER UNIQUE SYSTEM ========================================================= */
 .tis-trigger05 {
     position: relative;
     min-height: 100svh;
     overflow: hidden;
     background: #f4f1eb;
     color: #171614;
     padding: 120px 0 80px;
}
/* WATERMARK */
 .tis-trigger05-watermark {
     position: absolute;
     right: -60px;
     top: 42%;
     font-family: "DM Sans", sans-serif;
     font-size: clamp(150px, 22vw, 330px);
     font-weight: 800;
     line-height: .75;
     letter-spacing: -.1em;
     color: rgba(23,22,20,.035);
     pointer-events: none;
     user-select: none;
}
/* CONTAINER */
 .tis-trigger05-container {
     position: relative;
     z-index: 4;
     width: min(1240px, calc(100% - 80px));
     min-height: calc(100svh - 200px);
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
}
/* TOP */
 .tis-trigger05-top {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 55px;
}
 .tis-trigger05-index {
     display: flex;
     align-items: center;
     gap: 17px;
}
 .tis-trigger05-index span {
     font-size: 34px;
     font-weight: 300;
     color: #c28a2b;
     line-height: 1;
}
 .tis-trigger05-index i {
     width: 68px;
     height: 1px;
     background: #c28a2b;
     display: block;
}
 .tis-trigger05-index small, .tis-trigger05-top-note {
     font-size: 13px;
     font-weight: 800;
     letter-spacing: .25em;
     color: #806437;
}
 .tis-trigger05-top-note {
     opacity: .65;
}
/* MAIN GRID */
 .tis-trigger05-main {
     display: grid;
     grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
     gap: clamp(60px, 9vw, 135px);
     align-items: center;
     flex: 1;
}
/* IMAGE */
 .tis-trigger05-visual {
     position: relative;
}
 .tis-trigger05-image-frame {
     position: relative;
     width: 100%;
     aspect-ratio: 4 / 5;
     padding: 10px;
     border: 1px solid rgba(194,138,43,.35);
     background: rgba(255,255,255,.35);
     box-shadow: 0 30px 80px rgba(20,18,14,.10);
}
 .tis-trigger05-image-placeholder {
     position: relative;
     width: 100%;
     height: 100%;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     background: linear-gradient( 145deg, #ddd7cb, #bcb3a3 );
     color: rgba(23,22,20,.55);
}
 .tis-trigger05-image-placeholder::before {
     content: "";
     position: absolute;
     inset: 0;
     background: radial-gradient( circle at 65% 30%, rgba(194,138,43,.25), transparent 30% );
     pointer-events: none;
}
/* =========================================================
   SECTION 05 — ACTUAL IMAGE
   ========================================================= */

.tis-trigger05-image-placeholder {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   IMAGE
   ========================================================= */

.tis-trigger05-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transform: scale(1.03);

    transition:
        transform 1.2s cubic-bezier(.22, 1, .36, 1),
        filter .7s ease;
}


/* =========================================================
   DARK / GOLD OVERLAY
   ========================================================= */

.tis-trigger05-image-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(16,16,15,.03) 25%,
            rgba(16,16,15,.68) 100%
        );

    pointer-events: none;
}


/* =========================================================
   IMAGE HOVER
   ========================================================= */

.tis-trigger05-image-placeholder:hover
.tis-trigger05-image {

    transform: scale(1.075);

    filter:
        saturate(.82)
        contrast(1.05);
}


/* =========================================================
   NUMBER
   ========================================================= */

.tis-trigger05-image-number {

    position: absolute;

    z-index: 3;

    top: 28px;
    left: 28px;

    color: rgba(255,255,255,.85);

    font-size: 65px;
    font-weight: 700;

    letter-spacing: -.07em;

    opacity: .38;

    pointer-events: none;
}


/* =========================================================
   IMAGE LABEL
   ========================================================= */

.tis-trigger05-image-text {

    position: absolute;

    z-index: 3;

    left: 30px;
    bottom: 28px;

    margin: 0;

    color: #c28a2b;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .25em;

    text-transform: uppercase;

    pointer-events: none;
}


/* =========================================================
   CORNER
   ========================================================= */

.tis-trigger05-corner {

    position: absolute;

    z-index: 4;

    right: 22px;
    bottom: 22px;

    width: 35px;
    height: 35px;

    border-right:
        1px solid
        rgba(194,138,43,.8);

    border-bottom:
        1px solid
        rgba(194,138,43,.8);

    pointer-events: none;
}


/* =========================================================
   SMALL TOP CORNER DETAIL
   ========================================================= */

.tis-trigger05-image-placeholder::after {

    content: "";

    position: absolute;

    z-index: 4;

    top: 22px;
    right: 22px;

    width: 35px;
    height: 35px;

    border-top:
        1px solid
        rgba(194,138,43,.45);

    border-right:
        1px solid
        rgba(194,138,43,.45);

    pointer-events: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .tis-trigger05-image-number {

        top: 20px;
        left: 20px;

        font-size: 48px;
    }


    .tis-trigger05-image-text {

        left: 21px;
        bottom: 21px;

        font-size: 7px;

        letter-spacing: .20em;
    }


    .tis-trigger05-corner {

        right: 16px;
        bottom: 16px;

        width: 28px;
        height: 28px;
    }


    .tis-trigger05-image-placeholder::after {

        top: 16px;
        right: 16px;

        width: 28px;
        height: 28px;
    }


    /* Touch device par zoom nahi */
    .tis-trigger05-image-placeholder:hover
    .tis-trigger05-image {

        transform: scale(1.03);

    }
}
 .tis-trigger05-image-number {
     font-size: 65px;
     font-weight: 700;
     letter-spacing: -.07em;
     opacity: .3;
}
 .tis-trigger05-image-text {
     margin-top: 8px;
     font-size: 8px;
     font-weight: 800;
     letter-spacing: .25em;
}
 .tis-trigger05-corner {
     position: absolute;
     right: 22px;
     bottom: 22px;
     width: 35px;
     height: 35px;
     border-right: 1px solid rgba(194,138,43,.8);
     border-bottom: 1px solid rgba(194,138,43,.8);
}
/* CAPTION */
 .tis-trigger05-image-caption {
     display: flex;
     align-items: center;
     gap: 15px;
     margin-top: 18px;
     font-size: 8px;
     letter-spacing: .2em;
     color: #766b5c;
}
 .tis-trigger05-image-caption span {
     color: #c28a2b;
     font-weight: 800;
}
 .tis-trigger05-image-caption strong {
     font-weight: 800;
}
/* CONTENT */
 .tis-trigger05-content {
     max-width: 650px;
}
 .tis-trigger05-eyebrow {
     margin-bottom: 24px;
     font-size: 9px;
     font-weight: 800;
     letter-spacing: .3em;
     color: #c28a2b;
}
 .tis-trigger05-title {
     margin: 0;
     max-width: 620px;
     font-size: clamp(58px, 6.5vw, 92px);
     line-height: .9;
     letter-spacing: -.07em;
     font-weight: 600;
}
 .tis-trigger05-title span {
     display: block;
     color: #b37d22;
}
 .tis-trigger05-description {
     max-width: 500px;
     margin: 38px 0 0;
     font-size: 16px;
     line-height: 1.85;
     color: #666159;
}
/* INSIGHT */
 .tis-trigger05-insight {
     display: flex;
     gap: 22px;
     margin-top: 45px;
}
 .tis-trigger05-insight-line {
     width: 2px;
     flex: 0 0 2px;
     background: #c28a2b;
}
 .tis-trigger05-insight small {
     display: block;
     margin-bottom: 10px;
     font-size: 8px;
     font-weight: 800;
     letter-spacing: .25em;
     color: #a47b39;
}
 .tis-trigger05-insight p {
     max-width: 430px;
     margin: 0;
     font-size: 18px;
     line-height: 1.55;
     font-weight: 500;
     color: #292722;
}
/* FOOTER */
 .tis-trigger05-footer {
     display: flex;
     align-items: center;
     gap: 15px;
     margin-top: 45px;
     font-size: 8px;
     font-weight: 800;
     letter-spacing: .22em;
     color: #8a8175;
}
 .tis-trigger05-footer-line {
     width: 80px;
     height: 1px;
     background: rgba(23,22,20,.12);
     position: relative;
}
 .tis-trigger05-footer-line i {
     position: absolute;
     left: 0;
     top: 0;
     width: 28px;
     height: 1px;
     background: #c28a2b;
     animation: tisTrigger05Progress 2.5s ease-in-out infinite;
}
 @keyframes tisTrigger05Progress {
     0%,100% {
         transform: translateX(0);
    }
     50% {
         transform: translateX(52px);
    }
}
/* FLOATING ORBS */
 .tis-trigger05-orb {
     position: absolute;
     width: 320px;
     height: 320px;
     right: -160px;
     top: 15%;
     border-radius: 50%;
     background: radial-gradient( circle, rgba(194,138,43,.12), transparent 68% );
     animation: tisTrigger05Float 8s ease-in-out infinite;
}
 .tis-trigger05-orb-two {
     width: 220px;
     height: 220px;
     left: -130px;
     bottom: 0;
     animation-delay: -3s;
}
 @keyframes tisTrigger05Float {
     0%,100% {
         transform: translate3d(0,0,0);
    }
     50% {
         transform: translate3d(-20px,-25px,0);
    }
}
/* REVEAL */
 .tis-trigger05-reveal {
     opacity: 1;
     transform: translateY(0);
}
 .tis-trigger05-js .tis-trigger05-reveal {
     opacity: 0;
     transform: translateY(35px);
     transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
 .tis-trigger05-js .tis-trigger05-reveal.tis-trigger05-visible {
     opacity: 1;
     transform: translateY(0);
}
/* ========================================================= RESPONSIVE ========================================================= */
 @media (max-width: 900px) {
     .tis-trigger05 {
         padding: 105px 0 65px;
    }
     .tis-trigger05-container {
         width: calc(100% - 45px);
    }
     .tis-trigger05-main {
         grid-template-columns: 1fr;
         gap: 60px;
    }
     .tis-trigger05-visual {
         width: min(500px,100%);
         margin: auto;
    }
     .tis-trigger05-content {
         margin: auto;
    }
}
 @media (max-width: 600px) {
     .tis-trigger05 {
         padding: 95px 0 50px;
    }
     .tis-trigger05-container {
         width: calc(100% - 30px);
    }
     .tis-trigger05-top-note {
         display: none;
    }
     .tis-trigger05-index span {
         font-size: 28px;
    }
     .tis-trigger05-index i {
         width: 45px;
    }
     .tis-trigger05-title {
         font-size: clamp(48px, 15vw, 68px);
    }
     .tis-trigger05-description {
         font-size: 14px;
    }
     .tis-trigger05-insight p {
         font-size: 16px;
    }
}
/* ===================================================== SECTION 06 — THE PRACTICE ===================================================== */
 .tis06x-practice {
     position: relative;
     overflow: hidden;
     padding: 105px 0 85px;
     background: #f7f5f1;
     color: #10100f;
}
 .tis06x-container {
     position: relative;
     z-index: 2;
     width: min(1180px, calc(100% - 70px));
     margin: auto;
}
/* BACKGROUND WORD */
 .tis06x-bg-word {
     position: absolute;
     right: -5%;
     bottom: -8%;
     font-size: clamp(150px, 22vw, 310px);
     font-weight: 800;
     line-height: .7;
     letter-spacing: -.1em;
     color: rgba(16,16,15,.025);
     pointer-events: none;
}
/* HEADING */
 .tis06x-heading {
     display: flex;
     align-items: center;
     gap: 17px;
     margin-bottom: 85px;
}
 .tis06x-index {
     color: #c28a2b;
     font-size: 32px;
     font-weight: 300;
}
 .tis06x-heading-line {
     width: 65px;
     height: 1px;
     background: #c28a2b;
}
 .tis06x-heading span {
     color: #7d5a2b;
     font-size: 13px;
     font-weight: 700;
     letter-spacing: .27em;
}
/* MAIN */
 .tis06x-layout {
     display: grid;
     grid-template-columns: .9fr 1.1fr;
     gap: 120px;
     align-items: start;
}
/* INTRO */
 .tis06x-kicker {
     margin: 0 0 25px;
     color: #c28a2b;
     font-size: 9px;
     font-weight: 800;
     letter-spacing: .22em;
}
 .tis06x-intro h2 {
     max-width: 500px;
     margin: 0;
     font-size: clamp(48px, 5.5vw, 78px);
     font-weight: 500;
     line-height: .94;
     letter-spacing: -.065em;
}
 .tis06x-intro h2 span {
     display: block;
     color: #c28a2b;
}
 .tis06x-lead {
     max-width: 460px;
     margin: 35px 0 0;
     color: #68645d;
     font-size: 15px;
     line-height: 1.85;
}
/* ITEMS */
 .tis06x-content {
     border-top: 1px solid rgba(194,138,43,.25);
}
 .tis06x-item {
     display: grid;
     grid-template-columns: 50px 1fr;
     gap: 20px;
     padding: 31px 0;
     border-bottom: 1px solid rgba(194,138,43,.25);
     transition: padding .45s ease, transform .45s ease;
}
 .tis06x-item > span {
     color: #c28a2b;
     font-size: 10px;
     font-weight: 700;
}
 .tis06x-item h3 {
     margin: 0 0 9px;
     font-size: 25px;
     font-weight: 500;
     letter-spacing: -.035em;
     transition: color .35s ease;
}
 .tis06x-item p {
     max-width: 480px;
     margin: 0;
     color: #77736c;
     font-size: 14px;
     line-height: 1.75;
}
 .tis06x-item:hover {
     padding-left: 14px;
     transform: translateX(5px);
}
 .tis06x-item:hover h3 {
     color: #c28a2b;
}
/* BOTTOM */
 .tis06x-bottom {
     display: flex;
     align-items: center;
     gap: 18px;
     margin-top: 70px;
     color: #8a8378;
     font-size: 8px;
     font-weight: 700;
     letter-spacing: .2em;
}
 .tis06x-bottom div {
     width: 80px;
     height: 1px;
     background: #c28a2b;
}
 .tis06x-item:nth-child(2) {
     transition-delay: .1s;
}
 .tis06x-item:nth-child(3) {
     transition-delay: .2s;
}

/* =========================================================
   SECTION 06 — THE PRACTICE
   RESPONSIVE ENHANCEMENT
   Desktop design remains untouched
   ========================================================= */


/* =========================================================
   TABLET — 1024px
   ========================================================= */

@media (max-width: 1024px) {

    .tis06x-practice {
        padding: 95px 0 75px;
    }

    .tis06x-container {
        width: min(900px, calc(100% - 56px));
    }

    .tis06x-heading {
        margin-bottom: 70px;
    }

    .tis06x-layout {
        grid-template-columns: .9fr 1.1fr;
        gap: 65px;
    }

    .tis06x-intro h2 {
        font-size: clamp(46px, 6vw, 68px);
    }

    .tis06x-lead {
        font-size: 14px;
        line-height: 1.8;
    }

    .tis06x-item {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 16px;
        padding: 28px 0;
    }

    .tis06x-item h3 {
        font-size: 23px;
    }

    .tis06x-item p {
        font-size: 13.5px;
        line-height: 1.75;
    }

    .tis06x-bg-word {
        right: -8%;
        bottom: -3%;
        font-size: clamp(140px, 22vw, 250px);
    }
}


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 850px) {

    .tis06x-practice {
        padding: 90px 0 75px;
    }

    .tis06x-container {
        width: calc(100% - 50px);
    }

    /* Heading */
    .tis06x-heading {
        margin-bottom: 65px;
        gap: 14px;
    }

    .tis06x-index {
        font-size: 28px;
    }

    .tis06x-heading-line {
        width: 55px;
    }

    /* Stack intro + items */
    .tis06x-layout {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .tis06x-intro {
        max-width: 680px;
    }

    .tis06x-intro h2 {
        max-width: 650px;
        font-size: clamp(48px, 8vw, 68px);
    }

    .tis06x-lead {
        max-width: 600px;
    }

    .tis06x-content {
        width: 100%;
    }

    .tis06x-item {
        grid-template-columns: 45px minmax(0, 1fr);
        gap: 18px;
        padding: 30px 0;
    }

    .tis06x-item p {
        max-width: 620px;
    }

    .tis06x-bottom {
        margin-top: 60px;
    }
}


/* =========================================================
   MOBILE — 600px
   ========================================================= */

@media (max-width: 600px) {

    .tis06x-practice {
        padding: 76px 0 62px;
        width: 100%;
        overflow: hidden;
    }

    .tis06x-container {
        width: calc(100% - 34px);
        max-width: none;
    }


    /* -----------------------------------------------------
       BACKGROUND WORD
       ----------------------------------------------------- */

    .tis06x-bg-word {
        right: -18%;
        bottom: 1%;

        font-size: clamp(110px, 30vw, 190px);

        letter-spacing: -.09em;
        white-space: nowrap;
    }


    /* -----------------------------------------------------
       SECTION HEADING
       ----------------------------------------------------- */

    .tis06x-heading {
        display: flex;
        align-items: center;

        gap: 11px;

        margin-bottom: 52px;
    }

    .tis06x-index {
        flex: 0 0 auto;
        font-size: 25px;
    }

    .tis06x-heading-line {
        flex: 0 0 42px;
        width: 42px;
    }

    .tis06x-heading span {
        font-size: 8px;
        letter-spacing: .20em;
        white-space: nowrap;
    }


    /* -----------------------------------------------------
       MAIN LAYOUT
       ----------------------------------------------------- */

    .tis06x-layout {
        display: flex;
        flex-direction: column;

        gap: 50px;
    }


    /* -----------------------------------------------------
       INTRO
       ----------------------------------------------------- */

    .tis06x-intro {
        width: 100%;
        max-width: none;
    }

    .tis06x-kicker {
        margin-bottom: 19px;

        font-size: 8px;
        line-height: 1.6;
        letter-spacing: .17em;
    }

    .tis06x-intro h2 {
        max-width: none;

        margin: 0;

        font-size: clamp(40px, 11.5vw, 56px);
        line-height: .95;

        letter-spacing: -.06em;
    }

    .tis06x-intro h2 span {
        display: block;
    }

    .tis06x-lead {
        width: 100%;
        max-width: none;

        margin-top: 27px;

        font-size: 13.5px;
        line-height: 1.8;
    }


    /* -----------------------------------------------------
       ITEMS
       ----------------------------------------------------- */

    .tis06x-content {
        width: 100%;
    }

    .tis06x-item {
        display: grid;

        grid-template-columns: 30px minmax(0, 1fr);

        gap: 12px;

        padding: 25px 0;
    }

    .tis06x-item > span {
        font-size: 9px;
        padding-top: 3px;
    }

    .tis06x-item h3 {
        margin: 0 0 9px;

        font-size: 22px;
        line-height: 1.05;

        letter-spacing: -.035em;
    }

    .tis06x-item p {
        width: 100%;
        max-width: none;

        font-size: 13px;
        line-height: 1.78;
    }


    /* -----------------------------------------------------
       REMOVE LARGE DESKTOP HOVER MOVEMENT ON TOUCH
       ----------------------------------------------------- */

    .tis06x-item:hover {
        padding-left: 0;
        transform: none;
    }

    .tis06x-item:hover h3 {
        color: inherit;
    }


    /* -----------------------------------------------------
       BOTTOM
       ----------------------------------------------------- */

    .tis06x-bottom {
        display: grid;

        grid-template-columns: 1fr auto;
        gap: 10px;

        margin-top: 45px;

        font-size: 6.5px;
        line-height: 1.5;
        letter-spacing: .16em;
    }

    .tis06x-bottom div {
        display: none;
    }

    .tis06x-bottom span:first-child {
        max-width: 190px;
    }

    .tis06x-bottom span:last-child {
        white-space: nowrap;
    }
}


/* =========================================================
   SMALL MOBILE — 480px
   ========================================================= */

@media (max-width: 480px) {

    .tis06x-practice {
        padding: 68px 0 55px;
    }

    .tis06x-container {
        width: calc(100% - 30px);
    }


    .tis06x-heading {
        margin-bottom: 46px;
        gap: 9px;
    }

    .tis06x-index {
        font-size: 23px;
    }

    .tis06x-heading-line {
        flex-basis: 35px;
        width: 35px;
    }

    .tis06x-heading span {
        font-size: 7px;
        letter-spacing: .17em;
    }


    .tis06x-layout {
        gap: 45px;
    }


    .tis06x-kicker {
        font-size: 7.5px;
        letter-spacing: .15em;
        margin-bottom: 17px;
    }


    .tis06x-intro h2 {
        font-size: clamp(38px, 11.8vw, 52px);
        line-height: .94;
    }


    .tis06x-lead {
        margin-top: 24px;

        font-size: 13px;
        line-height: 1.78;
    }


    .tis06x-item {
        grid-template-columns: 27px minmax(0, 1fr);

        gap: 10px;

        padding: 23px 0;
    }


    .tis06x-item > span {
        font-size: 8px;
    }


    .tis06x-item h3 {
        font-size: 21px;
        margin-bottom: 8px;
    }


    .tis06x-item p {
        font-size: 12.5px;
        line-height: 1.78;
    }


    .tis06x-bottom {
        margin-top: 40px;

        font-size: 6px;
        letter-spacing: .14em;
    }

    .tis06x-bottom span:first-child {
        max-width: 170px;
    }


    .tis06x-bg-word {
        right: -24%;
        bottom: 1%;

        font-size: 125px;
    }
}


/* =========================================================
   VERY SMALL PHONES — 380px
   ========================================================= */

@media (max-width: 380px) {

    .tis06x-practice {
        padding: 60px 0 50px;
    }

    .tis06x-container {
        width: calc(100% - 26px);
    }


    .tis06x-heading {
        margin-bottom: 40px;
    }

    .tis06x-index {
        font-size: 21px;
    }

    .tis06x-heading-line {
        flex-basis: 30px;
        width: 30px;
    }

    .tis06x-heading span {
        font-size: 6.5px;
        letter-spacing: .14em;
    }


    .tis06x-layout {
        gap: 40px;
    }


    .tis06x-intro h2 {
        font-size: 37px;
    }


    .tis06x-lead {
        font-size: 12.5px;
    }


    .tis06x-item {
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 9px;

        padding: 21px 0;
    }


    .tis06x-item h3 {
        font-size: 20px;
    }


    .tis06x-item p {
        font-size: 12px;
        line-height: 1.75;
    }


    .tis06x-bottom {
        margin-top: 35px;
        font-size: 5.5px;
    }

    .tis06x-bottom span:first-child {
        max-width: 150px;
    }
}
/* =========================================================
   SECTION 06 — MOBILE OVERFLOW FIX
   ========================================================= */

@media (max-width: 767px) {

    /* Prevent the whole section from creating horizontal scroll */
    .tis06x-practice {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .tis06x-container {
        width: calc(100% - 30px);
        max-width: 100%;
        box-sizing: border-box;
        overflow: visible;
    }

    .tis06x-layout,
    .tis06x-content,
    .tis06x-intro,
    .tis06x-item,
    .tis06x-item > div {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Cards start exactly from content edge */
    .tis06x-content {
        margin-left: 0;
        margin-right: 0;
    }

    .tis06x-item {
        display: grid;
        grid-template-columns: 27px minmax(0, 1fr);
        gap: 10px;

        width: 100%;
        min-width: 0;

        transform: none;
        padding-left: 0;
        padding-right: 0;

        overflow: hidden;
    }

    .tis06x-item > span {
        min-width: 0;
    }

    .tis06x-item > div {
        min-width: 0;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .tis06x-item h3,
    .tis06x-item p {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-wrap: break-word;
    }

    .tis06x-item p {
        white-space: normal;
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    .tis06x-container {
        width: calc(100% - 28px);
    }

    .tis06x-item {
        grid-template-columns: 25px minmax(0, 1fr);
        gap: 9px;
    }

    .tis06x-item h3 {
        font-size: 21px;
    }

    .tis06x-item p {
        font-size: 12.5px;
        line-height: 1.78;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

    .tis06x-container {
        width: calc(100% - 24px);
    }

    .tis06x-item {
        grid-template-columns: 23px minmax(0, 1fr);
        gap: 8px;
    }

    .tis06x-item h3 {
        font-size: 19px;
    }

    .tis06x-item p {
        font-size: 12px;
    }
}

/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    .tis06x-item {
        transition: none;
    }

    .tis06x-item:hover {
        padding-left: 0;
        transform: none;
    }

    .tis06x-item:hover h3 {
        color: inherit;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .tis06x-item,
    .tis06x-heading,
    .tis06x-intro,
    .tis06x-bottom {
        transition: none !important;
    }
}

/* ========================================================= SECTION 07 — THE INTEGRATION STICKY IMAGE + SCROLLING CONTENT ========================================================= */
 .tis07x-integration {
     position: relative;
     overflow: visible;
     padding: 120px 0 130px;
     background: #171614;
     color: #f7f5f1;
}
/* ========================================================= CONTAINER ========================================================= */
 .tis07x-container {
     width: min(1180px, calc(100% - 70px));
     margin: 0 auto;
}
/* ========================================================= TOP HEADER ========================================================= */
 .tis07x-top {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 90px;
}
 .tis07x-marker {
     display: flex;
     align-items: center;
     gap: 16px;
}
 .tis07x-marker strong {
     color: #c28a2b;
     font-size: 32px;
     font-weight: 300;
}
 .tis07x-marker span {
     width: 65px;
     height: 1px;
     background: #c28a2b;
}
 .tis07x-marker small {
     color: rgba(255,255,255,.55);
     font-size: 13px;
     font-weight: 700;
     letter-spacing: .25em;
}
 .tis07x-top p {
     margin: 0;
     color: rgba(255,255,255,.3);
     font-size: 8px;
     letter-spacing: .2em;
}
/* ========================================================= MAIN TWO COLUMN LAYOUT ========================================================= */
 .tis07x-layout {
     display: grid;
     grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
     gap: 105px;
    /* VERY IMPORTANT */
     align-items: start;
}
/* ========================================================= LEFT VISUAL COLUMN ========================================================= */
 .tis07x-visual {
    /* * Important: * Don't give this element a fixed height. * Its height will naturally follow the sticky image. */
     height: fit-content;
    /* * Prevent grid stretching. */
     align-self: start;
     min-width: 0;
}
/* ========================================================= STICKY IMAGE WRAPPER ========================================================= */
 .tis07x-sticky {
    /* * THIS IS THE MAIN PART */
     position: -webkit-sticky;
     position: sticky;
    /* * Image will stop here while right content scrolls. */
     top: 110px;
    /* * Don't let the wrapper stretch. */
     align-self: start;
     height: fit-content;
}
/* ========================================================= IMAGE FRAME ========================================================= */
 .tis07x-image {
     position: relative;
     width: 100%;
     height: 560px;
     overflow: hidden;
     padding: 10px;
     background: #24211d;
     border: 1px solid rgba(194,138,43,.38);
}
/* ========================================================= ACTUAL IMAGE ========================================================= */
 .tis07x-photo {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     transition: transform .9s cubic-bezier(.22,1,.36,1), filter .5s ease;
}
/* IMAGE HOVER */
 .tis07x-image:hover .tis07x-photo {
     transform: scale(1.045);
}
/* ========================================================= IMAGE LABEL ========================================================= */
 .tis07x-image-label {
     position: absolute;
     left: 28px;
     bottom: 25px;
     z-index: 3;
     color: #c28a2b;
     font-size: 8px;
     font-weight: 700;
     letter-spacing: .20em;
     text-transform: uppercase;
     pointer-events: none;
}
/* ========================================================= IMAGE NOTE ========================================================= */
 .tis07x-image-note {
     margin-top: 14px;
     color: rgba(255,255,255,.30);
     font-size: 8px;
     font-weight: 700;
     letter-spacing: .20em;
     text-transform: uppercase;
}
/* ========================================================= RIGHT SCROLLING STORY ========================================================= */
 .tis07x-story {
    /* * This column is intentionally taller than image. * Therefore the left sticky image remains visible * while this content keeps moving. */
     min-width: 0;
     padding-bottom: 30px;
}
/* ========================================================= EYEBROW ========================================================= */
 .tis07x-eyebrow {
     margin: 0 0 25px;
     color: #c28a2b;
     font-size: 9px;
     font-weight: 700;
     letter-spacing: .25em;
}
/* ========================================================= MAIN TITLE ========================================================= */
 .tis07x-title {
     max-width: 650px;
     margin: 0;
     font-size: clamp(48px, 5.5vw, 78px);
     line-height: .94;
     letter-spacing: -.065em;
     font-weight: 500;
}
 .tis07x-title span {
     display: block;
     color: #c28a2b;
}
/* ========================================================= INTRO COPY ========================================================= */
 .tis07x-copy {
     max-width: 520px;
     margin-top: 40px;
}
 .tis07x-copy p {
     margin: 0 0 20px;
     color: rgba(255,255,255,.58);
     font-size: 15px;
     line-height: 1.9;
}
/* ========================================================= CHAPTERS ========================================================= */
 .tis07x-chapters {
     margin-top: 75px;
     border-top: 1px solid rgba(194,138,43,.25);
}
 .tis07x-chapter {
     display: grid;
     grid-template-columns: 50px minmax(0,1fr);
     gap: 20px;
     padding: 30px 0;
     border-bottom: 1px solid rgba(194,138,43,.25);
     transition: background .35s ease, padding-left .35s ease;
}
 .tis07x-chapter:hover {
     padding-left: 10px;
}
/* NUMBER */
 .tis07x-chapter-number {
     color: #c28a2b;
     font-size: 10px;
     font-weight: 700;
     padding-top: 4px;
}
/* HEADING */
 .tis07x-chapter h3 {
     margin: 0 0 10px;
     color: #f7f5f1;
     font-size: 24px;
     font-weight: 500;
     letter-spacing: -.035em;
     transition: color .35s ease, transform .35s ease;
}
 .tis07x-chapter:hover h3 {
     color: #c28a2b;
     transform: translateX(5px);
}
/* DESCRIPTION */
 .tis07x-chapter p {
     max-width: 480px;
     margin: 0;
     color: rgba(255,255,255,.46);
     font-size: 14px;
     line-height: 1.8;
}
/* ========================================================= CLOSING STATEMENT ========================================================= */
 .tis07x-closing {
     display: flex;
     align-items: center;
     gap: 18px;
     margin-top: 65px;
}
 .tis07x-closing span {
     width: 60px;
     height: 1px;
     background: #c28a2b;
}
 .tis07x-closing p {
     max-width: 280px;
     margin: 0;
     color: rgba(255,255,255,.38);
     font-size: 9px;
     line-height: 1.7;
     letter-spacing: .16em;
}
/* ========================================================= REVEAL DELAYS ========================================================= */
 .tis07x-chapter:nth-child(1) {
     transition-delay: .00s;
}
 .tis07x-chapter:nth-child(2) {
     transition-delay: .08s;
}
 .tis07x-chapter:nth-child(3) {
     transition-delay: .16s;
}
 .tis07x-chapter:nth-child(4) {
     transition-delay: .24s;
}
/* =========================================================
   SECTION 07 — THE INTEGRATION
   FINAL RESPONSIVE OVERRIDE
   Desktop design remains untouched
   ========================================================= */


/* =========================================================
   TABLET — 850px
   ========================================================= */

@media (max-width: 850px) {

    .tis07x-integration {
        padding: 95px 0 100px;
        overflow: hidden;
    }

    .tis07x-container {
        width: calc(100% - 44px);
        max-width: none;
    }


    /* -----------------------------------------------------
       TOP
       ----------------------------------------------------- */

    .tis07x-top {
        margin-bottom: 65px;
    }

    .tis07x-top p {
        font-size: 7px;
        letter-spacing: .16em;
    }


    /* -----------------------------------------------------
       CHANGE TWO COLUMNS → ONE COLUMN
       ----------------------------------------------------- */

    .tis07x-layout {
        display: flex;
        flex-direction: column;

        width: 100%;
        gap: 65px;
    }


    /* -----------------------------------------------------
       IMAGE
       ----------------------------------------------------- */

    .tis07x-visual {
        width: 100%;
        height: auto;
        min-width: 0;
    }

    .tis07x-sticky {
        position: relative;

        top: auto;

        width: 100%;
    }

    .tis07x-image {
        width: 100%;
        max-width: 650px;

        height: 520px;

        margin: 0 auto;

        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       STORY
       ----------------------------------------------------- */

    .tis07x-story {
        width: 100%;
        max-width: 700px;

        min-width: 0;
    }

    .tis07x-title {
        max-width: 650px;

        font-size: clamp(48px, 7vw, 70px);
    }

    .tis07x-copy {
        max-width: 620px;
    }

    .tis07x-chapters {
        width: 100%;
        margin-top: 65px;
    }

    .tis07x-chapter {
        grid-template-columns: 45px minmax(0, 1fr);
        gap: 17px;
    }

    .tis07x-chapter p {
        max-width: 600px;
    }
}


/* =========================================================
   MOBILE — 600px
   ========================================================= */

@media (max-width: 600px) {

    .tis07x-integration {
        width: 100%;
        padding: 72px 0 80px;

        overflow-x: hidden;
        overflow-y: visible;

        box-sizing: border-box;
    }

    .tis07x-container {
        width: calc(100% - 30px);
        max-width: none;

        box-sizing: border-box;
    }


    /* =====================================================
       TOP HEADER
       ===================================================== */

    .tis07x-top {
        display: flex;
        align-items: center;

        width: 100%;

        margin-bottom: 48px;
    }

    .tis07x-marker {
        gap: 10px;
    }

    .tis07x-marker strong {
        font-size: 27px;
    }

    .tis07x-marker span {
        width: 40px;
    }

    .tis07x-marker small {
        font-size: 7px;
        letter-spacing: .17em;

        white-space: nowrap;
    }

    .tis07x-top > p {
        display: none;
    }


    /* =====================================================
       ONE COLUMN MOBILE FLOW
       ===================================================== */

    .tis07x-layout {
        display: flex;
        flex-direction: column;

        width: 100%;
        gap: 52px;

        min-width: 0;
    }


    /* =====================================================
       IMAGE
       ===================================================== */

    .tis07x-visual {
        width: 100%;
        max-width: 100%;

        height: auto;
        min-width: 0;

        align-self: auto;
    }

    .tis07x-sticky {
        position: relative;

        top: auto;

        width: 100%;
        max-width: 100%;
    }

    .tis07x-image {
        width: 100%;
        max-width: 100%;

        height: 420px;

        margin: 0;

        padding: 8px;

        box-sizing: border-box;
    }

    .tis07x-photo {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }

    .tis07x-image-label {
        left: 22px;
        bottom: 21px;

        font-size: 7px;
        letter-spacing: .18em;
    }

    .tis07x-image-note {
        margin-top: 11px;

        font-size: 7px;
        letter-spacing: .17em;
    }


    /* =====================================================
       STORY
       ===================================================== */

    .tis07x-story {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        padding-bottom: 0;

        box-sizing: border-box;
    }


    /* =====================================================
       EYEBROW
       ===================================================== */

    .tis07x-eyebrow {
        margin-bottom: 18px;

        font-size: 8px;
        line-height: 1.5;
        letter-spacing: .18em;
    }


    /* =====================================================
       TITLE
       ===================================================== */

    .tis07x-title {
        width: 100%;
        max-width: 100%;

        margin: 0;

        font-size: clamp(40px, 11.5vw, 56px);

        line-height: .94;
        letter-spacing: -.06em;

        overflow-wrap: normal;
        word-break: normal;
    }

    .tis07x-title span {
        display: block;
    }


    /* =====================================================
       COPY
       ===================================================== */

    .tis07x-copy {
        width: 100%;
        max-width: 100%;

        margin-top: 28px;

        box-sizing: border-box;
    }

    .tis07x-copy p {
        width: 100%;
        max-width: 100%;

        margin: 0 0 17px;

        font-size: 13px;
        line-height: 1.82;

        color: rgba(255,255,255,.56);

        overflow-wrap: break-word;
    }


    /* =====================================================
       CHAPTERS
       ===================================================== */

    .tis07x-chapters {
        width: 100%;
        max-width: 100%;

        margin-top: 48px;

        box-sizing: border-box;
    }

    .tis07x-chapter {
        display: grid;

        grid-template-columns: 28px minmax(0, 1fr);

        gap: 11px;

        width: 100%;
        min-width: 0;

        padding: 24px 0;

        box-sizing: border-box;

        overflow: hidden;
    }

    .tis07x-chapter-number {
        min-width: 0;

        font-size: 8px;
        padding-top: 4px;
    }

    .tis07x-chapter > div:last-child {
        min-width: 0;
        width: 100%;
    }

    .tis07x-chapter h3 {
        width: 100%;
        max-width: 100%;

        margin: 0 0 9px;

        font-size: 21px;
        line-height: 1.08;

        letter-spacing: -.035em;

        overflow-wrap: break-word;
    }

    .tis07x-chapter p {
        width: 100%;
        max-width: 100%;

        margin: 0;

        font-size: 12.5px;
        line-height: 1.78;

        overflow-wrap: break-word;
    }


    /* =====================================================
       MOBILE HOVER OFF
       ===================================================== */

    .tis07x-chapter:hover {
        padding-left: 0;
    }

    .tis07x-chapter:hover h3 {
        color: #f7f5f1;
        transform: none;
    }

    .tis07x-image:hover .tis07x-photo {
        transform: none;
    }


    /* =====================================================
       CLOSING
       ===================================================== */

    .tis07x-closing {
        display: flex;
        align-items: center;

        width: 100%;

        gap: 12px;

        margin-top: 45px;

        box-sizing: border-box;
    }

    .tis07x-closing span {
        width: 38px;
        flex: 0 0 38px;
    }

    .tis07x-closing p {
        max-width: 230px;

        font-size: 7px;
        line-height: 1.65;
        letter-spacing: .13em;
    }
}


/* =========================================================
   SMALL MOBILE — 480px
   ========================================================= */

@media (max-width: 480px) {

    .tis07x-integration {
        padding: 64px 0 70px;
    }

    .tis07x-container {
        width: calc(100% - 26px);
    }


    .tis07x-top {
        margin-bottom: 42px;
    }

    .tis07x-marker {
        gap: 8px;
    }

    .tis07x-marker strong {
        font-size: 24px;
    }

    .tis07x-marker span {
        width: 32px;
    }

    .tis07x-marker small {
        font-size: 6.5px;
        letter-spacing: .14em;
    }


    .tis07x-layout {
        gap: 45px;
    }


    /* IMAGE */

    .tis07x-image {
        height: 390px;
        padding: 7px;
    }

    .tis07x-image-label {
        left: 19px;
        bottom: 19px;

        font-size: 6.5px;
    }

    .tis07x-image-note {
        font-size: 6.5px;
    }


    /* TITLE */

    .tis07x-eyebrow {
        font-size: 7px;
        letter-spacing: .16em;
    }

    .tis07x-title {
        font-size: clamp(38px, 11.8vw, 52px);
    }


    /* COPY */

    .tis07x-copy {
        margin-top: 25px;
    }

    .tis07x-copy p {
        font-size: 12.5px;
        line-height: 1.8;
    }


    /* CHAPTERS */

    .tis07x-chapters {
        margin-top: 43px;
    }

    .tis07x-chapter {
        grid-template-columns: 25px minmax(0, 1fr);

        gap: 9px;

        padding: 22px 0;
    }

    .tis07x-chapter-number {
        font-size: 7.5px;
    }

    .tis07x-chapter h3 {
        font-size: 20px;
    }

    .tis07x-chapter p {
        font-size: 12px;
        line-height: 1.78;
    }


    /* CLOSING */

    .tis07x-closing {
        margin-top: 40px;
        gap: 10px;
    }

    .tis07x-closing span {
        width: 32px;
        flex-basis: 32px;
    }

    .tis07x-closing p {
        font-size: 6px;
    }
}


/* =========================================================
   VERY SMALL MOBILE — 360px
   ========================================================= */

@media (max-width: 360px) {

    .tis07x-integration {
        padding: 58px 0 62px;
    }

    .tis07x-container {
        width: calc(100% - 22px);
    }


    .tis07x-image {
        height: 355px;
    }


    .tis07x-title {
        font-size: 36px;
    }


    .tis07x-copy p {
        font-size: 12px;
    }


    .tis07x-chapter {
        grid-template-columns: 23px minmax(0, 1fr);
        gap: 8px;

        padding: 20px 0;
    }

    .tis07x-chapter h3 {
        font-size: 19px;
    }

    .tis07x-chapter p {
        font-size: 11.7px;
    }
}


/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    .tis07x-chapter {
        transition: none;
    }

    .tis07x-chapter:hover {
        padding-left: 0;
    }

    .tis07x-chapter:hover h3 {
        transform: none;
        color: #f7f5f1;
    }

    .tis07x-image:hover .tis07x-photo {
        transform: none;
    }
}


/* =========================================================
   SAFETY — PREVENT GRID/FLEX CONTENT OVERFLOW
   ========================================================= */

@media (max-width: 850px) {

    .tis07x-layout,
    .tis07x-visual,
    .tis07x-sticky,
    .tis07x-story,
    .tis07x-image,
    .tis07x-chapters,
    .tis07x-chapter {
        min-width: 0;
        max-width: 100%;
    }

    .tis07x-story *,
    .tis07x-chapter *,
    .tis07x-copy * {
        box-sizing: border-box;
    }
}
/* =========================================================
   SECTION 07 — CUSTOM SCROLL
   Native scrollbar completely hidden
   Custom 1px line + moving dot
   ========================================================= */

@media (min-width: 1101px) {

    .tis07x-story {
        position: relative;

        height: 590px;
        max-height: 590px;

        overflow-y: scroll;
        overflow-x: hidden;

        padding-right: 24px;

        box-sizing: border-box;

        /* Firefox */
        scrollbar-width: none;

        /* Old IE / Edge */
        -ms-overflow-style: none;
    }


    /* =====================================================
       COMPLETELY REMOVE BROWSER SCROLLBAR
       ===================================================== */

    .tis07x-story::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
        background: transparent !important;
    }

    .tis07x-story::-webkit-scrollbar-track {
        display: none !important;
        width: 0 !important;
        background: transparent !important;
    }

    .tis07x-story::-webkit-scrollbar-thumb {
        display: none !important;
        width: 0 !important;
        background: transparent !important;
    }

    .tis07x-story::-webkit-scrollbar-button {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .tis07x-story::-webkit-scrollbar-corner {
        display: none !important;
        background: transparent !important;
    }


    /* =====================================================
       CUSTOM 1px LINE
       ===================================================== */

    .tis07x-scroll-indicator {

        position: absolute;

        top: 8px;
        right: 4px;

        width: 1px;
        height: calc(100% - 16px);

        background: rgba(194, 138, 43, .25);

        pointer-events: none;

        z-index: 50;
    }


    /* =====================================================
       MOVING DOT
       ===================================================== */

    .tis07x-scroll-dot {

        position: absolute;

        top: 0;
        left: 50%;

        width: 5px;
        height: 5px;

        border-radius: 50%;

        background: #c28a2b;

        transform:
            translate(-50%, var(--scroll-dot-y, 0px));

        box-shadow:
            0 0 0 2px rgba(194, 138, 43, .10),
            0 0 8px rgba(194, 138, 43, .35);

        pointer-events: none;

        transition: transform .08s linear;
    }


    /* =====================================================
       VERY SUBTLE TOP / BOTTOM END DOT
       ===================================================== */

    .tis07x-scroll-indicator::before,
    .tis07x-scroll-indicator::after {

        content: "";

        position: absolute;

        left: 50%;

        width: 3px;
        height: 3px;

        border-radius: 50%;

        background: rgba(194, 138, 43, .45);

        transform: translateX(-50%);
    }

    .tis07x-scroll-indicator::before {
        top: -1px;
    }

    .tis07x-scroll-indicator::after {
        bottom: -1px;
    }
}


/* =========================================================
   TABLET + MOBILE
   NO INTERNAL SCROLL
   ========================================================= */

@media (max-width: 1100px) {

    .tis07x-story {

        height: auto;
        max-height: none;

        overflow: visible;

        padding-right: 0;

        scrollbar-width: auto;
        -ms-overflow-style: auto;
    }

    .tis07x-story::-webkit-scrollbar {
        display: initial;
        width: initial;
        height: initial;
    }

    .tis07x-scroll-indicator {
        display: none;
    }
}
/* ===================================================== SECTION 08 — THE RESPONSE ===================================================== */
 .tis08x-response {
     position: relative;
     overflow: hidden;
     padding: 105px 0 75px;
     background: #ebe5d9;
     color: #171614;
}
 .tis08x-container {
     position: relative;
     z-index: 3;
     width: min(1180px, calc(100% - 70px));
     margin: auto;
}
/* TOP */
 .tis08x-top {
     display: flex;
     align-items: center;
     justify-content: space-between;
}
 .tis08x-marker {
     display: flex;
     align-items: center;
     gap: 16px;
}
 .tis08x-marker strong {
     color: #c28a2b;
     font-size: 32px;
     font-weight: 300;
}
 .tis08x-marker span {
     width: 65px;
     height: 1px;
     background: #c28a2b;
}
 .tis08x-marker small {
     color: #7d5a2b;
     font-size: 13px;
     font-weight: 700;
     letter-spacing: .25em;
}
 .tis08x-top p {
     margin: 0;
     color: #8a8275;
     font-size: 8px;
     letter-spacing: .2em;
}
/* MAIN */
 .tis08x-main {
     position: relative;
     display: grid;
     grid-template-columns: 120px 1fr;
     gap: 70px;
     margin-top: 100px;
}
 .tis08x-side {
     writing-mode: vertical-rl;
     transform: rotate(180deg);
     color: rgba(16,16,15,.3);
     font-size: 9px;
     font-weight: 700;
     letter-spacing: .3em;
}
 .tis08x-copy {
     max-width: 850px;
}
 .tis08x-eyebrow {
     margin: 0 0 25px;
     color: #c28a2b;
     font-size: 9px;
     font-weight: 800;
     letter-spacing: .25em;
}
 .tis08x-copy h2 {
     max-width: 850px;
     margin: 0;
     font-size: clamp(48px, 6.2vw, 88px);
     font-weight: 500;
     line-height: .95;
     letter-spacing: -.07em;
}
 .tis08x-copy h2 span {
     display: block;
     margin-top: 10px;
     color: #c28a2b;
}
 .tis08x-description {
     max-width: 470px;
     margin: 40px 0 32px;
     color: #706b63;
     font-size: 16px;
     line-height: 1.8;
}
/* BUTTON */
 .tis08x-button {
     display: inline-flex;
     align-items: center;
     gap: 18px;
     min-height: 55px;
     padding: 6px 7px 6px 23px;
     border-radius: 50px;
     background: #171614;
     color: #fff;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: .1em;
     transition: transform .4s ease, background .4s ease, box-shadow .4s ease;
}
 .tis08x-button b {
     display: grid;
     place-items: center;
     width: 42px;
     height: 42px;
     border-radius: 50%;
     background: #c28a2b;
     color: #171614;
     font-size: 17px;
     font-weight: 400;
     transition: transform .4s ease;
}
 .tis08x-button:hover {
     transform: translateY(-4px);
     background: #c28a2b;
     box-shadow: 0 18px 45px rgba(194,138,43,.2);
}
 .tis08x-button:hover b {
     transform: rotate(45deg);
}
/* BOTTOM */
 .tis08x-bottom {
     display: flex;
     align-items: center;
     gap: 15px;
     margin-top: 100px;
     color: #8a8275;
     font-size: 8px;
     font-weight: 700;
     letter-spacing: .2em;
}
 .tis08x-bottom i {
     width: 30px;
     height: 1px;
     background: rgba(125,90,43,.35);
}
 .tis08x-bottom strong {
     margin-left: auto;
     color: #c28a2b;
}
/* DECORATIVE RINGS */
 .tis08x-ring {
     position: absolute;
     border: 1px solid rgba(194,138,43,.2);
     border-radius: 50%;
     pointer-events: none;
}
 .tis08x-ring-a {
     width: 650px;
     height: 650px;
     right: -300px;
     top: 5%;
     animation: tis08xOrbit 14s linear infinite;
}
 .tis08x-ring-b {
     width: 420px;
     height: 420px;
     right: -180px;
     top: 20%;
     border-style: dashed;
     animation: tis08xOrbit 18s linear infinite reverse;
}
 @keyframes tis08xOrbit {
     from {
         transform: rotate(0deg) scale(1);
    }
     50% {
         transform: rotate(180deg) scale(1.03);
    }
     to {
         transform: rotate(360deg) scale(1);
    }
}
/* MOBILE */
 @media (max-width: 800px) {
     .tis08x-main {
         grid-template-columns: 1fr;
         gap: 35px;
         margin-top: 70px;
    }
     .tis08x-side {
         writing-mode: initial;
         transform: none;
    }
}
 @media (max-width: 600px) {
     .tis08x-response {
         padding: 80px 0 60px;
    }
     .tis08x-container {
         width: calc(100% - 32px);
    }
     .tis08x-top p {
         display: none;
    }
     .tis08x-copy h2 {
         font-size: 49px;
    }
     .tis08x-description {
         font-size: 14px;
    }
     .tis08x-bottom {
         margin-top: 70px;
         font-size: 6px;
    }
     .tis08x-ring-a {
         width: 400px;
         height: 400px;
         right: -250px;
    }
}
/* ========================================================= SECTION 09 — THE WORK ========================================================= */
 .shift09__work {
     position: relative;
     overflow: hidden;
     padding: 115px 0 125px;
     background: #f7f5f1;
     color: #10100f;
}
 .shift09__container {
     position: relative;
     z-index: 3;
     width: min(1180px, calc(100% - 70px));
     margin: 0 auto;
}
/* BACKGROUND */
 .shift09__background-text {
     position: absolute;
     right: -40px;
     top: 80px;
     font-size: clamp(150px, 22vw, 320px);
     font-weight: 800;
     line-height: .75;
     letter-spacing: -.1em;
     color: rgba(16,16,15,.025);
     pointer-events: none;
}
/* TOP */
 .shift09__top {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 85px;
}
 .shift09__label {
     display: flex;
     align-items: center;
     gap: 15px;
}
 .shift09__label span {
     color: #c28a2b;
     font-size: 34px;
     font-weight: 300;
}
 .shift09__label i {
     width: 65px;
     height: 1px;
     background: #c28a2b;
}
 .shift09__label small {
     color: #7d5a2b;
     font-size: 13px;
     font-weight: 800;
     letter-spacing: .25em;
}
 .shift09__intro {
     margin: 0;
     color: #817a70;
     font-size: 12px;
     letter-spacing: .05em;
}
/* HEADING */
 .shift09__heading {
     max-width: 760px;
     margin-bottom: 80px;
}
 .shift09__heading p {
     margin: 0 0 20px;
     color: #c28a2b;
     font-size: 9px;
     font-weight: 800;
     letter-spacing: .25em;
}
 .shift09__heading h2 {
     margin: 0;
     font-size: clamp(48px, 6vw, 82px);
     line-height: .94;
     font-weight: 500;
     letter-spacing: -.065em;
}
 .shift09__heading h2 em {
     display: block;
     color: #c28a2b;
     font-family: Georgia, serif;
     font-weight: 400;
}
/* PROCESS */
 .shift09__process {
     border-top: 1px solid rgba(194,138,43,.25);
}
/* ITEM */
 .shift09__item {
     position: relative;
     display: grid;
     grid-template-columns: 80px 1fr 55px;
     gap: 25px;
     align-items: center;
     padding: 30px 15px;
     border-bottom: 1px solid rgba(16,16,15,.09);
     transition: background .45s ease, padding .45s cubic-bezier(.2,.8,.2,1);
}
 .shift09__item-number {
     align-self: start;
     padding-top: 5px;
     color: #c28a2b;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: .15em;
}
 .shift09__item-main h3 {
     margin: 0 0 8px;
     font-size: clamp(25px, 3vw, 38px);
     font-weight: 500;
     letter-spacing: -.04em;
     transition: color .35s ease, transform .35s ease;
}
 .shift09__item-main p {
     max-width: 610px;
     margin: 0;
     color: #77736c;
     font-size: 14px;
     line-height: 1.75;
     transition: color .35s ease;
}
 .shift09__item-symbol {
     width: 42px;
     height: 42px;
     display: grid;
     place-items: center;
     border: 1px solid rgba(194,138,43,.3);
     border-radius: 50%;
     color: #c28a2b;
     font-size: 18px;
     transform: rotate(-20deg);
     transition: background .35s ease, color .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
/* HOVER */
 .shift09__item:hover {
     padding-left: 28px;
     padding-right: 28px;
     background: rgba(194,138,43,.045);
}
 .shift09__item:hover .shift09__item-main h3 {
     color: #c28a2b;
     transform: translateX(5px);
}
 .shift09__item:hover .shift09__item-main p {
     color: #4d4943;
}
 .shift09__item:hover .shift09__item-symbol {
     background: #c28a2b;
     color: #10100f;
     transform: rotate(0deg) translateY(-3px);
}
/* STATEMENT */
 .shift09__statement {
     display: grid;
     grid-template-columns: 65px 1fr;
     gap: 20px;
     margin-top: 75px;
}
 .shift09__statement > span {
     width: 55px;
     height: 1px;
     margin-top: 12px;
     background: #c28a2b;
}
 .shift09__statement p {
     margin: 0;
     color: #77736c;
     font-size: 14px;
     line-height: 1.5;
}
 .shift09__statement strong {
     display: block;
     margin-top: 5px;
     color: #10100f;
     font-size: clamp(25px, 3vw, 40px);
     font-weight: 500;
     letter-spacing: -.04em;
}
/* REVEAL */
 .shift09__item:nth-child(1) {
     transition-delay: .05s;
}
 .shift09__item:nth-child(2) {
     transition-delay: .12s;
}
 .shift09__item:nth-child(3) {
     transition-delay: .19s;
}
 .shift09__item:nth-child(4) {
     transition-delay: .26s;
}
/* RESPONSIVE */
 @media (max-width: 700px) {
     .shift09__work {
         padding: 90px 0;
    }
     .shift09__container {
         width: calc(100% - 35px);
    }
     .shift09__top {
         margin-bottom: 65px;
         align-items: flex-start;
    }
     .shift09__intro {
         display: none;
    }
     .shift09__heading {
         margin-bottom: 55px;
    }
     .shift09__heading h2 {
         font-size: 48px;
    }
     .shift09__item {
         grid-template-columns: 45px 1fr;
         gap: 12px;
         padding: 25px 5px;
    }
     .shift09__item-symbol {
         display: none;
    }
     .shift09__item-main p {
         font-size: 13px;
    }
     .shift09__item:hover {
         padding-left: 12px;
         padding-right: 12px;
    }
     .shift09__statement {
         grid-template-columns: 35px 1fr;
    }
}
/* ========================================================= SECTION 10 — STORIES ========================================================= */
 .shift10__stories {
     position: relative;
     overflow: hidden;
     padding: 105px 0 115px;
     background: #171614;
     color: #f7f5f1;
}
/* FRAME */
 .shift10__frame {
     width: min(1200px, calc(100% - 70px));
     margin: 0 auto;
     display: grid;
     grid-template-columns: minmax(330px, .8fr) minmax(0, 1.2fr);
     gap: 90px;
     align-items: center;
}
/* ========================================================= VISUAL ========================================================= */
 .shift10__visual {
     position: relative;
}
 .shift10__image {
     position: relative;
     width: 100%;
     aspect-ratio: .82;
     padding: 10px;
     border: 1px solid rgba(194,138,43,.35);
     background: linear-gradient( 145deg, rgba(194,138,43,.12), rgba(255,255,255,.02) );
}
 .shift10__image-placeholder {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     padding: 25px;
     background: linear-gradient( 145deg, #2b2925, #11100f );
     position: relative;
     overflow: hidden;
}
/* ========================================================= SECTION 10 — IMAGE FRAME ========================================================= */
 .shift10__image {
     position: relative;
     width: min(100%, 470px);
     aspect-ratio: 0.82 / 1;
     overflow: hidden;
     background: #171614;
     border: 1px solid rgba(194, 138, 43, 0.42);
     padding: 10px;
}
/* Actual Image */
 .shift10__photo {
     position: relative;
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     opacity: 1;
     filter: none;
     transition: transform 0.8s cubic-bezier(.22, 1, .36, 1), filter 0.5s ease;
}
/* Image hover */
 .shift10__image:hover .shift10__photo {
     transform: scale(1.035);
}
/* ========================================================= IMAGE META ========================================================= */
 .shift10__image-meta {
     position: absolute;
     left: 34px;
     bottom: 22px;
     z-index: 3;
     pointer-events: none;
}
 .shift10__image-meta span {
     display: inline-block;
     font-family: "DM Sans", sans-serif;
     font-size: 9px;
     font-weight: 700;
     letter-spacing: 0.20em;
     text-transform: uppercase;
     color: var(--tis-gold);
}
/* ========================================================= DECORATIVE CORNER ========================================================= */
 .shift10__image::after {
     content: "";
     position: absolute;
     top: 10px;
     right: 10px;
     width: 105px;
     height: 105px;
     border-left: 1px solid rgba(194, 138, 43, 0.28);
     border-bottom: 1px solid rgba(194, 138, 43, 0.28);
     border-radius: 0 0 0 100%;
     pointer-events: none;
}
/* ========================================================= RESPONSIVE ========================================================= */
 @media (max-width: 900px) {
     .shift10__image {
         width: min(100%, 430px);
         margin: 0 auto;
    }
}
 @media (max-width: 600px) {
     .shift10__image {
         width: 100%;
         aspect-ratio: 0.85 / 1;
         padding: 8px;
    }
     .shift10__image-meta {
         left: 24px;
         bottom: 18px;
    }
}
/* IMAGE CAPTION */
 .shift10__image-caption {
     display: flex;
     align-items: flex-start;
     gap: 18px;
     margin-top: 18px;
}
 .shift10__image-caption > span {
     color: #c28a2b;
     font-size: 9px;
     font-weight: 700;
}
 .shift10__image-caption p {
     max-width: 230px;
     margin: 0;
     color: rgba(247,245,241,.45);
     font-size: 11px;
     line-height: 1.6;
}
/* ========================================================= CONTENT ========================================================= */
 .shift10__topline {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 75px;
}
 .shift10__marker {
     display: flex;
     align-items: center;
     gap: 14px;
}
 .shift10__marker span {
     color: #c28a2b;
     font-size: 32px;
     font-weight: 300;
}
 .shift10__marker i {
     width: 60px;
     height: 1px;
     background: #c28a2b;
}
 .shift10__marker small {
     color: rgba(247,245,241,.6);
     font-size: 13px;
     font-weight: 700;
     letter-spacing: .25em;
}
 .shift10__quiet {
     color: rgba(247,245,241,.25);
     font-size: 8px;
     letter-spacing: .2em;
}
/* QUOTE */
 .shift10__quote {
     position: relative;
     padding-left: 35px;
     border-left: 1px solid rgba(194,138,43,.35);
}
 .shift10__quote-mark {
     position: absolute;
     top: -38px;
     left: -17px;
     width: 34px;
     height: 34px;
     display: grid;
     place-items: center;
     border-radius: 50%;
     background: #c28a2b;
     color: #171614;
     font-family: Georgia, serif;
     font-size: 25px;
}
 .shift10__quote blockquote {
     max-width: 700px;
     margin: 0;
     color: #f7f5f1;
     font-size: clamp(35px, 4.2vw, 60px);
     line-height: 1.05;
     font-weight: 400;
     letter-spacing: -.045em;
}
 .shift10__author {
     display: flex;
     align-items: center;
     gap: 30px;
     margin-top: 45px;
}
 .shift10__author strong {
     display: block;
     color: #f7f5f1;
     font-size: 12px;
     font-weight: 700;
}
 .shift10__author span {
     display: block;
     margin-top: 5px;
     color: #c28a2b;
     font-size: 7px;
     font-weight: 700;
     letter-spacing: .18em;
}
 .shift10__author-line {
     width: 80px;
     height: 1px;
     background: rgba(194,138,43,.4);
}
/* MINI GRID */
 .shift10__mini-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     margin-top: 75px;
     border-top: 1px solid rgba(255,255,255,.1);
}
 .shift10__mini {
     padding: 22px 18px 0;
     border-right: 1px solid rgba(255,255,255,.08);
}
 .shift10__mini:first-child {
     padding-left: 0;
}
 .shift10__mini:last-child {
     border-right: none;
}
 .shift10__mini span {
     color: #c28a2b;
     font-size: 8px;
     font-weight: 700;
}
 .shift10__mini p {
     margin: 13px 0 0;
     color: rgba(247,245,241,.48);
     font-size: 11px;
     line-height: 1.5;
}
/* ========================================================= RESPONSIVE ========================================================= */
 @media (max-width: 850px) {
     .shift10__frame {
         grid-template-columns: 1fr;
         gap: 65px;
    }
     .shift10__visual {
         width: min(500px, 80%);
         margin: 0 auto;
    }
     .shift10__topline {
         margin-bottom: 60px;
    }
}
 @media (max-width: 600px) {
     .shift10__stories {
         padding: 80px 0 90px;
    }
     .shift10__frame {
         width: calc(100% - 35px);
    }
     .shift10__visual {
         width: 100%;
    }
     .shift10__topline {
         align-items: flex-start;
    }
     .shift10__quiet {
         display: none;
    }
     .shift10__quote {
         padding-left: 22px;
    }
     .shift10__quote blockquote {
         font-size: 36px;
    }
     .shift10__mini-grid {
         grid-template-columns: 1fr;
         gap: 0;
    }
     .shift10__mini, .shift10__mini:first-child {
         padding: 18px 0;
         border-right: none;
         border-bottom: 1px solid rgba(255,255,255,.08);
    }
}
/* ========================================================= THE INNER SHIFT SECTION 11 — FAQ ========================================================= */
 .tis-faq11 {
     position: relative;
     overflow: hidden;
     padding: 135px 0 90px;
     background: var(--tis-cream);
     color: var(--tis-black);
}
/* ========================================================= BACKGROUND WORD ========================================================= */
 .tis-faq11__ghost {
     position: absolute;
     right: -4%;
     top: 50%;
     transform: translateY(-50%) rotate(-90deg);
     color: rgba(16, 16, 15, 0.025);
     font-size: clamp(150px, 22vw, 340px);
     font-weight: 800;
     letter-spacing: -0.10em;
     line-height: .7;
     pointer-events: none;
}
/* ========================================================= WRAPPER ========================================================= */
 .tis-faq11__wrap {
     position: relative;
     z-index: 3;
     width: min(1180px, calc(100% - 80px));
     margin: 0 auto;
}
/* ========================================================= TOP ========================================================= */
 .tis-faq11__top {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 80px;
}
 .tis-faq11__marker {
     display: flex;
     align-items: center;
     gap: 15px;
}
 .tis-faq11__marker span {
     color: var(--tis-gold);
     font-size: 34px;
     font-weight: 300;
     line-height: 1;
}
 .tis-faq11__marker i {
     width: 65px;
     height: 1px;
     background: var(--tis-gold);
}
 .tis-faq11__marker small {
     color: var(--tis-brown);
     font-size: 13px;
     font-weight: 800;
     letter-spacing: .24em;
}
 .tis-faq11__caption {
     color: rgba(16, 16, 15, .38);
     font-size: 8px;
     font-weight: 700;
     letter-spacing: .22em;
}
/* ========================================================= INTRO ========================================================= */
 .tis-faq11__intro {
     display: grid;
     grid-template-columns: 1.05fr .95fr;
     gap: 100px;
     align-items: end;
     margin-bottom: 65px;
}
 .tis-faq11__eyebrow {
     display: block;
     margin-bottom: 20px;
     color: var(--tis-gold);
     font-size: 9px;
     font-weight: 800;
     letter-spacing: .25em;
}
 .tis-faq11__intro h2 {
     max-width: 650px;
     margin: 0;
     font-size: clamp(48px, 6vw, 78px);
     font-weight: 500;
     line-height: .94;
     letter-spacing: -.065em;
}
 .tis-faq11__intro h2 em {
     display: block;
     color: var(--tis-gold);
     font-family: Georgia, serif;
     font-weight: 400;
     line-height: 1.08;
}
 .tis-faq11__intro > p {
     max-width: 430px;
     margin: 0 0 5px;
     color: #706c65;
     font-size: 15px;
     line-height: 1.85;
}
/* ========================================================= FAQ LIST ========================================================= */
 .tis-faq11__list {
     border-top: 1px solid var(--tis-line);
}
/* ========================================================= FAQ ITEM ========================================================= */
 .tis-faq11__item {
     position: relative;
     border-bottom: 1px solid var(--tis-line);
     transition: background .4s ease;
}
 .tis-faq11__item:hover {
     background: rgba(194, 138, 43, .025);
}
/* ========================================================= QUESTION ========================================================= */
 .tis-faq11__question {
     width: 100%;
     min-height: 82px;
     padding: 0;
     display: grid;
     grid-template-columns: 55px 1fr 42px;
     align-items: center;
     gap: 20px;
     border: 0;
     background: transparent;
     color: var(--tis-black);
     text-align: left;
     cursor: pointer;
}
 .tis-faq11__number {
     color: var(--tis-gold);
     font-size: 9px;
     font-weight: 800;
     letter-spacing: .12em;
}
 .tis-faq11__question-text {
     font-size: clamp(17px, 1.7vw, 21px);
     font-weight: 500;
     letter-spacing: -.02em;
     transition: color .3s ease, transform .4s ease;
}
 .tis-faq11__question:hover .tis-faq11__question-text {
     color: var(--tis-gold);
     transform: translateX(5px);
}
/* ========================================================= PLUS ICON ========================================================= */
 .tis-faq11__icon {
     position: relative;
     width: 36px;
     height: 36px;
     display: grid;
     place-items: center;
     border: 1px solid rgba(194, 138, 43, .30);
     border-radius: 50%;
     transition: background .35s ease, transform .45s ease;
}
 .tis-faq11__icon i {
     position: absolute;
     width: 12px;
     height: 1px;
     background: var(--tis-gold);
     transition: transform .35s ease;
}
 .tis-faq11__icon i:last-child {
     transform: rotate(90deg);
}
/* OPEN ICON */
 .tis-faq11__item.is-open .tis-faq11__icon {
     background: var(--tis-gold);
     transform: rotate(45deg);
}
 .tis-faq11__item.is-open .tis-faq11__icon i {
     background: var(--tis-black);
}
/* ========================================================= ANSWER ========================================================= */
 .tis-faq11__answer {
     display: grid;
     grid-template-rows: 0fr;
     transition: grid-template-rows .55s cubic-bezier(.2,.7,.2,1);
}
 .tis-faq11__answer > div {
     min-height: 0;
     overflow: hidden;
     max-width: 720px;
     margin-left: 75px;
     padding-right: 60px;
     color: #706c65;
     font-size: 14px;
     line-height: 1.85;
     opacity: 0;
     transform: translateY(-8px);
     transition: opacity .4s ease, transform .5s ease, padding .5s ease;
}
/* OPEN */
 .tis-faq11__item.is-open .tis-faq11__answer {
     grid-template-rows: 1fr;
}
 .tis-faq11__item.is-open .tis-faq11__answer > div {
     padding-bottom: 28px;
     opacity: 1;
     transform: translateY(0);
}
/* ========================================================= EXTRA QUESTIONS ========================================================= */
 .tis-faq11__extra {
     display: none;
     opacity: 0;
     transform: translateY(25px);
}
 .tis-faq11__list.show-all .tis-faq11__extra {
     display: block;
     animation: faq11ExtraReveal .65s cubic-bezier(.2,.7,.2,1) forwards;
}
 @keyframes faq11ExtraReveal {
     from {
         opacity: 0;
         transform: translateY(25px);
    }
     to {
         opacity: 1;
         transform: translateY(0);
    }
}
/* ========================================================= VIEW MORE ========================================================= */
 .tis-faq11__more {
     display: flex;
     justify-content: center;
     padding: 45px 0 20px;
}
 .tis-faq11__more-btn {
     display: inline-flex;
     align-items: center;
     gap: 15px;
     padding: 0;
     border: 0;
     background: transparent;
     color: var(--tis-black);
     font-size: 9px;
     font-weight: 800;
     letter-spacing: .18em;
     cursor: pointer;
}
 .tis-faq11__more-btn b {
     width: 35px;
     height: 35px;
     display: grid;
     place-items: center;
     border: 1px solid var(--tis-gold);
     border-radius: 50%;
     color: var(--tis-gold);
     font-size: 17px;
     font-weight: 400;
     transition: transform .4s ease, background .3s ease, color .3s ease;
}
 .tis-faq11__more-btn:hover b {
     background: var(--tis-gold);
     color: var(--tis-black);
     transform: rotate(90deg);
}
/* AFTER OPEN */
 .tis-faq11__list.show-all ~ .tis-faq11__more .tis-faq11__more-btn b {
     transform: rotate(45deg);
}
 .tis-faq11__list.show-all ~ .tis-faq11__more .tis-faq11__more-btn span {
     font-size: 0;
}
 .tis-faq11__list.show-all ~ .tis-faq11__more .tis-faq11__more-btn span::after {
     content: "SHOW LESS";
     font-size: 9px;
}
/* ========================================================= BOTTOM ========================================================= */
 .tis-faq11__bottom {
     margin-top: 50px;
     display: flex;
     align-items: center;
     gap: 18px;
     color: rgba(16, 16, 15, .35);
     font-size: 8px;
     font-weight: 800;
     letter-spacing: .22em;
}
 .tis-faq11__progress {
     position: relative;
     width: 100px;
     height: 1px;
     background: rgba(16, 16, 15, .12);
}
 .tis-faq11__progress i {
     position: absolute;
     top: 0;
     left: 0;
     width: 38px;
     height: 1px;
     background: var(--tis-gold);
     animation: faq11Progress 2.8s ease-in-out infinite;
}
 @keyframes faq11Progress {
     0%, 100% {
         transform: translateX(0);
    }
     50% {
         transform: translateX(62px);
    }
}
/* ========================================================= REVEAL ========================================================= */
/* ========================================================= RESPONSIVE ========================================================= */
 @media (max-width: 850px) {
     .tis-faq11__wrap {
         width: calc(100% - 45px);
    }
     .tis-faq11__intro {
         grid-template-columns: 1fr;
         gap: 30px;
    }
}
 @media (max-width: 600px) {
     .tis-faq11 {
         padding: 95px 0 65px;
    }
     .tis-faq11__wrap {
         width: calc(100% - 30px);
    }
     .tis-faq11__top {
         margin-bottom: 55px;
    }
     .tis-faq11__caption {
         display: none;
    }
     .tis-faq11__marker small {
         font-size: 7px;
    }
     .tis-faq11__intro {
         margin-bottom: 45px;
    }
     .tis-faq11__intro h2 {
         font-size: 47px;
    }
     .tis-faq11__intro > p {
         font-size: 14px;
    }
     .tis-faq11__question {
         min-height: 72px;
         grid-template-columns: 35px 1fr 36px;
         gap: 10px;
    }
     .tis-faq11__question-text {
         font-size: 16px;
    }
     .tis-faq11__answer > div {
         margin-left: 45px;
         padding-right: 10px;
         font-size: 13px;
    }
     .tis-faq11__icon {
         width: 32px;
         height: 32px;
    }
     .tis-faq11__bottom {
         font-size: 6px;
    }
     .tis-faq11__progress {
         width: 60px;
    }
     .tis-faq11__progress i {
         width: 25px;
    }
}
/* ========================================================= SECTION 12 — FINAL CTA ========================================================= */
 .shift12__cta {
     position: relative;
     overflow: hidden;
     padding: 120px 0 65px;
     background: #10100f;
     color: #f7f5f1;
}
/* INNER */
 .shift12__inner {
     position: relative;
     z-index: 5;
     width: min(1100px, calc(100% - 70px));
     min-height: 560px;
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
}
/* GOLD GLOW */
 .shift12__glow {
     position: absolute;
     width: 650px;
     height: 650px;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     border-radius: 50%;
     background: radial-gradient( circle, rgba(194,138,43,.16), transparent 67% );
     pointer-events: none;
}
/* RINGS */
 .shift12__rings {
     position: absolute;
     left: 50%;
     top: 50%;
     width: 620px;
     height: 620px;
     transform: translate(-50%,-50%) rotate(-15deg);
     border: 1px solid rgba(194,138,43,.16);
     border-radius: 50%;
     box-shadow: 0 0 0 70px rgba(194,138,43,.025), 0 0 0 140px rgba(194,138,43,.018);
     pointer-events: none;
     animation: shift12Orbit 14s linear infinite;
}
 @keyframes shift12Orbit {
     from {
         transform: translate(-50%,-50%) rotate(-15deg);
    }
     to {
         transform: translate(-50%,-50%) rotate(345deg);
    }
}
/* TOP */
 .shift12__top {
     display: flex;
     align-items: center;
     justify-content: space-between;
}
 .shift12__marker {
     display: flex;
     align-items: center;
     gap: 15px;
}
 .shift12__marker span {
     color: #c28a2b;
     font-size: 34px;
     font-weight: 300;
}
 .shift12__marker i {
     width: 65px;
     height: 1px;
     background: #c28a2b;
}
 .shift12__marker small {
     color: rgba(247,245,241,.5);
     font-size: 13px;
     font-weight: 700;
     letter-spacing: .25em;
}
 .shift12__top > span {
     color: rgba(247,245,241,.25);
     font-size: 14px;
     font-weight: 700;
     letter-spacing: .2em;
}
/* CENTER */
 .shift12__center {
     position: relative;
     z-index: 5;
     max-width: 850px;
     margin: 100px auto 90px;
     text-align: center;
}
 .shift12__eyebrow {
     margin: 0 0 25px;
     color: #c28a2b;
     font-size: 9px;
     font-weight: 800;
     letter-spacing: .25em;
}
 .shift12__center h2 {
     margin: 0;
     font-size: clamp(65px, 9vw, 120px);
     line-height: .83;
     font-weight: 500;
     letter-spacing: -.08em;
}
 .shift12__center h2 em {
     color: #c28a2b;
     font-family: Georgia, serif;
     font-weight: 400;
}
 .shift12__description {
     max-width: 520px;
     margin: 35px auto 0;
     color: rgba(247,245,241,.52);
     font-size: 15px;
     line-height: 1.8;
}
/* ACTIONS */
 .shift12__actions {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 20px;
     margin-top: 40px;
}
/* PRIMARY */
 .shift12__primary {
     min-height: 58px;
     display: inline-flex;
     align-items: center;
     gap: 18px;
     padding: 6px 8px 6px 24px;
     border-radius: 50px;
     background: #f7f5f1;
     color: #10100f;
     font-size: 10px;
     font-weight: 800;
     letter-spacing: .1em;
     transition: transform .35s ease, background .35s ease, box-shadow .35s ease;
}
 .shift12__primary b {
     width: 44px;
     height: 44px;
     display: grid;
     place-items: center;
     border-radius: 50%;
     background: #c28a2b;
     font-size: 18px;
     font-weight: 400;
     transition: transform .35s ease;
}
 .shift12__primary:hover {
     background: #c28a2b;
     transform: translateY(-4px);
     box-shadow: 0 18px 50px rgba(194,138,43,.2);
}
 .shift12__primary:hover b {
     transform: rotate(45deg);
}
/* SECONDARY */
 .shift12__secondary {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     color: rgba(247,245,241,.55);
     font-size: 9px;
     font-weight: 700;
     letter-spacing: .12em;
}
 .shift12__secondary i {
     width: 34px;
     height: 34px;
     display: grid;
     place-items: center;
     border: 1px solid rgba(247,245,241,.18);
     border-radius: 50%;
     font-style: normal;
     transition: background .35s ease, color .35s ease, transform .35s ease;
}
 .shift12__secondary:hover i {
     background: #c28a2b;
     color: #10100f;
     transform: translateY(-3px);
}
/* BOTTOM */
 .shift12__bottom {
     display: flex;
     align-items: center;
     gap: 18px;
     color: rgba(247,245,241,.25);
     font-size: 7px;
     font-weight: 700;
     letter-spacing: .22em;
}
 .shift12__bottom div {
     width: 100px;
     height: 1px;
     background: rgba(247,245,241,.1);
}
/* RESPONSIVE */
 @media (max-width: 600px) {
     .shift12__cta {
         padding: 90px 0 45px;
    }
     .shift12__inner {
         width: calc(100% - 35px);
         min-height: 620px;
    }
     .shift12__top > span {
         display: none;
    }
     .shift12__center {
         margin: 80px auto;
    }
     .shift12__center h2 {
         font-size: 62px;
    }
     .shift12__description {
         font-size: 14px;
    }
     .shift12__actions {
         flex-direction: column;
    }
     .shift12__primary {
         width: 100%;
         justify-content: space-between;
    }
     .shift12__rings {
         width: 420px;
         height: 420px;
    }
}
/* ========================================================= THE INNER SHIFT PREMIUM FOOTER — 26 ========================================================= */
 .tis-footer26 {
     position: relative;
     overflow: hidden;
     background: var(--tis-black);
     color: var(--tis-white);
     padding: 90px 0 28px;
}
/* ========================================================= BACKGROUND ========================================================= */
 .tis-footer26-glow {
     position: absolute;
     width: 520px;
     height: 520px;
     right: -180px;
     top: -220px;
     border-radius: 50%;
     background: radial-gradient( circle, rgba(194,138,43,.16), transparent 68% );
     pointer-events: none;
}
 .tis-footer26-word {
     position: absolute;
     right: -4%;
     bottom: -7%;
     font-family: "DM Sans", sans-serif;
     font-size: clamp(180px, 25vw, 420px);
     font-weight: 800;
     letter-spacing: -.11em;
     line-height: .65;
     color: rgba(255,255,255,.018);
     pointer-events: none;
     user-select: none;
}
/* ========================================================= WRAPPER ========================================================= */
 .tis-footer26-wrap {
     position: relative;
     z-index: 2;
     width: min( 1280px, calc(100% - 80px) );
     margin: 0 auto;
}
/* ========================================================= TOP AREA ========================================================= */
 .tis-footer26-top {
     display: grid;
     grid-template-columns: 1.25fr .75fr .9fr;
     gap: 80px;
     align-items: start;
}
 .tis-footer26-brand > p {
     max-width: 370px;
     margin: 28px 0 0;
     color: rgba(255,255,255,.52);
     font-size: 14px;
     line-height: 1.8;
}
/* ========================================================= LABEL ========================================================= */
 .tis-footer26-label {
     display: block;
     margin-bottom: 22px;
     color: var(--tis-gold-light);
     font-size: 9px;
     font-weight: 800;
     letter-spacing: .23em;
     text-transform: uppercase;
}
/* ========================================================= NAVIGATION ========================================================= */
 .tis-footer26-navigation {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 40px;
}
 .tis-footer26-nav-group {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
}
 .tis-footer26-nav-group a {
     position: relative;
     display: inline-block;
     margin-bottom: 13px;
     color: rgba(255,255,255,.62);
     font-size: 13px;
     transition: color .3s ease, transform .3s ease;
}
 .tis-footer26-nav-group a::before {
     content: "";
     position: absolute;
     left: -16px;
     top: 50%;
     width: 6px;
     height: 1px;
     background: var(--tis-gold);
     transform: scaleX(0) translateX(-5px);
     transform-origin: left;
     transition: transform .3s ease;
}
 .tis-footer26-nav-group a:hover {
     color: var(--tis-white);
     transform: translateX(5px);
}
 .tis-footer26-nav-group a:hover::before {
     transform: scaleX(1) translateX(0);
}
/* ========================================================= CTA ========================================================= */
 .tis-footer26-cta {
     padding: 4px 0 0;
}
 .tis-footer26-cta h3 {
     max-width: 300px;
     margin: 0 0 27px;
     color: var(--tis-white);
     font-size: clamp( 28px, 3vw, 42px );
     line-height: 1.05;
     letter-spacing: -.045em;
     font-weight: 500;
}
 .tis-footer26-cta h3 em {
     display: block;
     color: var(--tis-gold-light);
     font-family: Georgia, serif;
     font-weight: 400;
}
 .tis-footer26-cta-button {
     display: inline-flex;
     align-items: center;
     gap: 15px;
     min-height: 48px;
     padding: 5px 7px 5px 19px;
     border: 1px solid rgba(194,138,43,.55);
     border-radius: 999px;
     color: var(--tis-white);
     font-size: 10px;
     font-weight: 800;
     letter-spacing: .1em;
     transition: background .35s ease, color .35s ease, transform .35s ease, border-color .35s ease;
}
 .tis-footer26-cta-button i {
     width: 36px;
     height: 36px;
     display: grid;
     place-items: center;
     border-radius: 50%;
     background: var(--tis-gold);
     color: var(--tis-black);
     font-style: normal;
     font-size: 16px;
     transition: transform .35s ease;
}
 .tis-footer26-cta-button:hover {
     background: var(--tis-gold);
     border-color: var(--tis-gold);
     color: var(--tis-black);
     transform: translateY(-3px);
}
 .tis-footer26-cta-button:hover i {
     transform: rotate(45deg);
}
/* ========================================================= DIVIDER ========================================================= */
 .tis-footer26-divider {
     position: relative;
     height: 1px;
     margin: 75px 0 30px;
     background: rgba(255,255,255,.10);
}
 .tis-footer26-divider span {
     position: absolute;
     left: 0;
     top: 0;
     width: 120px;
     height: 1px;
     background: var(--tis-gold);
}
/* ========================================================= MIDDLE ========================================================= */
 .tis-footer26-middle {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 30px;
}
 .tis-footer26-philosophy {
     display: flex;
     align-items: center;
     gap: 20px;
}
 .tis-footer26-philosophy span {
     color: rgba(255,255,255,.32);
     font-size: 8px;
     font-weight: 800;
     letter-spacing: .2em;
}
 .tis-footer26-philosophy p {
     margin: 0;
     color: rgba(255,255,255,.72);
     font-family: Georgia, serif;
     font-size: 17px;
     font-style: italic;
}
/* ========================================================= SOCIAL ========================================================= */
 .tis-footer26-social {
     display: flex;
     align-items: center;
     gap: 22px;
}
 .tis-footer26-social .tis-footer26-label {
     margin: 0;
}
 .tis-footer26-social-links {
     display: flex;
     align-items: center;
     gap: 8px;
}
 .tis-footer26-social-links a {
     width: 38px;
     height: 38px;
     display: grid;
     place-items: center;
     border: 1px solid rgba(255,255,255,.13);
     border-radius: 50%;
     color: rgba(255,255,255,.58);
     font-size: 8px;
     font-weight: 800;
     letter-spacing: .04em;
     transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
 .tis-footer26-social-links a:hover {
     background: var(--tis-gold);
     border-color: var(--tis-gold);
     color: var(--tis-black);
     transform: translateY(-4px);
}
/* ========================================================= BOTTOM ========================================================= */
 .tis-footer26-bottom {
     display: grid;
     grid-template-columns: 1fr auto auto;
     align-items: end;
     gap: 35px;
     margin-top: 55px;
     padding-top: 20px;
     border-top: 1px solid rgba(255,255,255,.07);
}
 .tis-footer26-bottom > span {
     color: rgba(255,255,255,.35);
     font-size: 9px;
}
 .tis-footer26-legal {
     display: flex;
     align-items: center;
     gap: 12px;
}
 .tis-footer26-legal a {
     color: rgba(255,255,255,.38);
     font-size: 9px;
     transition: color .3s ease;
}
 .tis-footer26-legal a:hover {
     color: var(--tis-gold-light);
}
 .tis-footer26-legal span {
     width: 3px;
     height: 3px;
     border-radius: 50%;
     background: var(--tis-gold);
}
/* ========================================================= IT WEB FUTURE ========================================================= */
 .tis-footer26-dev {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     color: rgba(255,255,255,.42);
     transition: color .3s ease;
}
 .tis-footer26-dev small {
     font-size: 7px;
     letter-spacing: .14em;
}
 .tis-footer26-dev strong {
     color: var(--tis-gold-light);
     font-size: 9px;
     letter-spacing: .1em;
}
 .tis-footer26-dev i {
     font-style: normal;
     font-size: 13px;
     transition: transform .3s ease;
}
 .tis-footer26-dev:hover {
     color: var(--tis-white);
}
 .tis-footer26-dev:hover i {
     transform: translate(3px,-3px);
}
/* ========================================================= REVEAL ========================================================= */
 .tis-footer26-brand, .tis-footer26-navigation, .tis-footer26-cta, .tis-footer26-middle, .tis-footer26-bottom {
     opacity: 1;
    /* transform: translateY(22px);
     */
     transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
 .tis-footer26.is-visible .tis-footer26-brand {
     opacity: 1;
     transform: translateY(0);
}
 .tis-footer26.is-visible .tis-footer26-navigation {
     opacity: 1;
     transform: translateY(0);
     transition-delay: .08s;
}
 .tis-footer26.is-visible .tis-footer26-cta {
     opacity: 1;
     transform: translateY(0);
     transition-delay: .16s;
}
 .tis-footer26.is-visible .tis-footer26-middle {
     opacity: 1;
     transform: translateY(0);
     transition-delay: .24s;
}
 .tis-footer26.is-visible .tis-footer26-bottom {
     opacity: 1;
     transform: translateY(0);
     transition-delay: .32s;
}
/* ========================================================= RESPONSIVE ========================================================= */
 @media (max-width: 950px) {
     .tis-footer26-top {
         grid-template-columns: 1fr 1fr;
         gap: 55px;
    }
     .tis-footer26-cta {
         grid-column: 1 / -1;
         padding-top: 10px;
    }
     .tis-footer26-cta h3 {
         max-width: 400px;
    }
     .tis-footer26-middle {
         align-items: flex-start;
         flex-direction: column;
    }
}
 @media (max-width: 650px) {
     .tis-footer26 {
         padding: 65px 0 25px;
    }
     .tis-footer26-wrap {
         width: calc(100% - 34px);
    }
     .tis-footer26-top {
         grid-template-columns: 1fr;
         gap: 45px;
    }
     .tis-footer26-navigation {
         max-width: 330px;
    }
     .tis-footer26-divider {
         margin: 55px 0 28px;
    }
     .tis-footer26-middle {
         gap: 28px;
    }
     .tis-footer26-social {
         align-items: flex-start;
         flex-direction: column;
         gap: 14px;
    }
     .tis-footer26-bottom {
         grid-template-columns: 1fr;
         gap: 18px;
         align-items: start;
    }
     .tis-footer26-dev {
         order: -1;
    }
     .tis-footer26-word {
         font-size: 42vw;
         right: -12%;
         bottom: 3%;
    }
}
/* ========================================================= SECTIONS 06–11 REVEAL SYSTEM (How I Help / Journey / About / Gallery / Testimonials / Clarity Call) ========================================================= */
 .reveal06x, .reveal07x, .reveal08x, .reveal09, .reveal10, .reveal11 {
     opacity: 1;
     transform: translateY(0);
}
 .js-reveal .reveal06x, .js-reveal .reveal07x, .js-reveal .reveal08x, .js-reveal .reveal09, .js-reveal .reveal10, .js-reveal .reveal11 {
     opacity: 0;
     transform: translateY(35px);
     transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1);
}
 .js-reveal .reveal06x.is-visible, .js-reveal .reveal07x.is-visible, .js-reveal .reveal08x.is-visible, .js-reveal .reveal09.is-visible, .js-reveal .reveal10.is-visible, .js-reveal .reveal11.is-visible {
     opacity: 1;
     transform: translateY(0);
}
 @media (prefers-reduced-motion: reduce) {
     .reveal06x, .reveal07x, .reveal08x, .reveal09, .reveal10, .reveal11 {
         opacity: 1;
         transform: none;
         transition: none;
    }
}
/* contact us css */
/* =========================================================
   CONTACT HERO
   THE INNER SHIFT
   ========================================================= */

.tis-contact-hero {

    position: relative;

    width: 100%;
    min-height: calc(100svh - 80px);

    overflow: hidden;

    background: #ebe5d9;

    color: #171614;

    isolation: isolate;
}


/* =========================================================
   BACKGROUND IMAGE
   ========================================================= */

.tis-contact-hero-bg {

    position: absolute;

    inset: 0;

    z-index: -3;

    overflow: hidden;
}


.tis-contact-bg-image {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center center;

    transform: scale(1.08);

    filter:
        saturate(.88)
        contrast(1.02);

    will-change: transform;
}


/* =========================================================
   LEFT SIDE SOFT READABILITY
   ========================================================= */

.tis-contact-overlay {

    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(247,243,235,.96) 0%,
            rgba(247,243,235,.91) 29%,
            rgba(247,243,235,.67) 43%,
            rgba(247,243,235,.16) 61%,
            rgba(23,22,20,.02) 100%
        );

    pointer-events: none;
}


/* =========================================================
   SUBTLE GRAIN
   ========================================================= */

.tis-contact-grain {

    position: absolute;

    inset: 0;

    z-index: -1;

    opacity: .10;

    pointer-events: none;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");

    mix-blend-mode: multiply;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.tis-contact-container {

    position: relative;

    z-index: 5;

    width: min(
        1380px,
        calc(100% - 100px)
    );

    min-height: calc(100svh - 80px);

    margin: 0 auto;

    padding:
        100px
        0
        45px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    box-sizing: border-box;
}


/* =========================================================
   TOP MARKER
   ========================================================= */

.tis-contact-marker {

    display: flex;

    align-items: center;

    gap: 15px;

    width: fit-content;

    opacity: 0;
}


.tis-contact-number {

    color: #b98235;

    font-size: 32px;

    font-weight: 300;

    line-height: 1;

    letter-spacing: -.06em;
}


.tis-contact-line {

    width: 65px;

    height: 1px;

    background: #b98235;

    transform-origin: left center;

    transform: scaleX(0);
}


.tis-contact-label {

    color: #725a38;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: .25em;
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.tis-contact-content {

    width: min(
        620px,
        48vw
    );

    margin-top: 20px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.tis-contact-eyebrow {

    margin: 0 0 24px;

    color: #a77a35;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .24em;

    opacity: 0;
}


/* =========================================================
   TITLE
   ========================================================= */

.tis-contact-title {

    margin: 0;

    max-width: 650px;

    color: #171614;

    font-size:
        clamp(
            55px,
            6.5vw,
            98px
        );

    line-height: .88;

    letter-spacing: -.075em;

    font-weight: 500;

    opacity: 0;
}


.tis-contact-title span {

    display: block;

    color: #ad803d;

    font-family: Georgia, serif;

    font-style: italic;

    font-weight: 400;

    letter-spacing: -.065em;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.tis-contact-description {

    max-width: 500px;

    margin: 38px 0 0;

    color: #141414;

    font-family: Georgia, serif;

    font-size: 17px;

    line-height: 1.72;

    opacity: 0;
}


/* =========================================================
   ACTION
   ========================================================= */

.tis-contact-action {

    margin-top: 42px;

    opacity: 0;
}


.tis-contact-button {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 45px;

    min-width: 225px;

    padding: 16px 17px 16px 21px;

    color: #f7f5f1;

    background: #171614;

    text-decoration: none;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .19em;

    overflow: hidden;

    transition:
        color .45s ease,
        transform .45s cubic-bezier(.2,.8,.2,1);

    box-sizing: border-box;
}


.tis-contact-button::before {

    content: "";

    position: absolute;

    inset: 0;

    background: #b98235;

    transform:
        translateX(-102%);

    transition:
        transform .55s cubic-bezier(.2,.8,.2,1);

}


.tis-contact-button span {

    position: relative;

    z-index: 2;
}


.tis-contact-arrow {

    font-size: 17px;

    line-height: 1;

    transition:
        transform .45s ease;
}


.tis-contact-button:hover {

    color: #171614;

    transform:
        translateY(-4px);
}


.tis-contact-button:hover::before {

    transform:
        translateX(0);
}


.tis-contact-button:hover
.tis-contact-arrow {

    transform:
        translate(4px,-4px);
}


/* =========================================================
   BOTTOM
   ========================================================= */

.tis-contact-bottom {

    display: flex;

    align-items: center;

    gap: 15px;

    color: rgba(23,22,20,.48);

    font-size: 7px;

    font-weight: 800;

    letter-spacing: .2em;

    opacity: 0;
}


.tis-contact-bottom-line {

    width: 75px;

    height: 1px;

    background: #b98235;
}


/* =========================================================
   FLOATING ORBIT
   ========================================================= */

.tis-contact-orbit {

    position: absolute;

    right: 7%;

    top: 17%;

    z-index: 4;

    width: 105px;

    height: 105px;

    border: 1px solid rgba(194,138,43,.65);

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 3px;

    color: #c28a2b;

    font-size: 7px;

    line-height: 1.4;

    letter-spacing: .18em;

    pointer-events: none;

    opacity: 0;

}


.tis-contact-orbit::before {

    content: "";

    position: absolute;

    inset: -7px;

    border: 1px solid rgba(194,138,43,.20);

    border-radius: 50%;

    transform: rotate(-20deg);

}


/* =========================================================
   SCROLL INDICATOR
   ========================================================= */

.tis-contact-scroll {

    position: absolute;

    right: 30px;

    bottom: 35px;

    z-index: 10;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 9px;

    color: rgba(23,22,20,.45);

    font-size: 6px;

    font-weight: 800;

    letter-spacing: .2em;

    opacity: 0;
}


.tis-contact-scroll-line {

    position: relative;

    width: 1px;

    height: 48px;

    background: rgba(23,22,20,.18);

    overflow: hidden;
}


.tis-contact-scroll-line span {

    position: absolute;

    left: 0;

    top: -20px;

    width: 1px;

    height: 20px;

    background: #b98235;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .tis-contact-container {

        width: calc(100% - 70px);

        padding-top: 65px;
    }


    .tis-contact-content {

        width: min(
            590px,
            58vw
        );
    }


    .tis-contact-title {

        font-size:
            clamp(
                52px,
                7vw,
                82px
            );
    }


    .tis-contact-description {

        font-size: 16px;
    }


    .tis-contact-orbit {

        right: 5%;

        width: 90px;
        height: 90px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .tis-contact-hero {

        min-height:
            calc(100svh - 70px);

        background: #ebe5d9;
    }


    .tis-contact-hero-bg {

        height: 100%;

        z-index: -3;
    }


    .tis-contact-bg-image {

        object-position:
            70% center;

        transform:
            scale(1.06);
    }


    .tis-contact-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(247,243,235,.98) 0%,
                rgba(247,243,235,.92) 43%,
                rgba(247,243,235,.50) 66%,
                rgba(23,22,20,.18) 100%
            );
    }


    .tis-contact-container {

        width: calc(100% - 32px);

        min-height:
            calc(100svh - 70px);

        padding:
            105px
            0
            40px;
    }


    .tis-contact-marker {

        gap: 10px;
    }


    .tis-contact-number {

        font-size: 27px;
    }


    .tis-contact-line {

        width: 42px;
    }


    .tis-contact-label {

        font-size: 7px;

        letter-spacing: .18em;
    }


    .tis-contact-content {

        width: 100%;

        margin-top: 50px;

        align-self: flex-start;
    }


    .tis-contact-eyebrow {

        margin-bottom: 18px;

        font-size: 7px;

        line-height: 1.5;

        letter-spacing: .18em;
    }


    .tis-contact-title {

        max-width: 100%;

        font-size:
            clamp(
                45px,
                13vw,
                65px
            );

        line-height: .9;

        letter-spacing: -.065em;
    }


    .tis-contact-description {

        max-width: 92%;

        margin-top: 25px;

        font-size: 14px;

        line-height: 1.7;
    }


    .tis-contact-action {

        margin-top: 30px;
    }


    .tis-contact-button {

        min-width: 205px;

        padding:
            15px
            15px
            15px
            18px;

        gap: 28px;

        font-size: 7px;
    }


    .tis-contact-orbit {

        top: auto;

        right: 25px;

        bottom: 115px;

        width: 75px;

        height: 75px;

        font-size: 5.5px;
    }


    .tis-contact-bottom {

        gap: 10px;

        font-size: 5.5px;

        letter-spacing: .15em;
    }


    .tis-contact-bottom-line {

        width: 40px;
    }


    .tis-contact-scroll {

        display: none;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .tis-contact-container {

        width: calc(100% - 26px);

        padding-top: 100px;
    }


    .tis-contact-content {

        margin-top: 35px;
    }


    .tis-contact-title {

        font-size:
            clamp(
                41px,
                12.5vw,
                57px
            );
    }


    .tis-contact-description {

        max-width: 95%;

        font-size: 13px;

        line-height: 1.68;
    }


    .tis-contact-orbit {

        right: 18px;

        bottom: 105px;

        width: 65px;

        height: 65px;
    }


    .tis-contact-bottom {

        font-size: 5px;
    }
}


/* =========================================================
   VERY SMALL
   ========================================================= */

@media (max-width: 360px) {

    .tis-contact-container {

        width: calc(100% - 22px);

        padding-top: 36px;
    }


    .tis-contact-title {

        font-size: 39px;
    }


    .tis-contact-description {

        font-size: 12.5px;
    }


    .tis-contact-orbit {

        display: none;
    }
}


/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    .tis-contact-button:hover {

        color: #f7f5f1;

        transform: none;
    }


    .tis-contact-button:hover::before {

        transform:
            translateX(-102%);
    }


    .tis-contact-button:hover
    .tis-contact-arrow {

        transform: none;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .tis-contact-bg-image,
    .tis-contact-button,
    .tis-contact-button::before,
    .tis-contact-arrow {

        transition: none !important;
    }
}
/* ========================================================= THE INNER SHIFT CONTACT PAGE SECTION 02 — A SPACE TO REACH OUT ========================================================= */
/* ========================================================= SECTION ========================================================= */
 .contact-connect {
     position: relative;
     width: 100%;
     padding: 150px 0 80px;
     overflow: hidden;
     background: #151412;
     color: #f5f0e8;
}
/* ========================================================= GIANT BACKGROUND NUMBER ========================================================= */
 .contact-connect__bg-number {
     position: absolute;
     right: -40px;
     top: 50px;
     font-size: clamp( 300px, 35vw, 600px );
     line-height: .7;
     font-weight: 600;
     letter-spacing: -.1em;
     color: rgba( 255, 255, 255, .025 );
     pointer-events: none;
     user-select: none;
}
/* ========================================================= CONTAINER ========================================================= */
 .contact-connect__container {
     position: relative;
     z-index: 2;
     width: min( 1180px, calc(100% - 90px) );
     margin: 0 auto;
     display: grid;
     grid-template-columns: .9fr 1.1fr;
     gap: 110px;
     align-items: start;
}
/* ========================================================= EYEBROW ========================================================= */
 .contact-connect__eyebrow {
     display: flex;
     align-items: center;
     gap: 13px;
     margin-bottom: 30px;
     font-size: 13px;
     font-weight: 700;
     letter-spacing: .24em;
     color: #b18a4b;
}
 .contact-connect__line {
     width: 45px;
     height: 1px;
     background: #b18a4b;
}
/* ========================================================= TITLE ========================================================= */
 .contact-connect__title {
     margin: 0;
     max-width: 560px;
     font-size: clamp( 60px, 7vw, 105px );
     line-height: .86;
     letter-spacing: -.065em;
     font-weight: 500;
}
 .contact-connect__title em {
     display: block;
     color: #b18a4b;
     font-style: italic;
     font-weight: 400;
}
/* ========================================================= DESCRIPTION ========================================================= */
 .contact-connect__description {
     max-width: 430px;
     margin: 45px 0 0;
     font-size: 15px;
     line-height: 1.85;
     color: #aaa49b;
}
/* ========================================================= NOTE ========================================================= */
 .contact-connect__note {
     display: flex;
     align-items: flex-start;
     gap: 15px;
     max-width: 360px;
     margin-top: 70px;
     padding-top: 20px;
     border-top: 1px solid rgba( 245, 240, 232, .14 );
}
 .contact-connect__note-mark {
     color: #b18a4b;
     font-size: 16px;
}
 .contact-connect__note p {
     margin: 0;
     font-size: 11px;
     line-height: 1.7;
     letter-spacing: .03em;
     color: #817b73;
}
/* ========================================================= DETAILS ========================================================= */
 .contact-connect__details {
     border-top: 1px solid rgba( 245, 240, 232, .2 );
}
/* ========================================================= CONTACT ITEM ========================================================= */
 .contact-connect__item {
     position: relative;
     display: grid;
     grid-template-columns: 55px 1fr 35px;
     gap: 20px;
     align-items: center;
     min-height: 155px;
     border-bottom: 1px solid rgba( 245, 240, 232, .14 );
     color: inherit;
     text-decoration: none;
     overflow: hidden;
     transition: padding .45s ease;
}
 .contact-connect__item::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient( 90deg, rgba( 177, 138, 75, .10 ), transparent );
     transform: translateX(-101%);
     transition: transform .55s cubic-bezier( .77, 0, .18, 1 );
     pointer-events: none;
}
 .contact-connect__item:hover::before {
     transform: translateX(0);
}
 .contact-connect__item:hover {
     padding-left: 18px;
}
 .contact-connect__item-number {
     position: relative;
     z-index: 2;
     font-size: 9px;
     letter-spacing: .15em;
     color: #706b64;
}
 .contact-connect__item-content {
     position: relative;
     z-index: 2;
}
 .contact-connect__item-label {
     display: block;
     margin-bottom: 10px;
     font-size: 8px;
     font-weight: 700;
     letter-spacing: .22em;
     color: #b18a4b;
}
 .contact-connect__item-content h3 {
     margin: 0;
     font-size: clamp( 21px, 2.3vw, 32px );
     line-height: 1.1;
     letter-spacing: -.035em;
     font-weight: 400;
     color: #f5f0e8;
}
 .contact-connect__item-content p {
    margin: 9px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: #c28a2b;
}
 .contact-connect__item-arrow {
     position: relative;
     z-index: 2;
     font-size: 20px;
     color: #b18a4b;
     transition: transform .4s ease;
}
 .contact-connect__item:hover .contact-connect__item-arrow {
     transform: translate( 5px, -5px );
}
/* ========================================================= ADDRESS ========================================================= */
 .contact-connect__item--address {
     cursor: default;
}
 .contact-connect__item--address:hover {
     padding-left: 18px;
}
/* ========================================================= BOTTOM ========================================================= */
 .contact-connect__bottom {
     position: relative;
     z-index: 3;
     width: min( 1180px, calc(100% - 90px) );
     margin: 110px auto 0;
     padding-top: 18px;
     border-top: 1px solid rgba( 245, 240, 232, .14 );
     display: flex;
     justify-content: space-between;
     font-size: 8px;
     font-weight: 700;
     letter-spacing: .23em;
     color: #68635d;
}
 .contact-connect__bottom span:nth-child(2) {
     color: #a07835;
}
/* ========================================================= TABLET ========================================================= */
 @media (max-width: 900px) {
     .contact-connect {
         padding-top: 120px;
    }
     .contact-connect__container {
         width: calc(100% - 60px);
         grid-template-columns: 1fr;
         gap: 80px;
    }
     .contact-connect__title {
         max-width: 700px;
    }
     .contact-connect__description {
         max-width: 600px;
    }
     .contact-connect__note {
         margin-top: 45px;
    }
     .contact-connect__bg-number {
         top: 0;
         right: -20px;
         font-size: 350px;
    }
     .contact-connect__bottom {
         width: calc(100% - 60px);
    }
}
/* ========================================================= MOBILE ========================================================= */
 @media (max-width: 600px) {
     .contact-connect {
         padding: 95px 0 55px;
    }
     .contact-connect__container {
         width: calc(100% - 36px);
         gap: 65px;
    }
     .contact-connect__title {
         font-size: 57px;
    }
     .contact-connect__description {
         margin-top: 30px;
         font-size: 14px;
    }
     .contact-connect__note {
         margin-top: 40px;
    }
     .contact-connect__item {
         grid-template-columns: 35px 1fr 25px;
         gap: 10px;
         min-height: 130px;
    }
     .contact-connect__item-content h3 {
         font-size: 19px;
         word-break: break-word;
    }
     .contact-connect__item-content p {
         font-size: 9px;
    }
     .contact-connect__item:hover {
         padding-left: 8px;
    }
     .contact-connect__bottom {
         width: calc(100% - 36px);
         margin-top: 75px;
         gap: 12px;
         flex-direction: column;
    }
     .contact-connect__bg-number {
         font-size: 220px;
         top: 40px;
         right: -15px;
    }
}
/* ========================================================= REDUCED MOTION ========================================================= */
 @media (prefers-reduced-motion: reduce) {
     .contact-connect *, .contact-connect *::before, .contact-connect *::after {
         transition: none !important;
         animation: none !important;
    }
}
/* ========================================================= THE INNER SHIFT CONTACT PAGE SECTION 03 — WHAT HAPPENS NEXT ========================================================= */
/* ========================================================= SECTION ========================================================= */
 .contact-next {
     position: relative;
     width: 100%;
     overflow: hidden;
     background: #f7f3eb;
     color: #191714;
     padding: 155px 0 120px;
}
/* ========================================================= WATERMARK ========================================================= */
 .contact-next__watermark {
     position: absolute;
     right: -50px;
     top: 80px;
     font-size: clamp( 250px, 30vw, 540px );
     font-weight: 600;
     line-height: .7;
     letter-spacing: -.1em;
     color: rgba( 35, 30, 24, .035 );
     pointer-events: none;
     user-select: none;
}
/* ========================================================= CONTAINER ========================================================= */
 .contact-next__container {
     position: relative;
     z-index: 2;
     width: min( 1180px, calc(100% - 90px) );
     margin: 0 auto;
}
/* ========================================================= EYEBROW ========================================================= */
 .contact-next__eyebrow {
     display: flex;
     align-items: center;
     gap: 13px;
     margin-bottom: 42px;
     font-size: 13px;
     font-weight: 700;
     letter-spacing: .24em;
     color: #a07935;
}
 .contact-next__line {
     width: 48px;
     height: 1px;
     background: #a07935;
     transform-origin: left center;
}
/* ========================================================= HEADING AREA ========================================================= */
 .contact-next__heading-wrap {
     display: grid;
     grid-template-columns: 1fr 280px;
     gap: 70px;
     align-items: end;
}
 .contact-next__heading {
     margin: 0;
     max-width: 800px;
     font-size: clamp( 65px, 8vw, 115px );
     line-height: .84;
     letter-spacing: -.07em;
     font-weight: 500;
}
 .contact-next__heading > span {
     display: block;
     margin-left: 17%;
}
 .contact-next__heading em {
     color: #a07935;
     font-weight: 400;
     font-style: italic;
}
/* ========================================================= INTRO ========================================================= */
 .contact-next__intro {
     padding-bottom: 8px;
}
 .contact-next__intro p {
     margin: 0;
     max-width: 250px;
     font-size: 13px;
     line-height: 1.8;
     color: #777169;
}
 .contact-next__arrow {
     display: block;
     margin-top: 30px;
     font-size: 25px;
     color: #a07935;
}
/* ========================================================= PROCESS ========================================================= */
 .contact-next__process {
     margin-top: 130px;
     border-top: 1px solid rgba( 29, 25, 21, .17 );
}
/* ========================================================= STEP ========================================================= */
 .contact-next__step {
     position: relative;
     display: grid;
     grid-template-columns: 150px 1fr 60px;
     gap: 40px;
     min-height: 185px;
     padding: 35px 0;
     border-bottom: 1px solid rgba( 29, 25, 21, .17 );
     overflow: hidden;
     transition: padding .5s ease;
}
 .contact-next__step::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient( 90deg, rgba( 160, 121, 53, .08 ), transparent 65% );
     transform: translateX(-101%);
     transition: transform .65s cubic-bezier( .77, 0, .18, 1 );
     pointer-events: none;
}
 .contact-next__step:hover::before {
     transform: translateX(0);
}
 .contact-next__step:hover {
     padding-left: 20px;
}
/* ========================================================= STEP TOP ========================================================= */
 .contact-next__step-top {
     position: relative;
     z-index: 2;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
}
 .contact-next__step-number {
     font-size: 10px;
     font-weight: 700;
     letter-spacing: .16em;
     color: #a07935;
}
 .contact-next__step-label {
     font-size: 8px;
     font-weight: 700;
     letter-spacing: .2em;
     color: #989188;
}
/* ========================================================= STEP MAIN ========================================================= */
 .contact-next__step-main {
     position: relative;
     z-index: 2;
     align-self: center;
}
 .contact-next__step-main h3 {
     margin: 0;
     font-size: clamp( 30px, 4vw, 55px );
     line-height: 1;
     letter-spacing: -.055em;
     font-weight: 400;
     transition: transform .45s ease;
}
 .contact-next__step:hover .contact-next__step-main h3 {
     transform: translateX(8px);
}
 .contact-next__step-main p {
     max-width: 450px;
     margin: 17px 0 0;
     font-size: 12px;
     line-height: 1.75;
     color: #777169;
}
/* ========================================================= SYMBOL ========================================================= */
 .contact-next__step-symbol {
     position: relative;
     z-index: 2;
     align-self: center;
     justify-self: end;
     width: 42px;
     height: 42px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid rgba( 160, 121, 53, .45 );
     border-radius: 50%;
     color: #a07935;
     font-size: 18px;
     transition: transform .5s ease, background .4s ease, color .4s ease;
}
 .contact-next__step:hover .contact-next__step-symbol {
     transform: rotate(45deg);
     background: #a07935;
     color: #f7f3eb;
}
/* ========================================================= BOTTOM STATEMENT ========================================================= */
 .contact-next__bottom {
     display: flex;
     align-items: center;
     gap: 18px;
     margin-top: 85px;
}
 .contact-next__bottom-mark {
     color: #a07935;
     font-size: 17px;
}
 .contact-next__bottom p {
     margin: 0;
     font-size: 13px;
     color: #807970;
}
 .contact-next__bottom strong {
     color: #302b25;
     font-weight: 500;
}
/* ========================================================= TABLET ========================================================= */
 @media (max-width: 900px) {
     .contact-next {
         padding: 120px 0 90px;
    }
     .contact-next__container {
         width: calc(100% - 60px);
    }
     .contact-next__heading-wrap {
         grid-template-columns: 1fr 220px;
         gap: 40px;
    }
     .contact-next__heading {
         font-size: clamp( 60px, 9vw, 90px );
    }
     .contact-next__process {
         margin-top: 100px;
    }
     .contact-next__step {
         grid-template-columns: 100px 1fr 50px;
         gap: 25px;
    }
}
/* ========================================================= MOBILE ========================================================= */
 @media (max-width: 650px) {
     .contact-next {
         padding: 90px 0 70px;
    }
     .contact-next__container {
         width: calc(100% - 36px);
    }
     .contact-next__watermark {
         top: 40px;
         right: -20px;
         font-size: 210px;
    }
     .contact-next__eyebrow {
         margin-bottom: 30px;
    }
     .contact-next__heading-wrap {
         display: block;
    }
     .contact-next__heading {
         font-size: 55px;
         line-height: .86;
    }
     .contact-next__heading > span {
         margin-left: 7%;
    }
     .contact-next__intro {
         margin: 40px 0 0 7%;
    }
     .contact-next__intro p {
         font-size: 12px;
    }
     .contact-next__arrow {
         margin-top: 18px;
    }
     .contact-next__process {
         margin-top: 70px;
    }
     .contact-next__step {
         display: grid;
         grid-template-columns: 42px 1fr;
         gap: 15px;
         min-height: 0;
         padding: 28px 0;
    }
     .contact-next__step-top {
         min-height: 115px;
    }
     .contact-next__step-label {
         writing-mode: vertical-rl;
         transform: rotate(180deg);
    }
     .contact-next__step-main h3 {
         font-size: 29px;
         line-height: 1.05;
    }
     .contact-next__step-main p {
         margin-top: 13px;
         font-size: 11px;
    }
     .contact-next__step-symbol {
         display: none;
    }
     .contact-next__step:hover {
         padding-left: 8px;
    }
     .contact-next__bottom {
         margin-top: 60px;
    }
     .contact-next__bottom p {
         font-size: 11px;
    }
}
/* ========================================================= REDUCED MOTION ========================================================= */
 @media (prefers-reduced-motion: reduce) {
     .contact-next *, .contact-next *::before, .contact-next *::after {
         animation: none !important;
         transition: none !important;
    }
}
/* ========================================================= THE INNER SHIFT CONTACT PAGE SECTION 04 — CONTACT FORM ========================================================= */
/* ========================================================= SECTION BASE ========================================================= */
 .contact-form-section {
     position: relative;
     width: 100%;
     overflow: hidden;
     padding: 155px 0 0;
     background: #f7f3eb;
     color: #191714;
}
/* ========================================================= WATERMARK ========================================================= */
 .contact-form-section__watermark {
     position: absolute;
     top: 80px;
     left: -20px;
     font-size: clamp( 250px, 32vw, 580px );
     line-height: .7;
     letter-spacing: -.1em;
     font-weight: 600;
     color: rgba( 30, 26, 21, .035 );
     pointer-events: none;
     user-select: none;
}
/* ========================================================= CONTAINER ========================================================= */
 .contact-form-section__container {
     position: relative;
     z-index: 2;
     width: min( 1180px, calc(100% - 90px) );
     margin: 0 auto;
     display: grid;
     grid-template-columns: .9fr 1.1fr;
     gap: 100px;
     align-items: start;
}
/* ========================================================= LEFT INTRO ========================================================= */
 .contact-form-section__intro {
     padding-top: 10px;
}
/* ========================================================= EYEBROW ========================================================= */
 .contact-form-section__eyebrow {
     display: flex;
     align-items: center;
     gap: 13px;
     margin-bottom: 35px;
     font-size: 13px;
     font-weight: 700;
     letter-spacing: .23em;
     color: #a07935;
}
 .contact-form-section__line {
     width: 45px;
     height: 1px;
     background: #a07935;
}
/* ========================================================= TITLE ========================================================= */
 .contact-form-section__title {
     margin: 0;
     max-width: 600px;
     font-size: clamp( 58px, 7vw, 100px );
     line-height: .86;
     letter-spacing: -.04em;
     font-weight: 500;

}
.contact-form-section__title .fisrtspan{
color: var(--tis-gold);
}
 .contact-form-section__title span {
     /* display: block; */
     /* margin-left: 14%; */
     color: #c28a2b;
          font-family: Georgia, serif;
     font-style: italic;
     font-weight: 400;
}
/* ========================================================= DESCRIPTION ========================================================= */
 .contact-form-section__description {
     max-width: 390px;
     margin: 45px 0 0 14%;
     font-size: 14px;
     line-height: 1.85;
     color: #716b63;
}
/* ========================================================= REASSURANCE ========================================================= */
 .contact-form-section__reassurance {
     max-width: 430px;
     margin: 55px 0 0 14%;
     border-top: 1px solid rgba( 28, 24, 20, .15 );
}
 .contact-reassurance-item {
     display: grid;
     grid-template-columns: 38px 1fr;
     gap: 15px;
     padding: 19px 0;
     border-bottom: 1px solid rgba( 28, 24, 20, .15 );
}
 .contact-reassurance-number {
     font-size: 8px;
     font-weight: 700;
     letter-spacing: .12em;
     color: #a07935;
}
 .contact-reassurance-item strong {
     display: block;
     margin-bottom: 5px;
     font-size: 12px;
     font-weight: 500;
     color: #39342e;
}
 .contact-reassurance-item p {
     margin: 0;
     font-size: 10px;
     line-height: 1.6;
     color: #8a837a;
}
/* ========================================================= QUOTE ========================================================= */
 .contact-form-section__quote {
     display: flex;
     align-items: center;
     gap: 13px;
     margin: 50px 0 0 14%;
}
 .contact-form-section__quote span {
     color: #a07935;
     font-size: 15px;
}
 .contact-form-section__quote p {
     margin: 0;
     font-size: 11px;
     font-style: italic;
     color: #777067;
}
/* ========================================================= FORM WRAPPER ========================================================= */
 .contact-form-section__form-wrap {
     position: relative;
     padding: 38px 40px 40px;
     background: #1a1815;
     color: #f4eee4;
     box-shadow: 0 35px 90px rgba( 32, 27, 21, .12 );
}
/* Decorative border */
 .contact-form-section__form-wrap::before {
     content: "";
     position: absolute;
     inset: 10px;
     border: 1px solid rgba( 244, 238, 228, .10 );
     pointer-events: none;
}
/* ========================================================= FORM HEADER ========================================================= */
 .contact-form-section__form-head {
     position: relative;
     z-index: 2;
     display: flex;
     justify-content: space-between;
     padding-bottom: 25px;
     margin-bottom: 32px;
     border-bottom: 1px solid rgba( 244, 238, 228, .15 );
     font-size: 8px;
     font-weight: 700;
     letter-spacing: .2em;
     color: #9d958a;
}
 .contact-form-section__form-head span:first-child {
     color: #b18a4b;
}
/* ========================================================= FORM ========================================================= */
 .contact-form {
     position: relative;
     z-index: 2;
     display: flex;
     flex-direction: column;
     gap: 25px;
}
/* ========================================================= FORM ROW ========================================================= */
 .contact-form__row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 25px;
}
/* ========================================================= FIELD ========================================================= */
 .contact-form__field {
     display: flex;
     flex-direction: column;
     gap: 9px;
}
 .contact-form__field label {
     font-size: 8px;
     font-weight: 700;
     letter-spacing: .19em;
     color: #b18a4b;
}
 .contact-form__field input, .contact-form__field select, .contact-form__field textarea {
     width: 100%;
     box-sizing: border-box;
     border: 0;
     border-bottom: 1px solid rgba( 244, 238, 228, .18 );
     outline: none;
     border-radius: 0;
     padding: 12px 0;
     background: transparent;
     color: #f4eee4;
     font-family: inherit;
     font-size: 13px;
     transition: border-color .35s ease;
}
 .contact-form__field input:focus, .contact-form__field select:focus, .contact-form__field textarea:focus {
     border-bottom-color: #b18a4b;
}
 .contact-form__field input::placeholder, .contact-form__field textarea::placeholder {
     color: #625e58;
}
 .contact-form__field select {
     cursor: pointer;
     color: #817b73;
}
 .contact-form__field select option {
     background: #1a1815;
     color: #f4eee4;
}
 .contact-form__field textarea {
     min-height: 115px;
     resize: vertical;
     line-height: 1.7;
}
/* ========================================================= SUBMIT ========================================================= */
 .contact-form__submit {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
     margin-top: 8px;
     padding: 17px 19px;
     border: 1px solid #b18a4b;
     background: transparent;
     color: #f4eee4;
     cursor: pointer;
     font-family: inherit;
     font-size: 9px;
     font-weight: 700;
     letter-spacing: .2em;
     transition: background .45s ease, color .45s ease;
}
 .contact-form__submit:hover {
     background: #b18a4b;
     color: #171512;
}
 .contact-form__submit-arrow {
     font-size: 19px;
     transition: transform .35s ease;
}
 .contact-form__submit:hover .contact-form__submit-arrow {
     transform: translate( 5px, -5px );
}
/* ========================================================= PRIVACY ========================================================= */
 .contact-form__privacy {
     margin: 0;
     padding-top: 3px;
     font-size: 9px;
     line-height: 1.6;
     color: #625d56;
}
/* ========================================================= MARQUEE ========================================================= */
 .contact-form-section__marquee {
     width: 100%;
     overflow: hidden;
     margin-top: 150px;
     padding: 25px 0;
     border-top: 1px solid rgba( 28, 24, 20, .12 );
     border-bottom: 1px solid rgba( 28, 24, 20, .12 );
}
 .contact-form-section__marquee-track {
     display: flex;
     align-items: center;
     width: max-content;
     gap: 35px;
     white-space: nowrap;
     animation: contactMarquee 25s linear infinite;
}
 .contact-form-section__marquee-track span {
     font-size: 9px;
     font-weight: 700;
     letter-spacing: .22em;
     color: #888078;
}
 .contact-form-section__marquee-track i {
     font-style: normal;
     color: #a07935;
     font-size: 13px;
}
 @keyframes contactMarquee {
     from {
         transform: translateX(0);
    }
     to {
         transform: translateX(-50%);
    }
}
/* ========================================================= TABLET ========================================================= */
 @media (max-width: 950px) {
     .contact-form-section {
         padding-top: 120px;
    }
     .contact-form-section__container {
         width: calc(100% - 60px);
         grid-template-columns: 1fr;
         gap: 80px;
    }
     .contact-form-section__title {
         max-width: 700px;
    }
     .contact-form-section__description {
         max-width: 550px;
    }
     .contact-form-section__form-wrap {
         max-width: 700px;
    }
}
/* =========================================================
   CONTACT — LEFT EDITORIAL VISUAL
   ========================================================= */

.contact-form-section__intro {

    position: relative;

    min-height: 650px;

    padding:
        20px
        30px
        55px
        30px;

    isolation: isolate;
}


/* =========================================================
   VERTICAL EDITORIAL LINE
   ========================================================= */

.contact-form-section__intro::before {

    content: "";

    position: absolute;

    left: 0;

    top: 15px;

    bottom: 25px;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(177,138,75,.7) 12%,
            rgba(177,138,75,.25) 75%,
            transparent
        );

    transform-origin: top;

    transform: scaleY(0);

    animation:
        contactIntroLine
        1.4s
        cubic-bezier(.22,1,.36,1)
        .4s
        forwards;
}


@keyframes contactIntroLine {

    to {
        transform: scaleY(1);
    }
}


/* =========================================================
   VISUAL ORBIT AREA
   ========================================================= */

.contact-intro-visual {

    position: absolute;

    top: -10px;

    right: -70px;

    width: 330px;

    height: 330px;

    z-index: -1;

    pointer-events: none;
}


/* =========================================================
   ORBITS
   ========================================================= */

.contact-intro-orbit {

    position: absolute;

    top: 50%;
    left: 50%;

    border-radius: 50%;

    border:
        1px solid
        rgba(
            177,
            138,
            75,
            .16
        );

    transform:
        translate(-50%, -50%);
}


.contact-intro-orbit--outer {

    width: 310px;

    height: 190px;

    transform:
        translate(-50%, -50%)
        rotate(-25deg);
}


.contact-intro-orbit--middle {

    width: 235px;

    height: 140px;

    transform:
        translate(-50%, -50%)
        rotate(-25deg);

    border-color:
        rgba(
            177,
            138,
            75,
            .24
        );
}


.contact-intro-orbit--inner {

    width: 125px;

    height: 75px;

    transform:
        translate(-50%, -50%)
        rotate(-25deg);

    border-color:
        rgba(
            177,
            138,
            75,
            .32
        );
}


/* =========================================================
   CENTER DOT
   ========================================================= */

.contact-intro-orbit-dot {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #b18a4b;

    transform:
        translate(-50%, -50%);

    box-shadow:
        0 0 0 6px
        rgba(177,138,75,.08),

        0 0 25px
        rgba(177,138,75,.35);

    animation:
        contactPulse
        3s
        ease-in-out
        infinite;
}


@keyframes contactPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 5px
            rgba(177,138,75,.07),

            0 0 15px
            rgba(177,138,75,.2);
    }

    50% {
        box-shadow:
            0 0 0 11px
            rgba(177,138,75,.02),

            0 0 30px
            rgba(177,138,75,.4);
    }
}


/* =========================================================
   ORBIT CROSS MARKS
   ========================================================= */

.contact-intro-cross {

    position: absolute;

    width: 9px;
    height: 9px;
}


.contact-intro-cross::before,
.contact-intro-cross::after {

    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    background:
        rgba(
            177,
            138,
            75,
            .55
        );
}


.contact-intro-cross::before {

    width: 9px;
    height: 1px;

    transform:
        translate(-50%, -50%);
}


.contact-intro-cross::after {

    width: 1px;
    height: 9px;

    transform:
        translate(-50%, -50%);
}


.contact-intro-cross--one {

    top: 48px;

    right: 88px;
}


.contact-intro-cross--two {

    right: 15px;

    bottom: 65px;
}


/* =========================================================
   COORDINATE
   ========================================================= */

.contact-intro-coordinate {

    position: absolute;

    right: 42px;

    bottom: 74px;

    color:
        rgba(
            177,
            138,
            75,
            .55
        );

    font-size: 7px;

    letter-spacing: .2em;
}


/* =========================================================
   VERTICAL LABEL
   ========================================================= */

.contact-intro-vertical-text {

    position: absolute;

    top: 92px;

    right: -15px;

    color:
        rgba(
            245,
            239,
            229,
            .16
        );

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .3em;

    writing-mode:
        vertical-rl;

    transform:
        rotate(180deg);
}


/* =========================================================
   EYEBROW — BRING ABOVE VISUAL
   ========================================================= */

.contact-form-section__eyebrow {

    position: relative;

    z-index: 5;
}


/* =========================================================
   TITLE — ABOVE ORBIT
   ========================================================= */

.contact-form-section__title {

    position: relative;

    z-index: 5;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.contact-form-section__description {

    position: relative;

    z-index: 5;
}


/* =========================================================
   REASSURANCE
   ========================================================= */

.contact-form-section__reassurance {

    position: relative;

    z-index: 5;
}


/* =========================================================
   QUOTE
   ========================================================= */

.contact-form-section__quote {

    position: relative;

    z-index: 5;
}


/* =========================================================
   BOTTOM MICRO LABEL
   ========================================================= */

.contact-intro-footer {

    display: flex;

    align-items: center;

    gap: 13px;

    margin:
        42px
        0
        0
        11%;

    color:
        rgba(
            245,
            239,
            229,
            .25
        );

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .22em;
}


.contact-intro-footer-line {

    width: 42px;

    height: 1px;

    background:
        rgba(
            177,
            138,
            75,
            .5
        );
}


/* =========================================================
   ORBIT FLOAT
   ========================================================= */

@media (min-width: 901px) {

    .contact-intro-orbit--outer {

        animation:
            contactOrbitFloat
            9s
            ease-in-out
            infinite;
    }

    .contact-intro-orbit--middle {

        animation:
            contactOrbitFloat
            7s
            ease-in-out
            infinite
            reverse;
    }
}


@keyframes contactOrbitFloat {

    0%,
    100% {

        transform:
            translate(-50%, -50%)
            rotate(-25deg);
    }

    50% {

        transform:
            translate(-50%, -53%)
            rotate(-18deg);
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .contact-form-section__intro {

        min-height: auto;

        padding:
            10px
            20px
            35px;
    }


    .contact-intro-visual {

        right: -30px;

        top: -45px;

        width: 280px;

        height: 280px;

        opacity: .8;
    }


    .contact-intro-orbit--outer {

        width: 270px;

        height: 170px;
    }


    .contact-intro-orbit--middle {

        width: 205px;

        height: 125px;
    }


    .contact-intro-orbit--inner {

        width: 110px;

        height: 68px;
    }


    .contact-intro-vertical-text {

        display: none;
    }


    .contact-intro-footer {

        margin-top: 32px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .contact-form-section__intro {

        min-height: auto;

        padding:
            10px
            14px
            30px;
    }


    .contact-form-section__intro::before {

        top: 10px;

        bottom: 5px;
    }


    /* -----------------------------------------
       ORBIT
       ----------------------------------------- */

    .contact-intro-visual {

        top: -40px;

        right: -82px;

        width: 250px;

        height: 250px;

        opacity: .65;
    }


    .contact-intro-orbit--outer {

        width: 235px;

        height: 145px;
    }


    .contact-intro-orbit--middle {

        width: 180px;

        height: 110px;
    }


    .contact-intro-orbit--inner {

        width: 95px;

        height: 58px;
    }


    .contact-intro-orbit-dot {

        width: 6px;

        height: 6px;
    }


    .contact-intro-cross--one {

        top: 45px;

        right: 75px;
    }


    .contact-intro-cross--two {

        right: 20px;

        bottom: 45px;
    }


    .contact-intro-coordinate {

        right: 38px;

        bottom: 53px;

        font-size: 6px;
    }


    /* -----------------------------------------
       CONTENT
       ----------------------------------------- */

    .contact-form-section__eyebrow {

        margin-bottom: 28px;

        padding-right: 35px;

        font-size: 6.5px;

        line-height: 1.5;
    }


    .contact-form-section__title {

        font-size:
            clamp(
                43px,
                12.5vw,
                58px
            );

        max-width: 100%;
    }


    .contact-form-section__title span {

        margin-left: 5%;
    }


    .contact-form-section__description {

        max-width: 92%;

        margin-left: 5%;

        font-size: 12.5px;

        line-height: 1.8;
    }


    /* -----------------------------------------
       REASSURANCE
       ----------------------------------------- */

    .contact-form-section__reassurance {

        width: 94%;

        margin-left: 5%;
    }


    .contact-reassurance-item {

        grid-template-columns:
            25px
            minmax(0, 1fr);

        gap: 10px;

        padding: 14px 0;
    }


    .contact-reassurance-item strong {

        font-size: 10px;
    }


    .contact-reassurance-item p {

        font-size: 8.5px;
    }


    /* -----------------------------------------
       QUOTE
       ----------------------------------------- */

    .contact-form-section__quote {

        margin-left: 5%;

        margin-top: 30px;
    }


    /* -----------------------------------------
       FOOTER
       ----------------------------------------- */

    .contact-intro-footer {

        margin:
            30px
            0
            0
            5%;

        font-size: 6px;
    }


    .contact-intro-footer-line {

        width: 28px;
    }
}


/* =========================================================
   VERY SMALL
   ========================================================= */

@media (max-width: 380px) {

    .contact-intro-visual {

        right: -100px;

        opacity: .55;
    }


    .contact-form-section__title {

        font-size: 41px;
    }


    .contact-form-section__description {

        font-size: 12px;
    }


    .contact-intro-footer {

        display: none;
    }
}
/* ========================================================= MOBILE ========================================================= */
 @media (max-width: 600px) {
     .contact-form-section {
         padding-top: 90px;
    }
     .contact-form-section__container {
         width: calc(100% - 36px);
         gap: 60px;
    }
     .contact-form-section__watermark {
         top: 30px;
         font-size: 190px;
    }
     .contact-form-section__eyebrow {
         font-size: 8px;
    }
     .contact-form-section__title {
         font-size: 53px;
    }
     .contact-form-section__title span {
         margin-left: 7%;
    }
     .contact-form-section__description {
         margin-left: 7%;
         font-size: 13px;
    }
     .contact-form-section__reassurance {
         margin-left: 7%;
    }
     .contact-form-section__quote {
         margin-left: 7%;
    }
     .contact-form-section__form-wrap {
         padding: 28px 22px 28px;
    }
     .contact-form-section__form-wrap::before {
         inset: 7px;
    }
     .contact-form-section__form-head {
         font-size: 7px;
    }
     .contact-form__row {
         grid-template-columns: 1fr;
         gap: 25px;
    }
     .contact-form {
         gap: 22px;
    }
     .contact-form-section__marquee {
         margin-top: 90px;
    }
}
/* ========================================================= REDUCED MOTION ========================================================= */
 @media (prefers-reduced-motion: reduce) {
     .contact-form-section__marquee-track {
         animation: none;
    }
     .contact-form-section *, .contact-form-section *::before, .contact-form-section *::after {
         transition: none !important;
    }
}
/* ========================================================= THE INNER SHIFT CONTACT PAGE SECTION 05 — FINAL CLOSING ========================================================= */
/* ========================================================= SECTION BASE ========================================================= */
 .contact-closing {
     position: relative;
     padding-top: 87px;
     width: 100%;
     min-height: 720px;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #171512;
     color: #f4eee4;
}
/* ========================================================= WATERMARK ========================================================= */
 .contact-closing__watermark {
     position: absolute;
     left: 50%;
     bottom: -70px;
     transform: translateX(-50%);
     font-size: clamp( 240px, 31vw, 550px );
     line-height: .7;
     letter-spacing: -.1em;
     font-weight: 600;
     white-space: nowrap;
     color: rgba( 255, 255, 255, .025 );
     pointer-events: none;
     user-select: none;
}
/* ========================================================= DECORATIVE CIRCLES ========================================================= */
 .contact-closing__circle {
     position: absolute;
     border-radius: 50%;
     pointer-events: none;
}
 .contact-closing__circle--one {
     width: 580px;
     height: 580px;
     right: -270px;
     top: 50%;
     transform: translateY(-50%);
     border: 1px solid rgba( 177, 138, 75, .25 );
}
 .contact-closing__circle--two {
     width: 420px;
     height: 420px;
     left: -210px;
     top: 50%;
     transform: translateY(-50%);
     border: 1px dashed rgba( 177, 138, 75, .15 );
}
/* ========================================================= CONTAINER ========================================================= */
 .contact-closing__container {
     position: relative;
     z-index: 3;
     width: min( 1000px, calc(100% - 90px) );
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
}
/* ========================================================= EYEBROW ========================================================= */
 .contact-closing__eyebrow {
     display: flex;
     align-items: center;
     gap: 13px;
     margin-bottom: 40px;
     font-size: 8px;
     font-weight: 700;
     letter-spacing: .25em;
     color: #a28c69;
}
 .contact-closing__line {
     width: 42px;
     height: 1px;
     background: #b18a4b;
}
/* ========================================================= TITLE ========================================================= */
 .contact-closing__title {
     margin: 0;
     font-size: clamp( 75px, 11vw, 155px );
     line-height: .78;
     letter-spacing: -.08em;
     font-weight: 400;
}
 .contact-closing__title span {
     display: block;
     margin-left: 13%;
     color: #b18a4b;
     font-style: italic;
}
/* ========================================================= MESSAGE ========================================================= */
 .contact-closing__message {
     max-width: 480px;
     margin-top: 50px;
}
 .contact-closing__message p {
     margin: 0 0 12px;
     font-size: 14px;
     line-height: 1.8;
     color: #918b82;
}
 .contact-closing__message p:last-child {
     margin-bottom: 0;
     color: #b4aea5;
}
/* ========================================================= CTA ========================================================= */
 .contact-closing__button {
     display: inline-flex;
     align-items: center;
     justify-content: space-between;
     gap: 65px;
     min-width: 260px;
     margin-top: 45px;
     padding: 17px 20px;
     border: 1px solid #b18a4b;
     color: #eee7dc;
     text-decoration: none;
     font-size: 9px;
     font-weight: 700;
     letter-spacing: .19em;
     overflow: hidden;
     position: relative;
     transition: color .45s ease, transform .4s ease;
}
 .contact-closing__button::before {
     content: "";
     position: absolute;
     inset: 0;
     background: #b18a4b;
     transform: translateY(101%);
     transition: transform .5s cubic-bezier( .77, 0, .18, 1 );
}
 .contact-closing__button span {
     position: relative;
     z-index: 2;
}
 .contact-closing__button:hover {
     color: #171512;
     transform: translateY(-4px);
}
 .contact-closing__button:hover::before {
     transform: translateY(0);
}
 .contact-closing__button-arrow {
     font-size: 19px;
     transition: transform .35s ease;
}
 .contact-closing__button:hover .contact-closing__button-arrow {
     transform: translate( 5px, -5px );
}
/* ========================================================= SIGNATURE ========================================================= */
 .contact-closing__signature {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-top: 75px;
     font-size: 7px;
     font-weight: 700;
     letter-spacing: .2em;
     color: #655f58;
}
 .contact-closing__signature-star {
     color: #b18a4b;
     font-size: 12px;
}
 .contact-closing__signature-line {
     width: 35px;
     height: 1px;
     background: #5b554e;
}
/* ========================================================= BOTTOM META ========================================================= */
 .contact-closing__bottom {
     position: absolute;
     z-index: 4;
     left: 50%;
     bottom: 24px;
     transform: translateX(-50%);
     width: min( 1180px, calc(100% - 90px) );
     display: flex;
     justify-content: space-between;
     padding-top: 16px;
     border-top: 1px solid rgba( 244, 238, 228, .12 );
     font-size: 7px;
     font-weight: 700;
     letter-spacing: .2em;
     color: #625d56;
}
/* ========================================================= TABLET ========================================================= */
 @media (max-width: 900px) {
     .contact-closing {
         min-height: 680px;
    }
     .contact-closing__container {
         width: calc(100% - 60px);
    }
     .contact-closing__title {
         font-size: clamp( 65px, 11vw, 110px );
    }
     .contact-closing__circle--one {
         width: 450px;
         height: 450px;
    }
     .contact-closing__circle--two {
         width: 330px;
         height: 330px;
    }
}
/* ========================================================= MOBILE ========================================================= */
 @media (max-width: 600px) {
     .contact-closing {
         min-height: 680px;
    }
     .contact-closing__container {
         width: calc(100% - 36px);
    }
     .contact-closing__watermark {
         font-size: 185px;
         bottom: -15px;
    }
     .contact-closing__eyebrow {
         font-size: 7px;
         margin-bottom: 32px;
    }
     .contact-closing__title {
         font-size: 57px;
         line-height: .84;
    }
     .contact-closing__title span {
         margin-left: 7%;
    }
     .contact-closing__message {
         max-width: 330px;
         margin-top: 38px;
    }
     .contact-closing__message p {
         font-size: 13px;
    }
     .contact-closing__button {
         width: 100%;
         max-width: 300px;
         min-width: 0;
         gap: 25px;
         box-sizing: border-box;
         margin-top: 38px;
    }
     .contact-closing__signature {
         margin-top: 55px;
         flex-wrap: wrap;
         justify-content: center;
         line-height: 1.7;
    }
     .contact-closing__bottom {
         width: calc(100% - 36px);
         font-size: 6px;
    }
     .contact-closing__bottom span:nth-child(2) {
         display: none;
    }
     .contact-closing__circle--one {
         width: 330px;
         height: 330px;
         right: -180px;
    }
     .contact-closing__circle--two {
         width: 250px;
         height: 250px;
         left: -150px;
    }
}
/* ========================================================= REDUCED MOTION ========================================================= */
 @media (prefers-reduced-motion: reduce) {
     .contact-closing *, .contact-closing *::before, .contact-closing *::after {
         transition: none !important;
         animation: none !important;
    }
}