/* ================================================================
   ADVISORY CAMPUS — WEBSITE STYLES
   ================================================================
   Quick editing guide:
   - Brand colours: :root at the top of this file
   - Header/menu: .header, .topbar, .nav
   - Hero: .hero, .hero-art, .hero-pattern
   - About: .split-intro, .pillars
   - Company cards: .expertise, .company, .cards
   - Approach: .process, .pattern-panel
   - Contact: .contact, .contact-box
   - Mobile: @media rules at the bottom

   Pattern images are stored in assets/pattern-black.png and
   assets/pattern-colour.png. Please keep these paths relative.
   ================================================================ */

:root {
    --ink:#211f20;
    --muted:#696568;
    --paper:#faf9f7;
    --line:#e5e2df;
    --orange:#c37b61;
    --aqua:#3ea9b7;
    --teal:#2b7c7a;
    --sand:#d0bead;
    --font:Arial,Helvetica,sans-serif;
}

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

html {
    scroll-behavior:smooth;
}

body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font);
    -webkit-font-smoothing:antialiased;
}

a {
    color:inherit;
}

button,a {
    touch-action:manipulation;
}

::selection {
    background:var(--sand);
    color:var(--ink);
}

.wrap {
    width:min(1180px,calc(100% - 64px));
    margin:auto;
}

.topbar {
    height:83px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}

/* ===== HEADER AND NAVIGATION ===== */
.header {
    position:relative;
    z-index:10;
    background:#fff;
    border-bottom:1px solid var(--line);
}

.logo-lockup {
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
}

.logo-mark {
    width: 70px;
    height: 70px;
    object-fit: contain;
    border: none;
    background: transparent;
}

.logo-word {
    font-size:13px;
    font-weight:800;
    letter-spacing:.14em;
    line-height:1.35;
}

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

.nav a {
    text-decoration:none;
    font-size:12px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    transition:opacity .2s;
}

.nav a:hover {
    opacity:.55;
}

.nav .nav-cta {
    border:1px solid var(--ink);
    padding:14px 19px;
}

.mobile-toggle {
    display:none;
    background:none;
    border:0;
    font-size:24px;
    cursor:pointer;
}

/* ===== HERO / FIRST SCREEN ===== */
.hero {
    position:relative;
    overflow:hidden;
    background:#fff;
    min-height:665px;
    display:flex;
    align-items:center;
}

.hero>.wrap {
    position:relative;
    z-index:2;
    padding-top:95px;
    padding-bottom:100px;
}

.eyebrow {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:11px;
    letter-spacing:.24em;
    text-transform:uppercase;
    font-weight:800;
}

.eyebrow:before {
    content:"";
    width:32px;
    height:2px;
    background:currentColor;
}

.hero h1 {
    max-width:800px;
    font-size:clamp(52px,7.4vw,112px);
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:-.068em;
    line-height:.99;
    margin:30px 0 25px;
}

.hero h1 span {
    display:block;
    color:transparent;
    -webkit-text-stroke:1.5px var(--ink);
}

.hero-sub {
    font-size:clamp(16px,2vw,21px);
    line-height:1.6;
    max-width:560px;
    color:#615e60;
}

.actions {
    display:flex;
    align-items:center;
    gap:17px;
    flex-wrap:wrap;
    margin-top:34px;
}

.button {
    display:inline-flex;
    align-items:center;
    gap:27px;
    min-height:50px;
    padding:0 22px;
    font-size:12px;
    letter-spacing:.09em;
    font-weight:800;
    text-transform:uppercase;
    text-decoration:none;
    border:1px solid var(--ink);
    transition:transform .2s,background .2s,color .2s;
}

.button:hover {
    transform:translateY(-3px);
}

.button.dark {
    background:var(--ink);
    color:#fff;
}

.button.ghost {
    background:transparent;
}

.button span {
    font-size:18px;
    font-weight:400;
}

.hero-count {
    margin-top:68px;
    display:flex;
    align-items:center;
    gap:12px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.dots {
    display:flex;
    gap:5px;
}

.dots i {
    display:block;
    width:9px;
    height:9px;
    border-radius:50%;
}

.dots i:nth-child(1) {
    background:var(--orange);
}

.dots i:nth-child(2) {
    background:var(--teal);
}

.dots i:nth-child(3) {
    background:var(--aqua);
}

.dots i:nth-child(4) {
    background:var(--sand);
}

.hero-art {
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    width:44%;
    background:var(--ink);
    overflow:hidden;
    clip-path:polygon(23% 0,100% 0,100% 100%,0 100%);
}

.pattern {
    position:absolute;
    inset:0;
    opacity:1;
    background-repeat:repeat;
    background-position:center center;
}

.hero-pattern {
    inset:-6%;
    transform:rotate(-11deg) scale(1.08);
    background-image:url('assets/pattern-black.png');
    background-size:380px auto;
    filter:invert(1);
    animation:floatPattern 38s linear infinite;
}

.hero-art:after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(33,31,32,.45),rgba(33,31,32,.08) 68%,transparent);
}

@keyframes floatPattern {
    0% {
        transform:translate3d(0,0,0) rotate(-11deg) scale(1.08);
    }
    100% {
        transform:translate3d(-70px,-90px,0) rotate(-11deg) scale(1.08);
    }
}

/* ===== SHARED SECTION STYLES / ABOUT ===== */
section {
    scroll-margin-top:40px;
}

.section-pad {
    padding:100px 0;
}

.kicker {
    font-size:12px;
    letter-spacing:.2em;
    text-transform:uppercase;
    font-weight:800;
    color:#6d6a6b;
}

.split-intro {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    align-items:start;
}

.section-title {
    font-size:clamp(38px,5vw,70px);
    line-height:1.05;
    letter-spacing:-.055em;
    margin:15px 0 0;
    text-transform:uppercase;
}

.body-copy {
    font-size:17px;
    line-height:1.85;
    color:#5a5658;
    max-width:560px;
}

.pillars {
    margin-top:55px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line);
}

.pillar {
    padding:28px 30px 5px 0;
}

.pillar b {
    display:block;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.12em;
}

.pillar p {
    color:#777276;
    font-size:14px;
    line-height:1.65;
}

.pillar .tiny-shape {
    margin-bottom:25px;
    height:25px;
    width:25px;
    background:var(--aqua);
}

.pillar:nth-child(2) .tiny-shape {
    border-radius:50%;
    background:var(--teal);
}

.pillar:nth-child(3) .tiny-shape {
    clip-path:polygon(50% 0,100% 100%,0 100%);
    background:var(--orange);
}

/* ===== FOUR COMPANY CARDS ===== */
.expertise {
    background:var(--ink);
    color:white;
    position:relative;
    overflow:hidden;
}

.expertise-header {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:35px;
    margin-bottom:42px;
}

.expertise-header .kicker {
    color:#bbb6b8;
}

.expertise-header p {
    max-width:320px;
    line-height:1.7;
    color:#bcb8b8;
    font-size:15px;
}

.cards {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

.company {
    position:relative;
    overflow:hidden;
    background:#fff;
    color:var(--ink);
    padding:37px;
    min-height:344px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    transition:transform .2s;
}

.company:hover {
    transform:translateY(-4px);
}

.company:before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6px;
    background:var(--accent);
}

.company .id {
    font-size:12px;
    font-weight:800;
    letter-spacing:.15em;
    color:#787476;
}

/* ===== COMPANY LOGOS (TOP RIGHT OF EACH CARD) ===== */
.company-logo {
    position: absolute;
    top: 29px;
    right: 28px;
    width: 94px;
    height: 94px;
    object-fit: contain;
    object-position: center;
    display: block;
}


/* ===== CENTACC LOGO ===== */

.company.cent .company-logo {
    width: 130px;
    height: 100px;
    right: 22px;
    top: 23px;
}


.company h3 {
    font-size:clamp(28px,3.4vw,41px);
    text-transform:uppercase;
    letter-spacing:-.045em;
    margin:45px 0 12px;
}

.company .tag {
    font-size:11px;
    letter-spacing:.15em;
    font-weight:800;
    text-transform:uppercase;
    color:var(--accent);
    margin:0 0 16px;
}

.company p {
    font-size:15px;
    line-height:1.7;
    color:#6a6567;
    max-width:385px;
    margin:0 0 24px;
}

.company a {
    margin-top:auto;
    display:inline-flex;
    align-items:center;
    gap:20px;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.1em;
    text-decoration:none;
    border-bottom:1px solid var(--ink);
    padding-bottom:8px;
}

.company a span {
    font-size:18px;
}

.company .soon {
    font-size:12px;
    font-weight:700;
    color:#676366;
    margin-top:auto;
    letter-spacing:.05em;
}

.expertise-footer {
    margin-top:32px;
    color:#bcb8b8;
    font-size:13px;
    line-height:1.7;
}

/* ===== OUR APPROACH / PATTERN ===== */
.process {
    background:#f0eeeb;
}

.process-grid {
    display:grid;
    grid-template-columns:1.05fr 1fr;
    gap:90px;
    align-items:center;
}

.steps {
    border-top:1px solid #cfcac6;
}

.step {
    display:flex;
    gap:25px;
    padding:24px 0;
    border-bottom:1px solid #cfcac6;
}

.step .num {
    font-weight:800;
    font-size:13px;
    color:#8a8584;
}

.step b {
    display:block;
    text-transform:uppercase;
    font-size:14px;
    letter-spacing:.08em;
    margin-bottom:8px;
}

.step p {
    font-size:15px;
    line-height:1.65;
    color:#6e686a;
    margin:0;
}


.pattern-panel {
    background: transparent;
}

.pattern-panel .pattern {
    inset:0;
    background-size:200px 200px;
    opacity:.55;
    animation:none;
}

.pattern-panel .panel-quote {
    position:relative;
    background:var(--ink);
    color:#fff;
    padding:47px;
    width:76%;
   box-shadow: none;
}

.panel-quote strong {
    font-size:clamp(28px,3vw,44px);
    letter-spacing:-.05em;
    line-height:1.13;
    text-transform:uppercase;
}

.panel-quote small {
    display:block;
    margin-top:25px;
    letter-spacing:.17em;
    text-transform:uppercase;
    font-weight:700;
    font-size:10px;
    color:#cfcacc;
}

/* ===== CONTACT ===== */
.contact {
    background:#fff;
    position:relative;
    overflow:hidden;
}

.contact-inner {
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:70px;
    align-items:center;
}

.contact .section-title {
    max-width:670px;
}

.contact p {
    line-height:1.8;
    font-size:16px;
    color:#777173;
    max-width:520px;
}

.contact-box {
    padding:35px;
    border:1px solid var(--line);
    background:#fbfaf9;
}

.contact-box .small {
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.17em;
    color:#777173;
    font-weight:800;
}

.contact-box .number {
    font-size:clamp(22px,2.9vw,35px);
    font-weight:800;
    margin:13px 0 22px;
    letter-spacing:-.04em;
}

.contact-box .button {
    width:100%;
    justify-content:space-between;
}

.contact-box .note {
    font-size:12px;
    color:#8a8584;
    margin-top:18px;
    line-height:1.6;
}

footer {
    background:var(--ink);
    color:#fff;
    padding:32px 0;
}

.foot {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.foot .footer-brand {
    font-size:13px;
    letter-spacing:.13em;
    font-weight:800;
}

.foot .fine {
    color:#aaa5a6;
    font-size:12px;
}

.foot a {
    color:white;
    text-decoration:none;
    border-bottom:1px solid #777;
}

/* ===== RESPONSIVE / TABLET AND MOBILE ===== */
@media(max-width:950px) {
    .hero-art {
        width:38%;
        opacity:.25;
    }
    .hero h1 {
        max-width:780px;
    }
    .split-intro,.process-grid,.contact-inner {
        gap:35px;
    }
    .company {
        padding:28px;
    }
    .company-logo {
        width: 80px;
        height: 80px;
        right: 24px;
        top: 26px;
    }
    .wrap {
        width:min(1180px,calc(100% - 40px));
    }
}

@media(max-width:680px) {
    .topbar {
        height:72px;
    }
    .logo-mark {
        width:48px;
        height:48px;
    }
    .logo-word {
        font-size:11px;
    }
    .mobile-toggle {
        display:block;
    }
    .nav {
        display:none;
        position:absolute;
        left:0;
        right:0;
        top:72px;
        background:#fff;
        padding:25px;
        flex-direction:column;
        align-items:stretch;
        gap:25px;
        box-shadow:0 12px 20px rgba(0,0,0,.1);
    }
    .nav.open {
        display:flex;
    }
    .hero {
        min-height:640px;
    }
    .hero>.wrap {
        padding-top:65px;
        padding-bottom:80px;
    }
    .hero-art {
        width:75%;
        opacity:.12;
    }
    .hero h1 {
        font-size:clamp(51px,12vw,80px);
    }
    .hero-count {
        margin-top:60px;
    }
    .section-pad {
        padding:65px 0;
    }
    .split-intro,.process-grid,.contact-inner {
        grid-template-columns:1fr;
    }
    .pillars {
        grid-template-columns:1fr;
    }
    .pillar {
        padding:22px 0 0;
    }
    .pillar .tiny-shape {
        margin-bottom:15px;
    }
    .expertise-header {
        display:block;
    }
    .expertise-header p {
        max-width:450px;
    }
    .cards {
        grid-template-columns:1fr;
    }
    .company {
        min-height:306px;
    }
    .company h3 {
        margin-top:42px;
    }
    .company-logo {
        width: 70px;
        height: 70px;
        right: 20px;
        top: 25px;
    }
    .pattern-panel {
        min-height:340px;
    }
    .contact-inner {
        gap:30px;
    }
    .foot {
        flex-direction:column;
        align-items:flex-start;
    }
}

@media(prefers-reduced-motion:reduce) {
    *,*:before,*:after {
        scroll-behavior:auto!important;
        animation:none!important;
        transition:none!important;
    }
}