/* ============================================================
   Sitewide background — gradient + floating ambient blobs +
   duct-line grid. Paste once into your main stylesheet.
   ============================================================ */

/* :root{
  /* --site-green: 95,203,122;   rgba triplet, brand green */
  /* --site-yellow: 234,200,30;  rgba triplet, brand yellow */
  /* --site-cream: #FFFDF6; */
/* } */ 

html{
  min-height:100%;
}

body{
    margin: 0;
  min-height:100vh;
  position:relative;
  background:
    radial-gradient(circle at 15% 20%, rgba(95,203,122), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(234,200,30,0.14), transparent 50%),
    #FFFDF6;;
}
/*=========================================================
    SITE BACKGROUND — global layer
    Colors match the logo: leaf green + gold, on a soft
    off-white base. No :root, no custom properties — plain
    hex values throughout, per your existing convention.
=========================================================*/

.site-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: #F5F8F3;
    pointer-events: none;
}

/* ---------------- duct current lines ---------------- */

.site-bg__currents {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.sbg-line {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 16 22;
    animation: sbgFlow 18s linear infinite;
}

.sbg-line--a {
    stroke: #4FBE73;
    opacity: 0.10;
}

.sbg-line--b {
    stroke: #ECC42E;
    opacity: 0.09;
    animation-direction: reverse;
    animation-duration: 24s;
}

@keyframes sbgFlow {
    to { stroke-dashoffset: -420; }
}

/* ---------------- glow orbs ---------------- */

.site-bg__glow-layer {
    position: absolute;
    inset: 0;
    will-change: transform;
    transition: transform 0.15s ease-out;
}

.site-bg__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
}

.site-bg__glow--green {
    width: 480px;
    height: 480px;
    top: -140px;
    left: -120px;
    background: radial-gradient(circle, rgba(79, 190, 115, 0.30), transparent 70%);
    animation: sbgDrift1 26s ease-in-out infinite;
}

.site-bg__glow--gold {
    width: 420px;
    height: 420px;
    top: 40%;
    right: -140px;
    background: radial-gradient(circle, rgba(236, 196, 46, 0.26), transparent 70%);
    animation: sbgDrift2 30s ease-in-out infinite;
}

.site-bg__glow--green2 {
    width: 360px;
    height: 360px;
    bottom: -120px;
    left: 30%;
    background: radial-gradient(circle, rgba(46, 154, 76, 0.22), transparent 70%);
    animation: sbgDrift1 34s ease-in-out infinite reverse;
}

@keyframes sbgDrift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(40px, 30px) scale(1.08); }
}

@keyframes sbgDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-30px, -40px) scale(1.06); }
}

/* ---------------- floating particles ---------------- */

.site-bg__particles {
    position: absolute;
    inset: 0;
}

.sbg-particle {
    position: absolute;
    bottom: -20px;
    border-radius: 50%;
    opacity: 0;
    animation-name: sbgFloatUp;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.sbg-particle--green {
    background: #4FBE73;
    box-shadow: 0 0 6px rgba(79, 190, 115, 0.5);
}

.sbg-particle--gold {
    background: #ECC42E;
    box-shadow: 0 0 6px rgba(236, 196, 46, 0.5);
}

@keyframes sbgFloatUp {
    0%   { transform: translate(0, 0) scale(0.8); opacity: 0; }
    10%  { opacity: 0.5; }
    50%  { transform: translate(var(--sbg-drift, 20px), -50vh) scale(1); opacity: 0.4; }
    90%  { opacity: 0.15; }
    100% { transform: translate(calc(var(--sbg-drift, 20px) * 2), -105vh) scale(0.6); opacity: 0; }
}

/* ---------------- reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
    .sbg-line,
    .site-bg__glow,
    .sbg-particle {
        animation: none !important;
    }
    .sbg-line { opacity: 0.06; }
}

/* Parallax is applied inline via JS transform on .site-bg__currents
   and .site-bg__glow-layer — see site-background.js. */

.site-bg__currents {
    will-change: transform;
    transition: transform 0.15s ease-out;
}

  
/*=========================================================
    FLOATING CALL BUTTON
==========================================================*/
.floating-call{
  position:fixed;
  right:26px;
  bottom:35px;
  z-index:999;

  display:flex;
  align-items:center;
  gap:0;

  text-decoration:none;
  color:#fff;

  background:linear-gradient(155deg, #3b7bda9f, #306d35 70%);
  border-radius:999px;
  padding:6px;

  box-shadow:
    0 14px 30px -10px rgba(15,42,29,0.5),
    0 2px 8px rgba(15,42,29,0.25);

  border:1px solid rgba(255,255,255,0.08);

  cursor:pointer;
  overflow:hidden;

  transition:box-shadow 0.35s ease, transform 0.35s ease, padding 0.35s ease;

  animation:call-in 0.6s cubic-bezier(.2,.8,.2,1) 0.4s both;
}

.floating-call:hover{
  transform:translateY(-3px);
  box-shadow:
    0 20px 40px -12px rgba(15,42,29,0.55),
    0 4px 12px rgba(31,107,62,0.3);
}

.floating-call:focus-visible{
  outline:3px solid gold;
  outline-offset:3px;
}

/* icon bubble with pulse ring */
.floating-call__icon{
  position:relative;
  flex-shrink:0;
  width:52px;
  height:52px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:19px;
  color:var(--ink);

  background:linear-gradient(145deg, gold, rgb(153, 135, 32));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -2px 4px rgba(0,0,0,0.12);
}

.floating-call__icon i{
  animation:ring-shake 2.6s ease-in-out infinite;
  animation-delay:1.4s;
}

.floating-call__icon::before,
.floating-call__icon::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid var(--gold);
  opacity:0;
  animation:pulse-ring 2.6s ease-out infinite;
}
.floating-call__icon::after{ animation-delay:0.9s; }

/* label + number, collapsed by default, expands on hover/focus */
.floating-call__content{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1px;

  max-width:0;
  opacity:0;
  white-space:nowrap;
  overflow:hidden;

  transition:max-width 0.4s ease, opacity 0.3s ease, padding 0.4s ease;
}

.floating-call__label{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--green);
}

.floating-call__number{
  font-family:'Space Grotesk', sans-serif;
  font-size:15px;
  font-weight:700;
  color:#fff;
}

.floating-call:hover .floating-call__content,
.floating-call:focus-visible .floating-call__content{
  max-width:180px;
  opacity:1;
  padding:0 16px 0 12px;
}

/* diagonal shine sweep, replays every few seconds */
.floating-call__shine{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  border-radius:inherit;
}
.floating-call__shine::before{
  content:'';
  position:absolute;
  top:0; left:-60%;
  width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,0.22), transparent);
  transform:skewX(-20deg);
  animation:shine-sweep 4.5s ease-in-out infinite;
}

@keyframes shine-sweep{
  0%{ left:-60%; }
  18%{ left:130%; }
  100%{ left:130%; }
}

@keyframes pulse-ring{
  0%{ transform:scale(1); opacity:0.55; }
  100%{ transform:scale(1.7); opacity:0; }
}

@keyframes ring-shake{
  0%, 90%, 100%{ transform:rotate(0); }
  92%{ transform:rotate(-14deg); }
  94%{ transform:rotate(11deg); }
  96%{ transform:rotate(-8deg); }
  98%{ transform:rotate(4deg); }
}

@keyframes call-in{
  from{ opacity:0; transform:translateY(18px) scale(0.9); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* mobile: stay compact, icon-only, no hover so keep it tappable */
@media (max-width:600px){
  .floating-call{ right:16px; bottom:16px; }
  .floating-call__icon{ width:56px; height:56px; font-size:20px; }
  .floating-call:hover .floating-call__content,
  .floating-call:focus-visible .floating-call__content{
    max-width:0; opacity:0; padding:0; /* keep compact on touch, number lives in aria-label */
  }
}

@media (prefers-reduced-motion: reduce){
  .floating-call,
  .floating-call *{
    animation:none !important;
    transition:box-shadow 0.2s ease, transform 0.2s ease !important;
  }
}
/*=========================================================
    About
==========================================================*/

.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
  .stat{
    background:#232c3a17;border:1px solid #E7E0C9;
    border-radius:22px;padding:24px 22px;
    text-align:left;
    transition:transform .3s cubic-bezier(.22,.9,.32,1), box-shadow .3s cubic-bezier(.22,.9,.32,1);
  }
  .stat:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(35,40,29,0.1);}
  .stat .num{
    font-family:'Montserrat',sans-serif;font-weight:800;
    font-size:clamp(30px,3vw,38px);color:#e9e7e2;
    display:flex;align-items:baseline;gap:2px;
  }
  .stat .label{margin-top:6px;font-size:13.5px;color:#ffffff;font-weight:600;}

  .stat-grid .stat:nth-child(1){transition-delay:0s;}
  .stat-grid .stat:nth-child(2){transition-delay:.1s;}
  .stat-grid .stat:nth-child(3){transition-delay:.2s;}
  .stat-grid .stat:nth-child(4){transition-delay:.3s;}


/*=========================================================
            About
==========================================================*/
/* =========================================================
   DELIGHT DUCT CARE — ABOUT / COMPANY SECTION
========================================================= */


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

.about-section {
    /* width: 100%; */
    padding: 80px 24px 0 24px;
    
    font-family: 'Inter', sans-serif;
}


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

.about-container {
    max-width: 1180px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr  1fr;

    gap: 56px;
    align-items: center;
}


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

.about-main-image {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;

    box-shadow:
        0 20px 44px #16211C24;
}

.about-main-image img {
    display: block;

    width: 100%;
    height: 560px;

    object-fit: cover;

    transition:
        transform 0.6s cubic-bezier(.16, 1, .3, 1);
}

.about-main-image:hover img {
    transform: scale(1.03);
}


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

/* .about-content {
    width: 100%;
} */


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

.about-title {
    font-family: 'Sora', sans-serif;
    font-weight: 800;

    font-size: 34px;
    line-height: 1.25;

    color: #16211C;

    margin: 0 0 22px;
}


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

.about-description {
    font-size: 15px;
    line-height: 1.75;

    color: #4B564F;

    margin: 0 0 26px;
}


/* =========================================================
   CHECKLIST
========================================================= */

.about-checklist {
    margin: 0 0 30px;
}


.about-check-item {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 8px 0;
}


/* =========================================================
   CHECK ICON
========================================================= */

.about-check-icon {
    width: 20px;
    height: 20px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #52C06B26;
    color: #2E9A4C;

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

    display: flex;
    align-items: center;
    justify-content: center;
}


.about-check-text {
    font-size: 13.5px;
    font-weight: 600;

    color: #16211C;
}


/* =========================================================
   PHONE
========================================================= */

.about-phone {
    margin: 0 0 22px;
}


.about-phone-label {
    font-size: 13px;
    font-weight: 700;

    color: #16211C;

    margin: 0 0 6px;
}


.about-phone-number {
    font-family: 'Sora', sans-serif;

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

    color: #2E9A4C;

    margin: 0;
}


.about-phone-number a {
    color: #2E9A4C;
    text-decoration: none;

    transition: color 0.25s ease;
}


.about-phone-number a:hover {
    color: #C79D18;
}


/* =========================================================
   ACTIONS
========================================================= */

.about-actions {
    display: flex;
    align-items: center;

    gap: 20px;

    flex-wrap: wrap;
}


/* =========================================================
   CONTACT BUTTON
========================================================= */

.about-contact-btn {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    background: #ECC42E;
    color: #16211C;

    font-family: 'Inter', sans-serif;

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

    padding: 14px 28px;

    border-radius: 10px;

    text-decoration: none;

    box-shadow:
        0 10px 24px #ECC42E59;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


.about-contact-btn:hover {
    transform: translateY(-3px);

    background: #C79D18;

    box-shadow:
        0 14px 30px #ECC42E66;
}


.about-contact-btn:active {
    transform: translateY(-1px);
}


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

.about-small-image {
    width: 150px;
    height: 110px;

    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 12px 26px #16211C29;
}


.about-small-image img {
    display: block;

    width: 150px;
    height: 110px;

    object-fit: cover;

    transition:
        transform 0.5s cubic-bezier(.16, 1, .3, 1);
}


.about-small-image:hover img {
    transform: scale(1.05);
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 900px) {

    .about-container {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .about-main-image img {
        height: 500px;
    }


    .about-content {
        max-width: 700px;
        margin: 0 auto;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 600px) {

    .about-section {
        padding: 60px 20px 20px 20px;
    }


    .about-container {
        gap: 35px;
    }


    .about-main-image {
        border-radius: 16px;
    }


    .about-main-image img {
        height: 380px;
    }


    .about-title {
        font-size: 28px;

        margin-bottom: 18px;
    }


    .about-description {
        font-size: 14px;
        line-height: 1.7;

        margin-bottom: 22px;
    }


    .about-phone-number {
        font-size: 21px;
    }


    .about-actions {
        align-items: flex-start;

        gap: 18px;
    }


    .about-contact-btn {
        padding: 13px 23px;
    }


    .about-small-image {
        width: 130px;
        height: 95px;
    }


    .about-small-image img {
        width: 130px;
        height: 95px;
    }

}


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

@media (max-width: 400px) {

    .about-section {
        padding: 40px 16px 10px 16px;
    }


    .about-main-image img {
        height: 320px;
    }


    .about-title {
        font-size: 25px;
    }


    .about-actions {
        flex-direction: column;
        align-items: stretch;
    }


    .about-contact-btn {
        justify-content: center;
        /* width: 100%; */
    }


    .about-small-image {
        width: 100%;
        height: 150px;
    }


    .about-small-image img {
        width: 100%;
        height: 150px;
    }

}


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

.about-contact-btn:focus-visible,
.about-phone-number a:focus-visible {
    outline: 2px solid #2E9A4C;
    outline-offset: 3px;
}


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

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

    .about-main-image img,
    .about-small-image img,
    .about-contact-btn,
    .about-phone-number a {
        transition: none !important;
    }

}

/*=========================================================
    why us
==========================================================*/
 /*=========================================================
    DELIGHT DUCT CARE — WHY CHOOSE US
=========================================================*/

.why-choose-section * {
    box-sizing: border-box;
}

.why-choose-section {
    font-family: 'Inter', sans-serif;
    padding: 90px 24px 10px 24px;
}


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

.why-choose-header {
    max-width: 700px;
    margin: 0 auto 56px;
    text-align: center;
}

.why-choose-header h2 {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: clamp(28px, 4vw, 40px);
    color: #16211C;
    margin: 0 0 18px;
    letter-spacing: -0.01em;
}

.why-choose-header h2 span {
    color: #2E9A4C;
}

.why-choose-header p {
    font-size: 15.5px;
    line-height: 1.7;
    color: #4B564F;
    margin: 0;
}


/*=========================================================
    GRID
=========================================================*/

.why-choose-grid {
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;

    border: 1px solid #16211C17;
}


/*=========================================================
    CARDS
=========================================================*/

.why-card {
    background: #F2F6EF;
    padding: 48px 36px;
    text-align: center;

    border-right: 1px solid #16211C17;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.why-card:last-child {
    border-right: none;
}

.why-card:hover {
    background: #FFFFFF;
    transform: translateY(-4px);
}


/*=========================================================
    CARD ICON
=========================================================*/

.why-card__icon {
    width: 68px;
    height: 68px;

    margin: 0 auto 22px;

    border-radius: 50%;

    background: #16211C;
    color: #F2F6EF;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 24px;

    transition:
        transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        background 0.3s ease,
        color 0.3s ease;
}

.why-card:hover .why-card__icon {
    background: #52C06B;
    color: #16211C;

    transform:
        rotate(-6deg)
        scale(1.06);
}


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

.why-card h3 {
    font-family: 'Sora', sans-serif;
    font-weight: 700;

    font-size: 19px;

    color: #2E9A4C;

    margin: 0 0 14px;

    letter-spacing: -0.01em;
}


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

.why-card p {
    font-size: 13.5px;
    line-height: 1.75;

    color: #4B564F;

    margin: 0;
}


/*=========================================================
    CTA
=========================================================*/

.why-choose-cta {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 14px;

    margin-top: 48px;

    flex-wrap: wrap;
}


/*=========================================================
    CTA BASE
=========================================================*/

.wc-cta {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    padding: 13px 24px;

    border-radius: 8px;

    font-family: 'Inter', sans-serif;

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

    text-decoration: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


/*=========================================================
    PHONE CTA
=========================================================*/

.wc-cta--phone {
    background: #52C06B;
    color: #16211C;
}

.wc-cta--phone:hover {
    background: #2E9A4C;
    color: #FFFFFF;

    transform: translateY(-2px);

    box-shadow:
        0 10px 20px #2E9A4C40;
}


/*=========================================================
    DARK CTA
=========================================================*/

.wc-cta--dark {
    background: #16211C;
    color: #FFFFFF;
}

.wc-cta--dark:hover {
    background: #223228;

    transform: translateY(-2px);

    box-shadow:
        0 10px 20px #16211C40;
}


/*=========================================================
    RESPONSIVE
=========================================================*/

@media (max-width: 860px) {

    .why-choose-grid {
        grid-template-columns: 1fr;
    }

    .why-card {
        border-right: none;

        border-bottom: 1px solid #16211C17;
    }

    .why-card:last-child {
        border-bottom: none;
    }
}


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

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

    .why-card,
    .why-card__icon,
    .wc-cta {
        transition: none !important;
    }
}
/* gallery css */
/*=========================================================
    DDG SECTION
=========================================================*/

.ddg-section {
    font-family: 'Inter', sans-serif;
    padding: 88px 24px;
}


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

.ddg-head {
    max-width: 1080px;
    margin: 0 auto 48px;
}

.ddg-eyebrow {
    display: block;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #3FA6E0;
    margin-bottom: 12px;
}

.ddg-title {
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: clamp(26px, 3.2vw, 34px);
    color: #17233A;
    margin: 0 0 8px;
    letter-spacing: -.01em;
}

.ddg-sub {
    color: #6B7686;
    font-size: 15px;
    max-width: 440px;
    margin: 0;
    line-height: 1.5;
}


/*=========================================================
    GRID
=========================================================*/

.ddg-grid {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #E6E9EE;
    border: 1px solid #E6E9EE;
}

@media (max-width: 860px) {
    .ddg-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .ddg-grid {
        grid-template-columns: 1fr;
    }
}


/*=========================================================
    CARD
=========================================================*/

.ddg-card {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #FFFFFF;
    cursor: pointer;
}


/*=========================================================
    PHOTO
=========================================================*/

.ddg-photo {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        155deg,
        var(--photo-a) 0%,
        var(--photo-b) 100%
    );

    opacity: .9;
    transform: scale(1);

    transition:
        transform .7s cubic-bezier(.16, 1, .3, 1),
        opacity .5s ease;
}

.ddg-card:hover .ddg-photo,
.ddg-card:focus-visible .ddg-photo {
    transform: scale(1.06);
    opacity: 1;
}


/*=========================================================
    VENT MARK
=========================================================*/

.ddg-vent {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .22;
    transition: opacity .5s ease;
}

.ddg-vent svg {
    width: 34%;
    height: 34%;
}

.ddg-vent rect {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 3;
    stroke-linecap: round;
}

.ddg-card:hover .ddg-vent,
.ddg-card:focus-visible .ddg-vent {
    opacity: .12;
}


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

.ddg-index {
    position: absolute;
    left: 20px;
    top: 20px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #FFFFFFD9;
    letter-spacing: .02em;
}


/*=========================================================
    INFO
=========================================================*/

.ddg-info {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    transform: translateY(2px);
    transition:
        transform .4s cubic-bezier(.16, 1, .3, 1);
}

.ddg-card:hover .ddg-info,
.ddg-card:focus-visible .ddg-info {
    transform: translateY(0);
}


/*=========================================================
    PLACE
=========================================================*/

.ddg-place {
    font-weight: 600;
    color: #FFFFFF;
    font-size: 16px;
    margin: 0 0 3px;
    letter-spacing: -.01em;
}


/*=========================================================
    TYPE
=========================================================*/

.ddg-type {
    font-size: 12px;
    color: #FFFFFFB3;
    margin: 0;
    transition: opacity .35s ease;
}


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

.ddg-desc {
    font-size: 12.5px;
    color: #FFFFFFE0;
    line-height: 1.5;
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    overflow: hidden;

    transition:
        max-height .4s cubic-bezier(.16, 1, .3, 1),
        opacity .3s ease .05s,
        margin-top .4s ease;
}

.ddg-card:hover .ddg-desc,
.ddg-card:focus-visible .ddg-desc {
    max-height: 60px;
    opacity: 1;
    margin-top: 8px;
}


/*=========================================================
    RULE
=========================================================*/

.ddg-rule {
    width: 22px;
    height: 1px;
    background: #FFFFFF;
    opacity: .5;
    margin-top: 14px;
    transform: scaleX(0);
    transform-origin: left;

    transition:
        transform .45s cubic-bezier(.16, 1, .3, 1) .05s;
}

.ddg-card:hover .ddg-rule,
.ddg-card:focus-visible .ddg-rule {
    transform: scaleX(1);
}


/*=========================================================
    SCRIM
=========================================================*/

.ddg-scrim {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            #0A101C8C 0%,
            #0A101C00 46%
        );

    opacity: .75;
    transition: opacity .4s ease;
}

.ddg-card:hover .ddg-scrim,
.ddg-card:focus-visible .ddg-scrim {
    opacity: 1;
}


/*=========================================================
    FOCUS
=========================================================*/

.ddg-card:focus-visible {
    outline: 2px solid #3FA6E0;
    outline-offset: -2px;
}


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

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

    .ddg-photo,
    .ddg-vent,
    .ddg-info,
    .ddg-desc,
    .ddg-rule,
    .ddg-scrim {
        transition: none !important;
    }
}
.ddg-foot{
    text-decoration: underline;
    margin: 50px 0 0 0 ;
    display: block;    
    text-align: center;
    text-transform: capitalize;
  }

/* ============================================================
   TESTIMONIALS — token system (matched to the duct-vent logo)
   green  #4CB56B   duct lines / motion accents
   gold   #E1B33C   stars, quote marks, CTA
   ink    #16201C   headings on light surfaces
============================================================ */
.testimonial-section-live{
    --ts-green:#4CB56B;
    --ts-green-dark:#2E8A4E;
    --ts-gold:#E1B33C;
    --ts-gold-dark:#C4952A;
    --ts-ink:#16201C;
    --ts-muted:#6B7570;
    --ts-card:#FFFFFF;
    --ts-border:#E7EBE6;
    position:relative;
    padding:24px;
    /* No blobs, no particle canvas — whatever background the page
       already sets behind this section shows through as-is. */
}

.ts-heading{text-align:center;max-width:640px;margin:0 auto 48px;}
.ts-eyebrow{
    display:inline-block;
    font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ts-green-dark);
    background:rgba(76,181,107,.1);
    padding:6px 14px;border-radius:999px;
    margin-bottom:14px;
}
.ts-heading h2{
    font-size:clamp(26px,4vw,38px);
    font-weight:700;line-height:1.2;margin:0;color:var(--ts-ink);
}
.ts-heading h2 span{color:var(--ts-gold-dark);}

/* ---------------- Cards ---------------- */

.ts-marquee-viewport{overflow:hidden;}
.ts-marquee-track{display:flex;gap:22px;}

.testimonial-card{
    position:relative;
    background:var(--ts-card);
    border:1px solid var(--ts-border);
    border-radius:18px;
    padding:28px 26px 24px;
    width:300px;
    flex:0 0 auto;
    box-shadow:0 1px 2px rgba(22,32,28,.04);
    display:flex;
    flex-direction:column;
    /* fixed rhythm regardless of review length */
    min-height:280px;
}
.ts-quote-mark{
    font-family:Georgia,serif;
    font-size:46px;line-height:1;
    color:var(--ts-gold);
    opacity:.55;
    margin-bottom:2px;
}
.ts-review-text{
    font-size:15px;line-height:1.6;color:var(--ts-ink);
    margin:0 0 4px;
    /* clamp long reviews instead of letting the card grow */
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.ts-readmore{
    align-self:flex-start;
    background:none;border:none;cursor:pointer;
    font-size:13px;font-weight:700;color:var(--ts-green-dark);
    padding:0;margin-bottom:16px;
    display:flex;align-items:center;gap:6px;
    transition:gap .15s ease,color .15s ease;
}
.ts-readmore i{font-size:11px;transition:transform .15s ease;}
.ts-readmore:hover{color:var(--ts-gold-dark);gap:9px;}
.ts-readmore:hover i{transform:translateX(2px);}
.ts-readmore[hidden]{display:none;}

.ts-reviewer{display:flex;align-items:center;gap:12px;margin-top:auto;}
.ts-avatar{
    width:42px;height:42px;border-radius:50%;
    background:var(--ts-ink);color:var(--ts-gold);
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:14px;flex-shrink:0;
}
.ts-reviewer-name{font-weight:700;font-size:14.5px;color:var(--ts-ink);}
.ts-reviewer-role{font-size:12.5px;color:var(--ts-muted);}
.ts-stars{margin-top:10px;color:var(--ts-gold);letter-spacing:2px;font-size:14px;}

/* ---------------- Nav + CTA ---------------- */

.ts-nav{display:flex;justify-content:center;gap:12px;margin-top:32px;}
.ts-nav-btn{
    width:42px;height:42px;border-radius:50%;
    border:1px solid var(--ts-border);background:var(--ts-card);
    color:var(--ts-ink);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.ts-nav-btn:hover{background:var(--ts-green);border-color:var(--ts-green);color:#fff;}

.ts-empty-state{text-align:center;color:var(--ts-muted);font-size:15px;}

.ts-cta{display:flex;justify-content:center;margin-top:44px;}
.ts-cta button{
    display:flex;align-items:center;gap:9px;
    background:var(--ts-gold);color:var(--ts-ink);
    font-weight:700;font-size:14.5px;
    padding:13px 26px;border-radius:999px;border:none;cursor:pointer;
    transition:background .15s ease,transform .1s ease;
}
.ts-cta button:hover{background:var(--ts-gold-dark);}
.ts-cta button:active{transform:scale(.97);}

/* ---------------- Full review modal ---------------- */

.ts-modal-backdrop{
    position:fixed;inset:0;
    background:rgba(15,22,18,.55);
    backdrop-filter:blur(3px);
    display:flex;align-items:center;justify-content:center;
    padding:24px;
    opacity:0;pointer-events:none;
    transition:opacity .2s ease;
    z-index:1000;
}
.ts-modal-backdrop.is-open{opacity:1;pointer-events:auto;}

.ts-modal{
    position:relative;
    background:var(--ts-card);
    border-radius:22px;
    max-width:520px;width:100%;
    max-height:82vh;overflow-y:auto;
    padding:40px 36px 32px;
    box-shadow:0 24px 60px rgba(15,22,18,.28);
    transform:translateY(14px) scale(.97);
    opacity:0;
    transition:transform .22s ease,opacity .22s ease;
}
.ts-modal-backdrop.is-open .ts-modal{transform:translateY(0) scale(1);opacity:1;}

.ts-modal-close{
    position:absolute;top:18px;right:18px;
    width:34px;height:34px;border-radius:50%;
    background:var(--ts-border);border:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    color:var(--ts-ink);font-size:14px;
    transition:background .15s ease;
}
.ts-modal-close:hover{background:var(--ts-gold);}

.ts-modal-vent{
    display:block;width:50px;color:var(--ts-green);opacity:.5;margin-bottom:12px;
}
.ts-modal-vent svg{width:100%;height:auto;}

.ts-modal-stars{color:var(--ts-gold);letter-spacing:3px;font-size:17px;margin-bottom:14px;}
.ts-modal-text{
    font-size:16.5px;line-height:1.7;color:var(--ts-ink);
    margin:0 0 26px;
    white-space:pre-line;
}
.ts-modal-reviewer{display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid var(--ts-border);}
.ts-modal-avatar{
    width:50px;height:50px;border-radius:50%;
    background:var(--ts-ink);color:var(--ts-gold);
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:16px;flex-shrink:0;
}
.ts-modal-name{font-weight:700;font-size:15.5px;color:var(--ts-ink);}
.ts-modal-role{font-size:13px;color:var(--ts-muted);margin-top:1px;}
.ts-modal-date{font-size:12px;color:var(--ts-muted);margin-top:3px;}

@media (max-width:560px){
    .testimonial-card{width:82vw;}
    .ts-modal{padding:32px 22px 26px;}
}

@media (prefers-reduced-motion:reduce){
    .ts-modal-backdrop,.ts-modal,.ts-readmore,.ts-readmore i{transition:none;}
}
  /* mini contact */
  /*=========================================================
    DELIGHT DUCT CARE — GET AN ESTIMATE / CONTACT SECTION
=========================================================*/

.contact-section * {
    box-sizing: border-box;
}

.contact-section {
    font-family: 'Inter', sans-serif;
    padding: 100px 24px;
}

.contact-container {
    max-width: 1220px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
    align-items: center;
}

/*=========================================================
    LEFT — INFO
=========================================================*/

.contact-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2E9A4C;
    background: #F2F6EF;
    padding: 7px 16px;
    border-radius: 30px;
    margin-bottom: 20px;
}

.contact-eyebrow i {
    color: #C79D18;
    font-size: 11px;
}

.contact-info h2 {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: clamp(30px, 3.6vw, 42px);
    line-height: 1.15;
    color: #16211C;
    margin: 0 0 18px;
    letter-spacing: -0.01em;
}

.contact-info h2 span {
    color: #2E9A4C;
}

.contact-info > p {
    font-size: 15px;
    line-height: 1.75;
    color: #4B564F;
    margin: 0 0 30px;
    max-width: 54ch;
}

.contact-checklist {
    list-style: none;
    margin: 0 0 34px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
}

.contact-checklist li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 13.5px;
    color: #16211C;
}

.contact-checklist i {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(82, 192, 107, 0.14);
    color: #2E9A4C;
    font-size: 10px;
}

.contact-phone-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #16211C;
    background: #ECC42E;
    padding: 15px 26px;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(236, 196, 46, 0.35);
    transition:
        transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.contact-phone-cta i {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(22, 33, 28, 0.12);
    font-size: 14px;
    transition: transform 0.3s ease;
}

.contact-phone-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(236, 196, 46, 0.45);
}

.contact-phone-cta:hover i {
    transform: rotate(-12deg) scale(1.08);
}

/*=========================================================
    RIGHT — PHOTO PANEL + FLOATING CARD
=========================================================*/

.contact-visual {
    position: relative;
    max-width: 480px;

}

.contact-visual__bg {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    overflow: hidden;

    /* swap this for a real jobsite photo:
       background-image: url('assets/gallery/contact-hero.jpg');
       background-size: cover;
       background-position: center; */

    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(236, 196, 46, 0.16) 0%,
            transparent 45%
        ),
        radial-gradient(
            circle at 75% 70%,
            rgba(82, 192, 107, 0.22) 0%,
            transparent 50%
        ),
        linear-gradient(
            150deg,
            #1B2A20 0%,
            #16211C 65%
        );
}

.contact-visual__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(
            rgba(255, 255, 255, 0.05) 1.5px,
            transparent 1.5px
        );
    background-size: 22px 22px;
    opacity: 0.6;
}

.contact-visual__bg .ring {
    position: absolute;
    border: 2px solid rgba(82, 192, 107, 0.18);
    border-radius: 50%;
}

.contact-visual__bg .ring--1 {
    width: 260px;
    height: 260px;
    right: -60px;
    bottom: -70px;
}

.contact-visual__bg .ring--2 {
    width: 160px;
    height: 160px;
    right: 40px;
    bottom: 10px;
    border-color: rgba(236, 196, 46, 0.22);
}

.contact-card {
    position: relative;
    z-index: 1;
    margin: 48px -20px 48px 48px;
    background:
        linear-gradient(
            155deg,
            #52C06B 0%,
            #2E9A4C 100%
        );
    border-radius: 20px;
    padding: 38px 34px;
    box-shadow: 0 30px 60px rgba(22, 33, 28, 0.35);
}

.contact-card h3 {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 23px;
    line-height: 1.3;
    color: #fff;
    margin: 0 0 24px;
}

.contact-field {
    margin-bottom: 14px;
}

.contact-field input,
.contact-field textarea {
    width: 100%;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 13px 15px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    color: #16211C;
    resize: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.contact-field textarea {
    min-height: 110px;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: rgba(22, 33, 28, 0.4);
}

.contact-field input:focus,
.contact-field textarea:focus {
    outline: none;
    border-color: #ECC42E;
    box-shadow: 0 0 0 4px rgba(236, 196, 46, 0.2);
}

.contact-submit {
    position: relative;
    width: 100%;
    border: none;
    border-radius: 10px;
    padding: 15px 20px;
    margin-top: 6px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
    background: #16211C;
    cursor: pointer;
    overflow: hidden;
    z-index: 0;
    transition:
        color 0.3s ease,
        transform 0.15s ease;
}

.contact-submit::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            #C79D18,
            #ECC42E
        );
    transform: translateX(-101%);
    transition:
        transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: -1;
}

.contact-submit:hover::before {
    transform: translateX(0);
}

.contact-submit:hover {
    color: #16211C;
}

.contact-submit:active {
    transform: scale(0.98);
}

.contact-submit .default-label,
.contact-submit .success-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.contact-submit .success-label {
    display: none;
}

.contact-submit.is-success .default-label {
    display: none;
}

.contact-submit.is-success .success-label {
    display: inline-flex;
}

.contact-submit.is-success {
    background: #2E9A4C;
}
.quick-quote-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.quick-quote-error {
    display: none;
    font-size: 13px;
    font-weight: 600;
    color: #e42412;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
}

.quick-quote-error.show { display: block; }

.contact-field input.quick-quote-invalid,
.contact-field textarea.quick-quote-invalid {
    border-color: #e02c1b !important;
    box-shadow: 0 0 0 3px rgba(214, 73, 59, 0.14);
}

.contact-submit:disabled {
    opacity: 0.65;
    cursor: default;
}
/*=========================================================
    RESPONSIVE
=========================================================*/

@media (max-width: 960px) {

    .contact-container {
        grid-template-columns: 1fr;
    }

    .contact-checklist {
        grid-template-columns: 1fr 1fr;
    }

    .contact-visual__bg {
        display: none;
    }

    .contact-card {
        margin: 0;
        background:
            linear-gradient(
                155deg,
                #52C06B 0%,
                #2E9A4C 100%
            );
    }
}

@media (max-width: 480px) {

    .contact-checklist {
        grid-template-columns: 1fr;
    }

    .contact-card {
        padding: 28px 22px;
    }
}

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

.contact-phone-cta:focus-visible,
.contact-submit:focus-visible,
.contact-field input:focus-visible,
.contact-field textarea:focus-visible {
    outline: 2px solid #16211C;
    outline-offset: 2px;
}

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

    .contact-phone-cta,
    .contact-phone-cta i,
    .contact-submit,
    .contact-submit::before {
        transition: none !important;
    }
}

.ba-empty-state{
  text-align:center;
  color:#8a8a72;
  font-size:14.5px;
  padding:40px 20px;
}







/* T    &    C */



/* 
#topStrip{

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:14px 24px;

    background:#1B2430;

}

.top-strip-logo{

    display:flex;
    align-items:center;
    gap:10px;

    color:#FFFFFF;
    font-family:'Sora', sans-serif;
    font-weight:700;
    font-size:15px;

    text-decoration:none;

}

.top-strip-logo img{ width:28px; height:28px; object-fit:contain; }

.top-strip-cta{

    padding:9px 18px;
    border-radius:999px;

    background:#E8C22A;
    color:#1B2430;

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

    text-decoration:none;

    transition:background .25s ease, transform .25s ease;

}

.top-strip-cta:hover{ background:#F4D466; transform:translateY(-1px); } */

/*=========================================================
    BANNER
=========================================================*/

.legal-banner{

    position:relative;
    overflow:hidden;

    padding:180px 0 56px;

    background:#1B2430;

}

.legal-banner-shape{

    position:absolute;
    top:-90px;
    right:-120px;

    width:340px;
    height:340px;

    background:rgba(232,194,42,.10);

    border-radius:0 999px 999px 0;

}

.legal-container{

    position:relative;
    z-index:2;

    max-width:1180px;
    margin:0 auto;
    padding:0 24px;

}

.legal-banner-icon{

    width:52px;
    height:52px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:14px;

    background:rgba(79,191,99,.14);
    border:1px solid rgba(79,191,99,.3);

    margin-bottom:20px;

}

.legal-banner-icon svg{ width:26px; height:26px; }

.legal-banner h1{

    color:#FFFFFF;
    font-size:32px;
    margin-bottom:12px;

}

@media (min-width:768px){ .legal-banner h1{ font-size:40px; } }

.legal-updated{

    display:inline-flex;
    align-items:center;
    gap:8px;

    font-size:13px;
    font-weight:600;
    color:#E8C22A;

    letter-spacing:.3px;

}

.legal-intro{

    margin-top:18px;
    max-width:680px;

    font-size:15px;
    color:rgba(255,255,255,.62);

}

/*=========================================================
    LAYOUT — sidebar + content
=========================================================*/

.legal-body{

    padding:56px 0 96px;

}

.legal-layout{

    display:grid;
    grid-template-columns:1fr;
    gap:40px;

}

@media (min-width:960px){
    .legal-layout{ grid-template-columns:260px 1fr; gap:64px; align-items:start; }
}

/*=========================================================
    TOC SIDEBAR
=========================================================*/

.toc-wrap{

    position:relative;

}

@media (min-width:960px){

    .toc-wrap{

        position:sticky;
        top:32px;

    }

}

.toc-label{

    font-size:12px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:#6B7280;

    margin-bottom:14px;

}

.toc-list{

    list-style:none;
    margin:0;
    padding:0;

    display:flex;
    flex-direction:column;
    gap:2px;

    border-left:2px solid #ECEDE9;

}

.toc-list a{

    display:block;

    padding:9px 0 9px 16px;
    margin-left:-2px;

    border-left:2px solid transparent;

    font-size:13.5px;
    font-weight:500;
    color:#6B7280;
    text-decoration:none;

    transition:color .25s ease, border-color .25s ease, transform .25s ease;

}

.toc-list a:hover{

    color:#1B2430;
    transform:translateX(3px);

}

.toc-list a.active{

    color:#2F9A46;
    font-weight:700;

    border-left-color:#4FBF63;

}

.toc-mobile-toggle{

    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;

    padding:14px 18px;
    border-radius:12px;

    background:#FFFFFF;
    border:1px solid #ECEDE9;

    font-family:'Sora', sans-serif;
    font-weight:700;
    font-size:14px;
    color:#1B2430;

    cursor:pointer;

}

.toc-mobile-toggle svg{

    width:16px; height:16px;
    transition:transform .3s ease;

}

.toc-mobile-toggle.open svg{ transform:rotate(180deg); }

.toc-mobile-body{

    max-height:0;
    overflow:hidden;

    transition:max-height .35s ease;

}

.toc-mobile-body.open{ max-height:600px; margin-top:10px; }

@media (min-width:960px){

    .toc-mobile-toggle{ display:none; }
    .toc-mobile-body{ max-height:none !important; margin-top:0; overflow:visible; }

}

/*=========================================================
    CONTENT
=========================================================*/
.ddc-gallery-section {
    position: relative;
    padding:24px;
    overflow: hidden;
}
.ddc-gallery-section .dg-head {
    max-width: 640px;
    margin: 0 auto 40px;
    text-align: center;
}
.ddc-gallery-section .dg-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #b7a43c;
    margin-bottom: 10px;
}
.ddc-gallery-section .dg-head h2 {
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.2;
    margin: 0 0 12px;
    color: #17233A;
}
.ddc-gallery-section .dg-head h2 span {
    color: #b7a43c;
}
.ddc-gallery-section .dg-head p {
    color: #5b6472;
    font-size: 15.5px;
    line-height: 1.6;
    margin: 0;
}
.ddc-gallery-section .dg-viewport {
    max-width: 1240px;
    margin: 0 auto;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 6px;
}
.ddc-gallery-section .dg-viewport::-webkit-scrollbar { display: none; }
.ddc-gallery-section .dg-grid {
    display: grid;
    grid-template-rows: repeat(2, 200px);
    grid-auto-flow: column;
    grid-auto-columns: 260px;
    gap: 16px;
    width: max-content;
}
.ddc-gallery-section .dg-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #eef2f6;
    cursor: pointer;
    isolation: isolate;
}
.ddc-gallery-section .dg-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.ddc-gallery-section .dg-card:hover img,
.ddc-gallery-section .dg-card:focus-within img {
    transform: scale(1.08);
}
.ddc-gallery-section .dg-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
    background: linear-gradient(180deg, rgba(23,35,58,0) 40%, rgba(23,35,58,.88) 100%);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .35s ease, transform .35s ease;
}
.ddc-gallery-section .dg-card:hover .dg-overlay,
.ddc-gallery-section .dg-card:focus-within .dg-overlay {
    opacity: 1;
    transform: translateY(0);
}
.ddc-gallery-section .dg-title {
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 4px;
}
.ddc-gallery-section .dg-date {
    color: rgba(255,255,255,.8);
    font-size: 12.5px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ddc-gallery-section .dg-date::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4A90C4;
    display: inline-block;
}
.ddc-gallery-section .dg-nav {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 26px;
}
.ddc-gallery-section .dg-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #d9dfe6;
    background: #fff;
    color: #17233A;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ddc-gallery-section .dg-nav-btn:hover {
    background: #4A90C4;
    border-color: #4A90C4;
    color: #fff;
}
.ddc-gallery-section .dg-empty {
    text-align: center;
    color: #7c8593;
    font-size: 15px;
    padding: 20px 0;
}

/* Lightbox */
.dg-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(10,14,22,.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 24px;
}
.dg-lightbox.is-open { display: flex; }
.dg-lightbox figure {
    margin: 0;
    max-width: 900px;
    width: 100%;
    text-align: center;
}
.dg-lightbox img {
    max-width: 100%;
    max-height: 76vh;
    border-radius: 10px;
    display: block;
    margin: 0 auto 14px;
}
.dg-lightbox figcaption {
    color: #fff;
}
.dg-lightbox figcaption .dg-lb-title {
    font-weight: 700;
    font-size: 16px;
    margin: 0 0 4px;
}
.dg-lightbox figcaption .dg-lb-date {
    color: rgba(255,255,255,.7);
    font-size: 13px;
    margin: 0;
}
.dg-lightbox figcaption .dg-lb-desc {
    color: rgba(255,255,255,.85);
    font-size: 14px;
    line-height: 1.6;
    margin: 10px auto 0;
    max-width: 640px;
}
.dg-lightbox-close {
    position: absolute;
    top: 22px;
    right: 26px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.3);
    background: transparent;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
}
.dg-lightbox-close:hover { background: rgba(255,255,255,.12); }

@media (max-width: 600px) {
    .ddc-gallery-section { padding: 56px 16px; }
    .ddc-gallery-section .dg-grid { grid-template-rows: repeat(2, 150px); grid-auto-columns: 190px; }
}
/* T&C and Policy */

.legal-content section{

    padding-bottom:36px;
    margin-bottom:36px;

    border-bottom:1px solid #F0F1EE;

}

.legal-content section:last-child{

    border-bottom:none;
    margin-bottom:0;
    padding-bottom:0;

}

.legal-content h2{

    font-size:19px;

    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:14px;
    scroll-margin-top:24px;

}

.section-num{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:26px;
    height:26px;
    flex-shrink:0;

    border-radius:8px;

    background:#E8F7EC;
    color:#2F9A46;

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

}

.in-short{

    display:flex;
    gap:10px;

    padding:14px 16px;
    border-radius:12px;

    background:#FBF3D6;
    border:1px solid #F1E1A5;

    font-size:13.5px;
    color:#5C4C0E;

    margin-bottom:18px;

}

.in-short strong{ color:#1B2430; }

.legal-content h3{

    font-size:15px;
    margin:20px 0 8px;
    color:#1B2430;

}

.legal-content p{ font-size:14.5px; margin:0 0 14px; }

.legal-content p:last-child{ margin-bottom:0; }

.legal-content ul{

    margin:0 0 14px;
    padding-left:20px;

    font-size:14.5px;
    color:#4B5560;

    display:flex;
    flex-direction:column;
    gap:6px;

}

.legal-content ul:last-child{ margin-bottom:0; }

.legal-content strong{ color:#1B2430; }

.contact-card{

    /*display:flex;*/
    flex-wrap:wrap;
    gap:24px;
    justify-content:space-between;
    align-items:center;

    padding:22px 24px;
    border-radius:16px;

    background:#2e9a4c;

}

.contact-card-text{ font-size:14px; color:#374151; }

.contact-card-text strong{ display:block; color:#1B2430; font-family:'Sora',sans-serif; font-size:15px; margin-bottom:4px; }

.btn-gold{

    display:inline-flex;
    align-items:center;

    padding:12px 22px;
    border-radius:999px;

    background:#E8C22A;
    color:#1B2430;

    font-size:13.5px;
    font-weight:700;
    text-decoration:none;

    transition:background .25s ease, transform .25s ease;

    flex-shrink:0;

}

.btn-gold:hover{ background:#F4D466; transform:translateY(-2px); }

/*=========================================================
    SCROLL REVEAL (light touch — content-first page)
=========================================================*/

.reveal{

    opacity:0;
    transform:translateY(18px);

    transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);

}

.reveal.in-view{ opacity:1; transform:translateY(0); }

/*=========================================================
    BACK TO TOP
=========================================================*/

.back-to-top{

    position:fixed;
    
    right: 50%;
    
    bottom:20px;
    z-index:60;

    width:44px;
    height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#1B2430;
    color:#FFFFFF;
    border:none;
    cursor:pointer;

    opacity:0;
    visibility:hidden;
    transform:translateY(10px);

    transition:opacity .3s ease, transform .3s ease, visibility .3s ease, background .25s ease;

}

.back-to-top.visible{

    opacity:1;
    visibility:visible;
    transform:translateY(0);

}

.back-to-top:hover{ background:#2F9A46; }

.back-to-top svg{ width:18px; height:18px; }