/* KRIYARTH COMPONENTS
   components.css: styles for navigation, hero, carousels, project cards, CTA and footer.
   Each class is grouped by component so the visual design is easy to find. */
/* 01. Floating pill navigation */
.site-header { position: fixed; z-index: 100; top: 18px; left: 0; width: 100%; pointer-events: none; }
.site-header__inner { display: flex; width: min(1080px, calc(100% - 36px)); min-height: 66px; align-items: center; justify-content: space-between; gap: 18px; margin-inline: auto; padding: 8px 10px 8px 16px; border: 1px solid rgba(23,32,24,.1); border-radius: var(--radius-pill); background: rgba(245,240,232,.84); box-shadow: 0 8px 30px rgba(23,32,24,.06); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); pointer-events: auto; }
.site-brand { display: inline-flex; min-width: 0; align-items: center; gap: 11px; }
.site-brand__image { width: 43px; height: 43px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
.site-brand__wordmark { display: grid; gap: 1px; font-size: 1.02rem; font-weight: 850; letter-spacing: -.06em; line-height: 1.1; }
.site-brand__descriptor { color: var(--color-muted); font-size: .52rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav__link { display: inline-flex; min-height: 43px; align-items: center; justify-content: center; padding: 10px 15px; border-radius: var(--radius-pill); font-size: .83rem; font-weight: 700; transition: background var(--transition), color var(--transition); }
.site-nav__link:hover, .site-nav__link[aria-current="page"] { background: rgba(45,74,43,.08); color: var(--color-olive); }
.site-nav__link--cta { margin-left: 5px; background: var(--color-olive); color: var(--color-paper); }
.site-nav__link--cta:hover { background: var(--color-ink); color: var(--color-paper); }
.menu-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--color-line); border-radius: 50%; background: transparent; cursor: pointer; }
.menu-toggle__lines, .menu-toggle__lines::before, .menu-toggle__lines::after { display: block; width: 17px; height: 1.5px; background: var(--color-ink); transition: transform var(--transition), top var(--transition); }
.menu-toggle__lines { position: relative; }
.menu-toggle__lines::before, .menu-toggle__lines::after { position: absolute; left: 0; content: ""; }
.menu-toggle__lines::before { top: -5px; }
.menu-toggle__lines::after { top: 5px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines::after { top: 0; transform: rotate(-45deg); }
/* 02. Hero composition */
.hero { display: flex; min-height: min(850px, 100svh); align-items: center; padding-block: 150px 88px; }
.hero__grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(280px,.9fr); align-items: center; gap: clamp(38px,7vw,100px); }
.hero__eyebrow { margin-bottom: 24px; }
.hero__title { max-width: 850px; }
.hero__title span { display: block; color: var(--color-olive); }
.hero__description { max-width: 620px; }
.hero__note { display: flex; align-items: center; gap: 12px; margin-top: 30px; color: var(--color-muted); font-size: .82rem; }
.hero__note::before { width: 34px; height: 1px; background: var(--color-gold); content: ""; }
.hero-art { position: relative; min-height: 440px; overflow: hidden; border-radius: 32px; background: var(--color-sage); isolation: isolate; }
.hero-art__core { position: absolute; top: 12%; left: 15%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--color-olive); box-shadow: 0 0 0 13px rgba(45,74,43,.08); }
.hero-art__orbit { position: absolute; z-index: 1; top: 27%; left: -13%; width: 126%; height: 43%; border: 1px solid rgba(245,240,232,.9); border-radius: 50%; transform: rotate(-31deg); }
.hero-art__orbit--second { top: 33%; left: -6%; width: 112%; height: 31%; border-color: var(--color-gold); transform: rotate(28deg); }
.hero-art__label { position: absolute; z-index: 2; right: 25px; bottom: 24px; left: 25px; display: flex; align-items: end; justify-content: space-between; gap: 18px; color: var(--color-paper); }
.hero-art__label strong { font-size: 1.25rem; line-height: 1.2; }
.hero-art__label span { font-size: .67rem; letter-spacing: .12em; text-align: right; text-transform: uppercase; }
/* 03. Values strip */
.principles-strip { overflow: hidden; border-block: 1px solid var(--color-line); }
.principles-strip__inner { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 22px; }
.principles-strip__label { color: var(--color-muted); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.principles-strip__item { font-size: .9rem; font-weight: 700; }
/* 04. Two-row animated marquee inspired by studio portfolio sites */
.project-marquee { overflow: hidden; padding-block: 8px 24px; }
.project-marquee__row { display: flex; width: max-content; gap: 18px; padding-block: 9px; animation: marquee-left 42s linear infinite; }
.project-marquee__row--reverse { animation-name: marquee-right; animation-duration: 48s; }
.project-marquee:hover .project-marquee__row, .project-marquee:focus-within .project-marquee__row { animation-play-state: paused; }
.marquee-card { display: flex; width: clamp(245px,27vw,350px); min-height: 126px; align-items: center; gap: 18px; padding: 16px; border: 1px solid var(--color-line); border-radius: 18px; background: rgba(255,255,255,.35); transition: transform var(--transition), background var(--transition); }
.marquee-card:hover { transform: translateY(-4px); background: white; }
.marquee-card__visual { display: grid; width: 88px; height: 88px; flex: 0 0 auto; place-items: center; border-radius: 13px; background: var(--color-sage); color: var(--color-olive); font-size: 1.65rem; font-weight: 750; letter-spacing: -.08em; }
.marquee-card__visual--olive { background: var(--color-olive); color: var(--color-paper); }
.marquee-card__visual--gold { background: #D8C9A4; color: var(--color-ink); }
.marquee-card__visual--ink { background: var(--color-ink); color: var(--color-sage); }
.marquee-card__text { display: grid; gap: 5px; }
.marquee-card__category { color: var(--color-muted); font-size: .65rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.marquee-card__title { font-size: 1rem; font-weight: 800; line-height: 1.25; }
.marquee-card__status { color: var(--color-olive); font-size: .72rem; font-weight: 700; }
@keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* 05. Project cards */
.project-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.project-card { min-width: 0; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-card); background: rgba(255,255,255,.35); transition: transform var(--transition), box-shadow var(--transition); }
.project-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.project-card[hidden] { display: none; }
.project-card__visual { position: relative; display: flex; min-height: 300px; align-items: end; overflow: hidden; padding: 24px; isolation: isolate; }
.project-card__visual::before, .project-card__visual::after { position: absolute; z-index: -1; content: ""; }
.project-card__visual--river { background: #CBD5C4; }
.project-card__visual--river::before { top: 24%; left: -15%; width: 130%; height: 46%; border: 14px solid #CBD5C4; border-radius: 50%; background: var(--color-olive); transform: rotate(-22deg); }
.project-card__visual--river::after { top: 41%; left: -10%; width: 120%; height: 13%; border-radius: 50%; background: var(--color-gold); transform: rotate(-22deg); }
.project-card__visual--gis { background: #D9D9C8; }
.project-card__visual--gis::before { inset: -20%; background: repeating-linear-gradient(31deg,transparent 0 28px,rgba(45,74,43,.34) 29px 31px), repeating-linear-gradient(119deg,transparent 0 45px,rgba(168,144,90,.7) 46px 49px); transform: rotate(-8deg); }
.project-card__visual--gis::after { top: 27%; left: 36%; width: 28%; aspect-ratio: 1; border: 2px solid var(--color-olive); border-radius: 50%; box-shadow: 0 0 0 18px rgba(45,74,43,.08), 0 0 0 38px rgba(45,74,43,.06); }
.project-card__visual--water { background: #D5DCCF; }
.project-card__visual--water::before { top: 18%; left: 26%; width: 48%; aspect-ratio: 1; border: 2px solid var(--color-olive); border-radius: 50%; box-shadow: 0 0 0 22px rgba(45,74,43,.08), 0 0 0 44px rgba(45,74,43,.06), 0 0 0 66px rgba(45,74,43,.04); }
.project-card__visual--systems { background: #D8C9A4; }
.project-card__visual--systems::before { top: 14%; left: 18%; width: 64%; height: 64%; border: 1px solid rgba(23,32,24,.65); border-radius: 50%; box-shadow: 0 0 0 24px rgba(23,32,24,.05), 0 0 0 48px rgba(23,32,24,.04); }
.project-card__visual--systems::after { top: 48%; left: 8%; width: 84%; height: 1px; background: var(--color-ink); transform: rotate(-24deg); }
.project-card__visual-label { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid rgba(245,240,232,.6); border-radius: var(--radius-pill); background: rgba(245,240,232,.82); color: var(--color-ink); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(10px); }
.project-card__body { display: flex; min-height: 235px; flex-direction: column; padding: 26px; }
.project-card__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-bottom: 15px; color: var(--color-muted); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.project-card__title { margin-bottom: 12px; }
.project-card__description { max-width: 600px; margin-bottom: 25px; color: var(--color-muted); }
.project-card__link { margin-top: auto; }
/* 06. Tools and experience strip */
.credibility-section { background: var(--color-olive); color: var(--color-paper); }
.credibility-section .eyebrow { color: var(--color-sage); }
.credibility-section .section-heading__note { color: rgba(245,240,232,.72); }
.credibility-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.credibility-list__item { padding: 11px 15px; border: 1px solid rgba(245,240,232,.25); border-radius: var(--radius-pill); color: rgba(245,240,232,.92); font-size: .82rem; font-weight: 650; }
/* 07. Numbered process rows */
.process-list { border-top: 1px solid var(--color-line); }
.process-row { display: grid; grid-template-columns: 70px minmax(190px,.8fr) minmax(0,1.2fr); gap: 24px; padding-block: 28px; border-bottom: 1px solid var(--color-line); }
.process-row__number { color: var(--color-gold); font-size: .85rem; font-weight: 850; letter-spacing: .1em; }
.process-row__title { margin: 0; font-size: 1.35rem; }
.process-row__description { margin: 0; color: var(--color-muted); }
/* 08. Call-to-action panel */
.cta-panel { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: clamp(30px,5.5vw,72px); border-radius: 32px; background: var(--color-sage); }
.cta-panel__copy { max-width: 750px; }
.cta-panel__copy h2 { margin-bottom: 18px; }
.cta-panel__copy p { max-width: 620px; margin-bottom: 0; color: #4F594C; }
/* 09. Page and case-study heroes */
.page-hero { padding-block: 170px 72px; border-bottom: 1px solid var(--color-line); }
.page-hero__title { max-width: 1000px; }
.page-hero__description { max-width: 760px; }
.project-detail-hero { padding-block: 170px 54px; }
.project-detail-hero__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.project-detail-hero__meta span { padding: 8px 12px; border: 1px solid var(--color-line); border-radius: var(--radius-pill); color: var(--color-muted); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.case-visual { position: relative; min-height: clamp(300px,47vw,620px); overflow: hidden; border-radius: 32px; background: var(--color-sage); isolation: isolate; }
.case-visual--river { background: #CBD5C4; }
.case-visual--river::before { position: absolute; top: 22%; left: -12%; width: 125%; height: 52%; border: 18px solid #CBD5C4; border-radius: 50%; background: var(--color-olive); content: ""; transform: rotate(-22deg); }
.case-visual--river::after { position: absolute; top: 43%; left: -10%; width: 120%; height: 13%; border-radius: 50%; background: var(--color-gold); content: ""; transform: rotate(-22deg); }
.case-visual--gis { background: #D9D9C8; }
.case-visual--gis::before { position: absolute; inset: -20%; background: repeating-linear-gradient(31deg,transparent 0 28px,rgba(45,74,43,.34) 29px 31px), repeating-linear-gradient(119deg,transparent 0 45px,rgba(168,144,90,.7) 46px 49px); content: ""; transform: rotate(-8deg); }
.case-visual--water { background: #D5DCCF; }
.case-visual--water::before { position: absolute; top: 18%; left: 26%; width: 48%; aspect-ratio: 1; border: 2px solid var(--color-olive); border-radius: 50%; box-shadow: 0 0 0 22px rgba(45,74,43,.08), 0 0 0 44px rgba(45,74,43,.06), 0 0 0 66px rgba(45,74,43,.04); content: ""; }
.case-visual--systems { background: #D8C9A4; }
.case-visual--systems::before { position: absolute; top: 14%; left: 18%; width: 64%; height: 64%; border: 1px solid rgba(23,32,24,.65); border-radius: 50%; box-shadow: 0 0 0 24px rgba(23,32,24,.05), 0 0 0 48px rgba(23,32,24,.04); content: ""; }
.case-study-grid { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: clamp(35px,8vw,110px); }
.case-study-grid__label { color: var(--color-olive); font-size: .72rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.case-study-grid__content p { color: var(--color-muted); }
.case-study-grid__content h3 { margin-top: 32px; }
.case-study-grid__content h3:first-child { margin-top: 0; }
.status-note { padding: 16px 18px; border-left: 3px solid var(--color-gold); background: rgba(168,144,90,.1); color: var(--color-muted); font-size: .9rem; }
/* 10. Contact page */
.contact-layout { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(40px,8vw,110px); }
.contact-card { padding: clamp(24px,4vw,42px); border: 1px solid var(--color-line); border-radius: var(--radius-card); background: rgba(255,255,255,.4); }
.contact-card__label { display: block; margin-bottom: 9px; color: var(--color-muted); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.contact-card__value { display: block; margin-bottom: 28px; font-size: clamp(1.1rem,2vw,1.5rem); font-weight: 750; overflow-wrap: anywhere; }
/* 11. Footer */
.site-footer { padding-block: 66px 24px; background: var(--color-ink); color: var(--color-paper); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0,1.4fr) repeat(2,minmax(150px,.6fr)); gap: 48px; padding-bottom: 48px; }
.site-footer__brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 1.2rem; font-weight: 850; letter-spacing: -.05em; }
.site-footer__logo { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.site-footer__description { max-width: 390px; color: rgba(245,240,232,.68); }
.site-footer__label { margin-bottom: 15px; color: var(--color-sage); font-size: .7rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.site-footer__links { display: grid; gap: 10px; color: rgba(245,240,232,.78); font-size: .88rem; }
.site-footer__links a:hover { color: white; }
.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 18px; border-top: 1px solid rgba(245,240,232,.18); color: rgba(245,240,232,.56); font-size: .75rem; }
/* 12. Portfolio category filters */
.project-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; }
.project-filter { padding: 10px 15px; border: 1px solid var(--color-line); border-radius: var(--radius-pill); background: transparent; cursor: pointer; font-size: .82rem; font-weight: 750; transition: background var(--transition), color var(--transition); }
.project-filter:hover, .project-filter.is-active { border-color: var(--color-olive); background: var(--color-olive); color: var(--color-paper); }