/*
 * Stylesheet for Francesco G / GH Capital Consulting website
 *
 * The layout and colour scheme are inspired by the Skillable blueprint supplied
 * by the user. Sections are clearly delineated with generous whitespace and
 * simple grid layouts. A limited palette anchored by black, white and a
 * signature blue (#3169e0) echoes the provided brand colours and conveys
 * professionalism and clarity. Headlines use the open‑source Alata typeface
 * while body copy uses Roboto Slab【974369708930406†L144-L153】【279259468431956†L90-L103】.
 */

/* CSS custom properties for easy theming */
:root {
    --font-title: 'Alata', sans-serif;
    --font-body: 'Roboto Slab', serif;
    /* Colour palette inspired by Looka suggestions: deep blue primary, teal secondary and warm gold accents */
    /*
     * Colour palette adjustments
     *
     * The user requested colours that differentiate the brand from the original
     * Skillable template while still conveying sophistication and authority. To
     * achieve this we lean into a refined palette: a slightly brighter royal
     * blue for primaries, a rich teal as the secondary accent and a warm gold
     * for highlights. We also lighten the dark section background and muted
     * text tones to improve readability on dark backgrounds. These variables
     * drive the rest of the site and can be tweaked easily if needed.
     */
    /*
     * Final colour palette (Looka‑inspired)
     *
     * To align closely with the colours suggested in the Looka brand kit while
     * maintaining a professional, sophisticated feel, we pivot to a navy‑
     * centric palette accented with teal and gold. The primary shades are
     * derived from deep blues and blacks present in the logo, while the
     * secondary and accent tones bring warmth and contrast. These variables
     * propagate throughout the site for consistent theming.
     */
    /* Black & white palette for a timeless, professional look */
    /* Core colours for a monochrome palette with a contrasting accent.
     *  - Primary: pure black for maximum contrast on light backgrounds.
     *  - Primary dark: slightly lighter off‑black used for hover states.
     *  - Secondary: medium grey for subtle accents and dividers.
     *  - Accent: bright blue used exclusively for calls to action and
     *    interactive elements – it contrasts strongly with both white and
     *    black backgrounds without overpowering the overall design.
     *  - Text colours: near‑black for body copy and muted grey for
     *    secondary descriptions ensure good legibility.  
     *  - Light background: pure white or very light off‑white for
     *    section backgrounds.  
     *  - Dark background: off‑black instead of true black to soften
     *    large dark areas and improve contrast with white text.
     *  - Card backgrounds: very pale grey to differentiate content
     *    blocks from the page while maintaining a clean, airy feel.
     */
    --color-primary: #000000;
    --color-primary-dark: #141414;
    --color-secondary: #3a3a3a;
    --color-accent: #007bff;
    --color-text: #111111;
    --color-muted: #555555;
    --color-light: #ffffff;
    --color-dark: #0e0e0e;
    --color-card-bg: #f9f9f9;
    --radius: 6px;
    --transition: 0.25s ease;
}

/* Global resets */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    line-height: 1.6;
    background-color: var(--color-light);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* prevent horizontal scroll from stray elements */
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover {
    color: var(--color-primary-dark);
}

h1, h2, h3, h4 {
    font-family: var(--font-title);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.5em;
}
h2 {
    font-size: 2rem;
}
h3 {
    font-size: 1.4rem;
}

/* Utility classes */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 0;
}

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition), box-shadow var(--transition);
}

.btn.cta {
    /* Call‑to‑action buttons use the accent colour to stand out on both
       light and dark backgrounds. We also keep a slight shadow for depth. */
    background-color: var(--color-accent);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.btn.cta:hover {
    background-color: var(--color-primary-dark);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.btn.secondary {
    background-color: var(--color-dark);
    color: #fff;
}
.btn.secondary:hover {
    background-color: #15294f;
}
.btn.tertiary {
    background-color: transparent;
    /* Outline buttons use the accent colour for the border and text so
       they remain clearly visible against both light and dark panels. */
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
}
.btn.tertiary:hover {
    background-color: var(--color-accent);
    color: #ffffff;
}

/* Navigation */
.header {
    background-color: #fff;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 50;
}
.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
}
.logo img {
    /* Increase logo size for stronger brand presence */
    height: 70px;
}
.navigation {
    display: flex;
    gap: 1.5rem;
}
.nav-link {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--color-text);
    position: relative;
}
.nav-link:hover::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 2px;
    background-color: var(--color-primary);
    border-radius: 2px;
}

/* Hero */
.hero {
    position: relative;
    /* Reduce the hero height so the main content appears sooner */
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    overflow: hidden;
    /* Solid dark background; the photo banner is inserted via HTML */
    background-image: url('images/bannerv2.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    /* Position the hero image so Francesco’s face and upper torso are fully
       visible. A higher percentage shifts the image upward on large screens. */
    /* Show more of Francesco’s face and upper torso by shifting the image
       slightly upward. */
    object-position: center 30%;
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Lighter overlay so the underlying photo remains visible. */
    background: rgba(0, 0, 0, 0.35);
    z-index: -1;
}
.hero-content {
    max-width: 800px;
    padding: 0 1rem;
}

/* Add vertical spacing around the hero call‑to‑action button */
.hero .btn.cta {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* A dark translucent box behind the hero text to improve legibility on the photo */
.hero-box {
    background: rgba(0, 0, 0, 0.55);
    padding: 2rem;
    border-radius: var(--radius);
    display: inline-block;
    max-width: 90%;
}
.hero-box .hero-title {
    margin-bottom: 0.75rem;
}
.hero-box .hero-subtitle {
    margin-bottom: 1.25rem;
}
.hero-box .btn.cta {
    /* Add breathing room above and below the CTA within the hero box */
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}
.hero-box .trust-cue {
    margin-top: 1.5rem;
}
.hero-title {
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}
.hero-subtitle {
    /* Reduce the subtitle size and constrain its width so it wraps onto
       two lines on most screens for a cleaner visual rhythm. */
    /* Reduce font size so the sentence fits comfortably on one line and doesn’t
       exceed the width of the headline. */
    font-size: 1rem;
    margin-bottom: 1.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Trust cue underneath hero CTA */
.hero-content .trust-cue {
    font-size: 0.85rem;
    /* Add extra space above the trust cue to separate it from the CTA */
    margin-top: 1.2rem;
    color: #e5effa;
    opacity: 0.9;
}

/* Section titles */
.section-title {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
}
.light .section-title {
    color: #fff;
}

/* Cards Layouts */
.cards {
    display: grid;
    gap: 2rem;
}
.cards.three-col {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.cards.four-col {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.cards.two-col {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.card {
    background-color: var(--color-card-bg);
    padding: 2rem;
    border-radius: var(--radius);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    text-align: center;
}
.card h3 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
}

/* Adjust typography inside the Why section so headings stay on one line and
   descriptions don’t exceed three lines */
.why .card h3 {
    font-size: 1.2rem;
    white-space: nowrap;
}
.why .card p {
    font-size: 0.95rem;
    line-height: 1.4;
}
.card p {
    font-size: 0.95rem;
    color: var(--color-muted);
}
.card-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin: 0 auto 1rem;
}

/* Icon circles */
.icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    /* Icon circles use the accent colour to draw the eye while still
       complementing the black/white palette. */
    background-color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: #fff;
    font-size: 1.3rem;
}

/* Step numbers */
.step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    /* Step numbers mirror the accent colour for consistency with other
       interactive elements. */
    background-color: var(--color-accent);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin: 0 auto 1rem;
}

/* Two‑column layouts */
.two-col {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: start;
}
.two-col.equal {
    /* Force equal heights for columns */
    display: flex;
    align-items: stretch;
    gap: 2rem;
}
.two-col.equal .col {
    flex: 1;
}
.two-col.equal .col ul.list {
    height: 100%;
    display: flex;
    flex-direction: column;
    /* Distribute list items evenly to visually balance with the adjacent image */
    justify-content: space-around;
}
.two-col.equal .col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Vertically center the quote in the transformation section */
.transformation .two-col {
    align-items: center;
}
.two-col .col p {
    font-size: 1rem;
    color: var(--color-muted);
}
.list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}
.list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--color-text);
}
.list li i {
    color: var(--color-primary);
    margin-top: 0.2rem;
}

/* Dark sections */
.dark {
    background-color: var(--color-dark);
    color: #fff;
}

/* Ensure readability on dark sections */
/*
 * We override default colours for text inside `.dark` sections to improve
 * contrast. Base paragraphs and list items adopt a lighter blue tone,
 * headings and elements marked with `.light` are even brighter. These
 * rules only take effect within dark backgrounds and ensure the content
 * remains legible without straining the eyes.
 */
.dark p,
.dark li {
    /* Lighten body text on dark backgrounds for improved legibility. */
    color: #d0d0d0;
}
.dark .light,
.dark h2,
.dark h3 {
    color: #ffffff; /* white headings and accent text on dark backgrounds */
}
.dark .container {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.light {
    color: #fff;
}

/* Testimonials */
.testimonials .testimonial {
    background-color: var(--color-card-bg);
    padding: 2rem;
    border-radius: var(--radius);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    position: relative;
}
.testimonial .quote-icon {
    position: absolute;
    top: -20px;
    left: -20px;
    font-size: 3rem;
    color: var(--color-primary);
}
.testimonial p {
    margin-bottom: 0.5rem;
}
.testimonial .author {
    font-weight: 600;
    color: var(--color-primary);
}

/* Icon list for the brand promise section */
.icon-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    margin-top: 2rem;
}
.icon-list .item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 280px;
}
.icon-list .item i {
    font-size: 1.6rem;
    color: var(--color-accent);
    margin-top: 0.2rem;
}
.icon-list .item p {
    margin: 0;
    font-size: 0.95rem;
    color: #d0d0d0;
    line-height: 1.4;
}

/* Plan diagram styling for the “Inside your transformation plan” section */
.plan-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
}
.plan-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1 1 calc(33.333% - 1.5rem);
    max-width: calc(33.333% - 1.5rem);
    min-width: 240px;
}
.plan-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 1.2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.plan-item p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-muted);
    line-height: 1.5;
}

/* Quote styling for transformation section */
.quote {
    font-style: italic;
    font-size: 1.1rem;
    color: #e0e0e0;
    line-height: 1.6;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

/* Colour coding for transformation shifts */
.bad {
    color: #e74c3c;
    font-weight: 600;
}
.good {
    color: #27ae60;
    font-weight: 600;
}

/* Align arrow icons with the text in the transformation list */
.transformation .list li i {
    margin-right: 0.5rem;
    vertical-align: baseline;
    color: var(--color-accent);
}

/* Ensure transformation list items align icons and text on the baseline */
.transformation .list li {
    display: flex;
    align-items: baseline;
}

/* CTA section typography adjustments */
.contact h3.cta-subtitle {
    margin-top: 1rem;
    font-family: var(--font-title);
    font-size: 1.6rem;
    font-weight: 700;
    /* Accent colour for the secondary headline in the final CTA */
    color: var(--color-accent);
}
.contact p.cta-body {
    font-size: 1.05rem;
    color: var(--color-text);
    margin-top: 0.5rem;
}
.contact p.cta-note {
    font-size: 0.9rem;
    font-style: italic;
    color: var(--color-muted);
    margin-top: 0.25rem;
}

/* Pricing */
.pricing-cards {
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.pricing-card {
    background-color: var(--color-card-bg);
    padding: 2.5rem 2rem;
    border-radius: var(--radius);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: space-between;
    position: relative;
}
.pricing-card h3 {
    font-size: 1.4rem;
}
.pricing-card .price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
}
.pricing-card .desc {
    font-size: 0.95rem;
    color: var(--color-muted);
    min-height: 60px;
}
.pricing-card ul {
    list-style: none;
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}
.pricing-card ul li {
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}
.pricing-card ul li::before {
    /* Pseudo-element removed; icons are inserted directly in the HTML */
    content: none;
}

/* Limit the number of lines for descriptions in the process section to three */
/* Slightly smaller font for process descriptions so the original copy fits within
   three lines without truncation */
.process .card p {
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Ensure images never overflow their containers */
.responsive-img {
    max-width: 100%;
    height: auto;
    display: block;
}
.pricing-card .btn {
    margin-top: auto;
}
.pricing-card.highlighted {
    border: 2px solid var(--color-primary);
    transform: translateY(-8px);
}

/* Cal.com embed container: crop excess header/footer padding */
.cal-embed {
    max-width: 800px;
    margin: 0 auto;
    /* Set a more compact height for the embedded Cal.com widget and crop the top
       portion so only the booking controls are visible. */
    height: 450px;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.cal-embed iframe {
    width: 100%;
    height: 130%; /* extend height to allow cropping of Cal.com header */
    margin-top: -100px;
    border: none;
}

/* Utility: center children horizontally */
.center {
    text-align: center;
    margin-top: 1.5rem;
}

/* Center content within the contact section */
.contact .container {
    text-align: center;
}

/* Contact form */
.contact-form {
    display: grid;
    gap: 1rem;
    max-width: 700px;
    margin: 0 auto;
}
.form-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.form-row input {
    flex: 1;
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 1rem;
}
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(49,105,224,0.2);
}
.contact-form button {
    width: fit-content;
    border: none;
}

/* Footer */
.footer {
    padding: 3rem 0;
}
/* Footer layout */
.footer-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem;
    align-items: start;
    margin-bottom: 2rem;
}
.footer-col img {
    height: 50px;
    margin-bottom: 1rem;
}
.footer-col p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #cbd5e1;
}
.links-col ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
}
.links-col li {
    width: auto;
}
.links-col a,
.cta-col a {
    /* Use muted greys for footer links in the black/white palette */
    color: #888888;
    font-weight: 600;
}
.links-col a:hover,
.cta-col a:hover {
    color: #aaaaaa;
}
.footer-bottom {
    border-top: 1px solid #333333;
    padding-top: 1rem;
    text-align: center;
}
.footer-bottom p {
    font-size: 0.8rem;
    color: #888888;
}

/* Responsive tweaks */
@media (max-width: 600px) {
    .hero-title {
        font-size: 2.4rem;
    }
    .hero-subtitle {
        font-size: 1rem;
    }
    .nav-container {
        flex-direction: column;
        gap: 1rem;
    }
    .navigation {
        flex-wrap: wrap;
        justify-content: center;
    }
    .btn.cta {
        display: block;
        width: 100%;
    }
}