/* Care + Candor Static Website - Main Stylesheet *//* ============================================ CSS VARIABLES - Design System ============================================ */:root{/* Care + Candor Design System - Warm Neutrals */ /* Backgrounds - Warm creams and beiges */ --background:hsl(40,25%,98%);/* #FAF9F6 - Primary warm cream */ --background-secondary:hsl(40,20%,96%);/* #F5F4F0 - Secondary warm beige */ --foreground:hsl(0,0%,17%);/* #2B2B2B - Deep charcoal text */ --card:hsl(40,25%,98%);--card-foreground:hsl(0,0%,17%);--popover:hsl(40,25%,98%);--popover-foreground:hsl(0,0%,17%);/* Primary - Pure black for CTAs */ --primary:hsl(0,0%,0%);/* #000000 - Pure black */ --primary-foreground:hsl(40,25%,98%);/* Cream text on black */ /* Secondary - Soft warm grays */ --secondary:hsl(30,10%,92%);--secondary-foreground:hsl(0,0%,17%);/* Muted - Warm gray tones */ --muted:hsl(30,10%,92%);--muted-foreground:hsl(0,0%,42%);/* #6B6B6B - Medium gray */ /* Accent - Subtle warm highlight */ --accent:hsl(40,30%,94%);--accent-foreground:hsl(0,0%,17%);--destructive:hsl(0,84.2%,60.2%);--destructive-foreground:hsl(40,25%,98%);/* Borders & Inputs - Soft warm gray */ --border:hsl(30,8%,88%);--input:hsl(30,8%,88%);--ring:hsl(0,0%,17%);--radius:0.75rem;}/* ============================================ RESET & BASE STYLES ============================================ */*{margin:0;padding:0;box-sizing:border-box;}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background-color:var(--background);color:var(--foreground);line-height:1.6;min-height:100vh;}img{max-width:100%;height:auto;display:block;}a{color:inherit;text-decoration:none;}button{font-family:inherit;cursor:pointer;border:none;background:none;}/* ============================================ UTILITY CLASSES ============================================ */.container{width:100%;/* Match React section container:max-w-6xl (72rem) */ max-width:72rem;margin:0 auto;padding:0 1.25rem;}/* ============================================ SECTION LAYOUT (full‑bleed backdrops + inner containers) ============================================ */.section{padding:5rem 1.25rem;}@media (min-width:768px){.section{padding:8rem 1.25rem;}}/* Backdrop variants (apply to the section element) */.section--default{background-color:var(--background);}.section--accent{background-color:var(--accent);}.section--surface{background-color:#ffffff;}.section--inverse{background-color:var(--foreground);color:var(--background);}/* Inner content width helpers */.container-narrow{max-width:56rem;}/* .container is 72rem by default */.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}.hover-scale{transition:transform 0.2s ease-in-out;}.hover-scale:hover{transform:scale(1.05);}.hover-lift{transition:transform 0.2s ease-in-out,box-shadow 0.2s ease-in-out;}.hover-lift:hover{transform:translateY(-4px);box-shadow:0 10px 25px -5px rgba(0,0,0,0.15),0 10px 10px -5px rgba(0,0,0,0.08);}/* ============================================ HEADER & NAVIGATION ============================================ */header{position:fixed;top:0;left:0;right:0;width:100%;z-index:50;}.header-container{/* Match site container width */ max-width:72rem;margin:0 auto;padding:1.25rem;}nav{backdrop-filter:blur(16px);background-color:rgba(255,255,255,0.8);border:1px solid rgba(229,229,229,0.5);border-radius:20px;box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);padding:1rem 1.5rem;}.nav-content{display:flex;align-items:center;justify-content:space-between;}.logo{display:flex;align-items:center;transition:opacity 0.2s;}.logo:hover{opacity:0.8;}.logo img{width:10rem;height:auto;object-fit:contain;}.nav-links{display:none;align-items:center;gap:2rem;}.nav-links a,.nav-links button{font-size:0.875rem;color:var(--muted-foreground);transition:color 0.2s;}.nav-links a:hover,.nav-links button:hover{color:var(--foreground);}.nav-cta{display:none;}.mobile-menu-btn{display:block;color:var(--foreground);padding:0.25rem;border-radius:0.375rem;}.mobile-menu-btn:focus{outline:2px solid var(--ring);outline-offset:2px;}.mobile-menu{display:none;margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(229,229,229,0.5);}.mobile-menu.active{display:block;}.mobile-menu-links{display:flex;flex-direction:column;gap:1rem;}.mobile-menu-links a,.mobile-menu-links button{font-size:0.875rem;color:var(--muted-foreground);transition:color 0.2s;text-align:left;width:100%;}.mobile-menu-links a:hover,.mobile-menu-links button:hover{color:var(--foreground);}/* Desktop Navigation */@media (min-width:768px){.logo img{width:12rem;}.nav-links{display:flex;}.nav-cta{display:block;}.mobile-menu-btn{display:none;}}/* ============================================ BUTTONS ============================================ */.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;white-space:nowrap;border-radius:0.375rem;font-size:0.875rem;font-weight:500;transition:all 0.2s;cursor:pointer;border:none;}.btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px;}.btn:disabled{pointer-events:none;opacity:0.5;}.btn-primary{background-color:var(--primary);color:var(--primary-foreground);padding:0.5rem 1.5rem;height:2.5rem;}.btn-primary:hover{background-color:hsl(0,0%,20%);}.btn-lg{height:auto;padding:1.75rem 2.5rem;font-size:1.125rem;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);}.btn-rounded{border-radius:9999px;}.btn-outline{border:1px solid var(--input);background-color:var(--background);}.btn-outline:hover{background-color:var(--accent);color:var(--accent-foreground);}.btn-secondary{background-color:var(--secondary);color:var(--secondary-foreground);}.btn-secondary:hover{background-color:rgba(234,234,234,0.8);}/* ============================================ HERO SECTION ============================================ */.hero-section{position:relative;min-height:60vh;display:flex;align-items:center;justify-content:center;padding:12rem 1rem 6rem;overflow:hidden;}.hero-background{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-2;}.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to top,rgba(0,0,0,1) 0%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0) 100%);z-index:-1;}.hero-content{/* Narrower container to 900px (56.25rem) to match target width */ max-width:56.25rem;margin:0 auto;text-align:center;color:white;z-index:1;}.hero-title{font-size:3rem;font-weight:700;line-height:1.1;margin-bottom:2.5rem;text-shadow:0 4px 6px rgba(0,0,0,0.5);}.hero-description{font-size:1.25rem;line-height:1.6;margin-bottom:2.5rem;opacity:0.9;max-width:48rem;margin-left:auto;margin-right:auto;text-shadow:0 4px 6px rgba(0,0,0,0.5);}.hero-cta{display:flex;flex-direction:column;gap:1rem;align-items:center;justify-content:center;padding-top:1.5rem;}.hero-features{display:flex;flex-direction:column;gap:1rem;align-items:center;justify-content:center;font-size:0.875rem;color:rgba(255,255,255,0.8);padding-top:1rem;}@media (min-width:640px){.hero-cta{flex-direction:row;}.hero-features{flex-direction:row;gap:2rem;}}@media (min-width:768px){.hero-section{min-height:70vh;}.hero-title{font-size:3.75rem;}.hero-description{font-size:1.5rem;}}@media (min-width:1024px){.hero-title{font-size:4.5rem;}.hero-description{font-size:1.5rem;}}/* ============================================ SECTIONS ============================================ */section{padding:5rem 1.25rem;}.section-title{font-size:2.25rem;font-weight:700;text-align:center;margin-bottom:1rem;line-height:1.2;}.section-subtitle{font-size:1.125rem;text-align:center;color:var(--muted-foreground);margin-bottom:3rem;max-width:48rem;margin-left:auto;margin-right:auto;line-height:1.6;}@media (min-width:768px){section{padding:8rem 1.25rem;}.section-title{font-size:2.5rem;}.section-subtitle{font-size:1.25rem;}}@media (min-width:1024px){.section-title{font-size:3.125rem;}}/* ============================================ CARDS ============================================ */.card{background-color:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;box-shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06);transition:all 0.2s;}.card:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);}.card-title{font-size:1.25rem;font-weight:600;margin-bottom:0.5rem;}.card-description{color:var(--muted-foreground);font-size:0.875rem;line-height:1.5;}.card--lg{padding:2rem;}.card--xl{padding:2.5rem;}/* ============================================ GRID LAYOUTS ============================================ */.grid{display:grid;gap:1.5rem;}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}/* Responsive grid classes - mobile first */@media (min-width:768px){.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr));}/* Custom grid template columns for specific layouts */ .md\:grid-cols-\[60\%_40\%\]{grid-template-columns:60% 40%;}.md\:grid-cols-\[40\%_60\%\]{grid-template-columns:40% 60%;}}@media (min-width:1024px){.lg\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}}/* ============================================ FORMS ============================================ */.form-group{margin-bottom:1.5rem;}.form-label{display:block;font-size:0.875rem;font-weight:500;margin-bottom:0.5rem;color:var(--foreground);}.form-input,.form-textarea,.form-select{width:100%;padding:0.75rem 1rem;font-size:1rem;border:1px solid var(--input);border-radius:var(--radius);background-color:var(--background);color:var(--foreground);transition:all 0.2s;}/* Ensure select dropdowns are rounded and styled consistently */.form-select,.form select,select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232B2B2B' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.75rem center;background-size:12px;padding-right:2.5rem;}.form-input:focus,.form-textarea:focus,.form-select:focus,.form-input:hover,.form-textarea:hover,.form-select:hover,.form-input:active,.form-textarea:active,.form-select:active,.form-input:focus-visible,.form-textarea:focus-visible,.form-select:focus-visible{outline:none;border-color:var(--input);box-shadow:none;}/* Fallback:enforce styles for any fields within .form */.form input[type="text"],.form input[type="email"],.form input[type="tel"],.form input[type="url"],.form select,.form textarea{width:100%;padding:0.75rem 1rem;font-size:1rem;border:1px solid var(--input);border-radius:var(--radius);background-color:var(--background);color:var(--foreground);}.form input[type="text"]:focus,.form input[type="email"]:focus,.form input[type="tel"]:focus,.form input[type="url"]:focus,.form select:focus,.form textarea:focus,.form input[type="text"]:hover,.form input[type="email"]:hover,.form input[type="tel"]:hover,.form input[type="url"]:hover,.form select:hover,.form textarea:hover,.form input[type="text"]:active,.form input[type="email"]:active,.form input[type="tel"]:active,.form input[type="url"]:active,.form select:active,.form textarea:active,.form input[type="text"]:focus-visible,.form input[type="email"]:focus-visible,.form input[type="tel"]:focus-visible,.form input[type="url"]:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:none;border-color:var(--input);box-shadow:none;}/* Medium control height for inputs/selects */.form-input,.form-select{min-height:2.75rem;}/* Keep checkbox borders consistent across states */.checkbox-label input[type="checkbox"]{width:1rem;height:1rem;border:1px solid var(--input);border-radius:0.25rem;background-color:var(--background);cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;}.checkbox-label input[type="checkbox"]:checked{background-color:var(--foreground);border-color:var(--foreground);}.checkbox-label input[type="checkbox"]:checked::after{content:'';position:absolute;left:0.25rem;top:0.0625rem;width:0.375rem;height:0.625rem;border:solid var(--background);border-width:0 2px 2px 0;transform:rotate(45deg);}.checkbox-label input[type="checkbox"]:focus,.checkbox-label input[type="checkbox"]:hover,.checkbox-label input[type="checkbox"]:active,.checkbox-label input[type="checkbox"]:disabled{outline:none;border-color:var(--input);box-shadow:none;}.checkbox-label input[type="checkbox"]:checked:focus,.checkbox-label input[type="checkbox"]:checked:hover,.checkbox-label input[type="checkbox"]:checked:active{border-color:var(--foreground);}.form-textarea{min-height:120px;resize:vertical;}.form-error{color:var(--destructive);font-size:0.75rem;margin-top:0.25rem;}.form-checkbox{display:flex;align-items:center;gap:0.5rem;}.form-checkbox input[type="checkbox"]{width:1rem;height:1rem;border:1px solid var(--input);border-radius:0.25rem;cursor:pointer;}/* ============================================ FOOTER ============================================ */footer{position:relative;background-color:var(--background-secondary);color:var(--foreground);padding:3rem 1.25rem 2rem;border-top:1px solid var(--border);overflow:hidden;}footer::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.05) 0%,transparent 100%);pointer-events:none;}.footer-content{position:relative;z-index:10;max-width:72rem;margin:0 auto;}.footer-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:2rem;margin-bottom:2rem;}.footer-section h3{font-size:1.125rem;font-weight:600;margin-bottom:1rem;}.footer-links{display:flex;flex-direction:column;gap:0.75rem;}.footer-links a{color:var(--muted-foreground);font-size:0.875rem;transition:color 0.2s;}.footer-links a:hover{color:var(--foreground);}.footer-bottom{border-top:1px solid var(--border);padding-top:2rem;text-align:center;font-size:0.875rem;color:var(--muted-foreground);}.footer-legal-links{display:flex;gap:1.5rem;justify-content:center;margin-top:1rem;}.footer-brand{grid-column:auto;}.footer-brand h3{font-size:1.5rem;font-weight:700;margin-bottom:1rem;}.footer-brand p{color:var(--muted-foreground);margin-bottom:1.5rem;}.footer-grid h4{font-weight:600;margin-bottom:1rem;}@media (min-width:768px){.footer-brand{grid-column:span 2;}}@media (min-width:768px){.footer-grid{/* 4 columns so the brand can span 2 and Services/Company take 1 each */ grid-template-columns:repeat(4,minmax(0,1fr));}}/* ============================================ ANIMATIONS ============================================ */@keyframes fade-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}.fade-in{animation:fade-in 0.6s ease-out;}@keyframes accordion-down{from{height:0;}to{height:var(--radix-accordion-content-height);}}@keyframes accordion-up{from{height:var(--radix-accordion-content-height);}to{height:0;}}/* ============================================ UTILITY CLASSES ============================================ */.text-center{text-align:center;}.text-left{text-align:left;}.text-right{text-align:right;}.font-bold{font-weight:700;}.font-semibold{font-weight:600;}.italic{font-style:italic;}.mb-4{margin-bottom:1rem;}.mb-8{margin-bottom:2rem;}.mt-4{margin-top:1rem;}.mt-8{margin-top:2rem;}.pt-20{padding-top:5rem;}.pb-20{padding-bottom:5rem;}.max-w-4xl{max-width:56rem;}.max-w-3xl{max-width:48rem;}.max-w-2xl{max-width:42rem;}.max-w-md{max-width:28rem;}.pl-6{padding-left:1.5rem;}.pt-6{padding-top:1.5rem;}.mx-auto{margin-left:auto;margin-right:auto;}.flex{display:flex;}.flex-col{flex-direction:column;}.items-center{align-items:center;}.items-start{align-items:flex-start;}.justify-center{justify-content:center;}.gap-2{gap:0.5rem;}.gap-4{gap:1rem;}.gap-8{gap:2rem;}.hidden{display:none;}/* Width and Height utilities */.w-5{width:1.25rem;}.h-5{height:1.25rem;}/* Flex utilities */.flex-shrink-0{flex-shrink:0;}/* Margin utilities */.mt-0\.5{margin-top:0.125rem;}/* Sticky positioning */.sticky{position:sticky;}.top-8{top:2rem;}@media (min-width:768px){.md\\:block{display:block;}.md\\:flex{display:flex;}.md\\:hidden{display:none;}.md\\:sticky{position:sticky;}.md\\:top-8{top:2rem;}}/* ============================================ FAQ ACCORDION STYLES ============================================ */.faq-accordion{display:flex;flex-direction:column;gap:1rem;}.faq-item{background-color:white;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:all 0.3s ease;}.faq-item:hover{border-color:var(--foreground);box-shadow:0 2px 8px rgba(0,0,0,0.05);}.faq-question{width:100%;display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;text-align:left;font-size:1.125rem;font-weight:600;color:var(--foreground);background-color:transparent;cursor:pointer;transition:all 0.2s ease;border:none;outline:none;}.faq-question:hover{background-color:var(--background-secondary);}.faq-question:focus-visible{outline:2px solid var(--ring);outline-offset:-2px;}.faq-question span{flex:1;padding-right:1rem;}.faq-icon{flex-shrink:0;width:24px;height:24px;transition:transform 0.3s ease;color:var(--muted-foreground);}.faq-item.active .faq-icon{transform:rotate(180deg);color:var(--foreground);}.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.4s cubic-bezier(0.4,0,0.2,1),padding 0.4s cubic-bezier(0.4,0,0.2,1);padding:0 1.5rem;}.faq-item.active .faq-answer{padding:0 1.5rem 1.25rem 1.5rem;}.faq-answer p{color:var(--muted-foreground);line-height:1.7;font-size:1rem;}/* Mobile responsiveness */@media (max-width:768px){.faq-question{padding:1rem 1.25rem;font-size:1rem;}.faq-answer{padding:0 1.25rem;}.faq-item.active .faq-answer{padding:0 1.25rem 1rem 1.25rem;}.faq-icon{width:20px;height:20px;}}