:root{
    --stone-cream:#F2EDE3;
    --stone-white:#FBF9F5;
    --charcoal:#1D1A17;
    --terracotta:#C1633E;
    --terracotta-deep:#A24E30;
    --slate:#6E6A62;
    --slate-line: rgba(29,26,23,0.12);
    --serif: 'Fraunces', serif;
    --sans: 'Work Sans', sans-serif;
    --ease: cubic-bezier(.22,1,.36,1);
    --ease-soft: cubic-bezier(.16,.8,.24,1);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family: var(--sans);
    color: var(--charcoal);
    background: var(--stone-cream);
    -webkit-font-smoothing: antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{ font-family: var(--serif); letter-spacing: -0.01em; }
  a{ text-decoration:none; }
  ::selection{ background: var(--terracotta); color: #fff; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
  }

  .container-narrow{ max-width: 1180px; }
  .eyebrow-line{ display:flex; align-items:center; gap:.75rem; color: var(--slate); font-size: .8rem; letter-spacing:.03em; }
  .eyebrow-line .rule{ width: 34px; height:1px; background: var(--terracotta); display:inline-block; }

  /* ---------- Preloader ---------- */
  #preloader{
    position:fixed; inset:0; z-index:5000; background: var(--charcoal);
    display:flex; align-items:center; justify-content:center;
    transition: opacity .8s var(--ease), visibility .8s var(--ease);
  }
  #preloader.pre-hide{ opacity:0; visibility:hidden; pointer-events:none; }
  .pre-mark{ position:relative; width:96px; height:96px; display:flex; align-items:center; justify-content:center; }
  .pre-ring{
    position:absolute; inset:0; border-radius:50%;
    border:1px solid rgba(242,237,227,.18);
    border-top-color: var(--terracotta);
    animation: preSpin 1.4s linear infinite;
  }
  .pre-ring.pre-ring-2{ inset:14px; border-top-color: transparent; border-right-color: rgba(242,237,227,.5); animation-duration: 2.1s; animation-direction: reverse; }
  @keyframes preSpin{ to{ transform: rotate(360deg); } }
  .pre-mark img{ width:38px; opacity:0; animation: preLogoIn 1s var(--ease) .3s forwards; }
  @keyframes preLogoIn{ to{ opacity:1; } }
  body.pre-lock{ overflow:hidden; height:100vh; }

  .btn-terracotta, .btn-outline-stone{
    position:relative; isolation:isolate; overflow:hidden;
    display:inline-block; padding: .8rem 1.9rem; border-radius: 2px;
    font-weight:500; letter-spacing:.01em; font-size:.95rem;
    --tx:0px; --ty:0px;
    transform: translate(var(--tx), var(--ty));
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), color .35s ease, border-color .35s ease;
  }
  .btn-terracotta::before, .btn-outline-stone::before{
    content:''; position:absolute; inset:0; z-index:-1;
    transition: transform .55s var(--ease);
  }

  .btn-terracotta{ background:transparent; color:#fff; border:none; }
  .btn-terracotta::before{ background: var(--terracotta); transform: translateX(0); }
  .btn-terracotta::after{
    content:''; position:absolute; inset:0; z-index:-1; background: var(--terracotta-deep);
    transform: translateX(-101%); transition: transform .5s var(--ease);
  }
  .btn-terracotta:hover::after{ transform: translateX(0); }
  .btn-terracotta.btn-hover{ box-shadow: 0 16px 32px -12px rgba(162,78,48,.55); }
  .btn-terracotta:active{ transform: translate(var(--tx), calc(var(--ty) + 1px)) scale(.98); }

  .btn-outline-stone{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.55); }
  .btn-outline-stone::before{ background:#fff; transform: scaleX(0); transform-origin: left center; }
  .btn-outline-stone:hover::before{ transform: scaleX(1); }
  .btn-outline-stone:hover{ color: var(--charcoal); border-color:#fff; }
  .btn-outline-stone.btn-hover{ box-shadow: 0 16px 32px -12px rgba(0,0,0,.4); }
  .btn-outline-stone:active{ transform: translate(var(--tx), calc(var(--ty) + 1px)) scale(.98); }

  /* ---------- Navbar ---------- */
  .navbar-swastik{
    position: fixed; top:0; left:0; right:0; z-index: 1000;
    padding: 1.1rem 0; background: transparent;
    transition: background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
  }
  .navbar-swastik.scrolled{
    background: rgba(251,249,245,0.70); backdrop-filter: blur(6px);
    padding: .6rem 0; box-shadow: 0 1px 0 var(--slate-line);
  }
  .navbar-swastik .brand-mark img{ height: 80px; width:auto; transition: height .4s var(--ease); }
  .navbar-swastik.scrolled .brand-mark img{ height: 60px; }

  .nav-links a{
    color: rgba(255,255,255,.88); font-size:.9rem; font-weight:500; margin-left: 2rem;
    position: relative; padding-bottom: 4px; transition: color .3s ease;
  }
  .navbar-swastik.scrolled .nav-links a{ color: var(--charcoal); }
  .nav-links a::after{
    content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
    background: var(--terracotta); transition: width .4s var(--ease);
  }
  .nav-links a:hover::after{ width:100%; }
  .nav-links a.nav-cta{ color:#fff; background: var(--terracotta); padding:.5rem 1.2rem; border-radius:2px; transition: background .35s ease, transform .35s var(--ease); }
  .nav-links a.nav-cta::after{ display:none; }
  .nav-links a.nav-cta:hover{ background: var(--terracotta-deep); transform: translateY(-2px); }

  .navbar-toggler{ border:none; position:relative; z-index:2100; width:32px; height:22px; padding:0; }
  .navbar-toggler .bar{ display:block; width:24px; height:2px; background:#fff; margin:5px 0; transition: background .4s ease, transform .4s var(--ease), opacity .3s ease; }
  .navbar-swastik.scrolled .navbar-toggler .bar{ background: var(--charcoal); }
  body.nav-open .navbar-toggler .bar{ background:#fff !important; }
  body.nav-open .navbar-toggler .bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  body.nav-open .navbar-toggler .bar:nth-child(2){ opacity:0; }
  body.nav-open .navbar-toggler .bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  /* ---------- Full-screen fade-in overlay menu ---------- */
  body.nav-open{ overflow:hidden; }
  .nav-overlay{
    position:fixed; inset:0; z-index:2000; background: var(--charcoal);
    display:flex; flex-direction:column; justify-content:center;
    opacity:0; visibility:hidden; pointer-events:none;
    transition: opacity .65s var(--ease), visibility .65s var(--ease);
  }
  body.nav-open .nav-overlay{ opacity:1; visibility:visible; pointer-events:auto; }
  .nav-overlay-tex{
    position:absolute; inset:0; opacity:.05; pointer-events:none;
    background-image: radial-gradient(rgba(242,237,227,.5) 1px, transparent 1px);
    background-size: 26px 26px;
  }
  .nav-overlay-brand{
    position:absolute; top: 1.4rem; left:0; right:0; z-index:1;
    display:flex; justify-content:center;
    opacity:0; transform: translateY(-10px);
    transition: opacity .6s var(--ease) .15s, transform .6s var(--ease) .15s;
  }
  body.nav-open .nav-overlay-brand{ opacity:1; transform: translateY(0); }
  .nav-overlay-brand img{ height:56px; width:auto; filter: brightness(0) invert(1); opacity:.95; }
  .nav-overlay-links{
    position:relative; z-index:1; display:flex; flex-direction:column;
    align-items:center; gap: .4rem; text-align:center;
  }
  .nav-overlay-links a{
    font-family: var(--serif); font-weight:500; font-size: clamp(2.1rem, 6vw, 3.4rem);
    color: rgba(242,237,227,.9); line-height:1.3; position:relative;
    opacity:0; transform: translateY(28px);
    transition: opacity .7s var(--ease), transform .7s var(--ease), color .3s ease;
  }
  body.nav-open .nav-overlay-links a{ opacity:1; transform: translateY(0); }
  .nav-overlay-links a:nth-child(1){ transition-delay: .22s; }
  .nav-overlay-links a:nth-child(2){ transition-delay: .3s; }
  .nav-overlay-links a:nth-child(3){ transition-delay: .38s; }
  .nav-overlay-links a:nth-child(4){ transition-delay: .46s; }
  .nav-overlay-links a:hover{ color: var(--terracotta); }
  .nav-overlay-links a em{ font-style:italic; color: var(--terracotta); }
  .nav-overlay-links a.overlay-cta{
    margin-top: 1.1rem; font-family: var(--sans); font-size: 1rem; font-weight:500;
    color:#fff; background: var(--terracotta); padding: .8rem 2rem; border-radius:2px;
  }
  .nav-overlay-links a.overlay-cta:hover{ background: var(--terracotta-deep); color:#fff; }
  .nav-overlay-foot{
    position:absolute; bottom: 2rem; left:0; right:0; text-align:center;
    font-size:.78rem; letter-spacing:.04em; color: rgba(242,237,227,.45);
    opacity:0; transition: opacity .6s var(--ease) .55s;
  }
  body.nav-open .nav-overlay-foot{ opacity:1; }

  /* ---------- Header / video hero ---------- */
  .hero{ position: relative; height: 100vh; min-height: 640px; display:flex; align-items:flex-end; overflow:hidden; background: var(--charcoal); }
  .hero-media{ position:absolute; inset:-6% 0 0 0; overflow:hidden; will-change: transform; }
  .hero-media .hero-fallback{
    position:absolute; inset:0; background-image:url('images/pool-patio.jpeg');
    background-size:cover; background-position:center 60%;
  }
  .hero-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1; transition: opacity .6s ease; }
  .hero-media video.hero-video-hidden{ opacity:0; }
  .hero-scrim{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,17,14,.55) 0%, rgba(20,17,14,.15) 32%, rgba(20,17,14,.35) 70%, rgba(20,17,14,.88) 100%); }

  .hero-ring-mark{
    position:absolute; right:-6%; top:50%; width:min(60vw,620px); height:min(60vw,620px);
    transform: translateY(-50%); opacity:.07; z-index:1; pointer-events:none;
    animation: ringRotate 140s linear infinite;
  }
  @keyframes ringRotate{ to{ transform: translateY(-50%) rotate(360deg); } }

  .hero-content{ position:relative; z-index:2; color:#fff; padding-bottom: 6.5rem; width:100%; }
  .hero-kicker{ opacity:0; transform: translateY(14px); animation: riseIn .9s var(--ease) .3s forwards; display:flex; align-items:center; gap:.75rem; font-size:.82rem; letter-spacing:.05em; color: rgba(255,255,255,.82); margin-bottom:1.1rem; }
  .hero-kicker .rule{ width:40px; height:1px; background: var(--terracotta); }
  .hero-title{ font-size: clamp(2.6rem, 5.4vw, 4.6rem); font-weight:600; line-height:1.04; max-width: 17ch; margin-bottom: 1.4rem; }
  .hero-title .word{ display:inline-block; overflow:hidden; vertical-align:top; }
  .hero-title .word span{ display:inline-block; opacity:0; transform: translateY(115%); animation: wordUp .9s var(--ease) forwards; }
  .hero-title em{ font-style: italic; font-weight:500; color: #E4A583; }
  .hero-sub{ opacity:0; transform: translateY(18px); animation: riseIn 1s var(--ease) 1.15s forwards; max-width: 34rem; font-size:1.05rem; color: rgba(255,255,255,.86); font-weight:300; margin-bottom: 2.1rem; }
  .hero-cta{ opacity:0; transform: translateY(14px); animation: riseIn .9s var(--ease) 1.35s forwards; display:flex; gap:1rem; flex-wrap:wrap; }
  @keyframes riseIn{ to{ opacity:1; transform: translateY(0); } }
  @keyframes wordUp{ to{ opacity:1; transform: translateY(0); } }

  .hero-scroll-cue{ position:absolute; right: 2.2rem; bottom: 2.2rem; z-index:2; color: rgba(255,255,255,.75); font-size:.72rem; letter-spacing:.15em; display:flex; flex-direction:column; align-items:center; gap:.6rem; opacity:0; animation: riseIn 1s ease 1.6s forwards; }
  .hero-scroll-cue .line{ width:1px; height:38px; background: rgba(255,255,255,.5); position:relative; overflow:hidden; }
  .hero-scroll-cue .line::after{ content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background: #fff; animation: cueDrop 2.2s ease-in-out infinite; }
  @keyframes cueDrop{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

  /* ---------- Stone-cut divider ---------- */
 

  /* ---------- Section framing ---------- */
  section{ position:relative; }
  .section-pad{ padding: 6.5rem 0; }
  .section-head{ max-width: 640px; }
  .section-head h2{ font-size: clamp(1.9rem, 3vw, 2.7rem); font-weight:600; line-height:1.15; margin: .9rem 0 0; }

  .reveal{ opacity:1; transform:none; }
  html.js-enabled .reveal{
    opacity:0; clip-path: inset(0 0 100% 0); transform: translateY(16px);
    transition: opacity 1s var(--ease), clip-path 1.1s var(--ease), transform 1s var(--ease);
  }
  html.js-enabled .reveal.is-visible{ opacity:1; clip-path: inset(0 0 0% 0); transform: translateY(0); }

  /* ---------- About ---------- */
  .about-figure{ position:relative; overflow:hidden; border-radius: 2px; }
  .about-figure img{ width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.08); transition: transform 1.4s var(--ease); }
  .about-figure:hover img{ transform: scale(1.14); }
  .about-figure .figure-tag{ position:absolute; left:0; bottom:0; background: var(--charcoal); color:#fff; padding:.65rem 1.1rem; font-size:.78rem; letter-spacing:.04em; transform: translateY(0); }
  .about-stats{ display:flex; gap:2.4rem; margin-top: 2.3rem; flex-wrap:wrap; border-top: 1px solid var(--slate-line); padding-top: 1.8rem; }
  .about-stats .stat b{ font-family: var(--serif); font-size:2rem; font-weight:600; display:block; color: var(--terracotta-deep); font-variant-numeric: tabular-nums; }
  .about-stats .stat span{ font-size:.8rem; color: var(--slate); }

  /* ---------- What we do ---------- */
  .whatwedo{ background: var(--stone-white); border-top: 1px solid var(--slate-line); border-bottom: 1px solid var(--slate-line); }
  .service-item{ position:relative; padding: 2rem 0 2rem 1.6rem; border-top: 1px solid var(--slate-line); display:flex; gap:2rem; align-items:flex-start; transition: padding-left .4s var(--ease); }
  .service-item:last-child{ border-bottom: 1px solid var(--slate-line); }
  .service-item:hover{ padding-left: 2.1rem; }
  .service-line{ position:absolute; left:0; top:0; bottom:0; width:2px; background: transparent; }
  html.js-enabled .service-item .service-line{ background: var(--slate-line); }
  html.js-enabled .service-item.is-visible .service-line{ background: var(--terracotta); transition: background 0s .5s; }
  .service-num{ font-family: var(--serif); font-size:1.5rem; color: var(--terracotta); min-width: 3.2rem; }
  .service-item h4{ font-size:1.25rem; margin-bottom:.4rem; }
  .service-item p{ color: var(--slate); margin:0; max-width: 46ch; font-size:.95rem; }

  /* ---------- Category grid ---------- */
  .cat-card-wrap{ perspective: 1000px; }
  .cat-card{
    position:relative; overflow:hidden; border-radius: 2px; aspect-ratio: 4/5;
    cursor:pointer; transform-style: preserve-3d;
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
    box-shadow: 0 0 0 rgba(0,0,0,0);
  }
  .cat-card.tilting{ transition: transform .12s linear, box-shadow .3s ease; }
  .cat-card:hover{ box-shadow: 0 26px 46px -16px rgba(20,17,14,.4); }
  .cat-card img{
    width:100%; height:100%; object-fit:cover; display:block;
    filter: saturate(.85) contrast(1.02);
    transform: scale(1.06) translateZ(0);
    transition: transform 1.2s var(--ease), filter .6s ease;
  }
  .cat-card:hover img{ transform: scale(1.18); filter: saturate(1.08) contrast(1.05); }
  .cat-card .card-scrim{
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(20,17,14,0) 40%, rgba(20,17,14,.88) 100%);
    transition: background .5s ease;
  }
  .cat-card:hover .card-scrim{ background: linear-gradient(180deg, rgba(20,17,14,.15) 0%, rgba(20,17,14,.92) 100%); }
  .cat-card .card-label{ position:absolute; left:0; right:0; bottom:0; padding: 1.2rem 1.3rem; color:#fff; }
  .cat-card .card-label .cat-tag{ font-size:.7rem; letter-spacing:.1em; color: rgba(255,255,255,.65); display:block; margin-bottom:.3rem; }
  .cat-card .card-label h4{ font-size:1.2rem; margin:0; font-weight:600; transition: transform .5s var(--ease); }
  .cat-card:hover .card-label h4{ transform: translateY(-4px); }

  .cat-compass{
    position:absolute; top:1.1rem; right:1.1rem; width:34px; height:34px;
    border:1px solid rgba(255,255,255,.55); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    opacity:0; transform: rotate(-90deg) scale(.6);
    transition: opacity .5s ease, transform .8s var(--ease);
  }
  .cat-card:hover .cat-compass{ opacity:1; transform: rotate(360deg) scale(1); }
  .cat-compass svg{ width:16px; height:16px; fill: #fff; }

  .cat-underline{ position:absolute; left:1.3rem; bottom:.7rem; height:2px; width:0; background: var(--terracotta); transition: width .5s var(--ease) .05s; }
  .cat-card:hover .cat-underline{ width: 2.4rem; }

  /* ---------- Footer ---------- */
  footer.site-footer{ background: var(--charcoal); color: rgba(242,237,227,.7); padding: 3rem 0 1.6rem; }
  footer.site-footer a{ color: rgba(242,237,227,.7); transition: color .3s ease; }
  footer.site-footer a:hover{ color:#fff; }
  footer.site-footer .foot-logo{ height:60px; margin-bottom: .9rem; filter: brightness(0) invert(1); opacity:.92; }
  footer.site-footer .foot-bottom{ border-top: 1px solid rgba(242,237,227,.14); margin-top: 2.2rem; padding-top: 1.4rem; font-size:.78rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; }

  @media (max-width: 767px){
    .about-stats{ gap:1.6rem; }
    .service-item{ gap:1.2rem; }
    .hero-ring-mark{ display:none; }
  }

  .nav-dropdown {
  position: relative !important;
}

.nav-dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 210px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.14);
  border-radius: 8px;
  padding: 8px 0;
  margin-top: 10px;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 999 !important;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0);
}

.nav-dropdown-menu a {
  display: block;
  padding: 9px 20px;
  white-space: nowrap;
  color: #222;
  font-size: 0.92rem;
}

.nav-dropdown-menu a:hover {
  background: rgba(0,0,0,0.04);
}




/* =========================================================
   COBBLES INTERNATIONAL
   FINAL RIGHT-SIDE MOBILE DRAWER
========================================================= */


/* =========================================================
   DRAWER BODY LOCK
========================================================= */

body.drawer-open {
    overflow: hidden;
}


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

.navbar-toggler {
    display: none;

    border: none;
    background: transparent;

    position: relative;
    z-index: 3200;

    width: 42px;
    height: 42px;

    padding: 8px;

    cursor: pointer;

    outline: none !important;
    box-shadow: none !important;
}


.navbar-toggler .bar {
    display: block;

    width: 25px;
    height: 2px;

    margin: 5px auto;

    background: var(--charcoal);

    border-radius: 2px;

    transition:
        background .3s ease,
        transform .4s var(--ease),
        opacity .3s ease;
}


.navbar-swastik:not(.scrolled)
.navbar-toggler .bar {
    background: #fff;
}


/* Hamburger -> X */

body.drawer-open
.navbar-toggler .bar {
    background: var(--charcoal) !important;
}


body.drawer-open
.navbar-toggler .bar:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}


body.drawer-open
.navbar-toggler .bar:nth-child(2) {
    opacity: 0;
}


body.drawer-open
.navbar-toggler .bar:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}


/* =========================================================
   DRAWER BACKDROP
========================================================= */

.mobile-drawer-backdrop {
    position: fixed;

    inset: 0;

    z-index: 2900;

    background:
        rgba(20, 17, 14, .52);

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .4s ease,
        visibility .4s ease;
}


body.drawer-open
.mobile-drawer-backdrop {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* =========================================================
   RIGHT SIDE DRAWER
========================================================= */

.mobile-drawer {
    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;

    width: min(420px, 88vw);

    height: 100dvh;

    background: var(--stone-white);

    z-index: 3000;

    display: flex;

    flex-direction: column;

    box-shadow:
        -20px 0 60px
        rgba(0, 0, 0, .18);

    transform:
        translate3d(100%, 0, 0);

    visibility: hidden;

    pointer-events: none;

    transition:
        transform .55s var(--ease),
        visibility .55s ease;
}


body.drawer-open
.mobile-drawer {
    transform:
        translate3d(0, 0, 0);

    visibility: visible;

    pointer-events: auto;
}


/* =========================================================
   DRAWER HEADER
========================================================= */

.mobile-drawer-header {
    min-height: 86px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        16px 22px;

    border-bottom:
        1px solid
        rgba(29, 26, 23, .10);

    flex-shrink: 0;
}


.mobile-drawer-logo {
    display: inline-flex;

    align-items: center;
}


.mobile-drawer-logo img {
    display: block;

    height: 48px;

    width: auto;
}


/* =========================================================
   DRAWER CLOSE BUTTON
========================================================= */

.mobile-drawer-close {
    width: 42px;

    height: 42px;

    border:
        1px solid
        rgba(29, 26, 23, .12);

    border-radius: 50%;

    background: transparent;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;
}


.mobile-drawer-close:hover {
    background: var(--charcoal);

    border-color: var(--charcoal);

    transform: rotate(90deg);
}


.mobile-drawer-close span {
    position: absolute;

    width: 18px;

    height: 1.5px;

    background: var(--charcoal);
}


.mobile-drawer-close span:first-child {
    transform: rotate(45deg);
}


.mobile-drawer-close span:last-child {
    transform: rotate(-45deg);
}


.mobile-drawer-close:hover span {
    background: #fff;
}


/* =========================================================
   DRAWER CONTENT
========================================================= */

.mobile-drawer-content {
    flex: 1;

    min-height: 0;

    overflow-y: auto;

    overflow-x: hidden;

    padding:
        25px 24px 24px;
}


.mobile-drawer-nav {
    display: flex;

    flex-direction: column;

    width: 100%;
}


/* =========================================================
   DRAWER LINKS
========================================================= */

.drawer-link {
    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    min-height: 58px;

    padding:
        13px 4px;

    border-bottom:
        1px solid
        rgba(29, 26, 23, .10);

    color: var(--charcoal);

    font-family: var(--serif);

    font-size: 1.35rem;

    font-weight: 500;

    position: relative;

    transition:
        color .3s ease,
        padding-left .3s var(--ease);
}


.drawer-link::after {
    content: '';

    position: absolute;

    left: 0;

    bottom: -1px;

    width: 0;

    height: 2px;

    background: var(--terracotta);

    transition:
        width .35s var(--ease);
}


.drawer-link:hover,
.drawer-link.is-active {
    color: var(--terracotta);

    padding-left: 10px;
}


.drawer-link:hover::after,
.drawer-link.is-active::after {
    width: 34px;
}


/* =========================================================
   PRODUCTS ACCORDION
========================================================= */

.mobile-drawer-products {
    width: 100%;

    border-bottom:
        1px solid
        rgba(29, 26, 23, .10);
}


.drawer-products-toggle {
    appearance: none;

    width: 100%;

    min-height: 58px;

    padding:
        13px 4px;

    border: none;

    background: transparent;

    color: var(--charcoal);

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-family: var(--serif);

    font-size: 1.35rem;

    font-weight: 500;

    cursor: pointer;

    text-align: left;
}


.drawer-products-toggle:hover {
    color: var(--terracotta);
}


.drawer-chevron {
    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    transition:
        transform .35s var(--ease);
}


.drawer-products-toggle[aria-expanded="true"]
.drawer-chevron {
    transform: rotate(180deg);
}


/* =========================================================
   PRODUCTS PANEL
========================================================= */

.drawer-products-panel {
    max-height: 0;

    overflow: hidden;

    opacity: 0;

    transform: translateY(-5px);

    transition:
        max-height .45s var(--ease),
        opacity .3s ease,
        transform .35s var(--ease);
}


.drawer-products-panel.is-open {
    max-height: 700px;

    opacity: 1;

    transform: translateY(0);

    padding:
        3px 0 10px;
}


.drawer-sub-link {
    display: block;

    padding:
        10px 14px;

    margin-left: 8px;

    color: var(--slate);

    font-family: var(--sans);

    font-size: .94rem;

    border-left:
        1px solid
        rgba(29, 26, 23, .13);

    transition:
        color .25s ease,
        padding-left .25s ease,
        border-color .25s ease;
}


.drawer-sub-link:hover {
    color: var(--terracotta);

    padding-left: 20px;

    border-color: var(--terracotta);
}


.drawer-sub-link-all {
    color: var(--charcoal);

    font-weight: 600;
}


/* =========================================================
   PREMIUM PRODUCTS
========================================================= */

.drawer-premium {
    color: var(--terracotta);
}


/* =========================================================
   WISHLIST
========================================================= */

.drawer-wishlist {
    position: relative;
}


.drawer-wishlist-badge {
    position: static;

    width: 22px;

    height: 22px;

    min-width: 22px;

    border-radius: 50%;

    margin-left: auto;

    font-family: var(--sans);

    font-size: 10px;

    background: var(--terracotta);

    color: #fff;
}


.drawer-wishlist-badge:not(.is-visible) {
    display: none;
}


/* =========================================================
   GET A QUOTE
========================================================= */

.drawer-cta {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 52px;

    margin-top: 25px;

    padding:
        12px 20px;

    background: var(--terracotta);

    color: #fff;

    font-family: var(--sans);

    font-size: .95rem;

    font-weight: 500;

    border-radius: 2px;

    transition:
        background .3s ease,
        transform .3s var(--ease),
        box-shadow .3s ease;
}


.drawer-cta:hover {
    background: var(--terracotta-deep);

    color: #fff;

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px
        rgba(162, 78, 48, .25);
}


/* =========================================================
   DRAWER FOOTER
========================================================= */

.mobile-drawer-footer {
    padding-top: 28px;

    display: flex;

    flex-direction: column;

    gap: 4px;

    color: var(--slate);

    font-size: .72rem;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.drawer-footer-line {
    width: 36px;

    height: 1px;

    margin-bottom: 7px;

    background: var(--terracotta);
}


/* =========================================================
   DRAWER OPEN ANIMATION
========================================================= */

.mobile-drawer .drawer-link,
.mobile-drawer .mobile-drawer-products,
.mobile-drawer .drawer-cta,
.mobile-drawer .mobile-drawer-footer {
    opacity: 0;

    transform: translateX(25px);

    transition:
        opacity .45s ease,
        transform .55s var(--ease);
}


body.drawer-open
.mobile-drawer .drawer-link,
body.drawer-open
.mobile-drawer .mobile-drawer-products,
body.drawer-open
.mobile-drawer .drawer-cta,
body.drawer-open
.mobile-drawer .mobile-drawer-footer {
    opacity: 1;

    transform: translateX(0);
}


body.drawer-open
.mobile-drawer .drawer-link:nth-child(1) {
    transition-delay: .08s;
}


body.drawer-open
.mobile-drawer .drawer-link:nth-child(2) {
    transition-delay: .12s;
}


body.drawer-open
.mobile-drawer .drawer-link:nth-child(3) {
    transition-delay: .16s;
}


body.drawer-open
.mobile-drawer .mobile-drawer-products {
    transition-delay: .20s;
}


body.drawer-open
.mobile-drawer .drawer-premium {
    transition-delay: .24s;
}


body.drawer-open
.mobile-drawer .drawer-wishlist {
    transition-delay: .28s;
}


body.drawer-open
.mobile-drawer .drawer-cta {
    transition-delay: .32s;
}


body.drawer-open
.mobile-drawer .mobile-drawer-footer {
    transition-delay: .38s;
}


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

@media (max-width: 991.98px) {

    .navbar-swastik {
        padding: .7rem 0;
    }


    .navbar-swastik.scrolled {
        padding: .55rem 0;
    }


    .navbar-swastik .brand-mark img {
        height: 62px;
    }


    .navbar-swastik.scrolled .brand-mark img {
        height: 54px;
    }


    .navbar-toggler {
        display: block;
    }


    .nav-links {
        display: none !important;
    }


    /*
       IMPORTANT:
       Disable the old full-screen menu.
    */

    .nav-overlay,
    .nav-overlay-tex,
    .nav-overlay-brand,
    .nav-overlay-links,
    .nav-overlay-foot,
    .nav-overlay-accordion {
        display: none !important;
    }

}


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

@media (max-width: 480px) {

    .mobile-drawer {
        width: 92vw;
    }


    .mobile-drawer-header {
        min-height: 78px;

        padding:
            14px 18px;
    }


    .mobile-drawer-logo img {
        height: 43px;
    }


    .mobile-drawer-content {
        padding:
            20px 19px 20px;
    }


    .drawer-link,
    .drawer-products-toggle {
        font-size: 1.2rem;

        min-height: 54px;
    }


    .drawer-sub-link {
        font-size: .9rem;
    }


    .mobile-drawer-footer {
        font-size: .65rem;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.mobile-drawer a:focus-visible,
.mobile-drawer button:focus-visible,
.navbar-toggler:focus-visible {
    outline:
        2px solid
        var(--terracotta);

    outline-offset: 3px;
}


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

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

    .mobile-drawer,
    .mobile-drawer-backdrop,
    .drawer-link,
    .mobile-drawer-products,
    .drawer-cta,
    .mobile-drawer-footer,
    .drawer-products-panel,
    .drawer-chevron {
        transition: none !important;
    }

}


/* =========================================================
   MOBILE WIDTH / SCALING FIX
   ========================================================= */

@media (max-width: 991.98px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow-x: hidden !important;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    /* Prevent sections from becoming wider than screen */
    section,
    header,
    footer,
    main,
    nav,
    .container,
    .container-fluid {
        max-width: 100% !important;
    }

    /* Bootstrap container */
    .container,
    .container-fluid {
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Images/videos must not create horizontal overflow */
    img,
    video,
    iframe {
        max-width: 100%;
    }
}