/* Cousins Nigeria Limited — site stylesheet
   Tokens drawn from the Cousins Nigeria Design System v1.0 */

:root{
  --red-50:#FDECED;  --red-100:#FBD2D5; --red-300:#E37079;
  --red-500:#D0202F; --red-700:#A11824; --red-900:#6B1018;
  --charcoal-50:#F7F5F1; --charcoal-200:#E4E0D8; --charcoal-500:#8A8478;
  --charcoal-700:#4A4640; --charcoal-900:#2A2723;
  --amber-100:#FBEAD1; --amber-500:#E8A33D; --amber-700:#B87A20;
  --success:#3F7A4E;
  --bg:#FCFBF9;
  --radius:8px;
  --maxw:1200px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--charcoal-900);
  font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif; line-height:1.6;
  overflow-x:hidden; width:100%;
}
h1,h2,h3,h4{font-family:'Archivo',sans-serif; font-weight:800; color:var(--charcoal-900); margin:0 0 16px; word-break:break-word;}
a{color:var(--red-500); text-decoration:none; transition:color .15s;}
a:hover{color:var(--red-700);}
img{max-width:100%; height:auto; display:block;}
iframe{max-width:100%;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px; width:100%;}
.eyebrow{font-size:13px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--red-500); margin-bottom:14px;}
.section{padding:88px 0;}
.section-alt{background:var(--charcoal-50);}
.section-dark{background:var(--charcoal-900); color:#fff;}
.section-dark h1,.section-dark h2,.section-dark h3{color:#fff;}
.section-dark p{color:#C9C4BA;}

/* Header */
header.site{position:sticky; top:0; z-index:80; background:rgba(252,251,249,0.96); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--charcoal-200); width:100%;}
.nav-row{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 32px; max-width:var(--maxw); margin:0 auto;}
.brand-lockup{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.brand-lockup img{height:38px; width:auto; display:block;}

nav.primary{display:flex; gap:26px; align-items:center; flex-wrap:wrap;}
nav.primary > a, nav.primary > .dropdown > .dd-label{font-family:'IBM Plex Sans',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--charcoal-700); text-decoration:none; cursor:pointer; background:none; border:none; padding:6px 0;}
nav.primary > a:hover, .dropdown:hover > .dd-label{color:var(--red-500);}
.dropdown{position:relative;}
.dd-menu{display:none; position:absolute; top:100%; left:-16px; background:#fff; border:1px solid var(--charcoal-200); border-radius:var(--radius); min-width:240px; box-shadow:0 12px 28px rgba(42,39,35,0.12); padding:10px; z-index:90;}
.dropdown:hover .dd-menu{display:block;}
.dd-menu a{display:block; padding:9px 12px; border-radius:6px; font-size:13.5px; color:var(--charcoal-700); text-decoration:none;}
.dd-menu a:hover{background:var(--charcoal-50); color:var(--red-500);}
.nav-cta{display:inline-flex; align-items:center; gap:8px; background:var(--red-500); color:#fff; padding:10px 18px; border-radius:var(--radius); font-weight:600 !important; font-size:13px; text-transform:uppercase; letter-spacing:0.04em; white-space:nowrap; border:1.5px solid var(--red-500); transition:background .15s, color .15s, border-color .15s;}
.nav-cta:hover{background:transparent !important; color:var(--red-500) !important; border-color:var(--red-500);}
.nav-cta svg{flex-shrink:0;}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius); padding:13px 26px; font-weight:600; font-size:14.5px; text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:background .15s, border-color .15s, transform .15s; min-height:44px; text-align:center;}
.btn-primary{background:var(--red-500); color:#fff !important;}
.btn-primary:hover{background:var(--red-700); color:#fff !important;}
.btn-secondary{background:transparent; color:var(--red-500) !important; border-color:var(--red-500);}
.btn-secondary:hover{background:var(--red-50);}
.btn-dark{background:var(--charcoal-900); color:#fff !important;}
.btn-ghost{background:transparent; color:var(--charcoal-900) !important; border-color:var(--charcoal-200);}
.btn-ghost:hover{border-color:var(--charcoal-500);}
.btn-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}

.btn-whatsapp{background:transparent; color:#1F9E52 !important; border-color:#BEE7CE; display:inline-flex; align-items:center; gap:9px;}
.btn-whatsapp:hover{background:#F0FBF4; border-color:#1F9E52;}
.btn-whatsapp svg{flex-shrink:0;}
.section-dark .btn-whatsapp{color:#4CD787 !important; border-color:#4A4640;}
.section-dark .btn-whatsapp:hover{background:rgba(76,215,135,0.08); border-color:#4CD787;}

/* Hero */
.hero{background:var(--charcoal-900); padding:110px 0 90px; position:relative; overflow:hidden;}
.hero::after{content:"";position:absolute; right:-120px; top:-160px; width:480px; height:480px; border-radius:50%; background:var(--red-500); opacity:0.16;}
.hero.has-photo{background-size:cover; background-position:center;}
.hero.has-photo::before{content:"";position:absolute; inset:0; background:linear-gradient(100deg,rgba(20,18,15,0.94) 0%,rgba(20,18,15,0.82) 42%,rgba(20,18,15,0.55) 100%);}
.hero.has-photo::after{display:none;}
.hero .inner{position:relative; max-width:820px;}
.hero .kicker{font-family:'IBM Plex Sans',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--amber-500); margin-bottom:18px;}
.hero h1{font-size:clamp(30px,4.8vw,56px); line-height:1.08; color:#fff; margin-bottom:22px;}
.hero p{font-size:clamp(16px,2vw,18px); color:#C9C4BA; max-width:620px; margin:0 0 32px;}

.page-hero{background:var(--charcoal-900); padding:80px 0 64px; position:relative; overflow:hidden;}
.page-hero.has-photo{background-size:cover; background-position:center;}
.page-hero.has-photo::before{content:"";position:absolute; inset:0; background:linear-gradient(100deg,rgba(20,18,15,0.92) 0%,rgba(20,18,15,0.78) 45%,rgba(20,18,15,0.5) 100%);}
.page-hero .wrap{position:relative;}
.page-hero h1{color:#fff; font-size:clamp(26px,3.8vw,42px); margin-bottom:14px;}
.page-hero p{color:#C9C4BA; font-size:clamp(15px,1.8vw,16.5px); max-width:680px; margin:0;}
.breadcrumb{font-size:12.5px; color:var(--amber-500); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:12px;}
.breadcrumb a{color:var(--amber-500);}

/* Grids & cards */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start;}
.pillar{border-top:3px solid var(--red-500); padding-top:16px;}
.pillar h3{font-size:17px; margin-bottom:8px;}
.pillar p{font-size:14px; color:var(--charcoal-500); margin:0;}

.card{background:#fff; border:1px solid var(--charcoal-200); border-radius:var(--radius); overflow:hidden; transition:box-shadow .15s, transform .15s; height:100%;}
.card:hover{box-shadow:0 14px 30px rgba(42,39,35,0.1); transform:translateY(-2px);}
.card .art{aspect-ratio:4/3; background:repeating-linear-gradient(135deg,#F0EDE7,#F0EDE7 10px,#E4E0D8 10px,#E4E0D8 20px); display:flex; align-items:center; justify-content:center; position:relative;}
.card .art.dark{background:repeating-linear-gradient(135deg,#3A3630,#3A3630 10px,#332F29 10px,#332F29 20px);}
.card .art svg{width:44px; height:44px; stroke:var(--red-500); fill:none; stroke-width:1.6;}
.card .art.photo{background-size:cover; background-position:center; align-items:flex-end; justify-content:flex-start;}
.card .art.photo::after{content:"";position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(20,18,15,0.65) 100%);}
.card .art.photo.dark::after{background:linear-gradient(180deg,rgba(20,18,15,0.15) 0%,rgba(10,9,7,0.72) 100%);}
.card .art-badge{position:relative; z-index:1; margin:14px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,0.92); display:flex; align-items:center; justify-content:center;}
.card .art-badge svg{width:20px; height:20px;}
.card .body{padding:22px;}
.card h3{font-size:17px; margin-bottom:8px;}
.card p{font-size:14px; color:var(--charcoal-500); margin:0 0 16px;}
.card p:last-child{margin-bottom:0;}

.sector-card, .brand-card{display:flex; flex-direction:column; color:inherit; height:100%;}
.brand-card .body{display:flex; flex-direction:column; align-items:flex-start; gap:8px; flex:1;}
.brand-logo-tile{height:68px; display:flex; align-items:center; justify-content:flex-start; padding:18px 22px 0;}
.brand-logo-tile img{max-height:38px; max-width:140px; width:auto; height:auto; object-fit:contain;}
.brand-name-tile{height:68px; display:flex; align-items:center; font-family:'Archivo',sans-serif; font-weight:900; font-size:18px; color:var(--charcoal-900); padding:18px 22px 0;}

.logo-strip{display:flex; align-items:center; gap:36px; flex-wrap:wrap; opacity:0.9;}
.logo-strip img{height:30px; max-width:120px; width:auto; object-fit:contain; filter:grayscale(1); opacity:0.75;}

/* Uniform logo box used on individual brand pages */
.brand-logo-box{background:#fff; border:1px solid var(--charcoal-200); border-radius:8px; padding:22px; display:flex; align-items:center; justify-content:flex-start; min-height:92px; margin-bottom:24px;}
.brand-logo-box img{max-height:50px; max-width:220px; width:auto; height:auto; object-fit:contain;}
.brand-logo-box .brand-name-tile{padding:0; height:auto; font-size:30px;}

/* Homepage brand marquee */
.brand-marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); width:100%;}
.brand-marquee-track{display:flex; align-items:center; width:max-content; gap:48px; animation:brand-marquee-scroll 32s linear infinite;}
.brand-marquee:hover .brand-marquee-track{animation-play-state:paused;}
.brand-marquee-item{height:64px; width:150px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;}
.brand-marquee-item img{max-height:40px; max-width:150px; width:auto; height:auto; object-fit:contain; filter:grayscale(1); opacity:0.8;}
.brand-marquee-item .brand-name-tile{padding:0; height:auto; font-size:15px; justify-content:center; width:100%; text-align:center;}
@keyframes brand-marquee-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){.brand-marquee-track{animation:none;}}

/* Footer */
footer.site{background:var(--charcoal-900); color:#C9C4BA; padding:64px 0 28px; margin-top:40px;}
footer.site h4{color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:16px;}
footer.site a{color:#C9C4BA;}
footer.site a:hover{color:#fff;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px;}
.footer-bottom{border-top:1px solid #423E38; padding-top:22px; font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}
.social-row{display:flex; gap:14px; margin-top:14px;}
.social-row a{width:36px; height:36px; border:1px solid #423E38; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.social-row a:hover{border-color:#C9C4BA;}

.directions-link{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; margin:6px 0 14px;}

/* Homepage photo strip */
.home-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.home-strip figure{margin:0; border-radius:var(--radius); overflow:hidden; background:var(--charcoal-50);}
.home-strip img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block;}
.home-strip figcaption{padding:12px 14px; font-size:13.5px; font-weight:600; color:var(--charcoal-700);}

/* WhatsApp floating button */
.wa-float{position:fixed; right:22px; bottom:22px; z-index:100; background:#25D366; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,0.28); transition:transform .15s;}
.wa-float:hover{transform:scale(1.06);}

/* Navigation Toggle Button */
.nav-toggle{display:none; background:transparent; border:1px solid var(--charcoal-200); border-radius:var(--radius); font-size:22px; color:var(--charcoal-900); padding:6px 12px; cursor:pointer; min-width:44px; min-height:44px; line-height:1;}
.nav-toggle:focus,.nav-toggle:hover{border-color:var(--red-500); color:var(--red-500);}

/* Contact Form */
.contact-form-card{background:#fff; border:1px solid var(--charcoal-200); border-radius:var(--radius); padding:32px; box-shadow:0 8px 24px rgba(42,39,35,0.06);}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.form-group{margin-bottom:18px;}
.form-group.full-width{grid-column:1 / -1;}
.form-label{display:block; font-size:13.5px; font-weight:600; color:var(--charcoal-900); margin-bottom:6px;}
.form-label span.req{color:var(--red-500);}
.form-control{width:100%; padding:12px 14px; border:1.5px solid var(--charcoal-200); border-radius:6px; font-family:'IBM Plex Sans',sans-serif; font-size:14.5px; color:var(--charcoal-900); background:#fff; transition:border-color .15s, box-shadow .15s; outline:none;}
.form-control:focus{border-color:var(--red-500); box-shadow:0 0 0 3px rgba(208,32,47,0.12);}
select.form-control{cursor:pointer; appearance:auto;}
textarea.form-control{resize:vertical; min-height:120px;}

.form-alert{display:none; padding:16px 20px; border-radius:6px; margin-bottom:24px; font-size:15px; line-height:1.5; font-weight:600;}
.form-alert.show{display:flex; align-items:center; gap:12px;}
.form-alert.success{background:#EAF7EE; border:1.5px solid #27AE60; color:#146C36;}
.form-alert.error{background:#FDF0F1; border:1.5px solid #E37079; color:#A11824;}
.form-alert svg{flex-shrink:0;}

/* ==========================================================================
   Responsive Breakpoints & Adaptations
   ========================================================================== */

/* Medium Devices & Small Laptops (992px to 1199px) */
@media (max-width: 1024px){
  .wrap{padding:0 24px;}
  .nav-row{padding:14px 24px;}
  .grid-4{grid-template-columns:repeat(3,1fr); gap:18px;}
  .footer-grid{grid-template-columns:1.2fr 1fr 1fr 1fr; gap:24px;}
}

/* Tablets & Mobile Navigation (<= 900px) */
@media (max-width: 900px){
  .wrap{padding:0 20px;}
  .nav-row{padding:12px 20px;}
  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border:1.5px solid var(--charcoal-200);
    border-radius:8px;
    background:#fff;
    font-size:22px;
    color:var(--charcoal-900);
    cursor:pointer;
    position:relative;
    z-index:200;
    transition:background .15s, border-color .15s;
  }
  .nav-toggle:hover{
    border-color:var(--red-500);
    color:var(--red-500);
  }
  
  /* Sliding Drawer (Off-Canvas Burger Menu) */
  nav.primary{
    display:flex;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:min(320px, 86vw);
    height:100vh;
    height:100dvh;
    background:#ffffff;
    flex-direction:column;
    align-items:stretch;
    padding:80px 24px 90px;
    box-shadow:-10px 0 40px rgba(0,0,0,0.25);
    gap:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    z-index:150;
    transform:translateX(100%);
    transition:transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.32s;
    visibility:hidden;
    box-sizing:border-box;
  }
  nav.primary.open{
    transform:translateX(0);
    visibility:visible;
  }

  /* Dimmed Backdrop Overlay */
  nav.primary::before{
    content:'';
    position:fixed;
    top:0;
    left:-100vw;
    width:100vw;
    height:100vh;
    height:100dvh;
    background:rgba(0,0,0,0.45);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.32s;
    z-index:-1;
  }
  nav.primary.open::before{
    opacity:1;
    pointer-events:auto;
  }
  
  /* Unified Mobile Nav Links and Dropdown Headers */
  nav.primary > a:not(.nav-cta),
  nav.primary > .dropdown > .dd-label,
  nav.primary .dropdown .dd-label{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:15px 4px !important;
    margin:0 !important;
    font-family:'IBM Plex Sans',-apple-system,sans-serif !important;
    font-size:14px !important;
    font-weight:700 !important;
    letter-spacing:0.05em !important;
    text-transform:uppercase !important;
    color:var(--charcoal-900) !important;
    text-align:left !important;
    border:none !important;
    border-bottom:1px solid #ECEAE5 !important;
    border-radius:0 !important;
    background:transparent !important;
    cursor:pointer !important;
    transition:color .15s !important;
  }
  nav.primary > a:not(.nav-cta):hover,
  nav.primary > .dropdown > .dd-label:hover,
  nav.primary > .dropdown.open > .dd-label{
    color:var(--red-500) !important;
    background:transparent !important;
  }
  
  .dropdown{
    width:100%;
    margin:0;
    padding:0;
    position:static;
  }
  
  /* Sliding Submenu Panel */
  .dd-menu{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#ffffff;
    padding:80px 24px 90px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    z-index:160;
    transform:translateX(100%);
    transition:transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.28s;
    visibility:hidden;
    box-shadow:none;
    border:none;
    border-radius:0;
    margin:0;
    width:100%;
    box-sizing:border-box;
    display:flex !important;
    flex-direction:column;
  }
  .dropdown.open .dd-menu{
    transform:translateX(0);
    visibility:visible;
  }
  
  /* Submenu Back Button */
  .dd-back-btn{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    padding:12px 4px 14px !important;
    margin:0 0 8px !important;
    font-family:'IBM Plex Sans',-apple-system,sans-serif !important;
    font-size:13.5px !important;
    font-weight:700 !important;
    letter-spacing:0.05em !important;
    text-transform:uppercase !important;
    color:var(--red-500) !important;
    background:transparent !important;
    border:none !important;
    border-bottom:1.5px solid #ECEAE5 !important;
    cursor:pointer !important;
    width:100% !important;
    text-align:left !important;
    box-sizing:border-box !important;
  }
  .dd-back-btn svg{
    stroke:var(--red-500);
    flex-shrink:0;
  }
  
  .dd-menu a{
    display:flex;
    align-items:center;
    padding:13px 4px;
    font-size:13.5px;
    font-weight:600;
    text-transform:none;
    letter-spacing:normal;
    color:var(--charcoal-800);
    border-bottom:1px solid #ECEAE5;
    border-radius:0;
    text-decoration:none;
    background:transparent;
  }
  .dd-menu a:last-child{border-bottom:none;}
  .dd-menu a:hover{
    background:transparent;
    color:var(--red-500);
  }
  
  /* Sticky WhatsApp CTA Button at the bottom of drawer */
  .nav-cta{
    position:absolute !important;
    bottom:20px !important;
    left:24px !important;
    right:24px !important;
    width:calc(100% - 48px) !important;
    z-index:180 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:14px !important;
    margin:0 !important;
    font-size:14px !important;
    font-weight:700 !important;
    border-radius:8px !important;
    background:var(--red-500) !important;
    color:#fff !important;
    border:1.5px solid var(--red-500) !important;
    box-shadow:0 4px 14px rgba(208,32,47,0.22) !important;
    box-sizing:border-box !important;
  }
  .nav-cta:hover{
    background:var(--red-700) !important;
    color:#fff !important;
  }

  .grid-2{grid-template-columns:1fr; gap:28px;}
  .grid-3{grid-template-columns:repeat(2,1fr); gap:20px;}
  .grid-4{grid-template-columns:repeat(2,1fr); gap:18px;}
  .footer-grid{grid-template-columns:repeat(2,1fr); gap:32px;}
  .section{padding:64px 0;}
  .hero{padding:80px 0 64px;}
  .home-strip{grid-template-columns:1fr;}
}

/* Small Tablets & Large Phones (<= 600px) */
@media (max-width: 600px){
  .wrap{padding:0 16px;}
  .nav-row{padding:10px 16px;}
  .brand-lockup img{height:32px;}
  
  .grid-3{grid-template-columns:1fr; gap:16px;}
  .grid-4{grid-template-columns:1fr; gap:16px;}
  .footer-grid{grid-template-columns:1fr; gap:28px;}
  
  .section{padding:48px 0;}
  .hero{padding:60px 0 48px;}
  .page-hero{padding:48px 0 36px;}
  
  .btn-row{flex-direction:column; align-items:stretch;}
  .btn-row .btn{width:100%;}
  
  .wa-float{
    right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    width:50px; height:50px;
  }
  .wa-float svg{width:26px; height:26px;}

  /* Prevent model lists from clipping on narrow screens */
  ul[style*="columns:2"], ul[style*="columns: 2"]{
    columns:1 !important;
  }
  
  .brand-logo-box{padding:16px; min-height:80px; justify-content:center;}
  .brand-logo-box img{max-height:42px;}
}

/* Extra Small Phones (<= 380px) */
@media (max-width: 380px){
  .wrap{padding:0 12px;}
  .hero h1{font-size:26px;}
  .page-hero h1{font-size:24px;}
  .btn{padding:11px 18px; font-size:13.5px;}
}