/* FIND uses two locally hosted font families, both under SIL OFL 1.1. */
@font-face{font-family:Carlito;src:url('/assets/fonts/Carlito-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Carlito;src:url('/assets/fonts/Carlito-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Carlito;src:url('/assets/fonts/Carlito-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Carlito;src:url('/assets/fonts/Carlito-BoldItalic.ttf') format('truetype');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:Barlow;src:url('/assets/fonts/Barlow-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
:root{
  --font-body:Carlito,sans-serif;--font-heading:Barlow,sans-serif;
  --brand:#3c3e7c;--paper:#08080a;--ink:#f1f0ee;
  --find-shimmer:linear-gradient(105deg,#c3c8f5 0%,#819dd3 28%,#e2a7a0 51%,#d7bde8 65%,#8da7e0 82%,#c3c8f5 100%);
  --shimmer-time:2.8s;--header-height:108px;--menu-font-size:16px;
}
body{font-family:var(--font-body);background:var(--paper);font-size:18px}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading)!important;font-weight:600!important;font-style:normal;text-transform:uppercase;letter-spacing:.005em;line-height:1.08;overflow-wrap:break-word}
h1 em,h2 em,h3 em{font-family:inherit;font-style:normal;font-weight:inherit}
.section-heading h2,.split-copy h2,.network-grid h2,.cta h2{font-size:clamp(2.1rem,3.65vw,4rem);letter-spacing:0;line-height:1.1}
.page-intro h1{font-size:clamp(2.5rem,5.1vw,5.5rem);letter-spacing:-.01em;line-height:1.06}
.project-card h3,.service-row h3{font-size:clamp(1.3rem,2.05vw,2rem);letter-spacing:.005em;line-height:1.13}
.about-team .team-card h3{font-size:clamp(1.8rem,3vw,3rem);letter-spacing:0}
.btn,.pill,.text-link,.eyebrow,.form-field,.form-text-button,.team-role{font-family:var(--font-body);font-weight:700}
.form-field input,.form-field textarea,.form-field select{font-family:var(--font-body);font-weight:400}

/* Header and page copy share one container, including on wide screens. */
.topbar{height:var(--header-height);background:transparent;border:0;box-shadow:none}
.topbar:before{
  inset:0 0 -72px;pointer-events:none;
  background:linear-gradient(180deg,#08080a 0%,#08080a calc(var(--header-height) + 4px),#08080ac2 calc(var(--header-height) + 27px),transparent 100%);
}
.header-inner{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--space);display:grid;grid-template-columns:minmax(118px,1fr) clamp(550px,49vw,720px) minmax(max-content,1fr);align-items:center;gap:clamp(24px,2vw,34px)}
.brand{position:relative;isolation:isolate;justify-self:start;margin-left:0}
.brand img{width:118px;height:auto;position:relative;z-index:1;transition:opacity .3s ease}
.brand:after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background-image:var(--find-shimmer);background-size:260% 100%;opacity:0;transition:opacity .3s ease;mask:url('/assets/find-logo.png') center/contain no-repeat;-webkit-mask:url('/assets/find-logo.png') center/contain no-repeat}
.brand:is(:hover,:focus-visible) img{opacity:0}
.brand:is(:hover,:focus-visible):after{opacity:1;animation:find-shimmer var(--shimmer-time) ease-in-out infinite}
.nav-shell{width:100%;min-width:0;position:relative;justify-self:center}
.nav-capsule,.nav-capsule:hover{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;min-height:58px;padding:0;border:0!important;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;animation:none}
/* display:contents lets all five menu items use identical inter-item spacing. */
.desktop-nav{display:contents;font-family:var(--font-body);font-size:var(--menu-font-size);font-weight:700;letter-spacing:.01em}
.desktop-nav a{display:flex!important;align-items:center;justify-content:center;padding:10px 0;line-height:1.35;white-space:nowrap}
.desktop-nav a,.menu-toggle .menu-word,.menu-links>a,.compact-main-links a{text-transform:uppercase}
.desktop-nav a:after,.menu-links>a:after,.compact-main-links a:after{content:none!important;display:none!important}
.menu-toggle,.menu-toggle[aria-expanded=true]{width:auto;height:42px;padding:0;gap:9px;flex-shrink:0;border:0!important;border-radius:0;background:transparent;box-shadow:none}
.menu-toggle .menu-word{display:block!important;font-family:var(--font-body);font-size:var(--menu-font-size);font-weight:700;letter-spacing:.01em}
.desktop-nav a:is(:hover,:focus-visible),.menu-links>a:is(:hover,:focus-visible),.compact-main-links a:is(:hover,:focus-visible),.menu-toggle:is(:hover,:focus-visible) .menu-word{
  color:#c3c8f5;background-image:var(--find-shimmer);background-size:260% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:find-shimmer var(--shimmer-time) ease-in-out infinite;
}
@keyframes find-shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.header-actions{display:flex;align-items:center;justify-self:end;gap:12px;margin:0;flex-wrap:nowrap;max-width:none}
.header-actions .language{order:0;display:flex;align-items:center;gap:9px;padding-right:8px;font-family:var(--font-body);font-size:var(--menu-font-size);font-weight:700;letter-spacing:.01em;white-space:nowrap}
.language a,.language a[aria-current=true]{text-decoration:none}
.header-actions .language a{color:#bdbbc6}
.header-actions .language a[aria-current=true]{color:#fff}
.header-actions .social-link{order:1;width:34px;height:34px;transform:none!important;box-shadow:none!important}
.header-actions .social-link svg{transition:transform .25s ease}
.header-actions .social-link:is(:hover,:focus-visible) svg{transform:scale(.88)}
.header-actions .start-project{order:2;font-size:14px;min-height:42px;gap:10px;padding:8px 9px 8px 16px}
.header-actions .start-project .arrow{width:26px;height:26px}

/* Black, frameless MORE: six links in three aligned columns. */
.mobile-menu.open{display:block;position:absolute;top:calc(100% + 12px);left:0;right:0;width:100%;padding:30px 28px 24px;border:0!important;border-radius:0 0 18px 18px;background:#08080a;box-shadow:0 22px 65px #0008;backdrop-filter:none;animation:none;max-height:calc(100dvh - var(--header-height) - 35px);overflow:auto}
.mobile-menu .menu-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:27px 24px;align-items:start}
.mobile-menu .menu-links>a,.mobile-menu .compact-main-links a{border:0;padding:0;font-family:var(--font-body);font-size:17px;font-weight:700;letter-spacing:.01em;line-height:1.4}
.menu-foot{border:0;margin-top:34px;padding-top:16px;gap:20px;align-items:center}
.menu-service-tags{display:flex;flex-wrap:wrap;gap:6px 12px;min-width:0}
.menu-service-tags span,.menu-foot .language{font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.04em;line-height:1.5}
.menu-service-tags span{color:#a9a7b3;text-transform:uppercase;white-space:normal;text-align:left}
.menu-foot .language{display:none;flex-shrink:0;gap:8px;padding:0;font-size:var(--menu-font-size);letter-spacing:.01em}
.compact-main-links{display:none}

/* One colour palette and motion, with legible dark lettering on the light fill. */
.btn,.header-actions .start-project{transform:none!important;transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.btn .arrow{transform:none!important}
.btn:is(:hover,:focus-visible),.btn.light:is(:hover,:focus-visible),.btn.ghost:is(:hover,:focus-visible),.header-actions .start-project:is(:hover,:focus-visible){transform:none!important;background-color:var(--brand);background-image:var(--find-shimmer);background-size:260% 100%;color:#08080a;border-color:transparent;animation:find-shimmer var(--shimmer-time) ease-in-out infinite}
.btn:is(:hover,:focus-visible) .arrow,.header-actions .start-project:is(:hover,:focus-visible) .arrow{transform:none!important;background:#08080a;color:#fff}

/* Supplied exploded stand: slightly inset, fixed across all routes. */
.site-backdrop{background:#08080a;--backdrop-blur:8px;--backdrop-opacity:.3}
.home-page .site-backdrop{--backdrop-blur:0px;--backdrop-opacity:.9}
.process-backdrop{inset:0;background:#08080a}
.process-backdrop:before{background:linear-gradient(90deg,transparent 48%,#08080a08 58%,#08080a66 74%,#08080a66);z-index:2}
.process-visual{left:7%;top:50%;width:86%;min-width:0;max-width:none;height:auto;object-fit:contain;object-position:left center;opacity:var(--backdrop-opacity);filter:grayscale(.2) contrast(1.03) blur(var(--backdrop-blur));transform:translateY(-50%);animation:find-exhibit-drift 28s ease-in-out infinite;transform-origin:32% 50%;will-change:filter,opacity;mask-image:linear-gradient(180deg,transparent 0%,#000 5%,#000 95%,transparent 100%)}
.process-vignette{background:linear-gradient(90deg,transparent 0%,transparent 90%,#08080a 100%);box-shadow:none}
@keyframes find-exhibit-drift{0%,100%{transform:translateY(-50%) scale(1)}50%{transform:translateY(calc(-50% - 4px)) scale(1.012)}}
.hero-content{min-height:calc(100svh - var(--header-height) - 155px);justify-content:center;padding-block:64px 72px}
.hero-position{display:block;padding-inline:0}
.hero-composition{width:34%;max-width:440px;display:flex;flex-direction:column;align-items:flex-start;gap:22px;margin-left:auto}
.hero-composition>.eyebrow{margin:0;font-family:var(--font-body);font-size:12px;font-weight:700;line-height:1.6;letter-spacing:.065em;color:#b1b1bd}
.hero-composition .statement{font-family:var(--font-heading);font-size:clamp(2.5rem,3.6vw,4.25rem);line-height:1.02;letter-spacing:0;max-width:100%;text-shadow:none}
.hero-composition .statement span{display:block;white-space:normal}
.hero-story{max-width:100%;padding:0}
.hero-story p{font-family:var(--font-body);font-size:18px;line-height:1.5;color:#c4c4cd;margin:0 0 24px}
.hero-story .hero-link{font-size:16px;min-height:46px;padding:10px 14px 10px 18px;gap:14px}
.scroll-cue{margin-top:26px;font-size:13px}

/* Transparent, seamless marquee. The mask fades the artwork, never the page. */
.hero-clients{padding-block:18px 36px}
.hero-clients,.hero-clients .clients,.clients,.logo-marquee{background:transparent}
.hero-clients .clients{display:flex;flex-direction:column;align-items:stretch;gap:22px;padding:0 var(--space);border:0}
.hero-clients .clients h2{font-family:var(--font-body);font-size:14px;line-height:1.4;letter-spacing:.07em;color:#c0c0c9;max-width:none;flex:none;margin:0}
.hero-clients .clients .logo-marquee{flex:none;width:100%;min-width:0}
.logo-marquee{isolation:isolate;overflow:hidden;padding-block:10px;mask-image:linear-gradient(90deg,transparent,#000 clamp(38px,6vw,90px),#000 calc(100% - clamp(38px,6vw,90px)),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 clamp(38px,6vw,90px),#000 calc(100% - clamp(38px,6vw,90px)),transparent)}
.logo-marquee:before,.logo-marquee:after{content:none}
.logo-track{--logo-gap:clamp(46px,5.5vw,100px);--logo-width:190px;display:flex;align-items:center;width:max-content;gap:0!important;padding:0;animation:logo-scroll 64s linear infinite;will-change:transform}
.logo-group{display:flex;align-items:center;width:max-content;gap:var(--logo-gap);padding-right:var(--logo-gap);flex:none}
.clients .client-logo-wrap,.hero-clients .clients .client-logo-wrap{display:grid;place-items:center;width:var(--logo-width);flex:0 0 var(--logo-width);height:76px}
.clients .client-logo-wrap.peek-logo-wrap,.clients .client-logo-wrap.baranska-logo-wrap{--logo-width:230px}
.client-logo{width:100%;height:64px;max-width:100%;max-height:64px;min-width:0;min-height:0;object-fit:contain;filter:grayscale(1) brightness(0) invert(1);opacity:.85;transition:opacity .25s ease;transform:none}
.client-logo-wrap:hover .client-logo{opacity:1;transform:none}
.logo-filter-defs{position:absolute;pointer-events:none}
.client-logo.remote-logo,.client-logo.baranska-logo{filter:url('#client-logo-ink');mix-blend-mode:normal}
.client-logo.ada-logo{width:170px;height:64px}
.client-logo.baustein-logo{width:166px;height:64px}
.client-logo.letterfonds-logo,.client-logo.pgm-logo{width:168px;height:54px;transform:none!important}
.peek-logo-crop{position:relative;display:block;width:100%;height:100%;overflow:hidden}
.client-logo.peek-logo{position:absolute;max-width:none;max-height:none;width:258.6751%;height:auto;left:-79.1798%;top:50%;transform:translateY(-33.6842%)!important}
.client-logo.baranska-logo{width:230px;height:64px}
.client-wordmark{font-family:var(--font-body)}
.client-wordmark.nap-logo{font-size:31px;font-weight:700;letter-spacing:.08em;line-height:1}
.client-wordmark.lowercase{font-size:26px}

/* Level selected work, with its introduction below the heading. */
.selected-heading{grid-template-columns:1fr;gap:18px;align-items:start}
.selected-heading p{max-width:760px}
.selected-work .project-grid{align-items:start}
.selected-work .project-card:nth-child(2){padding-top:0}
.project-card[href]{cursor:pointer}
.project-card[href] .round-arrow{transform:none;transition:background-color .25s ease,border-color .25s ease,color .25s ease}
.project-card[href]:is(:hover,:focus-visible) .round-arrow{background-image:var(--find-shimmer);background-size:260% 100%;border-color:transparent;color:#08080a;transform:none;animation:find-shimmer var(--shimmer-time) ease-in-out infinite}
.home-page .service-section{background:transparent}
.section-heading{grid-template-columns:1fr;gap:20px;align-items:start}
.section-heading p{max-width:760px;margin:0}
.service-section .section-heading p{max-width:660px;margin:0}
.project-card img,.wide-image,.split-photo,.case-gallery img,.social-card figure img{filter:grayscale(.26) contrast(1.03)}
.project-card:hover img,.social-card:hover figure img{filter:grayscale(.2) contrast(1.04)}
.gallery-photo{cursor:default}
.pm-management-image{width:100%;height:auto;aspect-ratio:2.35;object-fit:cover;object-position:center 56%}
.pm-retail-photo{width:100%;height:auto;aspect-ratio:1.18;object-fit:cover;object-position:center 55%}
.pm-teaser .split{align-items:start}

/* Category and FIND's own scope are separate facts. */
.facts{grid-template-columns:repeat(3,minmax(0,1fr))}
.facts .fact-3,.facts .fact-4,.facts .fact-5{padding-top:20px;border-top:1px solid #45434f}
.facts .fact-4{grid-column:span 2}
.scope-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.scope-list li{font-family:var(--font-body);font-size:14px;line-height:1.3;color:#dfdde5;border:1px solid #5a5667;border-radius:999px;padding:7px 11px;background:transparent}
.scope-pending{font-size:16px;color:#aaa8b3}
.team-scale-number{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.team-scale-number small{font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:.12em;line-height:1}
.team-scale-number strong{font-family:var(--font-heading);font-size:clamp(86px,10vw,170px);font-weight:600;line-height:.72;color:#9895bf}

@media(min-width:1700px){:root{--menu-font-size:18px}.brand img{width:130px}}
@media(max-width:1199px){
  :root{--header-height:98px}
  .header-inner{grid-template-columns:minmax(0,1fr) auto auto;gap:22px}
  .desktop-nav{display:none}
  .nav-shell{width:88px;position:static;justify-self:center}
  .nav-capsule{justify-content:center;min-height:46px}
  .menu-toggle{height:40px}
  .mobile-menu.open{position:fixed;top:calc(var(--header-height) - 5px);left:var(--space);right:var(--space);width:auto;padding:30px;border-radius:0 0 18px 18px}
  .compact-main-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;padding-bottom:25px;margin-bottom:28px;border-bottom:1px solid #34333d}
  /* A language picker is visible in exactly one location at each breakpoint. */
  .header-actions .language{display:none}
  .menu-foot .language{display:flex;align-items:center}
  .menu-foot .language a{display:grid;place-items:center;min-width:40px;min-height:40px}
  .header-actions .social-link{width:40px;height:40px;flex-shrink:0}
  .hero-composition{width:35%;gap:20px}
  .hero-content{padding-block:56px 64px}
  .hero-composition .statement{font-size:clamp(2rem,3.65vw,2.75rem)}
  .hero-story p{font-size:17px}
  .hero-composition>.eyebrow{font-size:12px;letter-spacing:.035em}
  .logo-track{--logo-width:165px}
}
@media(max-width:880px){
  .header-inner{gap:18px}
  .brand img{width:110px}
  .header-actions{gap:12px}
  .header-actions .start-project{font-size:12px;gap:6px;min-height:38px;padding:7px 8px 7px 12px}
  .header-actions .start-project .arrow{width:24px;height:24px}
  .compact-main-links{grid-template-columns:1fr 1fr}
  .hero-content{padding-top:calc(64vw + 22px);padding-bottom:48px;min-height:0}
  .hero-composition{width:min(560px,100%);max-width:560px;margin-left:0;gap:22px}
  .hero-composition .statement{font-size:clamp(2.5rem,7.8vw,4rem);line-height:1.04;max-width:100%}
  .hero-story{max-width:480px;padding:0}
  .hero-story p{font-size:18px}
  .process-visual{width:134%;left:8%;top:calc(var(--header-height) + 10px);height:auto;transform:none;animation:find-exhibit-mobile 26s ease-in-out infinite;transform-origin:30% 20%}
  .process-backdrop:before,.process-vignette{background:none}
  .hero-clients .clients{gap:24px}
  .hero-clients .clients h2{font-size:13px;letter-spacing:.05em;line-height:1.45}
}
@keyframes find-exhibit-mobile{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.012)}}
@media(max-width:700px){
  :root{--header-height:115px}
  .header-inner{grid-template-columns:minmax(0,1fr) 66px auto;gap:10px;padding:14px var(--space);align-items:center}
  .brand{align-self:center}
  .brand img{width:104px}
  .nav-shell{width:66px;align-self:center}
  .menu-toggle{width:66px;gap:6px}
  .menu-toggle .menu-word{font-size:14px}
  .header-actions{display:grid;width:132px;grid-template-columns:repeat(2,minmax(40px,1fr));grid-template-rows:40px auto;gap:8px 12px;align-items:center;justify-items:center}
  .header-actions .social-link{width:40px;height:40px}
  .header-actions .social-link svg{width:23px;height:23px}
  .header-actions .whatsapp{grid-column:1;grid-row:1}
  .header-actions .instagram{grid-column:2;grid-row:1}
  .header-actions .start-project{grid-column:1/-1;grid-row:2;justify-self:stretch;width:100%;min-width:0}
  .mobile-menu.open{padding:25px;max-height:calc(100dvh - var(--header-height) - 16px)}
  .mobile-menu .menu-links{grid-template-columns:1fr 1fr;gap:24px 20px}
  .mobile-menu .menu-links>a,.mobile-menu .compact-main-links a{font-size:16px}
  .menu-foot{align-items:flex-start;flex-wrap:wrap;gap:18px}
  .menu-service-tags{flex:1 1 100%;gap:5px 10px}
  .logo-track{--logo-width:146px;--logo-gap:42px}
  .clients .client-logo-wrap,.hero-clients .clients .client-logo-wrap{height:64px}
  .clients .client-logo-wrap.peek-logo-wrap,.clients .client-logo-wrap.baranska-logo-wrap{--logo-width:190px}
  .client-logo{height:54px}
  .client-logo.ada-logo{width:140px;height:54px}
  .client-logo.baustein-logo{width:142px;height:54px}
  .client-logo.letterfonds-logo,.client-logo.pgm-logo{width:132px;height:48px}
  .client-logo.baranska-logo{width:190px;height:54px}
  .client-wordmark.nap-logo{font-size:25px;letter-spacing:.06em}
  .client-wordmark.lowercase{font-size:22px}
  .facts{grid-template-columns:1fr 1fr}
  .facts .fact-4{grid-column:1/-1}
  .facts .fact-3,.facts .fact-4,.facts .fact-5{padding-top:16px}
  .team-scale-number strong{font-size:110px}
  .pm-management-image{aspect-ratio:1.5}
}

/* Project galleries follow the photographs instead of forcing a fixed rhythm. */
.case-gallery{
  display:block!important;
  columns:2 420px;
  column-gap:26px;
}
.case-gallery .gallery-photo,
.case-gallery .gallery-photo:nth-child(3n){
  display:block;
  grid-column:auto!important;
  break-inside:avoid;
  margin:0 0 26px;
}
.case-gallery img,
.case-gallery .gallery-photo:nth-child(3n) img{
  width:100%;
  height:auto!important;
  max-height:none!important;
  object-fit:contain;
  background:#131315;
}
@media(max-width:700px){
  .case-gallery{columns:1;column-gap:0}
  .case-gallery .gallery-photo{margin-bottom:20px}
}
@media(max-width:480px){
  .hero-composition>.eyebrow{font-size:12px}
  .hero-content{padding-bottom:40px}
  .hero-story .hero-link{font-size:15px}
  .hero-clients{padding-bottom:30px}
  .hero-clients .clients h2{font-size:12px}
  .section-heading h2,.split-copy h2,.network-grid h2,.cta h2{font-size:2.05rem}
  .page-intro h1{font-size:2.35rem}
  .mobile-menu.open{padding:24px}
  .compact-main-links{column-gap:18px}
}
@media(max-width:380px){
  .header-inner{grid-template-columns:minmax(0,1fr) 54px auto;gap:7px}
  .brand img{width:78px}
  .nav-shell,.menu-toggle{width:54px}
  .menu-toggle .menu-word{font-size:12px}
  .header-actions .start-project{font-size:11px;padding-inline:10px 7px;gap:5px}
  .header-actions .start-project .arrow{width:21px;height:21px}
  .mobile-menu .menu-links{grid-template-columns:1fr;gap:19px}
}
@media(prefers-reduced-motion:reduce){
  .process-visual,.logo-track,.brand:after,.btn,.header-actions .start-project,.desktop-nav a,.menu-links>a,.compact-main-links a,.menu-toggle .menu-word{animation:none!important;transition:none!important}
  .project-card .round-arrow{animation:none!important;transition:none!important}
  .header-actions .social-link svg{transition:none}
  .logo-marquee{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
  .logo-group[aria-hidden=true]{display:none}
}
