/* Centered brand, bright surface and a single entrance sequence. */
.header,.portfolio-page .header,.header.scrolled{background:#faf7f2;border:1px solid #e8e0dc;box-shadow:0 12px 32px #49312618;color:var(--ink);height:88px;inset:20px 4% auto;padding:0 30px;border-radius:18px;position:fixed}
.header .logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;animation:brand-unfold .95s cubic-bezier(.16,1,.3,1) both}
.header .logo img,.portfolio-page .logo img{width:75px;height:62px;object-fit:contain}
.header .header-signature{display:none}
.header nav,.portfolio-page .header nav{display:grid;grid-template-columns:1fr 1fr 115px 1.5fr 1fr;align-items:center;gap:24px;width:100%;font-size:14px}
.header nav a{justify-self:center;white-space:nowrap;animation:nav-unfold .55s cubic-bezier(.16,1,.3,1) .55s both;min-height:44px;display:flex;align-items:center}
.header nav a:nth-child(3){grid-column:4;animation-delay:.65s}
.header nav a:nth-child(4){grid-column:5;animation-delay:.72s}
.portfolio-page .header nav{grid-template-columns:1fr 1fr 1fr 115px 1.5fr 1.5fr}
.portfolio-page .header nav a:nth-child(5){grid-column:6;animation-delay:.78s}
.header nav a:last-child{background:var(--red);color:var(--cream);padding:12px 23px;border-radius:30px}
.header nav a:last-child:hover{background:#910c15;color:white}
@keyframes brand-unfold{from{opacity:0;transform:translate(calc(-50% + 180px),-50%)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes nav-unfold{from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(14px)}to{opacity:1;clip-path:inset(0);transform:translateX(0)}}
@media(max-width:1000px) and (min-width:761px){.header,.portfolio-page .header{padding:0 18px}.header nav,.portfolio-page .header nav{gap:10px;font-size:12px}.portfolio-page .header nav{grid-template-columns:1fr 1fr 1fr 90px 1.5fr 1.5fr}.header nav a:last-child,.portfolio-page .header nav a:last-child{padding:11px 15px}}
@media(max-width:760px){.header,.portfolio-page .header{height:74px;inset:12px 4% auto;padding:0 17px;border-radius:15px}.header .logo img,.portfolio-page .logo img{width:66px;height:55px}.header .menu-toggle{margin-left:auto;position:relative;z-index:3;min-height:44px;color:var(--ink);animation:nav-unfold .5s ease .6s both}.header nav,.portfolio-page .header nav{display:none;position:absolute;top:73px;left:-1px;right:-1px;width:auto;padding:18px;background:#faf7f2;border:1px solid #e8e0dc;border-radius:0 0 15px 15px;box-shadow:0 18px 24px #49312612;gap:6px}.header.menu-open nav,.portfolio-page .header.menu-open nav{display:flex;flex-direction:column;align-items:stretch}.header nav a,.portfolio-page .header nav a{animation:none;justify-content:center;padding:12px;min-height:48px}.header nav a:last-child{margin-top:8px}@keyframes brand-unfold{from{opacity:0;transform:translate(calc(-50% + 95px),-50%)}to{opacity:1;transform:translate(-50%,-50%)}}}
@media(prefers-reduced-motion:reduce){.header .logo,.header nav a,.header .menu-toggle{animation:none}}

.portfolio-page .header nav a:nth-child(3){grid-column:3}
.portfolio-page .header nav a:nth-child(4){grid-column:5}
.header nav a{animation:none}
.header nav a,.portfolio-page .header nav a{position:relative}
.header nav a::after{content:'';position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.16,1,.3,1);pointer-events:none}
.header nav a:hover::after,.header nav a:focus-visible::after{transform:scaleX(1)}
.header,.portfolio-page .header,.header.scrolled{width:50%;height:64px;left:25%;right:auto;top:30px;padding:0 20px;border-radius:999px}
.header .logo{width:90px;height:90px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px #49312620}
.header .logo img,.portfolio-page .logo img{width:64px;height:55px;filter:brightness(0) invert(1)}
.header nav,.portfolio-page .header nav{gap:8px;font-size:12px}
.header nav{grid-template-columns:1fr 1fr 100px 1fr 1fr}
.portfolio-page .header nav{grid-template-columns:1fr 1fr 1fr 100px 1.5fr 1.5fr}
.header nav a:last-child,.portfolio-page .header nav a:last-child{padding:10px 14px;min-height:40px}
.header.bar-expanding,.portfolio-page .header.bar-expanding,.header.bar-expanding.scrolled{background:transparent;border-color:transparent;box-shadow:none;isolation:isolate}
.header.bar-expanding::before{content:'';position:absolute;top:-1px;bottom:-1px;left:50%;width:100%;transform:translateX(-50%);background:#faf7f2;border:1px solid #e8e0dc;border-radius:999px;box-shadow:0 12px 32px #49312618;z-index:-1;animation:bar-unfold 1.35s cubic-bezier(.16,1,.3,1) .35s both;pointer-events:none}
@keyframes bar-unfold{from{width:90px}to{width:100%}}
@media(prefers-reduced-motion:reduce){.header.bar-expanding::before{animation:none}}

/* Shared rounded finish. */
.header,.portfolio-page .header,.header.scrolled{border-radius:44px}
.primary-cta,.contact-button,.plan-cta,.service-action,.filters button,.service-tabs button{border-radius:999px}
.portfolio-page.experience-ready .service,.case-track,.case-track .case-study,.plan{border-radius:30px}
.portfolio-page.experience-ready .service>img{border-radius:22px}
.case-track .case-study>img{border-radius:0}
.comparison-wrap{border-radius:24px}
.portfolio-page .contact{border-radius:44px 44px 0 0}
@media(max-width:760px){.header,.portfolio-page .header{border-radius:37px}.header.menu-open,.portfolio-page .header.menu-open{border-radius:30px 30px 0 0}.header nav,.portfolio-page .header nav{border-radius:0 0 30px 30px}.portfolio-page.experience-ready .service,.case-track,.case-track .case-study,.plan{border-radius:24px}.portfolio-page.experience-ready .service>img{border-radius:18px}.portfolio-page .contact{border-radius:30px 30px 0 0}}
@media(max-width:1199px){.header,.portfolio-page .header,.header.scrolled{width:50%;left:25%;right:auto;height:60px;padding:0 20px;top:25px;border-radius:999px}.header .menu-toggle{display:flex;margin-left:auto;position:relative;z-index:3;color:var(--ink);min-height:44px;align-items:center;gap:12px}.header .logo{width:80px;height:80px}.header .logo img,.portfolio-page .logo img{width:57px;height:49px}.header nav,.portfolio-page .header nav{display:none;position:absolute;top:59px;left:0;right:0;width:auto;padding:18px;background:#faf7f2;border:1px solid #e8e0dc;border-radius:0 0 26px 26px;box-shadow:0 18px 24px #49312612;gap:6px}.header.menu-open,.portfolio-page .header.menu-open{border-radius:30px 30px 0 0}.header.menu-open nav,.portfolio-page .header.menu-open nav{display:flex;flex-direction:column;align-items:stretch}.header nav a,.portfolio-page .header nav a{animation:none;justify-content:center;padding:12px;min-height:48px}.header nav a:last-child{margin-top:8px}}@media(max-width:760px){.header,.portfolio-page .header,.header.scrolled{width:92%;left:4%;top:20px;height:58px}.header .logo{width:76px;height:76px}.header nav,.portfolio-page .header nav{top:57px}}
.portfolio-page .film-top{padding-top:24px}
.header,.portfolio-page .header,.header.scrolled,.header.bar-expanding::before{background:#f6f2ed}.portfolio-page .header nav,.header nav{grid-template-columns:1fr 1fr 100px 1.6fr 1fr;font-size:11px;gap:8px}.portfolio-page .header nav a:nth-child(3),.header nav a:nth-child(3){grid-column:4}.portfolio-page .header nav a:nth-child(4),.header nav a:nth-child(4){grid-column:5}.header.bar-expanding,.portfolio-page .header.bar-expanding,.header.bar-expanding.scrolled{background:transparent}@media(max-width:1199px){.header nav,.portfolio-page .header nav{background:#f6f2ed}}
.header nav a:last-child,.portfolio-page .header nav a:last-child,.header nav a:last-child:hover,.portfolio-page .header nav a:last-child:hover{background:transparent;color:var(--ink);padding:0;min-height:44px;border-radius:0}.header nav a:hover,.portfolio-page .header nav a:hover{color:var(--red)}@media(max-width:1199px){.header nav a::after{left:25%;right:25%;bottom:5px}.header nav a:last-child,.portfolio-page .header nav a:last-child{padding:12px;min-height:48px}}@media(prefers-reduced-motion:reduce){.header nav a::after{transition:none}}
.header,.portfolio-page .header,.header.scrolled{width:37.5%;left:31.25%;padding:0 16px}.header nav,.portfolio-page .header nav{font-size:14px;grid-template-columns:1fr 1fr 100px 1.3fr .7fr;gap:8px}@media(max-width:1599px){.header .menu-toggle{display:flex;margin-left:auto;position:relative;z-index:3;color:var(--ink);min-height:44px;align-items:center;gap:12px;font-size:16px}.header nav,.portfolio-page .header nav{display:none;position:absolute;top:63px;left:0;right:0;width:auto;padding:18px;background:#f6f2ed;border:1px solid #e8e0dc;border-radius:0 0 26px 26px;box-shadow:0 18px 24px #49312612;gap:6px;font-size:16px}.header.menu-open,.portfolio-page .header.menu-open{border-radius:30px 30px 0 0}.header.menu-open nav,.portfolio-page .header.menu-open nav{display:flex;flex-direction:column;align-items:stretch}.header nav a,.portfolio-page .header nav a{justify-content:center;padding:12px;min-height:48px}.header nav a:last-child,.portfolio-page .header nav a:last-child{padding:12px;min-height:48px}.header nav a::after{left:25%;right:25%;bottom:5px}}@media(max-width:1199px){.header nav,.portfolio-page .header nav{top:59px}}@media(max-width:760px){.header,.portfolio-page .header,.header.scrolled{width:92%;left:4%}.header nav,.portfolio-page .header nav{top:57px}}
.header .logo,.portfolio-page .header .logo{animation:none;transform:translate(-50%,-50%)}
.portfolio-page .film-top{display:flex;width:fit-content;max-width:100%;align-self:center;align-items:center;gap:24px;padding:13px 24px;margin-top:24px;background:#f6f2ed;border:1px solid #e4dcd7;border-radius:999px;box-shadow:0 6px 18px #49312612;color:var(--ink)}.portfolio-page .film-top>span{white-space:nowrap}@media(max-width:760px){.portfolio-page .film-top{gap:12px;padding:12px 16px;margin-top:12px;font-size:9px}.portfolio-page .film-top>span:last-child{max-width:none;text-align:left}}@media(max-width:360px){.portfolio-page .film-top{gap:8px;padding:11px 12px;font-size:8px}}
.portfolio-page .film-top{background:transparent;border-color:transparent;box-shadow:none;isolation:isolate}.portfolio-page .film-top::before{content:"";position:absolute;top:-1px;bottom:-1px;left:50%;width:100%;transform:translateX(-50%);background:#f6f2ed;border:1px solid #e4dcd7;border-radius:999px;box-shadow:0 6px 18px #49312612;z-index:-1;pointer-events:none;animation:signature-expand 1.15s cubic-bezier(.16,1,.3,1) .35s both}.portfolio-page .film-top>span{animation:signature-left 1s cubic-bezier(.16,1,.3,1) .55s both}.portfolio-page .film-top>span:last-child{animation-name:signature-right}@keyframes signature-expand{from{width:44px;opacity:0}to{width:100%;opacity:1}}@keyframes signature-left{from{opacity:0;transform:translateX(45px);clip-path:inset(0 0 0 100%)}to{opacity:1;transform:translateX(0);clip-path:inset(0)}}@keyframes signature-right{from{opacity:0;transform:translateX(-45px);clip-path:inset(0 100% 0 0)}to{opacity:1;transform:translateX(0);clip-path:inset(0)}}@media(prefers-reduced-motion:reduce){.portfolio-page .film-top::before,.portfolio-page .film-top>span{animation:none}}
.header .menu-toggle{background:transparent;border:0;font-family:var(--body);cursor:pointer}
.header .bar-signature{position:absolute;inset:-4px 0;pointer-events:none;z-index:1}.bar-signature svg{width:100%;height:100%;overflow:visible}.bar-stroke{fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0;animation:brand-line 1.5s cubic-bezier(.16,1,.3,1) .25s both}.header .logo,.portfolio-page .header .logo{animation:brand-turn 1.25s cubic-bezier(.16,1,.3,1) both}.header nav,.header .menu-toggle{position:relative;z-index:2}@keyframes brand-turn{from{transform:translate(-50%,-50%) rotate(-180deg)}to{transform:translate(-50%,-50%) rotate(0)}}@keyframes brand-line{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}@media(max-width:1599px){.header .bar-signature{inset:-3px 0}.bar-stroke{stroke-width:2}}@media(prefers-reduced-motion:reduce){.header .logo,.portfolio-page .header .logo,.bar-stroke{animation:none}}
.header .bar-signature{inset:0;border-radius:inherit;overflow:hidden;color:var(--red)}.bar-signature svg{overflow:hidden}.bar-signature mask .bar-stroke{stroke:white;stroke-width:10;vector-effect:none}@media(max-width:1599px){.header .bar-signature{inset:0}.bar-signature mask .bar-stroke{stroke-width:10}}

/* Circle and white brand emerge together from the fixed center. */
.header .logo,.portfolio-page .header .logo{animation-duration:.35s;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
.header.bar-expanding::before{animation-duration:.4s;animation-delay:.05s}
.bar-stroke{animation-duration:.4s;animation-delay:.05s}
@keyframes brand-turn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.12)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

.bar-mobile-lines{display:none}
@media(max-width:760px){
  .header,.portfolio-page .header,.header.scrolled{height:44px;top:16px;padding:0 8px;width:94%;left:3%;border-radius:999px}
  .header .logo,.portfolio-page .header .logo{width:72px;height:72px}
  .header .logo img,.portfolio-page .header .logo img{width:51px;height:44px}
  .header .menu-toggle{display:none}
  .header nav,.portfolio-page .header nav,.header.menu-open nav,.portfolio-page .header.menu-open nav{display:grid;position:static;grid-template-columns:1fr 1fr 60px 1.35fr 1fr;gap:3px;width:100%;height:44px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:11px}
  .header nav a,.portfolio-page .header nav a,.header nav a:last-child,.portfolio-page .header nav a:last-child{padding:0;min-width:0;min-height:44px;margin:0;text-align:center;white-space:normal;line-height:1.15;justify-self:stretch;justify-content:center}
  .header nav a::after{left:10%;right:10%;bottom:5px}
  .header .bar-desktop-lines{display:none}
  .header .bar-mobile-lines{display:block}
  .header.menu-open,.portfolio-page .header.menu-open{border-radius:999px}
  .header #navigation{display:none;position:static}
  .header #navigation a{font-size:11px;letter-spacing:0;background:#f6f2ed;justify-self:center;padding:0 3px;min-width:44px;border-radius:8px}
}
@media(max-width:350px){.header nav,.portfolio-page .header nav{font-size:10px;gap:2px;grid-template-columns:1fr 1fr 56px 1.3fr 1fr}.header #navigation a{font-size:10px}}