/* Choco Syria | Organized stylesheet

   Each section includes its own responsive breakpoints.

   Header and Hero values retained from supplied source. */



/* =================================================================
   BASE / SHARED
==================================================================== */


:root {
    --brand:#7c0703;
    --brand-2:#a70f09;
    --ink:#221d1b;
    --muted:#726966;
    --soft:#f8f6f5;
    --soft-brand:#fbf2f1;
    --line:#ece6e3;
    --white:#ffffff;
    --shadow:0 24px 60px rgba(60,26,20,.10);
    --radius:30px;
    --container:1240px;
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {
    margin:0;
    font-family:"Tajawal",system-ui,-apple-system,sans-serif;
    background:#fff;
    color:var(--ink);
    line-height:1.7;
    overflow-x:hidden;
}

img {
    display:block;
    max-width:100%;
}

a {
    text-decoration:none;
    color:inherit;
}

.container {
    width:min(calc(100% - 40px),var(--container));
    margin-inline:auto;
}

.eyebrow {
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    color:var(--brand);
    font-weight:800;
    font-size:.85rem;
    letter-spacing:.02em;
}

.eyebrow::before {
    content:"";
    width:28px;
    height:2px;
    background:var(--brand);
    border-radius:10px;
}

.section-title {
    font-size:clamp(2rem,4vw,3.5rem);
    line-height:1.18;
    margin:14px 0 16px;
    font-weight:800;
    letter-spacing:-.03em;
}

.section-lead {
    color:var(--muted);
    font-size:1.08rem;
    max-width:680px;
    margin:0;
}

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    padding:10px 24px;
    border-radius:999px;
    font-weight:800;
    border:1px solid transparent;
    transition:.25s ease;
    cursor:pointer;
}

.btn-primary {
    background:var(--brand);
    color:#fff;
    box-shadow:0 12px 28px rgba(124,7,3,.18);
}

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

.btn-ghost {
    background:#fff;
    border-color:var(--line);
    color:var(--ink);
}

.btn-ghost:hover {
    border-color:#d7cbc6;
    transform:translateY(-2px);
}


@media (max-width:640px) {
  .container {
      width:min(calc(100% - 28px),var(--container));
  }
}



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


.site-header {
    position:absolute;
    top:0;
    right:0;
    left:0;
    z-index:100;
    background: #ffffff30;
    border-bottom:1px solid rgba(255,255,255,.15);
    transition:

            background .35s ease,

            border-color .35s ease,

            box-shadow .35s ease;
}

.site-header.is-scrolled {
    position:fixed;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
    box-shadow:0 8px 30px rgba(35,20,15,.06);
}

.nav-wrap {
    height:75px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    transition:height .3s ease;
}

.site-header.is-scrolled .nav-wrap {
    height:78px;
}

.brand {
    display:flex;
    align-items:center;
    gap:12px;
    min-width:max-content;
    position:relative;
    z-index:2;
}

.brand img {
    width:100px;
    height:66px;
    object-fit:contain;
    transition:.3s ease;
}

.site-header.is-scrolled .brand img {
    filter:none;
    width:88px;
    height:58px;
}

.nav-links {
    display:flex;
    align-items:center;
    gap:8px;
}

.nav-links a {
    position:relative;
    padding:10px 14px;
    color:#fff;
    font-weight:700;
    font-size:.96rem;
    border-radius:999px;
    transition:.25s ease;
}

.nav-links a:hover {
    background:rgba(255,255,255,.12);
}

.site-header.is-scrolled .nav-links a {
    color:#4b4240;
}

.site-header.is-scrolled .nav-links a:hover {
    color:var(--brand);
    background:var(--soft-brand);
}

.nav-actions {
    display:flex;
    align-items:center;
    gap:10px;
}

.site-header:not(.is-scrolled) .nav-actions .btn-primary {
    background:#fff;
    color:var(--brand);
    box-shadow:none;
}

.site-header:not(.is-scrolled) .nav-actions .btn-primary:hover {
    background:#f8f5f3;
}

.menu-btn {
    display:none;
    border:1px solid rgba(255,255,255,.3);
    background:rgba(255,255,255,.08);
    color:#fff;
    width:44px;
    height:44px;
    border-radius:14px;
    font-size:1.25rem;
}

.site-header.is-scrolled .menu-btn {
    border-color:var(--line);
    background:#fff;
    color:var(--ink);
}


@media (max-width:980px) {
  .nav-links,
  .nav-actions .btn {
      display:none;
  }

  .menu-btn {
      display:grid;
      place-items:center;
  }

  .nav-links,
  .nav-actions .btn {
      display:none;
  }

  .menu-btn {
      display:grid;
      place-items:center;
  }
}



@media (max-width:640px) {
  .nav-wrap {
      height:78px;
  }

  .site-header.is-scrolled .nav-wrap {
      height:70px;
  }

  .brand img {
      width:82px;
      height:54px;
  }

  .site-header.is-scrolled .brand img {
      width:76px;
      height:50px;
  }

  .nav-wrap {
      height:74px;
  }

  .brand img {
      width:76px;
      height:50px;
  }
}



/* =================================================================
   HERO SLIDER
==================================================================== */


.hero-slider {
    position:relative;
    height:min(820px, 100vh);
    min-height:680px;
    overflow:hidden;
    background:#160b09;
    color:#fff;
}

.hero-slide {
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition:

            opacity 1.1s ease,

            visibility 1.1s ease;
}

.hero-slide.active {
    opacity:1;
    visibility:visible;
    z-index:2;
}

.hero-bg {
    position:absolute;
    inset:-20px;
    background-size:cover;
    background-position:center;
    transform:scale(1.02);
    transition:transform 8s ease;
}

.hero-slide.active .hero-bg {
    transform:scale(1.08);
}

.hero-slide::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:

            linear-gradient(

                90deg,

                rgba(15,5,4,.18) 0%,

                rgba(15,5,4,.38) 40%,

                rgba(15,5,4,.82) 100%

            );
}

.hero-slide::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:

            linear-gradient(

                180deg,

                rgba(10,4,3,.28) 0%,

                transparent 35%,

                rgba(10,4,3,.32) 100%

            );
}

.hero-inner {
    position:relative;
    z-index:3;
    height:100%;
    display:flex;
    align-items:center;
}

.hero-content {
    max-width:720px;
    padding-top:60px;
}

.hero-eyebrow {
    display:flex;
    align-items:center;
    gap:14px;
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.18em;
    color:#f0cbc8;
    opacity:0;
    transform:translateY(20px);
}

.hero-eyebrow::before {
    content:"";
    width:42px;
    height:2px;
    background:#fff;
    opacity:.75;
}

.hero-title {
    font-size:clamp(3.6rem,7vw,5rem);
    line-height:1.2;
    letter-spacing:-.055em;
    margin:22px 0 26px;
    font-weight:800;
    max-width:800px;
    opacity:0;
    transform:translateY(30px);
}

.hero-title span {
    color:#f3c5c2;
}

.hero-description {
    max-width:620px;
    margin:0 0 34px;
    font-size:1.17rem;
    line-height:1.9;
    color:rgba(255,255,255,.78);
    opacity:0;
    transform:translateY(25px);
}

.hero-buttons {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    opacity:0;
    transform:translateY(25px);
}

.hero-slide.active .hero-eyebrow {
    animation:heroFadeUp .7s .25s forwards;
}

.hero-slide.active .hero-title {
    animation:heroFadeUp .8s .38s forwards;
}

.hero-slide.active .hero-description {
    animation:heroFadeUp .8s .52s forwards;
}

.hero-slide.active .hero-buttons {
    animation:heroFadeUp .8s .66s forwards;
}

@keyframes heroFadeUp{

        to{

            opacity:1;

            transform:translateY(0);

        }

    }

.hero-slider .btn-primary {
    background:var(--brand);
    color:#fff;
    border-color:var(--brand);
}

.hero-slider .btn-primary:hover {
    background:#940b06;
    border-color:#940b06;
}

.hero-slider .btn-outline-light {
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.4);
    color:#fff;
    backdrop-filter:blur(5px);
}

.hero-slider .btn-outline-light:hover {
    background:#fff;
    color:var(--ink);
}

.hero-navigation {
    position:absolute;
    z-index:10;
    right:0;
    left:0;
    bottom:34px;
}

.hero-navigation-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.hero-products-nav {
    display:flex;
    align-items:center;
    gap:28px;
}

.hero-nav-item {
    position:relative;
    border:0;
    padding:10px 0 14px;
    background:transparent;
    color:rgba(255,255,255,.55);
    font-family:inherit;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.08em;
    cursor:pointer;
    transition:.3s ease;
}

.hero-nav-item:hover {
    color:#fff;
}

.hero-nav-item.active {
    color:#fff;
}

.hero-nav-item::after {
    content:"";
    position:absolute;
    right:0;
    bottom:0;
    width:0;
    height:2px;
    background:#fff;
    transition:width .4s ease;
}

.hero-nav-item.active::after {
    width:100%;
}

.hero-counter {
    display:flex;
    align-items:center;
    gap:14px;
    direction:ltr;
    color:#fff;
}

.hero-current {
    font-size:1.3rem;
    font-weight:800;
}

.hero-counter-line {
    width:65px;
    height:1px;
    background:rgba(255,255,255,.4);
}

.hero-total {
    color:rgba(255,255,255,.55);
}

.hero-arrows {
    display:flex;
    gap:8px;
}

.hero-arrow {
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.28);
    background:rgba(255,255,255,.06);
    color:#fff;
    cursor:pointer;
    font-size:1rem;
    transition:.25s ease;
    backdrop-filter:blur(6px);
}

.hero-arrow:hover {
    background:#fff;
    color:var(--brand);
    border-color:#fff;
}


@media (max-width:980px) {
  .hero-slider {
      min-height:650px;
      height:90vh;
  }

  .hero-title {
      font-size:clamp(3.3rem,10vw,5.2rem);
  }

  .hero-products-nav {
      gap:18px;
  }
}



@media (max-width:640px) {
  .hero-slider {
      height:82vh;
      min-height:620px;
  }

  .hero-slide::before {
      background:
  
                  linear-gradient(
  
                      180deg,
  
                      rgba(12,5,4,.25) 0%,
  
                      rgba(12,5,4,.22) 25%,
  
                      rgba(12,5,4,.80) 100%
  
                  );
  }

  .hero-inner {
      align-items:flex-end;
      padding-bottom:145px;
  }

  .hero-content {
      padding-top:0;
  }

  .hero-eyebrow {
      font-size:.72rem;
      letter-spacing:.1em;
  }

  .hero-title {
      font-size:3rem;
      line-height:1.04;
      margin:16px 0 18px;
  }

  .hero-description {
      font-size:1rem;
      line-height:1.75;
      margin-bottom:24px;
  }

  .hero-buttons .btn {
      padding:12px 19px;
      font-size:.9rem;
  }

  .hero-navigation {
      bottom:22px;
  }

  .hero-products-nav {
      display:none;
  }

  .hero-navigation-inner {
      justify-content:space-between;
  }

  .hero-counter-line {
      width:42px;
  }

  .hero-arrow {
      width:42px;
      height:42px;
  }
}




/* =========================================================
   ABOUT / COMPACT BRAND INTRODUCTION
========================================================= */

.statement {
    position: relative;
    padding: 76px 0;
    background: #faf8f6;
    overflow: hidden;
    isolation: isolate;
}

/* Decorative background circles */
.statement::before,
.statement::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(124, 7, 3, .10);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.statement::before {
    top: -210px;
    right: -130px;
    box-shadow:
        0 0 0 34px rgba(124, 7, 3, .025),
        0 0 0 68px rgba(124, 7, 3, .012);
}

.statement::after {
    bottom: -220px;
    left: -130px;
    box-shadow:
        0 0 0 34px rgba(124, 7, 3, .025),
        0 0 0 68px rgba(124, 7, 3, .012);
}

/* Main layout */
.statement-box {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    gap: 65px;
}

/* Heading */
.statement-heading {
    position: relative;
}

.statement-label {
    display: inline-block;
    margin-bottom: 16px;
    color: var(--brand);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.statement-title {
    margin: 0;
    color: var(--ink);
    font-size: clamp(2rem, 3.3vw, 3.1rem);
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -.035em;
}

.statement-title span {
    display: block;
    color: var(--brand);
}

/* Description */
.statement-content {
    padding-top: 15px;
}

.statement-description {
    max-width: 680px;
    margin: 0 0 20px;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.95;
}

/* Text link */
.statement-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--brand);
    font-size: .95rem;
    font-weight: 800;
    transition: gap .25s ease;
}

.statement-link:hover {
    gap: 16px;
}

.statement-link i {
    font-size: 1rem;
}

/* Decorative ornament */
.statement-ornament {
    position: absolute;
    top: -32px;
    left: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: .8;
    pointer-events: none;
}

.statement-ornament .line {
    width: 38px;
    height: 1px;
    background: rgba(124, 7, 3, .35);
}

.statement-ornament .diamond {
    position: relative;
    width: 14px;
    height: 14px;
    border: 1px solid var(--brand);
    transform: rotate(45deg);
}

.statement-ornament .diamond::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    top: 4px;
    left: 4px;
    border-radius: 50%;
    background: var(--brand);
}

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

@media (max-width: 980px) {
    .statement {
        padding: 68px 0;
    }

    .statement-box {
        gap: 35px;
    }

    .statement-title {
        font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    }

    .statement-description {
        font-size: 1rem;
    }
}

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

@media (max-width: 640px) {
    .statement {
        padding: 60px 0;
    }

    .statement-box {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .statement-title {
        font-size: 2rem;
        line-height: 1.35;
    }

    .statement-label {
        margin-bottom: 12px;
    }

    .statement-content {
        padding-top: 0;
    }

    .statement-description {
        font-size: 1rem;
        line-height: 1.85;
        margin-bottom: 15px;
    }

    .statement-ornament {
        top: -25px;
        left: 0;
        transform: scale(.8);
        transform-origin: left center;
    }

    .statement::before,
    .statement::after {
        width: 220px;
        height: 220px;
    }
}



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

/* =================================================================
   PRODUCTS — original five-card layout, refined overlays and text
==================================================================== */
.products { padding:88px 0 110px; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:32px; margin-bottom:44px; }
.product-grid { display:grid; grid-template-columns:1.25fr .75fr .75fr; grid-template-rows:280px 280px; gap:18px; }
.product-card { position:relative; border-radius:28px; overflow:hidden; background:#f3f1ef; min-height:240px; isolation:isolate; }
.product-card:first-child { grid-row:1/3; }
.product-card img { width:100%; height:100%; object-fit:fill; transition:transform .65s cubic-bezier(.2,.75,.2,1); }
.product-card:hover img { transform:scale(1.045); }
.product-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,8,7,0) 30%,rgba(20,8,7,.12) 50%,rgba(20,8,7,.86) 100%); z-index:1; pointer-events:none; }
.product-info { position:absolute; z-index:2; right:22px; left:22px; bottom:20px; color:#fff; display:flex; align-items:end; justify-content:space-between; gap:12px; }
.product-copy { min-width:0; }
.product-info h3 { margin:0 0 5px; font-size:clamp(1.15rem,1.6vw,1.5rem); font-weight:800; line-height:1.25; }
.product-info p { margin:0; font-size:.86rem; line-height:1.5; color:rgba(255,255,255,.9); max-width:37ch; }
.product-card:first-child .product-info h3 { font-size:clamp(1.8rem,2.5vw,2.2rem); }
.product-card:first-child .product-info p { font-size:1rem; max-width:34ch; }
.arrow-circle { width:46px; height:46px; flex:0 0 46px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.94); color:var(--brand); font-size:1.1rem; transition:background .25s ease,color .25s ease,transform .25s ease; }
.product-card:hover .arrow-circle { background:var(--brand); color:#fff; transform:translate(-3px,-3px); }
.product-card:focus-visible { outline:3px solid var(--brand); outline-offset:3px; }
@media (max-width:980px) {
  .product-grid { grid-template-columns:1fr 1fr; grid-template-rows:360px 260px 260px; }
  .product-card:first-child { grid-column:1/3; grid-row:auto; }
}
@media (max-width:640px) {
  .products { padding:72px 0; }
  .section-head { align-items:start; flex-direction:column; }
  .section-head .btn { display:none; }
  .product-grid { display:grid; grid-template-columns:1fr; grid-template-rows:none; }
  .product-card,.product-card:first-child { grid-column:auto; grid-row:auto; min-height:340px; }
  .product-card:first-child .product-info h3 { font-size:1.7rem; }
  .product-info { right:18px; left:18px; bottom:18px; }
  .product-info p { font-size:.85rem; }
}


/* =================================================================
   QUALITY / PRODUCT ADVANTAGES
   All responsive rules for this section are kept together.
==================================================================== */

.quality {
    padding:90px 0;
    background:var(--soft-brand);
    overflow:hidden;
}

.quality-grid {
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:64px;
    align-items:center;
}

.quality-image {
    position:relative;
    min-width:0;
    isolation:isolate;
}

.quality-image img {
    position:relative;
    z-index:1;
    display:block;
    width:100%;
    aspect-ratio:4/4.7;
    object-fit:cover;
    object-position:center;
    border-radius:32px;
    box-shadow:var(--shadow);
}

.quality-image::before {
    content:"";
    position:absolute;
    width:160px;
    height:160px;
    border:2px solid rgba(124,7,3,.16);
    border-radius:50%;
    right:-38px;
    bottom:-30px;
    z-index:0;
    pointer-events:none;
}

.quality-content {min-width:0;}

.quality-content .section-title span {color:var(--brand);}

.quality-content .section-lead {max-width:600px;}

.quality-list {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    margin-top:30px;
}

.quality-item {
    padding:20px;
    border-radius:20px;
    background:#fff;
    border:1px solid rgba(124,7,3,.08);
    transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}

.quality-item:hover {
    transform:translateY(-3px);
    border-color:rgba(124,7,3,.18);
    box-shadow:0 12px 26px rgba(60,26,20,.055);
}

.quality-item i {font-size:1.35rem;color:var(--brand);}
.quality-item h4 {margin:10px 0 5px;font-size:1.03rem;}
.quality-item p {margin:0;color:var(--muted);font-size:.9rem;line-height:1.7;}

@media (max-width:980px) {
    .quality {padding:76px 0;}
    .quality-grid {grid-template-columns:1fr;gap:38px;}
    .quality-image {max-width:650px;width:100%;margin-inline:auto;}
    .quality-image img {aspect-ratio:5/4;}
}

@media (max-width:640px) {
    .quality {padding:65px 0;}
    .quality-grid {gap:30px;}
    .quality-image img {aspect-ratio:4/4.1;border-radius:24px;}
    .quality-image::before {width:110px;height:110px;right:-22px;bottom:-18px;}
    .quality-list {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px;}
    .quality-item {padding:15px 12px;border-radius:16px;}
    .quality-item h4 {font-size:.93rem;}
    .quality-item p {font-size:.81rem;}
}

@media (max-width:380px) {
    .quality-list {grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce) {
    .quality-item {transition:none;}
    .quality-item:hover {transform:none;}
}


/* =================================================================
   FEATURE / BRAND MOMENTS
==================================================================== */
.feature {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:linear-gradient(125deg,#680602 0%,var(--brand) 53%,#940d08 100%);
    color:#fff;
    padding:100px 24px;
    text-align:center;
}
.feature-inner {position:relative;z-index:1;max-width:850px;margin-inline:auto;}
.feature-eyebrow {display:block;color:#f1c9b8;font-size:.78rem;letter-spacing:.17em;font-weight:600;margin:23px 0 19px;direction:ltr;}
.feature h2 {font-size:clamp(2rem,4.3vw,3.65rem);line-height:1.42;font-weight:800;letter-spacing:-.025em;margin:0;}
.feature h2 em {font-style:normal;color:#f4d5b9;}
.feature p {max-width:640px;margin:22px auto 0;color:#f5e5e1;font-size:clamp(.98rem,1.35vw,1.12rem);line-height:2;}
.feature-ornament {display:flex;align-items:center;justify-content:center;gap:14px;}
.feature-ornament span {width:66px;height:1px;background:rgba(244,213,185,.6);}
.feature-ornament i {display:block;width:14px;height:14px;border:1.5px solid #f4d5b9;transform:rotate(45deg);position:relative;}
.feature-ornament i::after {content:"";position:absolute;inset:4px;background:#f4d5b9;border-radius:50%;}
.feature-ornament--bottom {margin-top:30px;opacity:.75;}
.feature-decoration {position:absolute;z-index:0;width:340px;aspect-ratio:1;border:1px solid rgba(255,255,255,.11);border-radius:50%;pointer-events:none;}
.feature-decoration::before,.feature-decoration::after {content:"";position:absolute;border:1px solid rgba(255,255,255,.085);border-radius:50%;}
.feature-decoration::before {inset:35px;}
.feature-decoration::after {inset:77px;}
.feature-decoration--right {right:-195px;top:-150px;}
.feature-decoration--left {left:-200px;bottom:-200px;}
@media (max-width:640px) {
    .feature {padding:75px 20px;}
    .feature-eyebrow {font-size:.67rem;letter-spacing:.1em;}
    .feature h2 {font-size:clamp(1.75rem,7vw,2.35rem);line-height:1.55;}
    .feature p {font-size:.97rem;line-height:1.9;}
    .feature-decoration {width:240px;}
    .feature-decoration--right {right:-165px;top:-100px;}
    .feature-decoration--left {left:-165px;bottom:-135px;}
}


/* =========================================================
   CTA / DISCOVER & CONTACT
========================================================= */

.cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 100px 0 105px;
    background: #faf8f6;
    text-align: center;
}

/* Decorative background circles */

.cta-decoration {
    position: absolute;
    z-index: 0;
    width: 340px;
    height: 340px;
    border: 1px solid rgba(124, 7, 3, .09);
    border-radius: 50%;
    pointer-events: none;
}

.cta-decoration::before,
.cta-decoration::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(124, 7, 3, .055);
    border-radius: 50%;
}

.cta-decoration::before {
    inset: 35px;
}

.cta-decoration::after {
    inset: 78px;
}

.cta-decoration--right {
    right: -200px;
    top: -170px;
}

.cta-decoration--left {
    left: -200px;
    bottom: -200px;
}

/* Main content */

.cta-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cta-eyebrow {
    display: block;
    margin: 24px 0 14px;
    color: var(--brand);
    font-size: .85rem;
    font-weight: 800;
}

.cta h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(2.2rem, 4.3vw, 3.65rem);
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -.035em;
}

.cta h2 span {
    color: var(--brand);
}

.cta-description {
    max-width: 580px;
    margin: 20px auto 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.95;
}

/* Decorative ornament */

.cta-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.cta-ornament span {
    width: 55px;
    height: 1px;
    background: rgba(124, 7, 3, .35);
}

.cta-ornament i {
    display: block;
    position: relative;
    width: 13px;
    height: 13px;
    border: 1.5px solid var(--brand);
    transform: rotate(45deg);
}

.cta-ornament i::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--brand);
}

/* Action buttons */

.cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.cta-actions .btn {
    min-height: 50px;
    padding: 12px 28px;
    font-size: .98rem;
}

.cta-btn-outline {
    background: transparent;
    color: var(--brand);
    border: 1px solid rgba(124, 7, 3, .28);
}

.cta-btn-outline:hover {
    background: #fff;
    border-color: var(--brand);
    transform: translateY(-2px);
}

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

@media (max-width: 980px) {
    .cta {
        padding: 85px 0;
    }

    .cta h2 {
        font-size: clamp(2rem, 5vw, 3rem);
    }
}

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

@media (max-width: 640px) {
    .cta {
        padding: 72px 0 78px;
    }

    .cta-eyebrow {
        font-size: .8rem;
        margin-top: 22px;
    }

    .cta h2 {
        font-size: clamp(1.9rem, 7vw, 2.4rem);
        line-height: 1.45;
    }

    .cta-description {
        font-size: .98rem;
        line-height: 1.85;
        margin-top: 16px;
    }

    .cta-actions {
        gap: 12px;
        margin-top: 28px;
    }

    .cta-actions .btn {
        padding: 11px 22px;
        font-size: .9rem;
    }

    .cta-decoration {
        width: 240px;
        height: 240px;
    }

    .cta-decoration--right {
        right: -165px;
        top: -110px;
    }

    .cta-decoration--left {
        left: -165px;
        bottom: -145px;
    }
}

@media (max-width: 380px) {
    .cta-actions {
        flex-direction: column;
        width: 100%;
    }

    .cta-actions .btn {
        width: min(100%, 280px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cta-actions .btn {
        transition: none;
    }

    .cta-actions .btn:hover {
        transform: none;
    }
}



/* =================================================================
   FOOTER / FOUR-COLUMN BRAND FOOTER
==================================================================== */
.site-footer {
    padding:76px 0 14px;
    background:#171110;
    color:#d8d0cd;
}
.site-footer .footer-grid {
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr) minmax(0,.85fr) minmax(0,1.35fr);
    gap:clamp(25px,3.5vw,54px);
    align-items:start;
}
.site-footer .footer-brand,
.site-footer .footer-column {min-width:0;}
.site-footer .footer-logo {display:inline-flex;align-items:center;}
.site-footer .footer-logo img {
    width:112px;
    height:78px;
    object-fit:contain;
    /* filter:brightness(0) invert(1); */
    opacity:.95;
}
.site-footer .footer-brand p {
    max-width:320px;
    margin:14px 0 0;
    color:#bdb2ae;
    font-size:.96rem;
    line-height:1.95;
}
.site-footer h4 {
    position:relative;
    margin:9px 0 22px;
    padding-bottom:13px;
    color:#fff;
    font-size:1.05rem;
    font-weight:800;
}
.site-footer h4::after {
    content:"";
    position:absolute;
    right:0;
    bottom:0;
    width:28px;
    height:2px;
    border-radius:2px;
    background:#bd7773;
}
.site-footer ul {list-style:none;padding:0;margin:0;display:grid;gap:11px;}
.site-footer a {color:#bdb2ae;transition:color .2s ease;}
.site-footer a:hover {color:#fff;}
.site-footer a:focus-visible {outline:2px solid #e2aaa6;outline-offset:4px;border-radius:2px;}
.site-footer .contact-line {
    display:flex;
    gap:12px;
    align-items:flex-start;
    margin-bottom:16px;
    color:#bdb2ae;
    font-size:.94rem;
    line-height:1.85;
}
.site-footer .contact-line i {flex:0 0 18px;color:#e2aaa6;font-size:1.06rem;margin-top:4px;}
.site-footer .footer-emails {display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;}
.site-footer .footer-emails a {overflow-wrap:anywhere;}
.site-footer .footer-bottom {
    margin-top:24px;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.1);
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:14px 14px;
    font-size:.88rem;
    color:#a99e9a;
}
.site-footer .footer-signature {color:#bba6a0;}


/* ==================================================
   FOOTER LINKS HOVER
================================================== */

.site-footer .footer-column ul a {
    position: relative;
    display: inline-block;
    padding-bottom: 4px;
    color: #bdb2ae;
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-footer .footer-column ul a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.85);

    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.35s ease;
}

.site-footer .footer-column ul a:hover,
.site-footer .footer-column ul a:focus-visible {
    color: #fff;
}

.site-footer .footer-column ul a:hover::after,
.site-footer .footer-column ul a:focus-visible::after {
    transform: scaleX(1);
}



/* Footer developer credit */

.footer-developer {
    color: #8f8581;
    font-size: 0.9rem;
}

.footer-developer a {
    position: relative;
    display: inline-block;
    margin-right: 4px;
    padding-bottom: 2px;
    color: #d8d0cd;
    font-weight: 700;
    text-decoration: none;
    direction: ltr;
    transition: color 0.3s ease;
}

.footer-developer a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #fff;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.footer-developer a:hover,
.footer-developer a:focus-visible {
    color: #fff;
}

.footer-developer a:hover::after,
.footer-developer a:focus-visible::after {
    transform: scaleX(1);
}



@media (max-width:980px) {
    .site-footer {padding-top:62px;}
    .site-footer .footer-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 30px;}
}
@media (max-width:640px) {
    .site-footer {padding:54px 0 24px;}
    .site-footer .footer-grid {grid-template-columns:1fr;gap:29px;}
    .site-footer h4 {margin:0 0 15px;}
    .site-footer .footer-brand p {max-width:440px;}
    .site-footer .footer-bottom {margin-top:35px;flex-direction:column;align-items:flex-start;gap:8px;font-size:.82rem;}
}
@media (prefers-reduced-motion:reduce) {
    .site-footer a {transition:none;}
}



/* =================================================================
   LEGACY / UNUSED SELECTORS
==================================================================== */



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

  .hero {
      padding-top:34px;
  }

  .hero-grid {
      gap:30px;
  }

  .hero-visual {
      min-height:480px;
  }

  .visual-card {
      inset:20px 0;
  }

  .brand-orb {
      right:12px;
  }
}



@media (max-width:640px) {
  .hero h1 {
      font-size:3rem;
  }

  .hero-copy>p {
      font-size:1.05rem;
  }

  .hero-proof {
      gap:14px;
  }

  .proof-item {
      font-size:.9rem;
  }

  .hero-visual {
      min-height:390px;
  }

  .visual-card {
      inset:16px 0;
      border-radius:28px;
  }

  .brand-orb {
      width:98px;
      height:98px;
  }

  .floating-badge {
      left:8px;
      bottom:28px;
  }
}