/* ==========================================================================
   CloudChef — design enhancements
   Layered on top of the POFO template. Brand accent: #ff214f
   ========================================================================== */

:root {
    --cc-accent: #ff214f;
    --cc-accent-dark: #d4123a;
    --cc-ink: #232323;
    --cc-muted: #6f6f6f;

    /* Site typefaces. Swap these two lines (and the <link> in index.html)
       to re-font the whole site. */
    --cc-font-display: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --cc-font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   0. Typefaces — override the template's Roboto / Montserrat everywhere.
   The vendor @import in style.css is commented out so they aren't fetched.
   -------------------------------------------------------------------------- */

body,
.main-font,
p, li, td, th, input, textarea, select, button, label, blockquote {
    font-family: var(--cc-font-body);
}

h1, h2, h3, h4, h5, h6,
.alt-font,
.btn, .cc-btn,
.navbar-nav > li > a,
.cc-product-name,
.cc-product-tagline,
.cc-section-title {
    font-family: var(--cc-font-display);
}

body { letter-spacing: .1px; }
h1, h2, h3, h4, h5, h6 { letter-spacing: -.2px; }

/* --------------------------------------------------------------------------
   1. Typography & section headings
   -------------------------------------------------------------------------- */

/* Accent rule under every section title */
.cc-section-title {
    position: relative;
    display: inline-block;
    padding-bottom: 18px;
    letter-spacing: 1.5px;
}
.cc-section-title:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 48px;
    height: 3px;
    margin-left: -24px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--cc-accent), var(--cc-accent-dark));
}
.cc-section-lead {
    max-width: 640px;
    margin: 22px auto 0;
    font-size: 15px;
    line-height: 28px;
    color: var(--cc-muted);
}
.cc-section-lead.cc-on-dark { color: rgba(255, 255, 255, .72); }

/* --------------------------------------------------------------------------
   1a. Hero — replaces the stock desk photo and the full-screen rotating
   headline. Drawn in CSS: deep midnight ground, one warm accent glow, a
   faint grid, and a soft vignette.
   -------------------------------------------------------------------------- */

.cc-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding: 130px 0 110px;
    overflow: hidden;
    background-color: #0b0c14;
    background-image:
        radial-gradient(ellipse 62% 58% at 18% 4%, rgba(255, 33, 79, .26), transparent 62%),
        radial-gradient(ellipse 58% 60% at 88% 96%, rgba(84, 92, 214, .30), transparent 62%),
        linear-gradient(165deg, #16182a 0%, #0e0f1a 52%, #08090f 100%);
}
.cc-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse 68% 62% at 50% 42%, #000 20%, transparent 78%);
    mask-image: radial-gradient(ellipse 68% 62% at 50% 42%, #000 20%, transparent 78%);
    pointer-events: none;
}
.cc-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 880px;
    text-align: center;
}

.cc-hero-kicker {
    display: inline-block;
    font-family: var(--cc-font-display);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
    padding: 7px 16px;
    margin-bottom: 26px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 40px;
    background: rgba(255, 255, 255, .04);
}
.cc-hero-title {
    font-family: var(--cc-font-display);
    font-weight: 600;
    font-size: 58px;
    line-height: 1.12;
    letter-spacing: -1.2px;
    color: #fff;
    margin: 0 0 22px;
}
.cc-hero-lead {
    max-width: 660px;
    margin: 0 auto 28px;
    font-size: 16.5px;
    line-height: 31px;
    color: rgba(255, 255, 255, .68);
}

/* The template's rotaterator plugin fades these one at a time. Reserve the
   line height so the block below does not jump between phrases. */
.cc-hero-rotator {
    position: relative;
    height: 26px;
    margin-bottom: 38px;
}
.cc-hero-rotator span {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    font-family: var(--cc-font-display);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--cc-accent);
}

.cc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}
.cc-hero-actions .cc-btn { align-self: auto; }
.cc-btn-hero { padding: 15px 34px; }
/* Scoped to .cc-hero so it outranks the base .cc-btn rule, which is defined
   further down the file. */
.cc-hero .cc-btn-ghost {
    background: none;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
    padding: 14px 32px;
}
.cc-hero .cc-btn-ghost:hover, .cc-hero .cc-btn-ghost:focus {
    background: #fff;
    border-color: #fff;
    color: var(--cc-ink);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
}

.cc-hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 34px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: -22px;
    border-radius: 50%;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .22);
    animation: cc-bob 2.4s ease-in-out infinite;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.cc-hero-scroll svg { width: 18px; height: 18px; }
.cc-hero-scroll:hover, .cc-hero-scroll:focus {
    background: var(--cc-accent);
    border-color: var(--cc-accent);
    color: #fff;
}
@keyframes cc-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}

/* --------------------------------------------------------------------------
   1b. About section — replaces the Hubble nebula photo with a soft paper
   wash, drawn in CSS.
   -------------------------------------------------------------------------- */

/* The About copy is marked up as <h5> by the template, so it would otherwise
   inherit the display face. Long-form text belongs on the body face. */
.cc-about h5:not(.alt-font) {
    font-family: var(--cc-font-body);
    font-size: 16px;
    line-height: 31px;
    font-weight: 300;
}

.cc-about {
    padding: 110px 0;
    background-color: #fbfbfd;
    background-image:
        radial-gradient(ellipse 55% 45% at 8% 0%, rgba(255, 33, 79, .05), transparent 62%),
        radial-gradient(ellipse 50% 45% at 95% 100%, rgba(84, 92, 214, .06), transparent 60%);
}

/* --------------------------------------------------------------------------
   2. Products section — three equal cards, one shared card component.
   -------------------------------------------------------------------------- */

.cc-products {
    background: #fafafa;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(255, 33, 79, .06), transparent 42%),
        radial-gradient(circle at 88% 82%, rgba(47, 47, 47, .05), transparent 40%);
    padding: 110px 0;
}

/* Equal-height cards across the row */
@media (min-width: 768px) {
    .cc-product-grid { display: flex; flex-wrap: wrap; }
    .cc-product-grid > [class*="col-"] { display: flex; }
}

.cc-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 40px 34px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 14px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .03), 0 14px 34px rgba(0, 0, 0, .06);
    overflow: hidden;
    transition: transform .45s cubic-bezier(.2, .7, .3, 1),
                box-shadow .45s cubic-bezier(.2, .7, .3, 1);
}
.cc-product-card:before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cc-accent), var(--cc-accent-dark));
}
.cc-product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .05), 0 26px 58px rgba(0, 0, 0, .11);
}

/* Icon medallion */
.cc-product-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 22px;
    border-radius: 18px;
    color: var(--cc-accent);
    background: rgba(255, 33, 79, .08);
    transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.cc-product-card:hover .cc-product-icon { transform: translateY(-2px) scale(1.04); }
.cc-product-icon svg { width: 30px; height: 30px; display: block; }

/* Variant: the medallion carries the product's own logo instead of a glyph. */
.cc-product-icon-image {
    background: none;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(90, 77, 217, .28);
}
.cc-product-icon-image img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 18px;
}

.cc-product-tagline {
    align-self: flex-start;
    font-family: var(--cc-font-display);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--cc-accent);
    padding: 5px 12px;
    margin-bottom: 14px;
    border: 1px solid rgba(255, 33, 79, .28);
    border-radius: 40px;
}
.cc-product-name {
    font-family: var(--cc-font-display);
    font-weight: 600;
    font-size: 23px;
    letter-spacing: .2px;
    color: var(--cc-ink);
    margin: 0 0 12px;
}
.cc-product-desc {
    font-size: 14.5px;
    line-height: 27px;
    color: var(--cc-muted);
    margin: 0 0 16px;
}
.cc-product-meta {
    font-size: 13px;
    line-height: 22px;
    color: var(--cc-ink);
    /* push the CTA to the bottom so buttons line up across the row */
    margin: 0 0 24px;
    padding-top: 2px;
    margin-top: auto;
}
.cc-product-meta strong { font-weight: 600; }
.cc-product-meta-soft { color: var(--cc-muted); font-style: italic; }

/* Hadi keeps its own brand inside the shared card: violet #776BEB, lime #C6F25C.
   Tokens mirror hadi-website/assets/page.css. */
.cc-product-hadi:before { background: linear-gradient(90deg, #776BEB, #3A2EA8); }
.cc-product-hadi .cc-product-tagline {
    color: #5A4DD9;
    border-color: rgba(119, 107, 235, .32);
}
.cc-product-hadi .cc-btn-outline {
    color: #5A4DD9;
    border-color: rgba(119, 107, 235, .38);
}
.cc-product-hadi .cc-btn-outline:hover,
.cc-product-hadi .cc-btn-outline:focus {
    background: #776BEB;
    border-color: #776BEB;
    color: #fff;
    box-shadow: 0 10px 24px rgba(119, 107, 235, .32);
}

/* Buttons */
.cc-btn {
    align-self: flex-start;
    display: inline-block;
    font-family: var(--cc-font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #fff;
    background: var(--cc-accent);
    padding: 13px 30px;
    border-radius: 40px;
    transition: background .3s ease, box-shadow .3s ease, transform .3s ease, color .3s ease, border-color .3s ease;
}
.cc-btn:hover, .cc-btn:focus {
    color: #fff;
    background: var(--cc-accent-dark);
    box-shadow: 0 10px 24px rgba(255, 33, 79, .3);
    transform: translateY(-2px);
}
.cc-btn-outline {
    background: none;
    color: var(--cc-accent);
    border: 1px solid rgba(255, 33, 79, .35);
    padding: 12px 28px;
}
.cc-btn-outline:hover, .cc-btn-outline:focus {
    background: var(--cc-accent);
    border-color: var(--cc-accent);
    color: #fff;
}

/* Request-a-quote band */
.cc-quote-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin: 44px auto 0;
    padding: 34px 44px;
    border-radius: 14px;
    background: linear-gradient(120deg, #1e1f2b, #2b2d3d);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .16);
}
.cc-quote-title {
    font-family: var(--cc-font-display);
    font-weight: 600;
    font-size: 20px;
    color: #fff;
    margin: 0 0 6px;
}
.cc-quote-desc {
    font-size: 14.5px;
    line-height: 25px;
    color: rgba(255, 255, 255, .70);
    margin: 0;
}
.cc-btn-light {
    flex: 0 0 auto;
    background: #fff;
    color: var(--cc-ink);
}
.cc-btn-light:hover, .cc-btn-light:focus {
    background: var(--cc-accent);
    color: #fff;
    box-shadow: 0 10px 24px rgba(255, 33, 79, .3);
}

/* --------------------------------------------------------------------------
   3. Services section — replaces the Andromeda galaxy photo. Deep indigo
   gradient with two soft accent glows and a faint grid, drawn in CSS so
   there is no image to download.
   -------------------------------------------------------------------------- */

.cc-services {
    position: relative;
    padding: 110px 0;
    background-color: #12131c;
    background-image:
        radial-gradient(ellipse 70% 55% at 12% 8%, rgba(255, 33, 79, .20), transparent 60%),
        radial-gradient(ellipse 60% 50% at 88% 92%, rgba(84, 92, 214, .26), transparent 62%),
        linear-gradient(160deg, #191b28 0%, #12131c 48%, #0d0e15 100%);
}
/* Faint grid, fading out toward the bottom */
.cc-services:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
    pointer-events: none;
}
.cc-services > .container { position: relative; z-index: 1; }

/* Equal-height service cards per wrap row, in CSS. The template's
   equalizeHeight() in js/main.js sets an inline pixel height on every column
   (one height for all seven cards, only on load and resize); `height: auto`
   here neutralises that so the grid is correct without JS and reflows
   properly at any width. */
@media (min-width: 768px) {
    .cc-services .row.equalize { display: flex; flex-wrap: wrap; }
    .cc-services .row.equalize > [class*="col-"] {
        display: flex;
        height: auto !important;
        margin-bottom: 30px;
    }
    .cc-services .row.equalize > [class*="col-"] > .feature-box-8 { width: 100%; }
}

/* --------------------------------------------------------------------------
   4. Service card polish (lighter touch on the existing template cards)
   -------------------------------------------------------------------------- */

.feature-box-8 {
    border-radius: 10px;
    transition: transform .4s cubic-bezier(.2, .7, .3, 1),
                box-shadow .4s cubic-bezier(.2, .7, .3, 1);
}
.feature-box-8:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px rgba(0, 0, 0, .18);
}
.feature-box-8 .icon-round-small { transition: background .35s ease, color .35s ease; }

/* Inline-SVG service icons, replacing the et-line glyph font. */
.cc-svc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--cc-accent), var(--cc-accent-dark));
    box-shadow: 0 8px 20px rgba(255, 33, 79, .26);
    transition: background .35s ease, color .35s ease, box-shadow .35s ease;
}
.cc-svc-icon svg { width: 34px; height: 34px; display: block; }
.feature-box-8:hover .cc-svc-icon {
    background: #fff;
    color: var(--cc-accent);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

/* Normalise icon spacing: the template markup only puts a bottom margin on
   the first three cards, so rows 2+ sat tighter than row 1. */
.feature-box-8 .display-inline-block { margin-bottom: 20px; }
@media (max-width: 767px) {
    .feature-box-8 .display-inline-block { margin-bottom: 10px; }
}

/* --------------------------------------------------------------------------
   5. Navigation & scroll behaviour
   -------------------------------------------------------------------------- */

/* NOTE: no CSS `scroll-behavior: smooth` here on purpose. js/main.js already
   drives anchor scrolling with the jQuery smoothScroll plugin (speed 900,
   offset -59 for the fixed header); adding CSS smooth scrolling on top makes
   the two animations fight and breaks the header offset. */

/* The template leaves the navbar transparent with #939393 links at every
   scroll position, so the menu sat at roughly 3:1 against the light sections.
   Over the hero the links go bright; past it the bar turns solid white with
   dark links. The `cc-nav-solid` class is toggled by a scroll listener at the
   bottom of index.html. */
nav.navbar.bootsnav:not(.cc-nav-solid) .navbar-nav > li > a {
    color: rgba(255, 255, 255, .88);
}
nav.navbar.bootsnav:not(.cc-nav-solid) .navbar-nav > li > a:hover,
nav.navbar.bootsnav:not(.cc-nav-solid) .navbar-nav > li > a:focus {
    color: #fff;
}
nav.navbar.bootsnav.cc-nav-solid {
    background-color: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, .08);
}
nav.navbar.bootsnav.cc-nav-solid .navbar-nav > li > a { color: var(--cc-ink); }
nav.navbar.bootsnav.cc-nav-solid .navbar-nav > li > a:hover,
nav.navbar.bootsnav.cc-nav-solid .navbar-nav > li > a:focus { color: var(--cc-accent); }
nav.navbar.bootsnav { transition: background-color .35s ease, box-shadow .35s ease; }

/* Hamburger bars follow the same two states */
nav.navbar.bootsnav:not(.cc-nav-solid) .navbar-toggle .icon-bar { background-color: #fff; }
nav.navbar.bootsnav.cc-nav-solid .navbar-toggle .icon-bar { background-color: var(--cc-ink); }

/* Underline that grows in on hover / active nav item */
.navbar-nav > li > a { position: relative; }
.navbar-nav > li > a:after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 6px;
    height: 2px;
    background: var(--cc-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}
.navbar-nav > li > a:hover:after,
.navbar-nav > li.active > a:after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   6. Accessibility
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--cc-accent);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .cc-product-card,
    .cc-product-icon,
    .feature-box-8,
    .cc-btn,
    .navbar-nav > li > a:after { transition: none !important; }
    .cc-product-card:hover { transform: none; }
    .cc-product-card:hover .cc-product-icon { transform: none; }
    .feature-box-8:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */

/* Tablet: three columns get tight, so ease the padding */
@media (min-width: 768px) and (max-width: 991px) {
    .cc-product-card { padding: 32px 24px; }
    .cc-product-name { font-size: 20px; }
    .cc-product-desc { font-size: 14px; line-height: 25px; }
}

@media (max-width: 991px) {
    .cc-hero-title { font-size: 42px; letter-spacing: -.7px; }
}

@media (max-width: 767px) {
    .cc-hero { padding: 110px 0 90px; min-height: 92vh; }
    .cc-hero-title { font-size: 31px; line-height: 1.2; letter-spacing: -.4px; }
    .cc-hero-lead { font-size: 15px; line-height: 28px; }
    .cc-hero-rotator span { font-size: 11px; letter-spacing: 2px; }
    .cc-hero-actions { flex-direction: column; align-items: stretch; }
    .cc-hero-actions .cc-btn { text-align: center; }
    .cc-products { padding: 70px 0; }
    .cc-product-card { padding: 34px 26px; }
    .cc-product-grid > div + div { margin-top: 26px; }
    .cc-product-meta { margin-top: 0; }
    .cc-quote-band {
        flex-direction: column;
        text-align: center;
        padding: 32px 26px;
        gap: 22px;
    }
    .cc-quote-band .cc-btn-light { align-self: center; }
    .cc-section-lead { font-size: 14px; line-height: 26px; }
}

/* --------------------------------------------------------------------------
   7a. Customers — a continuous logo marquee. Every mark is a transparent
   image sitting straight on the section, no tiles. The supplied PNGs had
   opaque backgrounds, so those were knocked out; Bexprt and SureSIM only
   publish white-on-dark artwork and were recoloured to ink to read here.
   -------------------------------------------------------------------------- */

.cc-customers {
    padding: 100px 0;
    background: #fff;
    overflow: hidden;
}

.cc-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* fade the run-on and run-off edges */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.cc-marquee-track {
    display: flex;
    width: max-content;
    animation: cc-marquee 46s linear infinite;
}
/* Let people stop it to read a mark */
.cc-marquee:hover .cc-marquee-track,
.cc-marquee:focus-within .cc-marquee-track { animation-play-state: paused; }

/* Travels exactly one copy of the list, so the restart is invisible. */
@keyframes cc-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.cc-logo-row {
    display: flex;
    align-items: center;
    gap: 68px;
    flex: 0 0 auto;
    list-style: none;
    margin: 0;
    padding: 0 34px;
}
.cc-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
}
.cc-logo img {
    max-height: 48px;
    max-width: 176px;
    width: auto;
    opacity: .78;
    transition: opacity .3s ease;
}
/* Portrait and square marks need more height to carry the same optical weight
   as a wide wordmark. */
.cc-logo-tall img { max-height: 68px; }
.cc-logo:hover img { opacity: 1; }
.cc-logo-mark {
    font-family: var(--cc-font-display);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: .2px;
    white-space: nowrap;
    color: #9a9aa2;
    transition: color .3s ease;
}
.cc-logo:hover .cc-logo-mark { color: var(--cc-ink); }

@media (prefers-reduced-motion: reduce) {
    .cc-marquee-track { animation: none; }
    .cc-marquee {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

@media (max-width: 767px) {
    .cc-customers { padding: 70px 0; }
    .cc-logo-row { gap: 44px; padding: 0 22px; }
    .cc-logo { height: 58px; }
    .cc-logo img { max-height: 34px; max-width: 130px; }
    .cc-logo-tall img { max-height: 50px; }
    .cc-logo-mark { font-size: 18px; }
    .cc-marquee-track { animation-duration: 32s; }
}

/* --------------------------------------------------------------------------
   7b. Contact — centred cards over a full-width map, replacing the
   half-map / half-blocks split.
   -------------------------------------------------------------------------- */

.cc-contact { padding: 110px 0 0; background: #fff; }

@media (min-width: 768px) {
    .cc-contact-grid { display: flex; flex-wrap: wrap; }
    .cc-contact-grid > [class*="col-"] { display: flex; }
}

.cc-contact-card {
    width: 100%;
    /* Centre the content vertically so the shorter cards don't leave a gap at
       the bottom of the equal-height row. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 40px 30px;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 14px;
    background: #fff;
    transition: transform .4s cubic-bezier(.2, .7, .3, 1),
                box-shadow .4s cubic-bezier(.2, .7, .3, 1),
                border-color .4s ease;
}
.cc-contact-card:hover {
    transform: translateY(-5px);
    border-color: transparent;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .04), 0 20px 46px rgba(0, 0, 0, .10);
}
.cc-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--cc-accent), var(--cc-accent-dark));
    box-shadow: 0 8px 20px rgba(255, 33, 79, .26);
}
.cc-contact-icon svg { width: 27px; height: 27px; display: block; }
.cc-contact-title {
    font-family: var(--cc-font-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--cc-ink);
    margin: 0 0 10px;
}
.cc-contact-text {
    font-size: 14px;
    line-height: 25px;
    color: var(--cc-muted);
    margin: 0 0 14px;
}
.cc-contact-link {
    font-family: var(--cc-font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--cc-accent);
    word-break: break-word;
}
.cc-contact-link:hover { color: var(--cc-accent-dark); text-decoration: underline; }
.cc-contact-address {
    font-size: 13.5px;
    line-height: 24px;
    color: var(--cc-muted);
    margin: 0 0 12px;
}
.cc-contact-address:last-child { margin-bottom: 0; }
.cc-contact-address strong {
    font-family: var(--cc-font-display);
    font-weight: 600;
    color: var(--cc-ink);
}

.cc-contact-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 46px;
    padding-bottom: 96px;
}
.cc-contact-cta-text {
    font-family: var(--cc-font-display);
    font-weight: 500;
    font-size: 17px;
    color: var(--cc-ink);
    margin: 0;
}
.cc-contact-cta .cc-btn { align-self: auto; }

.cc-contact-map {
    width: 100%;
    height: 380px;
    background: #ececed;
}
.cc-contact-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 767px) {
    .cc-contact { padding-top: 70px; }
    .cc-contact-grid > div + div { margin-top: 22px; }
    .cc-contact-cta { padding-bottom: 60px; margin-top: 34px; }
    .cc-contact-map { height: 300px; }
}

/* --------------------------------------------------------------------------
   8. Legal pages (privacy policy) + footer links
   -------------------------------------------------------------------------- */

.cc-legal {
    padding: 150px 0 90px;
    background: #fff;
}
.cc-legal-title {
    font-family: var(--cc-font-display);
    font-weight: 700;
    font-size: 38px;
    color: var(--cc-ink);
    margin: 0 0 8px;
}
.cc-legal-updated {
    font-size: 13px;
    color: var(--cc-muted);
    margin: 0 0 44px;
    padding-bottom: 26px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.cc-legal-heading {
    font-family: var(--cc-font-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--cc-ink);
    margin: 38px 0 12px;
}
.cc-legal p,
.cc-legal li {
    font-size: 15px;
    line-height: 29px;
    color: var(--cc-muted);
}
.cc-legal p { margin: 0 0 14px; }
.cc-legal ul { padding-left: 20px; margin: 0 0 14px; }
.cc-legal li { margin-bottom: 8px; }
.cc-legal a { color: var(--cc-accent); }
.cc-legal a:hover { text-decoration: underline; }

.cc-footer-sep { opacity: .45; margin: 0 4px; }
.cc-footer-link { color: var(--cc-muted); }
.cc-footer-link:hover { color: var(--cc-accent); }
.cc-footer-current { opacity: .55; }

@media (max-width: 767px) {
    .cc-legal { padding: 110px 0 70px; }
    .cc-legal-title { font-size: 28px; }
}