/* ==========================================================================
   The Creative Conservator — 2026 Redesign (override layer)
   Loads AFTER main.css + components.css and re-skins the whole site.
   New design language: Instrument Serif + Hanken Grotesk + Geist Mono,
   oxblood / sage / wine / paper palette, pill buttons, gallery feel.
   ========================================================================== */

:root{
  --paper:#F3EFE7;
  --cream:#FAF5EC;
  --oxblood:#3B0510;
  --wine:#221516;
  --sage:#889063;
  --sage-deep:#6E764C;

  /* keep legacy var names mapped to the new palette so existing inline styles adapt */
  --deep-red:#3B0510;
  --vintage-wine:#221516;
  --green:#889063;
  --white:#FFFFFF;

  --serif:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --grotesk:'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono:'Geist Mono', ui-monospace, monospace;

  --font-heading:'Instrument Serif', Georgia, serif;
  --font-body:'Hanken Grotesk', system-ui, sans-serif;

  --mx: clamp(20px, 5.5vw, 104px);
}

/* ============================ BASE ============================ */
body{
  background:var(--paper) !important;
  color:var(--wine) !important;
  font-family:var(--grotesk) !important;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--sage); color:var(--wine); }

h1,h2,h3,h4,h5,h6{ font-family:var(--serif) !important; font-weight:400 !important; letter-spacing:-.01em; color:var(--oxblood); }
.lead{ font-family:var(--grotesk); }

.label{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; }

/* monogram */
.cc{ font-family:var(--serif); font-style:italic; letter-spacing:-.08em; line-height:.8; display:inline-block; }
.cc .t2{ margin-left:-.40em; }

/* ============================ BUTTONS ============================ */
.btn, .btn-primary, .btn-secondary, .btn-light, .btn-lg, .btn-sm{
  font-family:var(--mono) !important;
  text-transform:uppercase;
  letter-spacing:.05em;
  border-radius:100px !important;
  font-weight:500;
  border:1px solid currentColor;
  transition:transform .25s, background .25s, color .25s, border-color .25s;
}
.btn-primary{ background:var(--oxblood) !important; color:var(--cream) !important; border-color:var(--oxblood) !important; font-size:12px; }
.btn-primary:hover{ background:var(--wine) !important; border-color:var(--wine) !important; color:var(--cream) !important; }
.btn-light{ background:var(--cream) !important; color:var(--oxblood) !important; border-color:var(--cream) !important; }
.btn-light:hover{ background:var(--sage) !important; border-color:var(--sage) !important; color:var(--wine) !important; }
.btn-secondary{ background:transparent !important; border-color:currentColor !important; }
.btn-secondary:hover{ background:var(--wine) !important; color:var(--cream) !important; border-color:var(--wine) !important; }
.btn-sm{ font-size:11px; padding:10px 18px; }
.btn-lg{ font-size:13px; padding:17px 30px; }

/* ============================ HEADER / NAV ============================ */
.header{ background:var(--oxblood) !important; border-bottom:1px solid #ffffff1f; position:sticky; top:0; z-index:60; }
.header .logo-text{ font-family:var(--serif) !important; color:var(--cream) !important; font-weight:400 !important; font-size:22px; letter-spacing:0; }
.nav-link{ font-family:var(--grotesk) !important; color:var(--cream) !important; font-size:14px; }
.nav-link.active, .nav-link:hover{ color:var(--sage) !important; }
.mobile-menu-toggle span{ background:var(--cream) !important; }
.nav-mobile{ background:var(--oxblood) !important; }
.nav-mobile .nav-link{ color:var(--cream) !important; }

/* ============================ HERO (inner pages, photo + oxblood wash) ============================ */
.hero-image-bg{ position:relative; background-size:cover; background-position:center; color:var(--cream) !important; }
.hero-image-bg::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, color-mix(in srgb,var(--oxblood) 78%, transparent), color-mix(in srgb,var(--oxblood) 90%, transparent)); z-index:0; }
.hero-image-bg > *{ position:relative; z-index:1; }
.hero-image-bg h1{ font-family:var(--serif) !important; color:var(--cream) !important; font-size:clamp(44px,7vw,92px); line-height:1.02; }
.hero-image-bg .lead{ color:#FAF5ECcc !important; }

/* ============================ SECTION SHELL ============================ */
.section-header h2{ font-family:var(--serif) !important; color:var(--oxblood); font-size:clamp(34px,5vw,64px); line-height:1; }
.divider{ background:var(--sage) !important; }
.bg-light{ background:var(--cream) !important; }
.bg-primary{ background:var(--oxblood) !important; }
.bg-primary h2, .bg-primary .text-light, .text-light{ color:var(--cream) !important; }

/* ============================ SERVICE / GENERIC CARDS (inner pages) ============================ */
.card{ border-radius:10px !important; }
.card-service{ background:var(--cream) !important; border:1px solid #2215161a !important; border-radius:10px !important; transition:transform .3s, box-shadow .3s; }
.card-service:hover{ transform:translateY(-6px); box-shadow:0 18px 40px -24px #22151680; }
.card-service .card-icon{ background:var(--oxblood) !important; color:var(--cream) !important; border-radius:50%; }
.card-service .card-title{ font-family:var(--serif) !important; color:var(--oxblood) !important; font-weight:400 !important; }
.card-service .card-text{ font-family:var(--grotesk); color:var(--wine); opacity:.85; }

/* ============================ ACCORDION (services page) ============================ */
.accordion-item{ border-color:#2215161f !important; }
.accordion-title strong{ font-family:var(--serif) !important; font-weight:400 !important; font-size:1.4rem; color:var(--oxblood); }
.accordion-summary{ font-family:var(--grotesk); }
.accordion-header[aria-expanded="true"]{ color:var(--oxblood); }

/* ============================ PROCESS ============================ */
.process-number{ background:var(--oxblood) !important; color:var(--cream) !important; font-family:var(--mono) !important; }
.process-title{ font-family:var(--serif) !important; color:var(--oxblood) !important; font-weight:400 !important; }

/* ============================ ABOUT PAGE ============================ */
.definition-block{ background:var(--cream) !important; border-left:4px solid var(--oxblood) !important; }
.definition-term{ font-family:var(--serif) !important; color:var(--oxblood) !important; }
.purpose-block, .mission-block{ background:var(--cream) !important; border:1px solid #2215161a; box-shadow:none !important; }
.purpose-block h2, .mission-block h2{ font-family:var(--serif) !important; color:var(--oxblood) !important; }
.value-card{ background:var(--cream) !important; border:1px solid #2215161a; border-radius:10px !important; }
.value-card h3{ font-family:var(--serif) !important; color:var(--oxblood) !important; font-weight:400 !important; }
.founder-name{ font-family:var(--mono) !important; font-style:normal !important; letter-spacing:.12em; text-transform:uppercase; font-size:12px !important; color:var(--sage-deep) !important; }
.founder-content h3{ font-family:var(--serif) !important; color:var(--oxblood) !important; }
.founder-image img, .founder-image > div{ border-radius:10px !important; }

/* ============================ TESTIMONIAL ============================ */
.card-testimonial{ background:var(--wine) !important; color:var(--cream) !important; border-radius:12px !important; }
.card-testimonial .quote{ font-family:var(--serif) !important; color:var(--cream) !important; font-style:normal; }
.card-testimonial .author-initials{ background:var(--sage) !important; color:var(--wine) !important; font-family:var(--serif) !important; }
.card-testimonial .author-name{ color:var(--cream) !important; }
.card-testimonial .author-title{ color:#FAF5EC9e !important; }

/* ============================ FORMS ============================ */
.form-label{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--wine); }
.form-input, .form-select, .form-textarea{ border-radius:8px !important; border:1px solid #22151633 !important; background:var(--cream) !important; font-family:var(--grotesk) !important; }
.form-input:focus, .form-select:focus, .form-textarea:focus{ border-color:var(--oxblood) !important; outline:none; }
.contact-info-wrapper h3{ font-family:var(--serif) !important; color:var(--oxblood) !important; }

/* ============================ BADGES ============================ */
.badge, .badge-primary, .badge-secondary{ font-family:var(--mono) !important; text-transform:uppercase; letter-spacing:.1em; border-radius:100px; }
.badge-primary{ background:var(--oxblood) !important; color:var(--cream) !important; }
.badge-secondary{ background:var(--sage) !important; color:var(--wine) !important; }

/* ============================ FOOTER ============================ */
.footer{ background:var(--wine) !important; color:var(--cream) !important; }
.footer .logo-text{ font-family:var(--serif) !important; color:var(--cream) !important; }
.footer-heading{ font-family:var(--mono) !important; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--sage) !important; }
.footer-link, .footer-contact-item a{ color:#FAF5ECcc !important; font-family:var(--grotesk); }
.footer-link:hover{ color:var(--sage) !important; }
.footer-social-link{ color:var(--cream) !important; }

/* ============================ HOMEPAGE BENTO + SECTIONS ============================ */
.cc-hero{ background:var(--oxblood); color:var(--cream); position:relative; overflow:hidden; padding:clamp(120px,16vh,180px) var(--mx) clamp(70px,10vh,120px); }
.cc-hero .ghost{ position:absolute; right:-6vw; top:50%; transform:translateY(-50%); font-family:var(--serif); font-style:italic; font-size:62vh; line-height:.7; letter-spacing:-.08em; color:var(--cream); opacity:.06; pointer-events:none; white-space:nowrap; z-index:0; }
.cc-hero .photo{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.16; mix-blend-mode:luminosity; z-index:0; }
.cc-hero .inner{ position:relative; z-index:2; max-width:1180px; margin:0 auto; width:100%; }
.cc-hero .kick{ display:inline-flex; align-items:center; gap:12px; color:var(--sage); margin-bottom:26px; }
.cc-hero .kick .dot{ width:7px; height:7px; border-radius:50%; background:var(--cream); }
.cc-hero h1{ font-family:var(--serif); color:var(--cream) !important; font-weight:400; font-size:clamp(46px,8vw,124px); line-height:1.0; letter-spacing:-.02em; max-width:15ch; }
.cc-hero h1 .ital{ font-style:italic; color:var(--sage); }
.cc-hero .sub{ display:flex; flex-wrap:wrap; gap:34px; align-items:flex-end; justify-content:space-between; margin-top:clamp(44px,6vw,84px); }
.cc-hero .sub p{ font-size:20px; color:#FAF5ECcc; max-width:42ch; }
.cc-hero .offer{ display:flex; flex-wrap:wrap; margin-top:50px; border-top:1px solid #ffffff26; }
.cc-hero .offer span{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#FAF5EC9e; padding:18px 30px 24px 0; }
.cc-hero .offer span .x{ color:var(--sage); margin-left:30px; }

.cc-section{ padding:clamp(80px,9vw,140px) var(--mx); }
.cc-section.cream{ background:var(--cream); }
.cc-sechead{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:60px; }
.cc-sechead .label{ color:var(--oxblood); }
.cc-sechead h2{ font-family:var(--serif); font-weight:400; color:var(--oxblood); font-size:clamp(36px,5.5vw,78px); line-height:.98; margin-top:12px; }
.cc-sechead .r{ text-align:right; max-width:34ch; color:var(--wine); opacity:.7; font-size:16px; }

.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.bento .b{ border-radius:10px; padding:34px; min-height:280px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; transition:transform .35s; }
.bento .b:hover{ transform:translateY(-8px); }
.bento .b .top{ display:flex; justify-content:space-between; align-items:flex-start; }
.bento .b .num{ font-family:var(--mono); font-size:13px; letter-spacing:.1em; }
.bento .b .ic{ width:46px; height:46px; }
.bento .b .ic svg{ width:100%; height:100%; stroke:currentColor; }
.bento .b h3{ font-family:var(--serif); font-weight:400; font-size:clamp(26px,2.6vw,38px); line-height:1; margin-bottom:10px; }
.bento .b p{ font-size:15px; max-width:40ch; opacity:.88; }
.bento .b .wm{ position:absolute; right:-2%; bottom:-24%; font-family:var(--serif); font-style:italic; font-size:190px; letter-spacing:-.08em; opacity:.10; line-height:1; pointer-events:none; }
.bento .span3{ grid-column:span 3; } .bento .span2{ grid-column:span 2; } .bento .span4{ grid-column:span 4; }
.bento .span6{ grid-column:span 6; min-height:220px; }
.bento .span6 .inner6{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; }
.c-sage{ background:var(--sage); color:var(--wine); }
.c-oxblood{ background:var(--oxblood); color:var(--cream); }
.c-wine{ background:var(--wine); color:var(--cream); }
/* dark bento cards: keep titles + copy legible (override global dark text colors) */
.bento .c-oxblood h3, .bento .c-wine h3{ color:var(--cream) !important; }
.bento .c-oxblood .lead, .bento .c-wine .lead,
.bento .c-oxblood p, .bento .c-wine p{ color:var(--cream) !important; }
.c-paper{ background:var(--paper); color:var(--wine); border:1px solid #2215161a; }

.cc-who{ background:var(--sage); color:var(--wine); position:relative; overflow:hidden; }
.cc-who .ghost{ position:absolute; left:-4vw; bottom:-18vh; font-family:var(--serif); font-style:italic; font-size:48vh; letter-spacing:-.08em; line-height:.7; color:var(--wine); opacity:.07; pointer-events:none; }
.cc-who .wrap{ position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:start; }
.cc-who .label{ color:var(--oxblood); }
.cc-who .statement{ font-family:var(--serif); font-size:clamp(32px,4.4vw,62px); line-height:1.05; margin-top:16px; }
.cc-who .statement .ital{ font-style:italic; color:var(--cream); }
.cc-who .body p{ font-size:18px; margin-bottom:16px; max-width:46ch; color:#221516d6; }

.cc-testi{ background:var(--wine); color:var(--cream); text-align:center; }
.cc-testi .label{ color:var(--sage); }
.cc-testi blockquote{ font-family:var(--serif); font-size:clamp(30px,4.6vw,64px); line-height:1.08; max-width:22ch; margin:24px auto 32px; }
.cc-testi blockquote .ital{ font-style:italic; color:var(--sage); }
.cc-testi .by{ display:inline-flex; align-items:center; gap:13px; }
.cc-testi .by .av{ width:44px; height:44px; border-radius:50%; background:var(--sage); color:var(--wine); display:grid; place-items:center; font-family:var(--serif); font-style:italic; font-size:20px; }
.cc-testi .by .nm{ text-align:left; } .cc-testi .by .nm strong{ font-size:15px; } .cc-testi .by .nm span{ display:block; font-size:13px; opacity:.7; }

.cc-cta{ background:var(--oxblood); color:var(--cream); text-align:center; position:relative; overflow:hidden; }
.cc-cta .mk{ font-family:var(--serif); font-style:italic; font-size:60px; letter-spacing:-.08em; color:var(--sage); line-height:.8; display:inline-block; margin-bottom:22px; }
.cc-cta h2{ font-family:var(--serif); color:var(--cream) !important; font-weight:400; font-size:clamp(40px,7vw,108px); line-height:1; margin:10px auto 18px; max-width:16ch; }
.cc-cta h2 .ital{ font-style:italic; color:var(--sage); }
.cc-cta p{ font-size:19px; color:#FAF5ECb0; max-width:50ch; margin:0 auto 32px; }

.cc-btn{ font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; padding:15px 26px; border-radius:100px; display:inline-flex; align-items:center; gap:10px; border:1px solid currentColor; transition:transform .25s, background .25s, color .25s, border-color .25s; }
.cc-btn.fill-cream{ background:var(--cream); color:var(--oxblood); border-color:var(--cream); }
.cc-btn.fill-cream:hover{ background:var(--sage); border-color:var(--sage); color:var(--wine); }
.cc-btn.outline-cream{ color:var(--cream); }
.cc-btn.outline-cream:hover{ background:var(--cream); color:var(--oxblood); }

@media (max-width:1080px){
  .bento{ grid-template-columns:1fr 1fr; }
  .bento .span3,.bento .span2,.bento .span4{ grid-column:auto; }
  .bento .span6{ grid-column:1 / -1; }
  .cc-who .wrap{ grid-template-columns:1fr; gap:40px; }
}
@media (max-width:760px){
  .cc-sechead{ flex-direction:column; align-items:flex-start; }
  .cc-sechead .r{ text-align:left; }
  .bento{ grid-template-columns:1fr; }
  .cc-hero .sub{ flex-direction:column; align-items:flex-start; }
  .bento .span6 .inner6{ flex-direction:column; align-items:flex-start; }
}