/* --- CSS RESET & NORMALIZE --- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s, samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,main,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;box-sizing:border-box;}body{line-height:1;}ol,ul{list-style:none;}table{border-collapse:collapse;border-spacing:0;}a{text-decoration:none;color:inherit;}button,input,select,textarea{font-family:inherit;}img{max-width:100%;height:auto;display:block;}h1,h2,h3,h4,h5,h6{font-weight:inherit;}

/* --- BRAND & INDUSTRIAL MODERN VARIABLES --- */
:root{
  --color-primary: #3D2C29;
  --color-secondary: #971E42;
  --color-accent: #F3E9DB;
  --color-grey-900: #23201f;
  --color-grey-800: #282525;
  --color-grey-700: #3C3736;
  --color-metal: #B1ADA5;
  --color-white: #fff;
  --color-bg: #23201f;
  --color-shadow: rgba(24,20,18,0.50);
  --color-border: #5f5049;
  --radius-m: 10px;
  --radius-s: 6px;
  --shadow-card:0 2px 12px 0 var(--color-shadow);
  --shadow-menu:0 10px 40px 0 var(--color-shadow);
  --transition: all 0.22s cubic-bezier(.3,.8,.49,.99);
  --ff-display: 'Playfair Display',serif;
  --ff-body: 'Lato',Arial,sans-serif;
  --ff-industrial: 'Lato',Arial,'Roboto Mono',sans-serif;
}

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Lato:wght@400;700&display=swap');

body{
  background:var(--color-bg);
  color:var(--color-accent);
  font-family:var(--ff-body);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

/* --- CONTAINERS & SECTIONS --- */
.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}
section{
  margin-bottom:60px;
  padding:40px 20px;
  background:none;
  border-radius:0;
}
section.hero{
  padding: 64px 0 60px 0;
  background: linear-gradient(90deg, var(--color-primary) 70%, var(--color-secondary) 100%);
  color:var(--color-accent);
}
section.cta, section.cta.newsletter{
  background: var(--color-secondary);
  color: var(--color-accent);
  border-radius: var(--radius-m);
  padding:48px 20px;
  box-shadow: var(--shadow-card);
}
section.cta.newsletter{
  margin-bottom: 0;
}


/* --- TYPOGRAPHY / INDUSTRIAL MODERN --- */
h1{
  font-family:var(--ff-display);
  font-weight:600;
  font-size:48px;
  letter-spacing:1px;
  margin-bottom:24px;
  color:var(--color-accent);
}
h2{
  font-family:var(--ff-display);
  font-size:32px;
  font-weight:600;
  color:var(--color-metal);
  text-shadow:0 1px 0 #221e1c,0 2px 12px rgba(35,32,31,.14);
  margin-bottom:24px;
}
h3{
  font-family:var(--ff-industrial);
  font-size:20px;
  font-weight:700;
  text-transform:uppercase;
  color:var(--color-secondary);
  margin-bottom:12px;
  letter-spacing:0.5px;
}
h4,h5,h6{
  font-family:var(--ff-body);
  font-weight:700;
}
p,ul,ol,li,span{font-family:var(--ff-body);}
p,ul li,ol li{font-size:16px;line-height:1.7;}
a{transition:color .15s;}
a:hover{color:var(--color-secondary);}

strong{font-weight:700;color:var(--color-accent);}

/* --- FLEXBOX LAYOUT PATTERNS --- */
.content-wrapper,
.features-grid,
.services-grid,
.article-list,
.team-bios,
.service-list,
.faq-list,
.faq-preview,
.stepper,
.contact-details,
.legal-section,
.text-image-section{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-bottom:0;
}

.features-grid,.service-list,.services-grid,.team-bios,.article-list,.faq-list,.faq-preview,.stepper{gap:24px;}

.text-image-section{align-items:center;gap:30px;}
.content-wrapper{gap:32px;}

@media(max-width:900px){
  .features-grid,.services-grid,.team-bios,.article-list,.faq-list,.faq-preview,.service-list,.stepper{gap:18px;}
  .content-wrapper{gap:20px;}
}
@media(max-width:768px){
  .content-wrapper,
  .features-grid,
  .service-list,
  .services-grid,
  .team-bios,
  .article-list,
  .faq-list,
  .faq-preview,
  .stepper,
  .legal-section,
  .contact-details
    {flex-direction:column;gap:20px;}
  .text-image-section{flex-direction:column;align-items:flex-start;gap:16px;}
}

/* -- DEFAULT FLEX PROPS for CARDS/ITEMS -- */
.feature,.service,.team-member,.article-preview,.faq-item,.step{
  flex:1 1 270px;
  min-width:240px;
  background:var(--color-grey-800);
  border:1px solid var(--color-border);
  border-radius:var(--radius-m);
  box-shadow:var(--shadow-card);
  padding:28px 22px 24px 24px;
  margin-bottom:20px;
  transition:box-shadow var(--transition),transform var(--transition),border-color var(--transition);
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.feature img, .service img, .team-member img, .contact-block img {
  width:44px;height:44px;margin-bottom:18px;filter: grayscale(0.7);opacity:.87;background:transparent;border-radius:50%;}

.feature:hover,.service:hover,.team-member:hover,.article-preview:hover,.faq-item:hover,.step:hover{
  box-shadow:0 8px 32px 0 var(--color-shadow);
  border-color:var(--color-secondary);
  transform:translateY(-2px) scale(1.017);
  z-index:2;
}

ul{margin-left:18px;list-style:disc;color:var(--color-accent);}
.feature ul, .service ul {margin-top:10px;}

/* --- HERO STYLES --- */
.hero .container{display:flex;flex-direction:column;align-items:center;}
.hero .content-wrapper{display:flex;flex-direction:column;align-items:flex-start;gap:24px;max-width:700px;margin:0 auto;}
.hero h1{color:var(--color-accent);text-shadow:0 1px 0 #221e1c,0 2px 12px rgba(35,32,31,.13);}
.hero p{color:var(--color-metal);font-size:18px;}

.hero .cta-primary{margin-top:12px;}

/* --- BUTTONS + CTA --- */
.cta-primary{
  background:linear-gradient(90deg,var(--color-secondary) 80%, #bd305e 100%);
  color:var(--color-accent);
  padding:14px 35px;
  border:none;
  border-radius:var(--radius-m);
  font-family:var(--ff-industrial);
  font-size:18px;
  font-weight:700;
  text-transform:uppercase;
  box-shadow:0 2px 18px 0 rgba(151,30,66,0.18);
  letter-spacing:1px;
  cursor:pointer;
  transition:var(--transition);
  margin-top:12px;
  display:inline-block;
}
.cta-primary:hover,.cta-primary:focus{
  background:linear-gradient(90deg,#bd305e 0%, var(--color-secondary) 100%);
  color:var(--color-white);
  transform:translateY(-1px) scale(1.036);
  box-shadow:0 8px 24px 0 var(--color-shadow);
}

.read-more{
  color:var(--color-secondary);
  font-family:var(--ff-industrial);
  font-weight:700;
  text-transform:uppercase;
  font-size:16px;
  margin-top:10px;
  display:inline-block;
  border-bottom:2px solid var(--color-secondary);
  transition:color .16s,border-color .16s;
}
.read-more:hover,.read-more:focus{
  color:var(--color-accent);
  border-color:var(--color-accent);
}

/* --- MAIN NAVIGATION --- */
header{
  background:var(--color-grey-900);
  box-shadow: 0 2px 16px 0 var(--color-shadow);
  position:relative;
  z-index:999;
}
header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:80px;
  padding-top:0;padding-bottom:0;
}
.main-nav{
  display:flex;
  align-items:center;
  gap:26px;
}
.main-nav a{
  color:var(--color-metal);
  font-family:var(--ff-industrial);
  font-size:16px;
  padding:8px 0;
  transition:color .14s;
  position:relative;
}
.main-nav a.cta-primary{
  margin-left:16px;
  font-size:16px;
  padding:8px 22px;
}
.main-nav a:not(.cta-primary):hover,.main-nav a:not(.cta-primary):focus{color:var(--color-accent);}
.main-nav img{height:50px; width:auto; margin-right:20px; display:inline-block;vertical-align:middle;}

/* --- MOBILE MENU --- */
.mobile-menu-toggle{
  display:none;
  background:none;
  color:var(--color-accent);
  font-size:36px;
  border:none;
  cursor:pointer;
  margin-left:16px;
  z-index:1102;
  position:relative;
}
.mobile-menu{
  display:none;
  position:fixed;
  top:0; right:0;
  width:100vw; height:100vh;
  max-width:100vw; max-height:100vh;
  background:rgba(35,32,31,0.97);
  box-shadow:var(--shadow-menu);
  z-index:1100;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
  transform:translateX(100%);
  transition: transform 0.38s cubic-bezier(0.7,0,0.24,1);
  padding:0;
}
.mobile-menu.open{display:flex;transform:translateX(0);}
.mobile-menu-close{
  background:none;
  color:var(--color-accent);
  font-size:36px;
  border:none;
  align-self:flex-end;
  margin:32px 32px 14px 0;
  cursor:pointer;
  z-index:1200;
}
.mobile-nav{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:26px;
  padding:36px 36px 0 36px;
  width:100%;
}
.mobile-nav a{
  color:var(--color-accent);
  font-family:var(--ff-industrial);
  font-size:22px;
  font-weight:700;
  margin:0 0 4px 0;
  transition:color .14s;
  padding:6px 8px;
  border-radius:var(--radius-s);
}
.mobile-nav a:hover,.mobile-nav a:focus{
  color:var(--color-secondary);
  background:rgba(151,30,66,0.12);
}
@media (max-width:1000px){
  .main-nav a:not(.cta-primary){font-size:15px;}
}
@media (max-width:900px){
  .main-nav{gap:18px;}
}
@media (max-width:768px){
  .main-nav{display:none;}
  .mobile-menu-toggle{display:block;}
}

/* --- FOOTER --- */
footer{
  background:var(--color-grey-900);
  border-top:2px solid var(--color-secondary);
  margin-top:48px;
  padding:38px 0 0 0;
  color:var(--color-metal);
  font-size:15px;
  box-shadow: 0 -2px 16px rgba(35,32,31,0.18);
}
footer .container{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  display:flex;
}
footer img{height:36px;margin-bottom:16px;}
.footer-nav{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  margin:18px 0 10px 0;
}
.footer-nav a{
  color:var(--color-secondary);
  font-family:var(--ff-industrial);
  font-size:15px;
  font-weight:700;
  text-transform:uppercase;
  transition:color .14s;
}
.footer-nav a:hover,.footer-nav a:focus{color:var(--color-accent);}
.footer-details{display:flex; flex-direction:column;align-items:center;gap:5px;margin-bottom:32px;text-align:center;}
.footer-details p a{color:var(--color-accent);border-bottom:1px dotted var(--color-accent);font-weight:700;letter-spacing:.1px;}
.footer-details p a:hover{color:var(--color-secondary);}

@media (max-width:768px){
  footer .container{padding:0 6px;}
  .footer-nav{gap:12px;}
}

/* --- TESTIMONIALS --- */
.testimonials{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-top:16px;
}
.testimonial-card{
  background:var(--color-accent);
  color:var(--color-primary);
  border-radius:var(--radius-m);
  box-shadow:var(--shadow-card);
  padding:20px 28px 20px 26px;
  min-width:260px;
  max-width:370px;
  flex:1 1 290px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:22px;
  margin-bottom:20px;
  border-left:4px solid var(--color-secondary);
}
.testimonial-card p{
  color:var(--color-primary);
  font-style: italic;
  font-size:16px;
  line-height:1.7;
}
.testimonial-details{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-family:var(--ff-display);
  font-size:16px;
  color:var(--color-primary);
  font-weight:600;
}
.testimonial-details strong{font-size:17px; color:var(--color-secondary);}
.testimonial-details span{font-size:15px; color:var(--color-grey-700);}
.testimonial-card span:last-child{color:#faad15; font-size:16px; letter-spacing:.2em;}

/* Ensure strong color contrast in testionial */
.testimonial-card,
.testimonial-card p,
.testimonial-card strong,
.testimonial-details span
  {color:#201612 !important;}

/* --- CARDS --- */
.card-container{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}
.card{background:var(--color-grey-800); margin-bottom:20px; border-radius:var(--radius-m);box-shadow:var(--shadow-card);padding:28px;position:relative;}
.card-content{display:flex;flex-direction:column;justify-content:center;gap:18px;}

/* --- CONTENT BLOCKS --- */
.feature-item{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:15px;
}
.text-image-section{display:flex;align-items:center;gap:30px;flex-wrap:wrap;}

/* --- LEGAL SECTION --- */
.legal-section{display:flex;flex-direction:column;gap:24px;}

/* --- CONTACT BLOCKS --- */
.contact-details{display:flex;flex-wrap:wrap;gap:24px;}
.contact-block{display:flex;flex-direction:row;align-items:center;gap:14px;min-width:210px;border-radius:var(--radius-s);background:var(--color-grey-800);padding:16px 22px;box-shadow:var(--shadow-card);margin-bottom:20px;}
.contact-block img{width:32px;height:32px;margin-bottom:0;}
.contact-block p strong{color:var(--color-secondary);}
.contact-block a{color:var(--color-accent);font-weight:700;border-bottom:1px dotted var(--color-accent);}

/* --- FAQ --- */
.faq-item{
  background:var(--color-grey-800);
  border:1px solid var(--color-border);
  border-radius:var(--radius-m);
  padding:22px 26px;
  margin-bottom:20px;
  box-shadow:var(--shadow-card);
  color:var(--color-accent);
}
.faq-item h3{font-size:17px;margin-bottom:10px;color:var(--color-secondary);}

/* --- ARTICLE PREVIEW --- */
.article-preview{
  background:var(--color-grey-800);
  border-radius:var(--radius-m);
  box-shadow:var(--shadow-card);
  border:1px solid var(--color-border);
  flex:1 1 270px;min-width:230px;max-width:350px;
  padding:25px 22px 20px 22px;
  margin-bottom:20px;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  transition:box-shadow var(--transition),border-color var(--transition),transform var(--transition);
  position:relative;
}
.article-preview:hover{box-shadow:0 7px 24px var(--color-shadow); border-color:var(--color-metal); transform:translateY(-2px) scale(1.012);}

/* --- STEP INDICATORS / PROCESS --- */
.step{
  background:var(--color-grey-800);
  border-radius:var(--radius-m);
  border:1px solid var(--color-secondary);
  box-shadow:var(--shadow-card);
  padding:22px 18px 16px 22px;
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:180px;max-width:260px;margin-bottom:20px;
}
.step strong{color:var(--color-secondary); font-size:18px;}

/* --- THANK YOU SCREEN --- */
.thank-you{padding:80px 0 64px 0;display:flex;align-items:center;justify-content:center;}
.thank-you .content-wrapper{display:flex;flex-direction:column;align-items:center;gap:24px;}

/* --- MISC / UTILS --- */
::-webkit-scrollbar{width:9px;background:var(--color-grey-800);}
::-webkit-scrollbar-thumb{border-radius:10px;background:var(--color-secondary);}

@media(max-width:660px){
  h1{font-size: 32px;}
  h2{font-size: 22px;}
  section.cta, section.cta.newsletter{padding:32px 10px;}
  .container{padding:0 8px;}
  .thank-you{padding:38px 0;}
}

/* --- HOVER & MICROINTERACTIONS --- */
a,button,.cta-primary,.feature,.service,.team-member,.article-preview,.card, .faq-item,.testimonial-card,.step{
  transition:var(--transition);
}
a:focus-visible,.cta-primary:focus-visible{outline:2px solid var(--color-secondary);outline-offset:2px;}


/* -- TRANSITIONS on interactive elements -- */
.feature:active,.service:active,.team-member:active,.article-preview:active,.cta-primary:active{transform:scale(0.98);}

/* --- COOKIE CONSENT BANNER & MODAL --- */
.cookie-banner {
  position:fixed;
  left:0; right:0; bottom:0;
  background: var(--color-grey-900);
  color: var(--color-metal);
  width:100%;
  z-index:9999;
  box-shadow:0 -6px 32px 0 var(--color-shadow);
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px 32px;
  font-size:15px;
  font-family:var(--ff-body);
  border-top:2px solid var(--color-secondary);
  animation:slideUpBanner .68s cubic-bezier(.29,.62,.48,1);
}
@keyframes slideUpBanner{from{transform:translateY(100%);}to{transform:translateY(0);}}

.cookie-banner .cookie-actions{display:flex;gap:14px;align-items:center;}
.cookie-banner button{
  font-size:15px;
  font-family:var(--ff-industrial);
  padding:9px 20px;
  border-radius:var(--radius-s);
  border:none;
  cursor:pointer;
  background:var(--color-metal);
  color:var(--color-primary);
  font-weight:700;
  transition:background .15s,color .15s;
}
.cookie-banner .accept{
  background:var(--color-secondary);
  color:var(--color-accent);
}
.cookie-banner .accept:hover{background:#b34b6c;}
.cookie-banner .settings{
  background:var(--color-grey-800);
  color:var(--color-metal);
  border:1px solid var(--color-metal);
}
.cookie-banner .settings:hover{background:var(--color-metal);color:var(--color-primary);}
.cookie-banner .reject{
  background:none;color:var(--color-metal);border:1px solid var(--color-metal);}
.cookie-banner .reject:hover{background:var(--color-grey-700);color:var(--color-accent);}

@media (max-width: 660px){
  .cookie-banner{flex-direction:column; align-items:flex-start; gap:16px;padding:14px 12px;}
  .cookie-banner .cookie-actions{width:100%; gap:12px;}
}

/* --- COOKIE PREFERENCES MODAL --- */
.cookie-modal-overlay{
  position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(35,32,31,0.80);display:flex;align-items:center;justify-content:center;z-index:10001;animation:fadeIn .4s;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.cookie-modal{
  background:var(--color-grey-900);
  border-radius:var(--radius-m);
  padding:32px 24px 20px 32px;
  box-shadow:var(--shadow-card);
  min-width:290px;
  max-width:410px;
  display:flex;flex-direction:column;gap:20px;align-items:flex-start;
  animation: modalBounceIn .44s cubic-bezier(.4,2.5,.52,1);
}
@keyframes modalBounceIn{from{transform:scale(0.86);opacity:0;}to{transform:scale(1);opacity:1;}}
.cookie-modal h3{font-size:22px;color:var(--color-secondary);font-family:var(--ff-display);margin-bottom:10px;}
.cookie-modal label{font-size:16px;font-family:var(--ff-body);display:flex;align-items:center;gap:6px;margin-bottom:10px;}
.cookie-modal input[type='checkbox']{ accent-color: var(--color-secondary);width:18px;height:18px;}
.cookie-modal .essential{font-weight:600;color:var(--color-metal);}
.cookie-modal .cookie-modal-actions{display:flex;gap:16px;align-items:center;margin-top:14px;justify-content:flex-end;width:100%;}
.cookie-modal button{
  font-family:var(--ff-industrial);font-size:16px;padding:8px 18px;border-radius:var(--radius-s);border:none;cursor:pointer;transition:background .15s,color .15s;}
.cookie-modal .close{background:none;color:var(--color-secondary);font-size:18px;font-weight:700;padding:0 12px;}
.cookie-modal .close:hover{color:#ae234f;background:none;}
.cookie-modal .save{background:var(--color-secondary);color:var(--color-accent);}
.cookie-modal .save:hover{background:#ae234f;}

/* --- RESPONSIVE --- */
@media (max-width: 1100px){
  .container{max-width:96vw;}
}
@media (max-width: 900px){
  h1{font-size:36px;}
  h2{font-size:27px;}
  section{padding:32px 12px; margin-bottom:40px;}
}
@media (max-width:660px){
  h1{font-size:26px;}
  h2{font-size:17px;}
}

/* --- PRINT --- */
@media print { 
  header,footer,.cookie-banner,.mobile-menu {display:none!important;} 
  body, section{background:none!important;color:#23201f!important;}
}