/* Youngcraft Ltd Premium Rebuild — Prototype 21
   Site-wide harmonisation: responsive navigation, editorial legal/insights, project chyron, brand/social systems. */

/* Hero descriptor */
.page-hero__descriptor{margin:.55rem 0 0!important;color:#d7dce0!important;font-family:var(--font-body);font-size:clamp(.88rem,1vw,1rem)!important;letter-spacing:.01em}
.page-hero__descriptor--dark{color:#5f6971!important}

/* Homepage carousel: image-first, no service-card rail. */
.home-service-hero{position:relative}
.home-service-hero__navigation{display:none!important}
.home-service-slide__content{padding-bottom:42px!important}
@media(max-width:760px){.home-service-slide__content{padding-bottom:34px!important}}
.home-service-controls--floating{position:absolute;z-index:8;right:max(24px,calc((100vw - var(--container))/2));bottom:24px;display:flex;gap:8px;padding:7px;background:rgba(9,12,16,.78);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.16);border-radius:999px}
.home-service-controls--floating button{width:40px;height:40px;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.home-service-controls--floating button:hover{border-color:#e0ad27;background:rgba(224,173,39,.12);transform:translateY(-1px)}
.home-service-progress{position:absolute!important;z-index:9;left:0;right:0;bottom:0;height:2px!important;background:rgba(255,255,255,.2)!important}
.home-service-progress span{display:block;height:100%;width:0;background:var(--gold)}

/* Brand ecosystem */
.home-brands-strip{padding:2.6rem 0 2.75rem;border-top:1px solid var(--line);background:#fff}
.home-brands-strip__head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:1.45rem}
.home-brands-strip__head>div{display:grid;grid-template-columns:170px minmax(0,720px);gap:44px;align-items:start;width:100%}
.home-brands-strip__head span{font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;font-weight:800;color:#8b690e}
.home-brands-strip__head p{margin:0;color:#69737c;font-size:.82rem;line-height:1.55}
.home-brands-strip__rail{display:flex;align-items:center;gap:clamp(26px,3vw,52px);overflow-x:auto;scrollbar-width:none;padding-block:6px;overscroll-behavior-inline:contain}
.home-brands-strip__rail::-webkit-scrollbar{display:none}
.brand-item{flex:0 0 auto;min-width:92px;height:44px;display:flex;align-items:center;justify-content:center;color:#555e65;font-family:var(--font-display);font-size:.92rem;font-weight:750;letter-spacing:.02em;filter:grayscale(1);opacity:.72;transition:opacity .2s,filter .2s,color .2s}
.brand-item img{max-width:112px;max-height:32px;width:auto;height:auto;object-fit:contain}
.brand-item:hover{opacity:1;filter:grayscale(0);color:var(--ink)}
.brand-item--more{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:#8b690e}

/* Projects: chyron + compact transition */
.project-chyron{height:56px;background:#0b0f14;color:#fff;border-bottom:1px solid rgba(255,255,255,.1);overflow:hidden}
.project-chyron__inner{height:100%;display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:center}
.project-chyron__inner>strong{font-size:.61rem;text-transform:uppercase;letter-spacing:.14em;color:#e0ad27;white-space:nowrap}
.project-chyron__viewport{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.project-chyron__track{width:max-content;display:flex;animation:project-chyron-scroll 42s linear infinite}
.project-chyron__group{display:flex;align-items:center;gap:20px;padding-right:20px}
.project-chyron a{color:#dce1e5;font-size:.74rem;white-space:nowrap}
.project-chyron a:hover{color:#fff}
.project-chyron__group>span{color:#9b7310;font-size:.72rem}
.project-chyron:hover .project-chyron__track,.project-chyron:focus-within .project-chyron__track{animation-play-state:paused}
@keyframes project-chyron-scroll{to{transform:translateX(-50%)}}
.project-intro{padding:2.25rem 0 2.1rem;border-bottom:1px solid var(--line);background:#fff}
.project-intro__inner{max-width:930px}
.project-intro p{margin:0;font-size:clamp(.95rem,1.05vw,1.05rem);line-height:1.68;color:#5e6870}
.project-intro .text-link{margin-top:12px}
.project-featured-section{padding-top:2.5rem!important}
.project-records-section{padding-top:3.2rem!important}

/* About: a story, not a duplicated company profile. */
.about-story{padding:clamp(3.7rem,5.5vw,5.5rem) 0}
.about-story__inner{max-width:930px}
.about-story p{font-size:clamp(1rem,1.12vw,1.09rem);line-height:1.8;color:#55616a;margin:0 0 1.25rem}
.about-story p strong{color:var(--ink);font-family:var(--font-display);font-weight:700}
.about-story__signature{margin-top:2rem!important;padding-top:1.3rem;border-top:1px solid var(--line);font-family:var(--font-display)!important;font-size:clamp(1.35rem,1.7vw,1.65rem)!important;color:#0b0f14!important;font-weight:750}
.about-method{padding:3.8rem 0}
.about-method__inner{display:grid;grid-template-columns:minmax(220px,.52fr) minmax(0,1.48fr);gap:70px}
.about-method__intro h2,.about-future h2{font-size:clamp(1.55rem,2vw,2rem);margin:0 0 10px}
.about-method__intro p,.about-future p{font-size:.9rem;line-height:1.7;color:#657079}
.about-method__list{border-top:1px solid var(--line)}
.about-method__list>div{display:grid;grid-template-columns:38px 170px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--line);align-items:start}
.about-method__list span{font-size:.58rem;letter-spacing:.1em;font-weight:800;color:#8b690e;padding-top:4px}
.about-method__list strong{font-family:var(--font-display);font-size:.9rem}
.about-method__list p{margin:0;font-size:.82rem;line-height:1.58;color:#69737c}
.about-future{padding:3.8rem 0}
.about-future__inner{max-width:920px}

/* Insights: editorial taxonomy, no tag cloud. */
.insights-conversation{padding:3.3rem 0 3rem;background:#fff;border-bottom:1px solid var(--line)}
.insights-conversation__inner{max-width:920px}
.insights-conversation p{font-size:clamp(1.02rem,1.25vw,1.16rem);line-height:1.78;color:#55616a;margin:0}
.insights-library--editorial{padding:0 0 5.2rem;background:#f7f6f2}
.insights-topic-bar{position:sticky;top:70px;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:15px 0 13px;background:rgba(247,246,242,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.insights-topic-nav{display:flex;align-items:center;gap:22px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.insights-topic-nav::-webkit-scrollbar{display:none}
.insights-topic-nav a{position:relative;flex:0 0 auto;padding:8px 0;font-size:.73rem;font-weight:700;color:#5a646c}
.insights-topic-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--gold);transition:.2s}
.insights-topic-nav a:hover,.insights-topic-nav a.is-active{color:var(--ink)}
.insights-topic-nav a.is-active:after{right:0}
.insights-search--editorial{flex:0 0 210px;height:38px;border:1px solid #d9d5cc;background:#fff;display:flex;align-items:center;padding:0 11px}
.insights-search--editorial input{border:0;outline:0;background:transparent;width:100%;font:inherit;font-size:.76rem;color:var(--ink)}
.insights-search--editorial>span{color:#8b690e}
.insight-feature{margin-top:2.3rem}
.insights-empty--editorial{padding:4.5rem 0 2rem;max-width:760px}

/* Legal pages are documents, not marketing landers. */
.legal-page{background:#fff}
.legal-header{padding:clamp(4rem,6vw,6.4rem) 0 2.6rem;border-bottom:1px solid var(--line)}
.legal-header__inner{max-width:900px}
.legal-header h1{font-size:clamp(2.3rem,3.5vw,3.7rem);margin:0 0 14px;letter-spacing:-.04em}
.legal-header p{font-size:1rem;line-height:1.7;color:#5f6971;max-width:760px;margin:0 0 12px}
.legal-header span{font-size:.72rem;color:#8a9298}
.legal-body{padding:2.2rem 0 5rem}
.legal-body__inner{max-width:900px}
.legal-body section{padding:1.55rem 0;border-bottom:1px solid var(--line)}
.legal-body h2{display:grid;grid-template-columns:42px 1fr;gap:12px;font-size:1.02rem;margin:0 0 8px}
.legal-body h2 span{font-size:.58rem;letter-spacing:.1em;color:#8b690e;padding-top:4px}
.legal-body p{margin:0 0 .75rem;padding-left:54px;font-size:.88rem;line-height:1.72;color:#606b73}
.legal-body a{text-decoration:underline;text-decoration-color:#cda334;text-underline-offset:3px}

/* Footer social icons */
.footer-socials{display:flex;gap:10px;margin-top:18px}
.footer-social-link{width:34px;height:34px;border:1px solid rgba(255,255,255,.18);border-radius:50%;display:grid;place-items:center;color:#aeb6bd;transition:.2s}
.footer-social-link__icon{width:15px;height:15px}
a.footer-social-link:hover{border-color:#e0ad27;color:#e0ad27;transform:translateY(-1px)}
.footer-social-link.is-disabled{opacity:.45;cursor:default}

/* Mobile/phone header is a real drawer, not a compressed desktop menu. */
.services-mega{top:70px}
.header-mobile-quote{display:none}
.site-nav__mobile-actions{display:none}
@media(max-width:1080px){
  .header-inner{height:68px!important;min-height:68px!important}
  .brand{min-width:0!important}
  .brand img{width:38px!important;height:38px!important}
  .site-nav{position:fixed!important;z-index:190;inset:68px 0 0 auto!important;width:min(430px,100vw);height:calc(100dvh - 68px);padding:20px 24px 28px!important;background:#fff!important;color:var(--ink)!important;display:flex!important;flex-direction:column;align-items:stretch!important;gap:0!important;border-top:1px solid var(--line)!important;border-left:1px solid var(--line);transform:translateX(105%);opacity:0;visibility:hidden;transition:transform .28s ease,opacity .2s ease,visibility .2s;overflow-y:auto;box-shadow:-30px 0 70px rgba(11,15,20,.1)}
  .site-nav.is-open{transform:translateX(0);opacity:1;visibility:visible}
  .site-nav>a,.nav-services__trigger{width:100%;min-height:54px;display:flex!important;align-items:center;justify-content:space-between;border-bottom:1px solid #ece9e2;color:#151b20!important;font-size:.9rem!important;font-weight:700!important}
  .site-nav>a:after,.nav-services__trigger:after{display:none!important}
  .nav-services{display:block!important;width:100%}
  .nav-services__trigger{padding:0!important}
  .nav-services__trigger b{font-size:1rem!important}
  .services-mega{position:static!important;width:100%!important;transform:none!important;display:none!important;grid-template-columns:1fr!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;border:0!important;box-shadow:none!important;border-radius:0!important;background:#fff!important}
  .nav-services.is-open .services-mega{display:block!important}
  .services-mega__intro{display:none!important}
  .services-mega__links{display:grid!important;grid-template-columns:1fr!important;padding:2px 0 10px!important}
  .services-mega__links>a{grid-template-columns:30px 1fr!important;padding:12px 8px!important;border-bottom:1px solid #f0ede7!important;background:#faf9f6;color:var(--ink)!important}
  .services-mega__links>a:last-child{border-bottom:0!important}
  .services-mega__links>a strong{font-size:.82rem!important}
  .nav-toggle{display:block!important;order:5;margin-left:8px;width:42px;height:42px}
  .header-cta{display:none!important}
  .header-mobile-quote{display:inline-flex;align-items:center;gap:6px;margin-left:auto;min-height:38px;padding:0 11px;border:1px solid var(--ink);border-radius:4px;color:var(--ink);font-size:.7rem;font-weight:800}
  .header-mobile-quote__icon{width:14px;height:14px}
  .site-nav__mobile-actions{display:grid;gap:9px;margin-top:20px}
  .site-nav__mobile-actions .btn{width:100%;min-height:46px;border-radius:4px!important}
  .site-nav__mobile-contact{display:grid!important;gap:8px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
  .site-nav__mobile-contact>span{font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;color:#8b690e;font-weight:800}
  .site-nav__mobile-contact a{font-size:.82rem;color:#39434b!important}
}
@media(max-width:560px){
  .brand__wordmark small{display:none}
  .brand__wordmark strong{font-size:.72rem!important}
  .header-mobile-quote span{display:none}
  .header-mobile-quote{width:38px;justify-content:center;padding:0}
}

/* Responsive refinements */
@media(max-width:900px){
  .home-brands-strip__head>div{grid-template-columns:1fr;gap:8px}
  .about-method__inner{grid-template-columns:1fr;gap:24px}
  .about-method__list>div{grid-template-columns:34px 150px 1fr}
}
@media(max-width:700px){
  .home-service-controls--floating{right:14px;bottom:14px}
  .project-chyron{height:50px}
  .project-chyron__inner{grid-template-columns:1fr;gap:0}
  .project-chyron__inner>strong{display:none}
  .project-chyron__viewport{mask-image:none;-webkit-mask-image:none;overflow-x:auto;scrollbar-width:none}
  .project-chyron__track{animation:none}
  .project-intro{padding:1.8rem 0}
  .about-method__list>div{grid-template-columns:32px 1fr;gap:10px 14px}
  .about-method__list p{grid-column:2}
  .insights-topic-bar{top:68px;align-items:stretch;flex-direction:column;gap:8px;padding:10px 0}
  .insights-search--editorial{flex:0 0 auto;width:100%}
  .legal-body p{padding-left:0}
  .legal-body h2{grid-template-columns:32px 1fr}
}
@media(prefers-reduced-motion:reduce){.project-chyron__track{animation:none}}
/* Youngcraft Ltd — service-page anchor navigation legibility patch
   Append to /assets/css/p21.css (loaded after flow.css and premium.css). */

.service-anchor-nav {
    background: #fff !important;
    color: #0b0f14 !important;
    border-top: 1px solid #e7e3db !important;
    border-bottom: 1px solid #ddd8ce !important;
}

.service-anchor-nav__inner {
    min-height: 50px;
}

.service-anchor-nav a {
    position: relative;
    color: #59636b !important;
    opacity: 1 !important;
    border-right: 0 !important;
    padding: 15px 22px 14px !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    transition: color .18s ease, background-color .18s ease;
}

.service-anchor-nav a:first-child {
    border-left: 0 !important;
}

.service-anchor-nav a:hover,
.service-anchor-nav a:focus-visible {
    color: #0b0f14 !important;
    background: #f7f6f2 !important;
}

/* Keep Overview clearly identifiable until scroll-spy is introduced. */
.service-anchor-nav a:first-child {
    color: #b67d00 !important;
}

.service-anchor-nav a:first-child::after,
.service-anchor-nav a:hover::after,
.service-anchor-nav a:focus-visible::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 7px;
    height: 2px;
    background: #d4a017;
}

@media (max-width: 760px) {
    .service-anchor-nav a {
        padding: 13px 16px 12px !important;
        font-size: .7rem !important;
    }

    .service-anchor-nav a:first-child::after,
    .service-anchor-nav a:hover::after,
    .service-anchor-nav a:focus-visible::after {
        left: 16px;
        right: 16px;
        bottom: 6px;
    }
}