/* Light presentation layer; loaded after the original theme and client grid. */
:root {
    color-scheme: light;
    --surface: #ffffff;
    --surface-soft: #f5f6f8;
    --surface-alt: #edf0f3;
    --ink: #202b38;
    --muted: #526171;
    --line: #dce2e8;
    --accent: #fb7420;
}
body { background: var(--surface-soft); color: var(--ink); }
.loader-wrap.color-bg, .loader-wrap .loader-bg { background: #f5f6f8; }
.loader-wrap .loader-inner {
    inset: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.seco-preloader { position: relative; z-index: 1; display: block; width: min(560px, 90vw); height: auto; }
.loader-clouds { position: absolute; inset: -20px; overflow: hidden; pointer-events: none; animation: loading-cloud-focus 2.2s 1.1s ease-in-out both; }
.loader-clouds span {
    --cloud-tile: max(100vw, 210vh);
    position: absolute; top: -20%; left: 0; width: calc(2 * var(--cloud-tile)); height: 140%;
    background: url('../animations/natural-cloud.png') left center / 50% auto repeat-x;
    opacity: .72;
    animation: loading-cloud-drift 90s linear infinite;
    will-change: transform;
    backface-visibility: hidden;
}
.loader-clouds span + span {
    --cloud-tile: max(100vw, 240vh);
    top: -35%; height: 160%; background-position: 25% center; opacity: .4;
    animation-duration: 130s; animation-delay: -45s;
}
/* One complete repeated tile per cycle: identical pixels at the loop boundary. */
@keyframes loading-cloud-drift { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }
@keyframes loading-cloud-focus { from { filter: blur(0); } to { filter: blur(12px); } }
@media (prefers-reduced-motion: reduce) { .loader-clouds, .loader-clouds span { animation: none; } }
.seco-logo-animation {
    position: relative;
    display: flex;
    min-height: 360px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(145deg, #f4f7fa, #fff 58%, #fff4ec);
    border: 1px solid var(--line);
    isolation: isolate;
}
.seco-logo-animation img { position: relative; z-index: 3; display: block; width: min(70%, 390px); height: auto; filter: drop-shadow(0 16px 24px rgba(32,43,56,.16)); animation: seco-logo-float 5s ease-in-out infinite; }
.seco-logo-animation__halo { position: absolute; z-index: 1; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(251,116,32,.28), rgba(251,116,32,0) 68%); filter: blur(4px); animation: seco-halo-pulse 4s ease-in-out infinite; }
.seco-logo-animation__ring { position: absolute; z-index: 2; width: 230px; height: 230px; border: 1px solid rgba(251,116,32,.38); border-radius: 50%; animation: seco-ring-spin 14s linear infinite; }
.seco-logo-animation__ring:before, .seco-logo-animation__ring:after { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px rgba(251,116,32,.7); }
.seco-logo-animation__ring:before { top: -4px; left: 50%; }
.seco-logo-animation__ring:after { top: 50%; right: -4px; transform: translateY(-50%); background: #3d579b; }
.seco-logo-animation__caption { position: absolute; z-index: 4; bottom: 22px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .32em; }
@keyframes seco-logo-float { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.025); } }
@keyframes seco-halo-pulse { 0%,100% { transform: scale(.88); opacity: .55; } 50% { transform: scale(1.12); opacity: .95; } }
@keyframes seco-ring-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) { .seco-logo-animation { min-height: 280px; } .seco-logo-animation__ring { width: 180px; height: 180px; } .seco-logo-animation__halo { width: 205px; height: 205px; } .seco-logo-animation__caption { bottom: 16px; font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { .seco-logo-animation img, .seco-logo-animation__halo, .seco-logo-animation__ring { animation: none; } }
.logo-holder img.nastik-small-logo { width: 76px; height: 60px; object-fit: contain; object-position: left center; }
.content, .main-header, .nav-holder, .nav-container, .logo_menu,
.loader-bg, .page-load_bg, .page-load_bg2, .pr-bg, .pr-bg2,
.fixed-column-wrap, .column-image-anim, .hero-wrap, .fs-slider-wrap,
.hero-border, .content-front, .content-inner .content-back {
    background: var(--surface);
}
.dark-bg, .dark-content, .fcw-dec, .header-social, .folio-btn,
.folio-btn-tooltip, .share-wrapper, .main-footer, .footer-inner,
.subfooter, .page-scroll-nav, .option-panel, .hero-slider-wrap_pagination,
.order-wrap-container, .order-wrap:before, .inline-folio-filters,
.fw-carousel_pagination, .ss-slider-pagination, .content-nav {
    background: var(--surface-soft);
}
.dark-bg:before, .main-footer:before, .main-footer:after,
.order-wrap-container:before, .to-top-btn:before, .hero-dec,
.filter-panel .folio-counter, .inline-folio-filters .folio-counter {
    background: var(--surface-alt);
}
.main-header {
    border-right: 1px solid rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .12);
    box-shadow: 8px 0 28px rgba(32, 43, 56, .06);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
}
.main-header:before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(160deg, rgba(255,255,255,.16), transparent 58%, rgba(251,116,32,.025));
}
.main-header .logo-holder { display: none; }
.hero-brand-logo { position: absolute; top: 24px; left: 22px; z-index: 30; display: flex; width: 120px; height: 120px; align-items: center; }
.hero-brand-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* The compact header already carries the brand on tablet and mobile. */
@media (max-width: 1064px) {
    #home > .hero-brand-logo { display: none; }
}
@media (min-width: 1501px) {
    .column-wrap { width: 100%; float: none; position: relative; }
    .fixed-column-wrap,
    .fixed-column-wrap.scroll-to-fixed-fixed { display: none !important; }
    .content-holder.scroll-content { margin-left: 0; }
}
.page-scroll-nav {
    position: relative;
    background: rgba(255, 255, 255, .14);
    border-bottom: 1px solid rgba(255, 255, 255, .42);
    box-shadow: 0 8px 28px rgba(32, 43, 56, .07);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
}
.page-scroll-nav-logo { position: absolute; top: 50%; left: 22px; z-index: 4; display: flex; align-items: center; width: 58px; height: 44px; transform: translateY(-50%); }
.page-scroll-nav-logo img { display: block; width: 100px; height: 100px; object-fit: contain; }
.page-scroll-nav nav { padding-left: 58px; background: transparent !important; }
.page-scroll-nav nav > ul { display: flex; justify-content: flex-end; margin-left: auto; margin-right: 180px; }
.page-scroll-nav nav > ul > li { float: none; }
.nav-holder { box-shadow: 0 18px 60px #202b3820; }
.nav-overlay { background: rgba(32, 43, 56, .25); }
/* Pale image overlays retain photography while supporting dark headlines. */
.overlay, .team-photo .overlay {   opacity: .78; background-color: #00000097; }
body .half-hero-wrap h1, body .half-hero-wrap h4,
body .fixed-column-tilte, body .section-entry h1, body .section-entry h3,
body .carousel-title-wrap h2 a, body .carousel-title-wrap p,
body .rotate_text, body .carousel-item_number,
body .content-inner, body .content-inner .cf-inner .inner p,
body .content-inner .content-front li, body .video-promo-text h3,
body .video-promo-text p, body .dark-bg h3, body .dark-bg h4,
body .dark-bg p, body .page-load_bg span {
    color: var(--ink);
}
body .menu-button-text, body .nav-button:hover .menu-button-text,
body .sliding-menu a, body .sliding-menu a.back:before,
body .submen-dec:before, body .share-title, body .share-container a,
body .share-containers a, body .header-social li a,
body .folio-btn-tooltip, body .page-scroll-nav li a,
body .footer-title, body .footer-contacts li a, body .footer-widget li a,
body .to-top-btn, body .policy-box, body .ns-text-logo,
body .footer-box-item p, body #twitts-container a,
body #twitts-container p.tweet, body #twitts-container .timePosted a,
body .slide-numb, body .show-info span, body .swiper-counter,
body .inline-dark-filters a, body .folio-counter div,
body .serv-price-wrap span, body .pr-list li,
body .team-contact_btn, body .content-nav li a {
    color: var(--ink);
}
p, .main-about-text-area, .testimonilas-text p,
.footer-contacts li span { color: var(--muted); }
.main-header:before, .nav-holder-line, .footer-inner:before,
.subfooter:before, .progress-bar-wrap:before, .slide-progress-warp,
.sliding-menu li a:after, .serv-price-wrap,
.dec-icon:before, .dec-icon:after { background: var(--line); }
.header-social li a, .share-container a, .share-containers a,
.footer-title, .folio-btn, .folio-btn-tooltip, .hero-corner,
.hero-corner2, .hero-corner3, .cf-inner:before, .cf-inner:after,
body #twitts-container ul li { border-color: var(--line); }
.grid-det, .vis-det .grid-det, .box-media-zoom, .tooltip-info {
    background: rgba(255, 255, 255, .96);
    color: var(--ink);
}
.grid-det_link, .tooltip-info h5, .tooltip-info p { color: var(--ink); }
.btn, .btn.color-bg, .fcb, .ss-slider-cont, .tcb,
.team-social li a, .subcribe-form .subscribe-button {
    background: var(--accent); color: #fff;
}
.btn:hover, .fcb:hover, .ss-slider-cont:hover, .tcb:hover {
    background: #963d08; color: #fff;
}
.btn:after { background: #963d08; }
.btn:before { background: #fff; }
body .sliding-menu a:hover, body .header-social li a:hover,
body .page-scroll-nav li a.act-scrlink, body .page-scroll-nav li a.actscr-link,
body .footer-contacts li a:hover { color: var(--accent); }
.subcribe-form input.enteremail {
    background: #fff; color: var(--ink); border: 1px solid var(--line);
}
.subcribe-form input.enteremail::placeholder { color: var(--muted); }
.testimonilas-text, .team-info, #clients .clients-grid__item {
    border-color: var(--line); background: var(--surface);
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 4px;
}
body .inline-facts-wrap .num, body .scroll-down-wrap span,
body .fixed-filter-panel_title, body .order-wrap h4 { color: var(--ink); }
.scroll-down-wrap.transparent_sdw .mousey { border-color: var(--muted); }

/* Full-bleed imagery with a directional light scrim behind the copy. */
#home { background: #fff; }
#home .hero-dec, #home .sec-lines, #home .hero-corner,
#home .hero-corner2, #home .hero-border { display: none; }
#home .hero-slider-img { inset: 0; height: 100%; }
#home .hero-slider-img .overlay {
    opacity: 1;
    background: none;
    /* background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255, 255, 255, 0.838) 28%, rgba(255,255,255,.45) 52%, rgba(255,255,255,.04) 76%); */
}
#home .hero-slider-img .bg { background-position: center; }
#home .half-hero-wrap {
    left: 7%; top: 50%; width: 43%; padding: 0;
    transform: translateY(-58%); box-sizing: border-box;
}
#home .half-hero-wrap h1 {
    font-size: clamp(36px, 4vw, 62px); line-height: 1.08;
    letter-spacing: -.02em; padding-bottom: 18px;
}
#home .half-hero-wrap h1:before { left: 0; top: -25px; }
#home .half-hero-wrap h1 span { color: var(--accent); }
#home .half-hero-wrap h4 { font-size: 14px; line-height: 1.65; max-width: 100%; }
#home .half-hero-wrap .btn { margin-top: 18px; padding: 16px 32px; }
#home .rotate_text { display: none; }
#home .option-panel { width: 180px; height: 72px; background: rgba(255,255,255,.9); }
#home .hero-slider_control-wrap { right: 32px; bottom: 22px; }
#home .hsc {
    background: #fff; border: 1px solid var(--line); color: var(--ink);
    border-radius: 50%; width: 44px; height: 44px; line-height: 44px;
}
#home .hsc:hover { background: var(--surface-alt); color: var(--accent); }
#home .hero-slider-wrap_pagination {
    top: auto; bottom: 32px; left: 52%; right: auto; width: auto;
    display: flex; gap: 16px; padding: 14px 18px; background: rgba(255,255,255,.92); border-radius: 24px;
}
#home .hero-slider-wrap_pagination .swiper-pagination-bullet {
    width: 10px; height: 10px; margin: 0;
}
#home .hero-slider-wrap_pagination .swiper-pagination-bullet:before { background: #9ba6b2; }
#home .hero-slider-wrap_pagination .swiper-pagination-bullet-active:before { background: var(--accent); }
#home .hero-slider-wrap_pagination .swiper-pagination-bullet:after { border-color: var(--accent); }
#home .scroll-down-wrap { left: 24%; bottom: 25px; }
#home .mousey { border-color: var(--muted); }
@media (max-width: 900px) {
    #home .scroll-down-wrap { display: none; }
    #home .half-hero-wrap h1 { font-size: 38px; }
}
/* The horizontal mobile header owns the brand; keep section links unobstructed. */
@media (max-width: 1064px) {
    .main-header .logo-holder { display: flex; align-items: center; top: 7px; left: 12px; width: 76px; height: 56px; }
    .main-header .logo-holder img.nastik-small-logo { display: block; width: 76px; height: 56px; object-fit: contain; }
    .page-scroll-nav .page-scroll-nav-logo { display: none; }
    .page-scroll-nav nav { padding-left: 0; overflow-x: auto; }
    .page-scroll-nav nav > ul { margin: 0; justify-content: center; min-width: max-content; }
}
@media (max-width: 600px) {
    .page-scroll-nav-logo { left: 12px; width: 52px; height: 40px; }
    .page-scroll-nav nav { padding-left: 0; }
    .logo-holder img.nastik-small-logo { width: 72px; height: 56px; }
    #home { min-height: 680px; }
    #home .half-hero-wrap { left: 7%; top: 17%; width: 86%; transform: none; }
    #home .half-hero-wrap h1 { font-size: 36px; line-height: 1.06; padding-bottom: 10px; }
    #home .half-hero-wrap h4 { font-size: 13px; line-height: 1.5; }
    #home .half-hero-wrap .btn { margin-top: 10px; padding: 13px 26px; }
    #home .hero-slider-img { inset: 0; height: 100%; }
    #home .hero-slider-img .overlay { background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82) 42%, rgba(255,255,255,.16) 74%); }
    #home .hero-slider-wrap_pagination { left: 8%; bottom: 28px; }
    #home .hero-slider_control-wrap { right: 7%; bottom: 20px; }
}
/* Remove the dark navigation end-cap and improve section-copy contrast. */
.page-scroll-nav:before { background: rgba(255,255,255,.08); }
body .section-title p { color: var(--muted); letter-spacing: .02em; line-height: 1.8; }
@media (max-width: 768px) {
    .page-scroll-nav:before { display: none; }
    .page-scroll-nav { overflow-x: auto; }
    .page-scroll-nav ul { display: flex; white-space: nowrap; margin: 0 16px; }
    .page-scroll-nav li { float: none; flex: 0 0 auto; margin-right: 16px; }
}
/* The supplied Play Architecture logo is white on a transparent background. */
#clients .clients-grid__item img[src$="play-architecture.svg"] { filter: brightness(.2); }
#services .content-front, #services .content-back { border: 1px solid var(--line); }
.testi-avatar-initial {
    display: flex; align-items: center; justify-content: center;
    width: 68px; height: 68px; border: 6px solid #fff; border-radius: 50%;
    background: var(--surface-alt); color: var(--ink); font-size: 26px; font-weight: 700;
}
body #twitts-container p.tweet {
    background: #fff; border: 1px solid var(--line);
    box-shadow: 0 3px 12px rgba(32, 43, 56, .06);
}

/* Keep service photography clear; restrict the white surface to the caption. */
#services .content-front .overlay { background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.12)); opacity: 1; }
#services .content-front .inner {
    background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.65);
    padding: 22px 14px; margin: 0 14px; width: auto;
    box-shadow: 0 4px 20px rgba(32,43,56,.08);
}
#services .content-front .bg { filter: none; }
#services .content-front .cf-inner:before, #services .content-front .cf-inner:after { display: none; }
#services .content-front .cf-inner {
    height: 440px; padding: 0 20px; display: flex;
    align-items: center; justify-content: center; box-sizing: border-box;
}
#services .content-front .inner { flex: 1; }
@media (max-width: 600px) {
    #services .content-front .cf-inner { height: 360px; padding: 0 12px; }
}

/* Keep carousel pagination geometrically circular at every viewport. */
#home .hero-slider-wrap_pagination .swiper-pagination-bullet {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    min-width: 12px;
    padding: 0;
    border-radius: 50%;
    box-sizing: border-box;
}
#home .hero-slider-wrap_pagination .swiper-pagination-bullet:before {
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
#home .hero-slider-wrap_pagination .swiper-pagination-bullet:after {
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    margin: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
}
#home .hero-slider-wrap_pagination .swiper-pagination-bullet-active:after {
    transform: translate(-50%, -50%) scale(1);
}

/* Animated split-story About section inspired by light editorial studio layouts. */
#about .about-story-grid {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 24px;
}
#about .about-story-grid:before {
    content: "OUR PURPOSE";
    position: absolute;
    right: 0;
    top: -34px;
    color: #dce2e8;
    font-family: 'Teko', sans-serif;
    font-size: 13px;
    letter-spacing: .24em;
}
#about .about-visual-reveal,
#about .about-copy-reveal {
    display: flow-root;
    opacity: 0;
    transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
#about .about-visual-reveal {
    clip-path: inset(0 100% 0 0);
    transform: translateX(-28px);
    transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1), clip-path 1s cubic-bezier(.2,.7,.2,1);
}
#about .about-copy-reveal { transform: translateX(32px); transition-delay: .12s; }
#about .about-story-grid.is-visible .about-visual-reveal,
#about .about-story-grid.is-visible .about-copy-reveal {
    opacity: 1;
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
}
#about .main-about-text-area li {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .45s ease, transform .45s ease;
}
#about .about-story-grid.is-visible .main-about-text-area li { opacity: 1; transform: translateY(0); }
#about .about-story-grid.is-visible .main-about-text-area li:nth-child(1) { transition-delay: .35s; }
#about .about-story-grid.is-visible .main-about-text-area li:nth-child(2) { transition-delay: .45s; }
#about .about-story-grid.is-visible .main-about-text-area li:nth-child(3) { transition-delay: .55s; }
#about .about-story-grid.is-visible .main-about-text-area li:nth-child(4) { transition-delay: .65s; }

/* Seventh service card. */
#services .ai-service-row { margin-top: 30px; }
#services .ai-service-row .content-front .bg { background-position: center 42%; }

/* Portfolio cards keep numbering and descriptions outside the photography. */
.portfolio-card { cursor: pointer; }
#portfolio .portfolio-open { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; margin-top: auto; box-sizing: border-box; background: transparent; color: var(--ink); border: 0; border-top: 1px solid var(--line); padding: 16px 0 0; font: inherit; font-weight: 700; line-height: 1.2; text-align: left; cursor: pointer; }
#portfolio .portfolio-open span { color: var(--accent); font-size: 22px; }
#portfolio .portfolio-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.case-dialog { position: fixed; inset: 0; margin: auto; width: min(760px, calc(100% - 32px)); max-height: 88vh; padding: 48px; box-sizing: border-box; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-align: left; overflow-y: auto; opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .22s ease, transform .22s ease; box-shadow: 0 24px 90px #202b3840; }
.case-dialog.is-open { opacity: 1; transform: translateY(0) scale(1); }
.case-dialog::backdrop { background: rgba(20,30,42,.65); }
.case-close { position: sticky; top: 0; float: right; z-index: 1; width: 44px; height: 44px; margin: -24px -24px 8px 12px; border: 1px solid var(--line); background: white; color: var(--ink); font-size: 30px; cursor: pointer; }
.case-dialog .case-eyebrow { color: var(--accent); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.case-dialog h2 { font-family: 'Teko', sans-serif; font-size: 42px; line-height: 1.1; margin-bottom: 28px; }
.case-dialog section { float: none; width: auto; padding: 20px 0; border-top: 1px solid var(--line); background: transparent; }
.case-dialog h3 { font-size: 18px; margin-bottom: 10px; }
.case-dialog p { font-size: 15px; line-height: 1.75; padding: 0; }
.case-dialog ul { padding-left: 20px; list-style: disc; color: var(--muted); line-height: 1.9; }
.case-links { display: flex; gap: 20px; flex-wrap: wrap; }
.case-links a { color: var(--ink); border-bottom: 1px solid var(--accent); }
.case-dialog button:focus-visible, .case-dialog a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media(max-width:600px) { .case-dialog { padding: 28px; } .case-close { margin: -12px -12px 8px 10px; } .case-dialog h2 { font-size: 34px; } }
@media(prefers-reduced-motion:reduce) { .case-dialog { transition: none; transform: none; } }
#portfolio .portfolio-grid { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; text-align: left; align-items: start; }
#portfolio .portfolio-card { display: flex; flex-direction: column; min-width: 0; height: 100%; background: var(--surface); border: 1px solid var(--line); }
#portfolio .portfolio-card__image { display: block; width: 100%; height: 220px; object-fit: cover; }
#portfolio .portfolio-card__body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 26px; }
#portfolio .portfolio-card__meta { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; color: var(--muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
#portfolio .portfolio-card__meta > span:first-child { color: var(--accent); font-size: 22px; font-family: 'Teko', sans-serif; line-height: 1; }
#portfolio .portfolio-card h4 { font-size: 23px; line-height: 1.2; color: var(--ink); margin: 0 0 14px; }
#portfolio .portfolio-card p { margin: 0 0 20px; padding: 0; line-height: 1.65; }
#portfolio .portfolio-details { border-top: 1px solid var(--line); }
#portfolio .portfolio-details summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding-top: 10px; color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer; list-style: none; }
#portfolio .portfolio-details summary::-webkit-details-marker { display: none; }
#portfolio .portfolio-details summary span { color: var(--accent); font-size: 24px; }
#portfolio .portfolio-details[open] summary span { transform: rotate(45deg); }
#portfolio .portfolio-details__content { padding-top: 18px; }
#portfolio .portfolio-details h5 { font-size: 16px; color: var(--ink); margin-bottom: 12px; }
#portfolio .portfolio-details ul { list-style: disc; padding-left: 18px; margin-bottom: 20px; color: var(--muted); }
#portfolio .portfolio-details li { padding: 5px 0; font-size: 13px; }
#portfolio .portfolio-project-links { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 22px; }
#portfolio .portfolio-project-links a { color: var(--ink); border-bottom: 1px solid var(--accent); font-size: 12px; }
#portfolio summary:focus-visible, #portfolio a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 700px) {
    #portfolio .portfolio-grid { grid-template-columns: 1fr; gap: 22px; }
    #portfolio .portfolio-card__body { padding: 22px; }
    #portfolio .portfolio-card__image { height: 210px; }
}

/* Split-studio team composition: editorial intro plus compact profile grid. */
#team .team-showcase {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: stretch;
    width: 100%;
    margin-left: 0;
    margin-top: 36px;
    text-align: left;
}
#team .team-showcase__intro {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    align-items: center;
    padding: 34px 38px;
    background: #edf0f3;
    border-left: 5px solid var(--accent);
    overflow: hidden;
}
#team .team-showcase__intro:after {
    content: "04";
    position: absolute;
    right: -4px;
    bottom: -38px;
    color: #fff;
    font-family: 'Teko', sans-serif;
    font-size: 180px;
    font-weight: 700;
    line-height: 1;
}
#team .team-showcase__eyebrow {
    display: block;
    grid-column: 1;
    margin-bottom: 18px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}
#team .team-showcase__intro h4 {
    position: relative;
    z-index: 1;
    grid-column: 1;
    grid-row: 2 / 4;
    margin: 0;
    color: var(--ink);
    font-family: 'Teko', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: .95;
    text-transform: uppercase;
}
#team .team-showcase__intro p { position: relative; z-index: 1; grid-column: 2; grid-row: 1 / 3; max-width: 360px; margin: 0; padding: 0 0 20px; }
#team .team-showcase__cta {
    position: relative;
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    z-index: 2;
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}
#team .team-showcase__cta i { margin-left: 10px; color: var(--accent); }
#team .team-showcase__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}
#team .team-member-card {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 24px;
    min-height: 240px;
    padding: 30px;
    background: #fff;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
}
#team .team-member-card:hover {
    z-index: 2;
    background: #fafbfc;
    box-shadow: 0 18px 42px rgba(32,43,56,.10);
    transform: translateY(-5px);
}
#team .team-member-card__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-family: 'Teko', sans-serif;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: .04em;
    width: 72px;
    height: 72px;
    padding: 10px;
    background: var(--surface-soft);
    box-sizing: border-box;
}
#team .team-member-card__number {
    position: absolute;
    top: 14px;
    right: 16px;
    color: #c9d0d7;
    font-family: 'Teko', sans-serif;
    font-size: 20px;
}
#team .team-member-card__content h3 { margin: 2px 0 0; color: var(--ink); font-size: 18px; }
#team .team-member-card__content { display: flex; flex-direction: column; align-items: flex-start; }
#team .team-member-card__content h4 {
    margin: 5px 0 14px;
    color: var(--accent);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
}
#team .team-member-card__content p { margin: 0; padding: 0 0 14px; line-height: 1.55; }
#team .team-member-card__content > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--accent);
    border: 1px solid var(--line);
    margin-top: auto;
}
#team .team-showcase__cta:focus-visible,
#team .team-member-card__content > a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }

/* Footer project updates are content cards, not outbound links. */
/* Keep the growing updates list in document flow, even on short desktop screens. */
.main-footer.fixed-footer {
    position: relative;
    float: left;
    clear: both;
    width: 100%;
    left: 0;
    right: auto;
    bottom: auto;
}
.height-emulator { display: none; }
#twitts-container .project-updates { display: grid; gap: 12px; }
#twitts-container .project-updates li { margin: 0; padding: 0 0 12px; }
body #twitts-container .project-updates p.tweet { margin: 0 0 8px; padding: 16px 18px; }
#twitts-container .project-updates .tweet strong { display: block; margin-bottom: 5px; color: var(--ink); }
#twitts-container .project-updates .timePosted time { color: var(--muted); font-size: 11px; }
#twitts-container .updates-viewport { overflow: hidden; width: 100%; }
#twitts-container .updates-track { display: flex; align-items: stretch; transition: transform .45s ease; }
#twitts-container .updates-page { flex: 0 0 100%; min-width: 0; align-content: start; box-sizing: border-box; }
#twitts-container .project-updates li { float: none; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; padding: 18px; box-sizing: border-box; background: white; border: 1px solid var(--line); }
#twitts-container .project-updates li:before { display: none; }
#twitts-container .update-logo { display: block; width: 64px; height: 64px; padding: 6px; box-sizing: border-box; object-fit: contain; background: white; grid-row: 1 / 3; }
#twitts-container .update-monogram { display: flex; align-items: center; justify-content: center; background: var(--surface-soft); color: var(--ink); font-size: 24px; font-weight: 700; }
body #twitts-container .project-updates p.tweet { float: none; width: auto; padding: 0; background: transparent; box-shadow: none; border: 0; border-radius: 0; }
#twitts-container .project-updates .timePosted { margin: 0; padding: 0; grid-column: 2; }
#twitts-container .updates-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
#twitts-container .updates-controls button { width: 40px; height: 40px; border: 1px solid var(--line); background: white; color: var(--accent); font-size: 22px; cursor: pointer; }
#twitts-container .updates-controls button:hover { background: var(--surface-alt); }
#twitts-container .updates-controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#twitts-container .updates-status { font-size: 11px; color: var(--muted); letter-spacing: .05em; }
@media (max-width: 600px) {
    #twitts-container .project-updates li { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 14px; }
    #twitts-container .update-logo { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) { #twitts-container .updates-track { transition: none; } }

@media (max-width: 991px) {
    #team .team-showcase { width: 100%; margin-left: 0; }
    #about .about-story-grid { display: block; }
}
@media (max-width: 600px) {
    #team .team-showcase__grid { grid-template-columns: 1fr; }
    #team .team-member-card { grid-template-columns: 72px minmax(0, 1fr); gap: 18px; padding: 22px; }
    #team .team-member-card__avatar { width: 72px; height: 72px; }
    #team .team-showcase__intro { display: block; padding: 30px 26px; }
    #team .team-showcase__intro h4 { margin-bottom: 22px; font-size: 42px; }
    #team .team-showcase__cta { display: inline-block; }
    #services .ai-service-row { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    #team .team-member-card,
    #team .team-member-card:hover { transition: none; transform: none; }
    #about .about-visual-reveal,
    #about .about-copy-reveal,
    #about .main-about-text-area li {
        opacity: 1;
        transform: none;
        clip-path: none;
        transition: none;
    }
}

.swiper-services,
.swiper-services * {
    color: #fff !important;
}