/* Base & variables */
:root{
  --bg:#fbf8f6; /* warm off-white */
  --muted:#000; /* changed to black for higher contrast */
  --accent:#d9653b; /* terracotta */
  --accent-2:#a7c6a9; /* muted green */
  --accent-dark:#8b3b2a;
  --bg-grad: linear-gradient(180deg,#fbf8f6 0%, #f6f4f2 100%);
  --text:#1a1a1a;
  --glass: rgba(255,255,255,0.6);
  --radius:14px;
}

body{background:transparent;} 
*{box-sizing:border-box}
html,body{height:100%;}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  color:var(--text);background:transparent;-webkit-font-smoothing:antialiased;
}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Header shrink */
.site-header{transition:padding .28s ease, box-shadow .28s ease}
.site-header.scrolled{padding:8px 0;box-shadow:0 6px 24px rgba(20,20,20,0.06)}
.brand img{
  height:44px;display:inline-block;vertical-align:middle;margin-right:10px;border-radius:8px;
  box-shadow:0 8px 22px rgba(20,20,20,0.08);transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.brand:hover img,
.brand:focus-within img{
  transform:translateY(-3px) scale(1.02);box-shadow:0 18px 36px rgba(20,20,20,0.12);filter:brightness(1.03);
}
.brand svg{display:inline-block;vertical-align:middle;margin-right:8px}
.brand-text{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.footer-logo{height:28px;vertical-align:middle;margin-right:10px;filter:drop-shadow(0 6px 12px rgba(0,0,0,0.06))}

@media (max-width:900px){
  .brand img{height:40px}
  .footer-logo{height:24px}
}
@media (max-width:520px){
  .brand img{height:32px}
  .footer-logo{height:20px}
}

/* Accessibility */
a:focus,button:focus,input:focus,textarea:focus{outline:3px solid rgba(217,101,59,0.12);outline-offset:3px}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
} 

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;background:linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.4));backdrop-filter:blur(6px);border-bottom:1px solid rgba(20,20,20,0.03)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{font-weight:700;letter-spacing:0.6px;display:inline-flex;align-items:center;position:relative}
.nav a{margin-left:22px;color:var(--muted);text-decoration:none;font-weight:600}
.nav a:hover{color:var(--text)}
.nav a.active{color:var(--accent-dark)}

@media (max-width:520px){
  .nav{display:none}
}

/* Hero */
.hero{min-height:92vh;display:flex;align-items:center;position:relative;overflow:hidden;padding-top:56px}
.hero-inner{position:relative;z-index:5}

/* Split hero layout */
.hero-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
.hero-left{}
/* removed .hero-right since hero image has been removed */
.hero-title{font-family:Sora,Inter,system-ui,-apple-system,"Segoe UI",Roboto; font-weight:700;font-size:clamp(34px,6vw,64px);line-height:1.02;margin:0 0 12px;color:var(--accent-dark)}
.hero-sub{color:var(--muted);margin:0 0 18px;font-size:1.05rem}
.btn{display:inline-block;background:var(--accent);color:white;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600;transition:transform .18s ease, box-shadow .18s ease}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(217,101,59,0.09)}
.btn-ghost{background:transparent;border:1px solid rgba(0,0,0,0.06);color:var(--text);margin-left:10px}

.mockup img{width:100%;max-width:420px;border-radius:18px;box-shadow:0 18px 40px rgba(20,20,20,0.06);border:1px solid rgba(20,20,20,0.02);transform:translateY(6px);transition:transform .36s ease}
.mockup img:hover{transform:translateY(-6px) rotate(-0.4deg)}
.hero-trust{margin-top:18px;color:var(--muted);font-size:14px}
.hero-trust .clients{display:inline-flex;list-style:none;padding:0;margin:6px 0 0;gap:14px}
.hero-trust .clients li{opacity:0.9}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-right{order:-1;margin-bottom:18px}
  .mockup img{max-width:360px}
}

/* Background layers */
.bg-layer{position:absolute;inset:0;pointer-events:none}
.layer-1::before, .layer-2::before, .layer-3::before{content:"";position:absolute;width:110%;height:110%;left:-5%;top:-5%;background:radial-gradient(circle at 20% 20%, rgba(217,101,59,0.08), transparent 15%), radial-gradient(circle at 80% 80%, rgba(167,198,169,0.06), transparent 20%);transform-origin:center;filter:blur(30px)}

/* animated blackhole canvas (fixed full-viewport so it stays visible while scrolling) */
.blackhole-canvas{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;display:block}

/* hero overlay to improve contrast and add vignette */
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.18) 40%, rgba(0,0,0,0.5) 80%);z-index:2;pointer-events:none}
.hero-inner{position:relative;z-index:3}
.hero.hero--split .hero-title{color:#fff}
.hero.hero--split .hero-sub{color:rgba(255,255,255,0.85)}
.btn{z-index:4}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-right{order:-1;margin-bottom:18px}
  .mockup img{max-width:360px}
}

/* slow drift for parallax layers (respects reduced-motion) */
@keyframes driftX { 0% { transform: translateX(-2%); } 50% { transform: translateX(2%); } 100% { transform: translateX(-2%);} }
@keyframes driftY { 0% { transform: translateY(-1%); } 50% { transform: translateY(1%); } 100% { transform: translateY(-1%);} }
.layer-1::before{animation: driftX 36s linear infinite}
.layer-2::before{animation: driftY 42s linear infinite}
.layer-3::before{animation: driftX 48s linear infinite}

@media (prefers-reduced-motion: reduce){
  .layer-1::before, .layer-2::before, .layer-3::before{animation:none}
}
.layer-2::before{background:radial-gradient(circle at 10% 70%, rgba(167,198,169,0.06), transparent 10%), radial-gradient(circle at 80% 30%, rgba(240,220,210,0.06), transparent 10%);filter:blur(48px)}
.layer-3::before{background:linear-gradient(110deg, rgba(250,245,240,0.35), rgba(245,248,251,0.35));opacity:0.95;mix-blend-mode:soft-light}

/* subtle floating blobs */
.bg-blob{position:absolute;border-radius:40%;opacity:0.12;filter:blur(14px);animation:float 12s ease-in-out infinite}
.bg-blob.b1{width:340px;height:240px;background:linear-gradient(180deg,#f6e9e0,#efe3f6);left:-60px;top:-20px;animation-duration:20s}
.bg-blob.b2{width:420px;height:300px;background:linear-gradient(180deg,#eef5f3,#f6f9ef);right:-80px;top:40px;animation-duration:28s}
@keyframes float{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(3deg)}100%{transform:translateY(0) rotate(0)} }

/* Sections */
.section{padding:90px 0;color:var(--text)}
.section-title{font-size:20px;margin:0 0 6px;color:#fff !important;text-shadow:0 6px 18px rgba(10,10,10,0.35)}
.section-sub{color:rgba(255,255,255,0.9);margin-top:0;margin-bottom:24px}

/* Add subtle dark background to primary sections for better contrast */
.section.intro,
.section.services,
.section.approach,
.section.contact{background:linear-gradient(180deg, rgba(10,10,10,0.06), rgba(10,10,10,0.02));color:rgba(255,255,255,0.96)}

/* Make most text inside dark sections bright for readability */
.section.intro p,
.section.intro li,
.section.intro h3,
.section.intro h4,
.section.intro label,
.section.services p,
.section.services li,
.section.services h3,
.section.services h4,
.section.services label,
.section.approach p,
.section.approach li,
.section.approach h3,
.section.approach h4,
.section.approach label,
.section.contact p,
.section.contact li,
.section.contact h3,
.section.contact h4,
.section.contact label{color:rgba(255,255,255,0.95)}

/* Keep standard white cards with dark text to avoid washout */
.section .card{color:var(--text)}
.section .card p,.section .card li{color:var(--muted)}

/* Ghost buttons and links on dark sections */
.section .btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.12);color:#fff}
.section a{color:var(--accent-2)}
.section .card a{color:var(--accent)}

@media (max-width:520px){
  .section{padding:60px 0}
}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}

/* Intro feature cards */
.intro .intro-cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:18px}
.feature-card{background:linear-gradient(180deg, rgba(20,20,20,0.72), rgba(20,20,20,0.62));border-radius:14px;padding:22px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 14px 36px rgba(20,20,20,0.28);transition:transform .28s ease, box-shadow .28s ease;color:#fff}
.feature-card h3{margin-top:0;margin-bottom:10px;font-size:18px;color:#fff}
.feature-card p{color:rgba(255,255,255,0.92);margin:0}
.feature-card ul{margin:0;padding:0 0 0 18px;color:rgba(255,255,255,0.92)}
.feature-card li{margin-bottom:8px}
.feature-card:hover{transform:translateY(-8px);box-shadow:0 34px 60px rgba(20,20,20,0.35)}

/* Detail cards (verbatim content blocks) */
.detail-cards{grid-template-columns:1fr;gap:18px;margin-top:22px}
.detail-card{background:linear-gradient(180deg, rgba(10,10,10,0.82), rgba(10,10,10,0.72));border-radius:14px;padding:28px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 28px 60px rgba(10,10,10,0.36);color:rgba(255,255,255,0.96)}
.detail-card h3{
  margin-top:0;margin-bottom:12px;display:inline-block;
  background: rgba(255,255,255,0.96);color:#000!important;font-weight:700!important;
  padding:6px 12px;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,0.08);
}
.detail-card h4{
  margin-top:18px;margin-bottom:8px;display:inline-block;
  background: rgba(255,255,255,0.94);color:#000!important;font-weight:700!important;
  padding:4px 10px;border-radius:8px;box-shadow:0 6px 14px rgba(0,0,0,0.06);
}
.detail-card p{color:rgba(255,255,255,0.92);line-height:1.5;margin:0 0 12px}
.detail-card ol{padding-left:18px;margin:0 0 12px}
.detail-card ol li p{margin:8px 0 0}

/* Stackable readable cards */
.detail-cards{display:grid;grid-template-columns:1fr;gap:18px;margin-top:22px}
.detail-card{position:relative;opacity:1;transform:none;margin-bottom:18px;padding:28px}
@media (max-width:900px){
  .detail-cards{grid-template-columns:1fr}
}

/* Save/bookmark button */
.save-btn{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.06);color:#fff;padding:8px 10px;border-radius:10px;font-weight:700;cursor:pointer}
.save-btn[aria-pressed="true"]{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;border:none}

/* Floating saved button */
.floating-saved{position:fixed;right:20px;bottom:28px;background:linear-gradient(180deg,var(--accent),var(--accent-dark));color:#fff;border:none;padding:12px 14px;border-radius:14px;box-shadow:0 12px 30px rgba(20,20,20,0.2);cursor:pointer;z-index:120}

/* Modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,10,10,0.48);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:130}
.modal.open{opacity:1;pointer-events:auto}
.modal-inner{background:var(--bg);max-width:820px;width:calc(100% - 40px);border-radius:12px;padding:18px;color:var(--text);box-shadow:0 30px 80px rgba(20,20,20,0.24)}
.modal header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal .modal-actions{display:flex;gap:8px;align-items:center}
.modal .saved-list{margin-top:12px;max-height:400px;overflow:auto}
.modal .saved-item{padding:12px;border-radius:8px;border:1px solid rgba(20,20,20,0.04);margin-bottom:12px;background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.98))}
.modal .saved-item h4{margin:0 0 6px}
.modal .saved-item p{margin:0 0 8px;color:var(--muted)}
.modal .saved-item .copy-item{background:var(--accent);color:#fff;padding:8px 10px;border-radius:8px;border:none;cursor:pointer}

/* Toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:80px;background:rgba(0,0,0,0.78);color:white;padding:10px 14px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:140}
.toast.visible{opacity:1;pointer-events:auto}

@media (max-width:520px){ .floating-saved{right:12px;bottom:18px;padding:10px 12px} }


@media (max-width:900px){
  .detail-cards{grid-template-columns:1fr}
}

.approach-cards .card{transition:transform .34s ease, box-shadow .34s ease}
.approach-cards .card:hover{transform:translateY(-8px);box-shadow:0 20px 36px rgba(20,20,20,0.06)}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.75), rgba(255,255,255,0.6));border-radius:12px;padding:20px;border:1px solid rgba(20,20,20,0.03);box-shadow:0 6px 18px rgba(20,20,20,0.04);transition:transform .36s ease, box-shadow .36s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 30px rgba(20,20,20,0.06)}
.card-icon{font-size:28px;margin-bottom:10px}

/* Make headings inside light/grey cards bold and black for better contrast */
.card:not(.feature-card):not(.detail-card) h3,
.card:not(.feature-card):not(.detail-card) h4{
  color:#000!important;
  font-weight:700!important;
}

/* Work grid */
.work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.work-item{background:white;border-radius:12px;padding:14px;border:1px solid rgba(20,20,20,0.03)}
.work-thumb{height:150px;border-radius:10px;margin-bottom:12px;background-size:cover;background-position:center}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start}
.contact-form{
  background: linear-gradient(180deg, #ffffff, #fbfbfb);
  padding:20px;border-radius:12px;border:1px solid rgba(20,20,20,0.08);color:var(--text);
  box-shadow:0 10px 30px rgba(20,20,20,0.04);
}
.contact-form p{color:var(--text)}
.contact-form .label{display:block;margin-bottom:10px;color:var(--text);font-weight:700}
input[type="email"], input[type="text"], textarea{
  width:100%;padding:14px;border-radius:10px;border:1px solid rgba(20,20,20,0.14);background:#fff;color:#000;font-size:1rem;
  box-shadow:0 6px 18px rgba(20,20,20,0.04);transition:box-shadow .18s ease, border-color .18s ease;
}
textarea{min-height:160px;resize:vertical}
input::placeholder, textarea::placeholder{color:rgba(0,0,0,0.55)}
input[type="email"]:focus, input[type="text"]:focus, textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 10px 30px rgba(217,101,59,0.12)}

/* Autofill styles to ensure text remains readable */
input:-webkit-autofill, textarea:-webkit-autofill{ -webkit-text-fill-color: #000 !important }

/* Make contact form labels explicitly dark in the contact section */
.section.contact .contact-form .label{color:#000}
.form-actions{text-align:right}
.contact-aside{color:rgba(26,26,26,0.92);font-size:14px}

/* Footer */
.site-footer{padding:26px 0;text-align:center;color:var(--muted);font-size:14px}
.site-footer .container{display:flex;align-items:center;justify-content:center;gap:10px}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .6s ease, transform .6s ease}
.reveal.revealed{opacity:1;transform:none}

.hero-inner{opacity:0;transform:translateY(8px);transition:opacity .6s ease, transform .6s ease}
.hero-inner.revealed{opacity:1;transform:none}

/* slanted separators (subtle) */
.section::before{content:"";display:block;height:36px;width:100%;transform:skewY(-2deg);transform-origin:left top;background:transparent}

/* nav active link */
.nav a{position:relative}
.nav a.active::after{content:"";position:absolute;left:0;right:0;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2));bottom:-10px}

/* micro UI polish */
.clients li{font-weight:600}

/* subtle custom scrollbar for supported browsers */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg, rgba(20,20,20,0.08), rgba(20,20,20,0.04));border-radius:10px}


/* Responsive tweaks */
@media (max-width:900px){
  .hero-inner{text-align:center}
  .hero-title{font-size:clamp(26px,7vw,36px)}
  .cards{grid-template-columns:1fr}
  .work-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .header-inner{padding:12px 0}
}

@media (max-width:520px){
  .nav{display:none}
  .brand-text{display:inline-block}
  .hero{padding-top:36px}
  .btn{padding:10px 12px}
}