/* V21 — FPS-inspired palette study. Layout and black wordmark preserved. */
:root{
  --fps-bg:#E8EEEE;
  --fps-bg-soft:#DFE8E8;
  --fps-ink:#0B2324;
  --fps-muted:#718283;
  --fps-line:#C7D3D3;
  --fps-coral:#E94B2B;
  --fps-cyan:#50B3C4;
  --fps-pink:#E2A5E6;
  --fps-white:#FFFFFF;
  --accent:var(--fps-coral);
  --ink:var(--fps-ink);
  --paper:var(--fps-bg);
  --gray:var(--fps-bg-soft);
  --muted:var(--fps-muted);
  --soft:#93A3A3;
  --line:var(--fps-line);
}

html,body{background:var(--fps-bg);color:var(--fps-ink);}
body{accent-color:var(--fps-coral);}
::selection{background:var(--fps-coral);color:#fff;}

/* Header / navigation */
.site-header{background:var(--fps-bg);}
.header-layout{border-color:var(--fps-line);}
.header-layout nav a,.header-actions,.header-cta{color:var(--fps-ink);}
.language{color:#91A0A0;}
.language button{color:#829292;}
.language button.active{color:var(--fps-ink);}
.button-outline{border-color:var(--fps-ink);color:var(--fps-ink);background:transparent;}
.button-outline:hover{background:var(--fps-ink);color:#fff;}
/* Keep every actual logo asset pure black. */
.brand img,.brand-statement img,.footer-logo img{filter:none!important;opacity:1!important;}

/* Hero */
.hero-kicker{color:#6D7D7D;}
.hero h1,.hero-lead,.hero-link-subtle{color:var(--fps-ink);}
.hero-lead{color:#526667;}
.button-black{background:var(--fps-coral);color:#fff;}
.button-black:hover{background:#CF3F24;}
.button-black .arr{color:#fff!important;}
.hero-link-subtle:hover{color:var(--fps-coral);}
.hero-image.is-web-concept{background:linear-gradient(135deg,#DDE8E9,#C6D7DA 48%,#9FB9BE);}
.hero-project-tag{background:var(--fps-bg);color:var(--fps-ink);border-color:#C8D5D5;}
.hero-corner-cta{background:var(--fps-bg)!important;color:var(--fps-ink);border-color:#BACACA;box-shadow:0 9px 24px rgba(11,35,36,.10);}
.hero-corner-cta:hover{background:var(--fps-coral)!important;color:#fff;border-color:var(--fps-coral);}
.hero-indicators button{background:#B8C8C8;}
.hero-indicators button.active{background:var(--fps-coral)!important;}
.hero-under-image,.hero-visual-caption small,.hero-page-number{color:#6F8081;}
.round-arrow{background:var(--fps-coral);color:#fff;}

/* Oversized black wordmark intentionally stays black. */
.brand-statement{color:#000;}
.brand-statement-top{color:#798989;}

/* Experience */
.section-rule{border-color:var(--fps-line);color:#718181;}
.trust-titleline strong,.trust-copy h2,.trust-copy p,.text-link{color:var(--fps-ink);}
.trust-titleline>span{color:#748586;}
.trust-copy p{color:#536667;}
.trust-grid:before{background:#BDCCCC;}
.trust-grid:after{background:var(--fps-coral);}
.text-link{border-color:#8DA0A0;}
.text-link .arr{color:var(--fps-coral)!important;}

/* Projects — same pale-blue canvas as the FPS reference. */
.projects{background:var(--fps-bg);}
.projects .section-rule,.project-filters,.design-disclaimer{border-color:var(--fps-line);}
.project-intro h2,.project-intro p,.card-info strong,.card-info small,.project-counter{color:var(--fps-ink);}
.project-intro p,.card-info small{color:#5E7071!important;}
.pale{color:#829394;}
.filter{border-color:#B8C8C8;color:var(--fps-ink);background:rgba(255,255,255,.22);}
.filter:hover,.filter.active{background:var(--fps-ink);color:#fff;border-color:var(--fps-ink);}
.filter.active:before{background:var(--fps-coral);}
.card-tags span{border-color:rgba(11,35,36,.16);background:rgba(232,238,238,.93);color:var(--fps-ink);}
.card-arrow{color:var(--fps-ink);}
.work-card:hover .card-arrow{color:var(--fps-coral);}
.design-disclaimer{color:#7B8A8B;}
/* FPS-like small accent bookmarks: coral + cyan instead of black. */
.bookmark-ribbon.ribbon-orange{background:var(--fps-coral);}
.bookmark-ribbon.ribbon-black{background:var(--fps-cyan);color:var(--fps-ink);}
.work-card[data-project="pecsi"] .bookmark-ribbon.ribbon-black{background:var(--fps-pink);color:var(--fps-ink);}

/* Client wall */
.logo-title h2,.logo-title p,.logo-tile{color:var(--fps-ink);}
.logo-title p{color:#5E7172;}
.logo-wall{border-color:var(--fps-line);}
.logo-tile{opacity:.88;}
.logo-disclaimer{color:#728384;}

/* Dark block adopts the reference's deep green-black, not pure black. */
.services{background:var(--fps-ink);color:#fff;}
.section-rule-inverted{border-color:#385253;color:#93A7A7;}
.service-heading .pale{color:#809495;}
.service-heading p{color:#B6C4C4;}
.service-rows{border-color:#466061;}
.service-rows>div{border-color:#314B4C;}
.service-rows>div>span:first-child{color:#7E9696;}
.service-rows>div>span:nth-of-type(2){color:#AFC0C0!important;}
.service-rows b{color:var(--fps-coral);}
.service-rows>div:hover b{color:var(--fps-cyan);}

/* Contact / footer */
.contact{background:var(--fps-bg);}
.contact .eyebrow,.contact-grid p:not(.eyebrow){color:#667879;}
.contact h2,.contact-email{color:var(--fps-ink);}
.contact-email{border-color:#7F9192;}
.contact-email:hover{color:var(--fps-coral);}
.footer{border-color:var(--fps-line);color:#6D7E7F;}
.footer a:hover{color:var(--fps-coral);}

/* Modal follows the same palette. */
.project-modal{background:var(--fps-bg);color:var(--fps-ink);}
.modal-close{background:var(--fps-ink);color:#fff;}
.modal-notice{color:#6C7D7E;}

@media(max-width:760px){
  .site-header,.projects,.contact{background:var(--fps-bg);}
}